仿网易客户端实现顶部导航效果(ViewPager+Fragment)

为了实现这个效果我竟然用了两天的时间,我真是呵呵了,废话不多说直接开始整理。

这里的Indicator是重写的LinearLayout用来弄导航栏那个蓝条的样式以及位置的(这部分代码是在别人那考过来的),代码如下:package vikicc.titletab;import android.content.Context;import android.content.res.TypedArray;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.Paint;import android.graphics.Rect;import android.util.AttributeSet;import android.widget.LinearLayout;/** * Created by LiuWeiJie on 2015/7/20 0020. * Email:1031066280@qq.com */public class Indicator extends LinearLayout {private Paint mPaint; // 画指示符的paintprivate int mTop; // 指示符的topprivate int mLeft; // 指示符的leftprivate int mWidth; // 指示符的widthprivate int mHeight = 5; // 指示符的高度,固定了private int mColor; // 指示符的颜色private int mChildCount; // 子item的个数,用于计算指示符的宽度public Indicator(Context context, AttributeSet attrs) {super(context, attrs);setBackgroundColor(Color.TRANSPARENT); // 必须设置背景,否则onDraw不执行// 获取自定义属性 指示符的颜色TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.Indicator, 0, 0);mColor = ta.getColor(0, 0X0000FF);ta.recycle();// 初始化paintmPaint = new Paint();mPaint.setColor(Color.parseColor("#2EBADE"));mPaint.setAntiAlias(true);}@Overrideprotected void onFinishInflate() {super.onFinishInflate();mChildCount = getChildCount(); // 获取子item的个数}@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {super.onMeasure(widthMeasureSpec, heightMeasureSpec);mTop = getMeasuredHeight(); // 测量的高度即指示符的顶部位置int width = getMeasuredWidth(); // 获取测量的总宽度int height = mTop + mHeight; // 重新定义一下测量的高度mWidth = width / mChildCount; // 指示符的宽度为总宽度/item的个数setMeasuredDimension(width, height);}/*** 指示符滚动** @param position 现在的位置* @param offset 偏移量 0 ~ 1*/public void scroll(int position, float offset) {mLeft = (int) ((position + offset) * mWidth);invalidate();}@Overrideprotected void onDraw(Canvas canvas) {// 圈出一个矩形Rect rect = new Rect(mLeft, mTop, mLeft + mWidth, mTop + mHeight);canvas.drawRect(rect, mPaint); // 绘制该矩形super.onDraw(canvas);}}然后再就是主页面MainActivity这里面重写了一个FragmentPagerAdapter用来控制Fragment切换的问题。

MainActivity:package vikicc.titletab;import android.os.Bundle;import android.support.v4.app.Fragment;import android.support.v4.app.FragmentActivity;import android.support.v4.app.FragmentManager;import android.support.v4.app.FragmentPagerAdapter;import android.support.v4.view.ViewPager;import android.util.Log;import android.view.View;import android.widget.TextView;import java.util.ArrayList;import java.util.List;public class MainActivity extends FragmentActivity implements View.OnClickListener {private Indicator mIndicator;private TextView mTabOne;private TextView mTabTwo;private ViewPager mContainer;List<Fragment> fragmentList = new ArrayList<Fragment>();private ArrayList<TextView> mViews = new ArrayList<TextView>();@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);mIndicator = (Indicator) findViewById(R.id.indicator);mContainer = (ViewPager) findViewById(R.id.container);mTabOne = (TextView) findViewById(R.id.tab_one);mTabTwo = (TextView) findViewById(R.id.tab_two);mTabOne.setOnClickListener(this);mTabTwo.setOnClickListener(this);fragmentList.add(new FirstFragment());fragmentList.add(new SecondFragment());mContainer.setAdapter(new MyViewAdapter(this.getSupportFragmentManager()));mContainer.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {@Overridepublic void onPageSelected(int position) {}@Overridepublic void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {mIndicator.scroll(position, positionOffset);//控制滚动条位置}@Overridepublic void onPageScrollStateChanged(int position) {}});}public class MyViewAdapter extends FragmentPagerAdapter {public MyViewAdapter(FragmentManager fm) {super(fm);}@Overridepublic Fragment getItem(int i) {return fragmentList.get(i);}@Overridepublic int getCount() {return fragmentList.size();}}@Overridepublic void onClick(View v) {switch (v.getId()) {case R.id.tab_one:mContainer.setCurrentItem(0);break;case R.id.tab_two:mContainer.setCurrentItem(1);break;}}}activity_main.xml的代码:

<LinearLayout xmlns:android=""xmlns:indicator=""xmlns:tools=""android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"tools:context=".MainActivity"><vikicc.titletab.Indicatorandroid:id="@+id/indicator"android:layout_width="match_parent"android:layout_height="wrap_content"android:paddingBottom="10dip"android:paddingTop="10dip"android:weightSum="2"indicator:color="#FFFF0000"><LinearLayoutandroid:id="@+id/short_message_ll_one"android:layout_width="0dip"android:layout_height="wrap_content"android:layout_weight="1"android:gravity="center_vertical|center_horizontal"><TextViewandroid:id="@+id/tab_one"android:layout_width="wrap_content"android:layout_height="wrap_content"android:gravity="center_horizontal"android:text="TAB1" /></LinearLayout><LinearLayoutandroid:id="@+id/short_message_ll_two"android:layout_width="0dip"android:layout_height="wrap_content"android:layout_weight="1"android:gravity="center_vertical|center_horizontal"><TextViewandroid:id="@+id/tab_two"android:layout_width="wrap_content"android:layout_height="wrap_content"android:gravity="center_horizontal"android:text="TAB2" /></LinearLayout></vikicc.titletab.Indicator><android.support.v4.view.ViewPagerandroid:id="@+id/container"android:layout_width="match_parent"android:layout_height="match_parent"></android.support.v4.view.ViewPager></LinearLayout>然后其他的Fragment就按照你自己需要的建一下然后在MainActivity里面添加一下就ok了。

版权声明:本文为博主原创文章,,未经博主允许不得转载。

我只愿,在你的理想和希望里能为你增加一点鼓励,

仿网易客户端实现顶部导航效果(ViewPager+Fragment)

相关文章:

你感兴趣的文章:

标签云: