viewpager+frament实现简单的tab

近期公司项目改版，改成tab选项

简单的用viewpager+frament实现tab选项 ，当然用 indicator也行，现在开源的这么多

先看效果图

布局文件

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#e2e2e2"
    android:orientation="vertical" >

    <RelativeLayout
        android:layout_width="match_parent"
        android:background="#c2c2c2"
        android:layout_height="55dp"
         >
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal" >

            <TextView android:layout_width="0dp"
                android:layout_weight="1"
                android:text="tab1"
                android:gravity="center"
                android:textSize="15sp"
                android:id="@+id/tab1"
                android:textColor="@color/green"
                android:layout_height="match_parent"/>

            <TextView android:layout_width="0dp"
                android:layout_weight="1"
                android:text="tab2"
                android:id="@+id/tab2"
                android:gravity="center"
                android:textSize="15sp"
                android:textColor="@color/gray_white"
                android:layout_height="match_parent"/>

            <TextView android:layout_width="0dp"
                android:layout_weight="1"
                android:text="tab3"
                android:id="@+id/tab3"
                android:gravity="center"
                android:textSize="15sp"
                android:textColor="@color/gray_white"
                android:layout_height="match_parent"/>
        </LinearLayout>

        <View
            android:layout_width="0dp"
            android:layout_height="3dp"
            android:id="@+id/line"
            android:layout_alignParentBottom="true"
            android:background="@color/green" />
    </RelativeLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >
    </android.support.v4.view.ViewPager>

</LinearLayout>

然后是java文件

public class MainActivity extends FragmentActivity implements View.OnClickListener {
    TextView tab1,tab2,tab3;
    ViewPager mViewPager;
    View line;
    List<Fragment> mfragments;
    int line_width;//线的宽度
    MyAdapter adapter;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        tab1 = (TextView) findViewById(R.id.tab1);
        tab2 = (TextView) findViewById(R.id.tab2);
        tab3 = (TextView) findViewById(R.id.tab3);
        line = findViewById(R.id.line);
        mViewPager = (ViewPager) findViewById(R.id.viewPager);
        adapter = new MyAdapter(getSupportFragmentManager());
        //初始化textview 1动画
        ViewPropertyAnimator.animate(tab1).scaleX(1.2f).setDuration(0);
        ViewPropertyAnimator.animate(tab1).scaleY(1.2f).setDuration(0);

        tab1.setOnClickListener(this);
        tab2.setOnClickListener(this);
        tab3.setOnClickListener(this);
        mfragments = new ArrayList<>();
        initFragment();
        line_width = getWindowManager().getDefaultDisplay().getWidth()/mfragments.size();
        line.getLayoutParams().width = line_width;
        line.requestLayout();
        mViewPager.setAdapter(adapter);
        mViewPager.setOnPageChangeListener(new MyPagerChangeListener());
        mViewPager.setCurrentItem(0);
    }

    private void initFragment() {
        mfragments.add(new FragmentOne());
        mfragments.add(new FragmentTwo());
        mfragments.add(new FragmentThree());
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()){
            case R.id.tab1:
                mViewPager.setCurrentItem(0);
                break;
            case R.id.tab2:
                mViewPager.setCurrentItem(1);
                break;
            case R.id.tab3:
                mViewPager.setCurrentItem(2);
                break;
        }
    }
    class  MyAdapter extends FragmentStatePagerAdapter{

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

        @Override
        public Fragment getItem(int position) {
            return mfragments.get(position);
        }

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

    /**
     * 自定义
     */
    class MyPagerChangeListener implements ViewPager.OnPageChangeListener {

        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            float targetX = position * line_width + positionOffsetPixels/mfragments.size();
            //给line横线设置动画
            ViewPropertyAnimator.animate(line).translationX(targetX)
                    .setDuration(0);
        }

        @Override
        public void onPageSelected(int position) {
            changeState(position);
        }

        @Override
        public void onPageScrollStateChanged(int state) {

        }
    }

    /**
     * 根据选择的position改变状态
     * @param position
     */
    private void changeState(int position) {
        if(position == 0){
            tab1.setTextColor(getResources().getColor(R.color.green));
            tab2.setTextColor(getResources().getColor(R.color.gray_white));
            tab3.setTextColor(getResources().getColor(R.color.gray_white));
            ViewPropertyAnimator.animate(tab1).scaleX(1.2f).setDuration(200);
            ViewPropertyAnimator.animate(tab1).scaleY(1.2f).setDuration(200);
            ViewPropertyAnimator.animate(tab2).scaleX(1.0f)
                    .setDuration(200);
            ViewPropertyAnimator.animate(tab2).scaleY(1.0f)
                    .setDuration(200);
            ViewPropertyAnimator.animate(tab3).scaleX(1.0f)
                    .setDuration(200);
            ViewPropertyAnimator.animate(tab3).scaleY(1.0f)
                    .setDuration(200);
        }
        if(position == 1){
            tab2.setTextColor(getResources().getColor(R.color.green));
            tab1.setTextColor(getResources().getColor(R.color.gray_white));
            tab3.setTextColor(getResources().getColor(R.color.gray_white));
            ViewPropertyAnimator.animate(tab2).scaleX(1.2f).setDuration(200);
            ViewPropertyAnimator.animate(tab2).scaleY(1.2f).setDuration(200);
            ViewPropertyAnimator.animate(tab1).scaleX(1.0f)
                    .setDuration(200);
            ViewPropertyAnimator.animate(tab1).scaleY(1.0f)
                    .setDuration(200);
            ViewPropertyAnimator.animate(tab3).scaleX(1.0f)
                    .setDuration(200);
            ViewPropertyAnimator.animate(tab3).scaleY(1.0f)
                    .setDuration(200);
        }
        if(position == 2){
            //点击tab3选项卡
            tab3.setTextColor(getResources().getColor(R.color.green));
            tab1.setTextColor(getResources().getColor(R.color.gray_white));
            tab2.setTextColor(getResources().getColor(R.color.gray_white));
            ViewPropertyAnimator.animate(tab3).scaleX(1.2f).setDuration(200);
            ViewPropertyAnimator.animate(tab3).scaleY(1.2f).setDuration(200);
            ViewPropertyAnimator.animate(tab1).scaleX(1.0f)
                    .setDuration(200);
            ViewPropertyAnimator.animate(tab1).scaleY(1.0f)
                    .setDuration(200);
            ViewPropertyAnimator.animate(tab2).scaleX(1.0f)
                    .setDuration(200);
            ViewPropertyAnimator.animate(tab2).scaleY(1.0f)
                    .setDuration(200);
        }
    }
}