关闭

Fragment+ViewPager实习顶部导航栏效果

1561人阅读 评论(0) 收藏 举报
分类:

闲话不多说,先上效果图

可以看到我们要实现的效果有两个:

1.滑动ViewPager的时候,顶部的黄色横条跟着一起滑动。当滑动完毕的时候,ViewPager对应的标题的颜色发生改变。

2.当点击一个标题的时候,ViewPager显示对应的Fragment,然后颜色也跟着改变,横条位置也跟着改变。

横条跟着ViewPager滑动的原理是动态地设置它的leftMargin。这个设置是在ViewPager的OnPagerChangedListener的onPageScrolled方法中实现的。关键代码如下

RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) tabLine.getLayoutParams();
params.leftMargin = (int) ((positionOffset+ position )* lineWidth);
tabLine.setLayoutParams(params);
改变颜色其实是先全部回复初始的颜色,然后再根据相应的位置改变颜色。当点击标题的时候,通过ViewPager的setCurrentItem(position)来改变ViewPager。注意的是position是从0开始的。
我们来看看具体的实现代码
/**
     * 初始化FragmentPagerAdapter
     */
    private void initAdapter() {
        fragmentList = new ArrayList<Fragment>();

        fragment1 = new PagerFragment1();
        fragment2 = new PagerFragment2();
        fragment3 = new PagerFragment3();

        fragmentList.add(fragment1);
        fragmentList.add(fragment2);
        fragmentList.add(fragment3);

        mPagerAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) {
            @Override
            public Fragment getItem(int position) {


                return fragmentList.get(position);
            }



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

    private void initView() {
        tab1Text = (TextView) findViewById(R.id.tab1);
        tab2Text = (TextView) findViewById(R.id.tab2);
        tab3Text = (TextView) findViewById(R.id.tab3);

        onClickListener = new TabOnClickListener();

        tab1Text.setOnClickListener(onClickListener);
        tab2Text.setOnClickListener(onClickListener);
        tab3Text.setOnClickListener(onClickListener);

        tabLine = findViewById(R.id.tab_line);


        //初始化ViewPager,并且设置ViewPager的监听器
        mViewPager = (ViewPager) findViewById(R.id.pager);
        mViewPager.setAdapter(mPagerAdapter);
        mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                //因为这里只有三个Tab,所有横条的宽带应该是屏幕的1/3
                int lineWidth = getLineWidth(3);

                //横条随着ViewPager一起滑动
                RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) tabLine.getLayoutParams();
                params.leftMargin = (int) ((positionOffset+ position )* lineWidth);
                tabLine.setLayoutParams(params);
            }

            @Override
            public void onPageSelected(int position) {
                //当ViewPager滑动完毕,改变标题颜色
                changeTabColor(position);
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
    }





    /**
     *  根据标题的个数获取横条应该设置的宽度
     * @param tabCount
     * @return
     */
    public int getLineWidth(int tabCount){
        DisplayMetrics metric = new DisplayMetrics();
        getWindowManager().getDefaultDisplay().getMetrics(metric);
        int lineWidth = metric.widthPixels/tabCount;
        return lineWidth;
    }


    /**
     *
     * 根据ViewPager的位置改变对应标题的
     * @param position
     */
    private void changeTabColor(int position){
        resetTabColor();

        if(0 == position) {
            tab1Text.setTextColor(Color.parseColor("#ffec00"));
        }

        if(1 == position) {
            tab2Text.setTextColor(Color.parseColor("#ffec00"));
        }

        if(2 == position) {
            tab3Text.setTextColor(Color.parseColor("#ffec00"));
        }
    }


    /**
     * 重置标题的颜色
     */
    private void resetTabColor(){
        tab1Text.setTextColor(Color.parseColor("#ffffff"));
        tab2Text.setTextColor(Color.parseColor("#ffffff"));
        tab3Text.setTextColor(Color.parseColor("#ffffff"));
    }


    /**
     * 标题点击事件的监听接口实现类
     */
    private class TabOnClickListener implements View.OnClickListener{

        @Override
        public void onClick(View v) {

            resetTabColor();
            switch (v.getId()){
                case R.id.tab1:
                    //设置当前的页面
                    mViewPager.setCurrentItem(0);
                    //改变相应的Tab的字体颜色
                    tab1Text.setTextColor(Color.parseColor("#ffec00"));
                    break;

                case R.id.tab2:
                    //设置当前的页面
                    mViewPager.setCurrentItem(1);
                    //改变相应的Tab的字体颜色
                    tab2Text.setTextColor(Color.parseColor("#ffec00"));
                    break;

                case R.id.tab3:
                    //设置当前的页面
                    mViewPager.setCurrentItem(2);
                    tab3Text.setTextColor(Color.parseColor("#ffec00"));
                    break;
            }
        }
    }

布局代码:
<?xml version="1.0" encoding="utf-8"?>
<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"
    tools:context="com.sanisy.study.MainActivity"
    android:orientation="vertical">



    <RelativeLayout
        android:layout_width="match_parent"
        android:background="@color/colorPrimary"
        android:layout_height="64dp">

        <LinearLayout
            android:id="@+id/tab_layout"
            android:layout_width="match_parent"
            android:layout_height="62dp"
            android:orientation="horizontal">

            <TextView
                android:id="@+id/tab1"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="62dp"
                android:gravity="center"
                android:textColor="#ffec00"
                android:text="页面1"/>

            <TextView
                android:id="@+id/tab2"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="62dp"
                android:textColor="#ffffff"
                android:gravity="center"
                android:text="页面2"/>

            <TextView
                android:id="@+id/tab3"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="62dp"
                android:textColor="#ffffff"
                android:gravity="center"
                android:text="页面3"/>

        </LinearLayout>

        <View
            android:id="@+id/tab_line"
            android:layout_width="122dp"
            android:layout_height="5dp"
            android:layout_below="@id/tab_layout"
            android:background="#ffec00"/>

    </RelativeLayout>


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

</LinearLayout>




0
0
查看评论

fragment+Radiobutton实现顶部导航切换

看过网上很多很多的Fragment实现的导航栏,感觉都过于繁琐,所有写一篇关于自己的心得,这个应该是目前网上最简单的了。废话不多说,直接上项目吧 第一步:创建XXFragment.java和fragment_XX.xml文件: public class AddFragment extends F...
  • u013651405
  • u013651405
  • 2015-06-02 17:07
  • 1092

教你如何使用ViewPager+Fragment一步步打造顶部导航界面滑动效果

最近在整理以前的知识点,重新碰到了以前项目中的一个滑动分页的效果,就打算写这么一篇文章分享一下ViewPager的经典使用 在许多应用中,我们常常用到这么一个效果: 可以看到,由于现在的应用数据经常需要涉及到多个模块,所以常常需要使用滑动标签在多个页面之间跳转,实现这样的效果...
  • IT_ZJYANG
  • IT_ZJYANG
  • 2016-06-04 15:01
  • 9669

使用Fragment实现顶部菜单栏

之前使用ViewPager+ActivityGroup实现过顶部菜单栏切换,参照http://blog.csdn.net/tan313/article/details/4174501,今天使用Fragment实现顶部菜单栏。ViewPager类似一个View容器,他可以将View的数组添加进去。Fr...
  • tan313
  • tan313
  • 2015-03-15 14:43
  • 1100

Fragment与ViewPagerDemo,实现顶部导航栏效果

  • 2016-05-07 15:30
  • 1.43MB
  • 下载

Android应用经典主界面框架之一:仿QQ (使用Fragment, 附源码)

最近反复研究日常经典必用的几个android app,从主界面带来的交互方式入手
  • yanzi1225627
  • yanzi1225627
  • 2014-06-14 23:43
  • 99587

TabLayout+ViewPager+Fragment实现顶部或底部导航栏

以前看慕课网的教程,写过一个微信Tab选项卡切换的例子,使用的是ViewPager+Fragment来实现的,说实话,当时为了实现一些效果,还是写了蛮多的代码,但是,今天介绍的TabLayout+ViewPager+Fragment实现导航栏可以使用很少的代码实现很棒的效果。
  • bingjianIT
  • bingjianIT
  • 2016-10-12 19:01
  • 2742

xamarin Tablayout+Viewpager+Fragment顶部导航栏

最近几天不忙,所以把项目中的顶部导航栏的实现归集一下。android中使用TabLayout+ViewPager+Fragment制作顶部导航非常常见,代码实现也比较简单。当然我这个导航栏是基于xamarin android的。
  • kebi007
  • kebi007
  • 2017-04-22 19:02
  • 3112

Android ViewPager和Fragment实现顶部导航界面滑动效果

在项目中,我们常常需要实现界面滑动切换的效果。例如,微信界面的左右滑动切换效果。那这种效果是怎么实现的?今天我就带大家简单了解ViewPager,并通过实例来实现该效果。
  • a123demi
  • a123demi
  • 2014-09-22 22:04
  • 21032

自定义顶端顶部导航栏(可配合ViewPager使用)

最近做项目,需要有类似网易新闻顶端的导航栏的ui组件,但是就是有切换动画的那种,于是就自己动手写了一个,看了我的文章,如果有什么问题,欢迎大家交流哦。 实现原理:通过OnPageChangeListener的onPageScrolled()事件获取当前页面的偏移量,从而改变导航栏指示器的位置 请...
  • woshizhushiqiu
  • woshizhushiqiu
  • 2016-10-13 20:47
  • 603

Fragment实例精讲——底部导航栏的实现(1)

本文转自:http://www.runoob.com/w3cnote/android-tutorial-fragment-demo1.html 本节引言: 在上一节中我们对Fragment进行了一个初步的了解,学习了概念,生命周期,Fragment管理与Fragment事务,以及动态与静态加载F...
  • songlinjiang
  • songlinjiang
  • 2016-03-28 03:58
  • 1305
    个人资料
    • 访问:39831次
    • 积分:511
    • 等级:
    • 排名:千里之外
    • 原创:21篇
    • 转载:3篇
    • 译文:0篇
    • 评论:4条
    最新评论