仿网易客户端实现顶部导航效果（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; // 画指示符的paint

    private int mTop; // 指示符的top
    private int mLeft; // 指示符的left
    private int mWidth; // 指示符的width
    private 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();

        // 初始化paint
        mPaint = new Paint();
        mPaint.setColor(Color.parseColor("#2EBADE"));
        mPaint.setAntiAlias(true);
    }

    @Override
    protected void onFinishInflate() {
        super.onFinishInflate();
        mChildCount = getChildCount();  // 获取子item的个数
    }

    @Override
    protected 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();
    }

    @Override
    protected 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>();

    @Override
    protected 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() {
            @Override
            public void onPageSelected(int position) {

            }

            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                mIndicator.scroll(position, positionOffset);//控制滚动条位置
            }

            @Override
            public void onPageScrollStateChanged(int position) {

            }
        });
    }


    public class MyViewAdapter extends FragmentPagerAdapter {

        public MyViewAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public Fragment getItem(int i) {
            return fragmentList.get(i);
        }

        @Override
        public int getCount() {
            return fragmentList.size();
        }
    }


    @Override
    public 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="http://schemas.android.com/apk/res/android"
    xmlns:indicator="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <vikicc.titletab.Indicator
        android: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">

        <LinearLayout
            android: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">

            <TextView
                android:id="@+id/tab_one"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center_horizontal"
                android:text="TAB1" />
        </LinearLayout>

        <LinearLayout
            android: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">

            <TextView
                android: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.ViewPager
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </android.support.v4.view.ViewPager>
</LinearLayout>

然后其他的Fragment就按照你自己需要的建一下然后在MainActivity里面添加一下就ok了。