Android进阶之利用Tablayout+ViewPager+Fragment实现神奇的滑动效果

一,概述

之前我们使用ViewPager时,往往喜欢与TabPageIndicator配合使用,达到滑动就可以切换页面的效果.但是,TabPageIndicator毕竟是第三方库,多少还是没有谷歌推出的Tablayout好用.Tablayout出来后,估计之前在GitHub上类似的第三方控件都会沉寂下去了.Tablayout还有一个优点就是,它可以最低可以兼容到Android api2.2,这就很有吸引力了.本文主要是记录Tablayout+ViewPager+Fragment结合使用,搭建一个漂亮的app界面,小型项目可以直接使用!

二,代码实现

布局实现

1)Tablayout是在Android Support Design库,所有先去app/build.gradle添加该库

//使用TabLayout，需要引入design库
  compile 'com.android.support:design:25.1.0'

2)布局

3)关于Tablayout的几个属性

background: 设置背景图，示例为#38B059

tabTextColor: tab 的字体颜色，示例为#7D&D&D

tabSelectedTextColor: tab 选中时候的字体颜色

tabMode: tab 的模式，有两种。fixed 为固定模式，scrollable 为可滚动模式

程序代码实现

1)HomeUI.java的所有代码

public class HomeUI extends BaseActivity implements View.OnClickListener {

    private TabLayout mTabLayout;
    private ViewPager mViewPager;
    private FloatingActionButton mFabtnSettings;//悬浮按钮
    /**
     * title list
     */
    private List mTitleLists;
    /**
     * fragment list
     */
    private List mFragLists;

    private TextView mQrCode;//二维码

    @Override
    protected void setContentView() {
        setContentView(R.layout.ui_home);
        //changeStatusBarColor(R.color.myColor_green);
        //隐藏actionbar
        getSupportActionBar().hide();

    }

    @Override
    protected void initView() {
        mTabLayout = (TabLayout) findViewById(R.id.home_tablayout);
        mViewPager = (ViewPager) findViewById(R.id.home_viewpager);
        mFabtnSettings = (FloatingActionButton) findViewById(R.id.home_fabtn_settings);
        mQrCode = (TextView) findViewById(R.id.home_tv_qrcode);
    }

    @Override
    protected void initData() {
        //默认隐藏
        mFabtnSettings.setVisibility(ViewPager.GONE);
        //去掉阴影
        getSupportActionBar().setElevation(0);

        mTitleLists = new ArrayList<>();
        mTitleLists.add("语音助手");
        mTitleLists.add("微信精选");
        mTitleLists.add("视频推荐");
        mTitleLists.add("创意商品");
        mTitleLists.add("个人中心");

        mFragLists = new ArrayList<>();
        mFragLists.add(new HelperFrag());
        mFragLists.add(new WechatFrag());
        mFragLists.add(new VideoFrag());
        mFragLists.add(new GoodsFrag());
        mFragLists.add(new UserFrag());

        //viewpager预加载
        mViewPager.setOffscreenPageLimit(mFragLists.size());
        //监听ViewPager
        mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                //在第一个ViewPager中隐藏，其他页面显示
                mFabtnSettings.setVisibility((position == 0) ? ViewPager.GONE : ViewPager.VISIBLE);
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });

        //设置适配器
        mViewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {
            @Override
            public Fragment getItem(int position) {
                //返回当前位置的页面
                return mFragLists.get(position);
            }

            @Override
            public int getCount() {
                //总的页面数
                return mFragLists.size();
            }

            @Override
            public CharSequence getPageTitle(int position) {
                //每个item的title
                return mTitleLists.get(position);
            }
        });

        /**
         * 绑定
         */
        mTabLayout.setupWithViewPager(mViewPager);
        //跳转到悬浮按钮设置界面
        mFabtnSettings.setOnClickListener(this);
        //跳转到扫码页面
        mQrCode.setOnClickListener(this);


    }

    @Override
    protected void showBackKey() {
        //主页不显示返回的按钮
        //super.showBackKey();
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.home_fabtn_settings:
                IntentUtils.startActivity(this, UserSettingUI.class);
                showNext();
                break;
            default:
                break;
        }
    }


}

2)HomeUI继承自BaseActivity,BaseActivity是自定义的Activity基类,继承自该基类的Activity默认就要实现setContentView() initView() initData()三个方法,作用分别为加载布局文件 获取id 初始化一些数据.

3)标题与需要绑定的Fragment最好是用一个JavaBean来封装数据,如FragmentInfo.java,如下:

public class FragmentInfo {

    private  String title;

    private Class fragment;

    public FragmentInfo(String title, Class fragment) {
        this.title = title;
        this.fragment = fragment;
    }

   //setter与getter方法省略
}

本文为了方便,分别用集合来存标题和Fragment实例,如下:

 mTitleLists = new ArrayList<>();
        mTitleLists.add("语音助手");
        mTitleLists.add("微信精选");
        mTitleLists.add("视频推荐");
        mTitleLists.add("创意商品");
        mTitleLists.add("个人中心");

        mFragLists = new ArrayList<>();
        mFragLists.add(new HelperFrag());
        mFragLists.add(new WechatFrag());
        mFragLists.add(new VideoFrag());
        mFragLists.add(new GoodsFrag());
        mFragLists.add(new UserFrag());

4)为了提高效率,进行了ViewPager的预加载.

mViewPager.setOffscreenPageLimit(mFragLists.size());

5)实际开发中最好另外写一个适配器类,将代码分析,而不是通过匿名内部类的方式

  //设置适配器
        mViewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {
            @Override
            public Fragment getItem(int position) {
                //返回当前位置的页面
                return mFragLists.get(position);
            }

            @Override
            public int getCount() {
                //总的页面数
                return mFragLists.size();
            }

            @Override
            public CharSequence getPageTitle(int position) {
                //每个item的title
                return mTitleLists.get(position);
            }
        });

6)接下来就是Tablayout绑定ViewPager了

 /**
         * 绑定
         */
        mTabLayout.setupWithViewPager(mViewPager);

三,效果图

效果图如下,可以自然的滑动滑动切换页面哦,个人感觉还不错!嘻嘻!