文档章节

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

i
 i_love_lu
发布于 2015/12/18 13:25
字数 1079
阅读 154
收藏 1

新建项目,让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实现的顶部导航就实现了。




效果类似于下:

© 著作权归作者所有

下一篇: TextView使用
i
粉丝 1
博文 8
码字总数 4816
作品 0
石家庄
私信 提问
控件解析与实战

通用适配器,支持 ListView、GridView 支持多视图 解决 CompoundButton 滑动错乱 数据排序 数据过滤 RecyclerView 详细解释 RecyclerView 是一个高度的解耦,异常的灵活的 View,通过设置它提...

掘金官方
2017/12/07
0
0
Android viewpager+fragment+viewpager+fragment 的问题

用了viewpager+fragment 嵌套viewpager+fragment, 第一个viewpager自定义了禁止滑动的功能,通过点击底部的导航栏进行切换,然后第二个viewpager可以滑动,但是当第二个viewpager滑动到最后...

飘渺的火
2017/12/11
139
0
TabLayout实现顶部导航(一)

前言 顶部导航栏,是我们在开发中比较常见的一种显示布局,它的实现可以有多种方式,那么今天我们就来讲讲 TabLayout 对它的实现。 此篇文章参考以下链接 TabLayout轻松实现仿今日头条顶部t...

奔跑的佩恩
01/07
0
0
tornado总结4-html模板使用2

参考地址 http://www.tornadoweb.org/en/stable/guide/templates.html?highlight=render#ui-modules 目的说明 osc的所有页面顶部都有这个导航条, 我们可以使用tornado的UI modules来实现导航...

能东棍
2016/05/08
369
0
Bootstrap 导航栏

导航栏是一个很好的功能,是 Bootstrap 网站的一个突出特点。导航栏是响应式元组件就,作为应用程序或网站的导航标题。导航栏在移动设备的视图中是折叠的,随着可用视口宽度的增加,导航栏也...

wybo521
2016/01/27
84
0

没有更多内容

加载失败,请刷新页面

加载更多

jquery--DOM操作基础

本文转载于:专业的前端网站➭jquery--DOM操作基础 元素的访问 元素属性操作 获取:attr(name);$("#my").attr("src"); 设置:attr(name,value);$("#myImg").attr("src","images/1.jpg"); ......

前端老手
5分钟前
0
0
Django的ChoiceField和MultipleChoiceField错误提示,选择一个有效的选项

在表单验证时提示错误:选择一个有效的选项 例如有这样一个表单: class ProductForm(Form): category = fields.MultipleChoiceField( widget=widgets.SelectMultiple(), ...

编程老陆
24分钟前
1
0
Vue核心概念及特性 (一)

Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。 > 特点: 易用,灵活,高效,渐进式框架。 > 可以随意组合需要用到的模块 vue + components + vue-router + vuex + v...

前端优选
26分钟前
1
0
Kylin 精确去重在用户行为分析中的妙用

作者:史少锋,Apache Kylin committer & PMC,2019/10/11 在上次文章《如何在 1 秒内做到大数据精准去重》中,我们介绍了 Apache Kylin 为什么要支持大数据集上的精确去重,以及基于 Bitmap...

ApacheKylin
今天
6
0
学习记录(二) es6基本语法(rest参数,模板化,axios模块,拦截器)

日常学习记录 模块化:把一个大文件分成多个小文件,按照一定规范进行拼接 es5写法: 导出:module.exports = 数据 导入:require("路径") /路径未添加后缀名时 //默认添加.js //把路径作为文件名...

Pole丶逐
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部