viewpager+frament实现简单的tab

来源：互联网发布：java时间轴处理编辑：程序博客网时间：2024/05/17 15:02

近期公司项目改版，改成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);        }    }}

0 0