使用ViewPager+Fragment实现顶部导航栏

最新推荐文章于 2022-11-14 15:43:00 发布

weixin_34392435

最新推荐文章于 2022-11-14 15:43:00 发布

阅读量150

点赞数

文章标签：移动开发 python

原文链接：https://my.oschina.net/fightingmylife/blog/547254

版权

2019独角兽企业重金招聘Python工程师标准>>>

新建项目，让MainActivity继承自FragmentActivity，因为我们要用Fragment来显示页面，修改activity_main.xml，使用TextView显示标题，ImageView用于显示横线，当页面改变时候，它将滑动到对应的位置，并加入一个ViewPager，项目中要加入android-support-v4.jar的支持

<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:orientation="vertical" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#FFF2F6F7"
        android:orientation="vertical" >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="48dp"
            android:orientation="horizontal" >

            <TextView
                android:id="@+id/tv1"
                style="@style/textStyle"
                android:text="校园篇"
                android:textColor="#018BD3" />

            <TextView
                android:id="@+id/tv2"
                style="@style/textStyle"
                android:text="即时通信" />

            <TextView
                android:id="@+id/tv3"
                style="@style/textStyle"
                android:text="宽带分析" />

            <TextView
                android:id="@+id/tv4"
                style="@style/textStyle"
                android:text="4G提升" />

            <TextView
                android:id="@+id/tv5"
                style="@style/textStyle"
                android:text="更多"
                android:textColor="#018BD3" />
        </LinearLayout>

        <ImageView
            android:id="@+id/cursor"
            android:layout_width="wrap_content"
            android:layout_height="2dp"
            android:background="#018BD3" />
    </LinearLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/myViewPager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:flipInterval="30" >
    </android.support.v4.view.ViewPager>

</LinearLayout>

在activity_main.xml中引用了一个自定style，用于避免输入过多的重复代码，打开values\styles.xml，加入如下内容：

    <style name="textStyle">
        <item name="android:layout_width">0dp</item>
        <item name="android:layout_height">match_parent</item>
        <item name="android:layout_weight">1</item>
        <item name="android:gravity">center</item>
        <item name="android:textSize">16sp</item>
        <item name="android:textColor">#000000</item>
    </style>

接下来在MainActivity中，先定义出需要的变量

    private ViewPager mViewPager;
    private ArrayList<Fragment> fragments;
    private TextView view1, view2, view3, view4, view5;
    //这个数组是为了方便管理这几个标题对应的TextView
    private TextView[] views = { view1, view2, view3, view4, view5 };
    private int[] viewIds = { R.id.tv1, R.id.tv2, R.id.tv3, R.id.tv4, R.id.tv5 };
    private Fragment fragment1, fragment2, fragment3, fragment4, fragment5;
    private int currentIndex;//当前的页面
    private ImageView mImageView;
    private static int imageWidth;// 设置图片的宽度，让它显示成屏幕的1/5

接下来要初始化ViewPager，这里先为ViewPager自定义一个Adapter，因为每个页面都是一个Fragment，所以Adapter继承自FragmentPagerAdapter

    class MyFragmentAdapter extends FragmentPagerAdapter {
        ArrayList<Fragment> list;

        public MyFragmentAdapter(FragmentManager fm, ArrayList<Fragment> list) {
            super(fm);
            this.list = list;
        }

        @Override
        public Fragment getItem(int arg0) {
            // TODO Auto-generated method stub
            return list.get(arg0);
        }

        @Override
        public int getCount() {
            // TODO Auto-generated method stub
            return list.size();
        }
    }

初始化ViewPager

        mViewPager = (ViewPager) findViewById(R.id.myViewPager);
        fragments = new ArrayList<Fragment>();
        fragment1 = new Fragment_Campus();
        fragment2 = new Fragment_Tongxin();
        fragment3 = new Fragment_Kuandai();
        fragment4 = new Fragment_4G();
        fragment5 = new Fragment_More();

        fragments.add(fragment1);
        fragments.add(fragment2);
        fragments.add(fragment3);
        fragments.add(fragment4);
        fragments.add(fragment5);

        mViewPager.setAdapter(new MyFragmentAdapter(
                getSupportFragmentManager(), fragments));
        mViewPager.setCurrentItem(0);
        mViewPager.setOnPageChangeListener(new myOnPageChangeListener());

为ViewPager设置一个OnPageChangeListener，当页面发生改变时，该方法将被调用

    class myOnPageChangeListener implements OnPageChangeListener {

        @Override
        public void onPageScrolled(int arg0, float arg1, int arg2) {
        }

        @Override
        public void onPageScrollStateChanged(int arg0) {
        }

        @Override
        public void onPageSelected(int arg0) {
            Animation animation = new TranslateAnimation(currentIndex
                    * imageWidth, arg0 * imageWidth, 0, 0);// 平移动画
            currentIndex = arg0;
            animation.setFillAfter(true);// 动画终止时停留在最后一帧，不然会回到没有执行前的状态
            animation.setDuration(300);// 动画持续时间0.3秒
            mImageView.startAnimation(animation);// 是用ImageView来显示动画的

            // 设置标题文字的颜色
            setTitleTextColor(arg0);
        }
    }

这里主要用到了onPageSelected( )函数，在这里我们将根据页面的不同，移动横线，并设置标题文字的颜色

初始化文本框和图片

   //初始化文本框，并为其添加点击的监听事件
    for (int i = 0; i < views.length; i++) {
            views[i] = (TextView) findViewById(viewIds[i]);
            views[i].setOnClickListener(new txtListener(i));
    }
        //初始化ImageView
        mImageView = (ImageView) findViewById(R.id.cursor);
        //获取屏幕的宽度
        DisplayMetrics dm = new DisplayMetrics();
        getWindowManager().getDefaultDisplay().getMetrics(dm);
        int screenW = dm.widthPixels;
        //将图片的宽度设置为屏幕宽度的1/5，因为这里共有5个页面
        imageWidth = screenW / 5;
        LayoutParams params = (LayoutParams) (mImageView.getLayoutParams());
        params.width = imageWidth;
        mImageView.setLayoutParams(params);

其中TextView的监听事件如下：

    class txtListener implements View.OnClickListener {
        private int index = 0;

        public txtListener(int i) {
            index = i;
        }

        @Override
        public void onClick(View v) {
            //将ViewPager的当前页面设置为TextView点击之后的页面
            mViewPager.setCurrentItem(index);
        }
    }

有了TextView和ImageView之后，我们就可以在onPageSelected( )中来改变对应的状态了，其中ImageView是用动画的方式来移动的，

        Animation animation = new TranslateAnimation(currentIndex
                    * imageWidth, arg0 * imageWidth, 0, 0);// 平移动画
        currentIndex = arg0;
        animation.setFillAfter(true);// 动画终止时停留在最后一帧，不然会回到没有执行前的状态
        animation.setDuration(300);// 动画持续时间0.3秒
        mImageView.startAnimation(animation);// 是用ImageView来显示动画的

TextView的设置方法原理如下：

    public void setTitleTextColor(int arg0) {
        
        for (int i = 0; i < views.length; i++) {
            if (arg0 == i) {
                //当前页面，设置为这个颜色
                views[i].setTextColor(0xFF018BD3);
            } else {
                //不是当前页面，设置为黑色
                views[i].setTextColor(0xFF000000);
            }
        }

    }

这样，一个自定义的使用ViewPager + Fragment实现的顶部导航就实现了。

效果类似于下：