TabLayout+ViewPager(一)

作者: 唠嗑008 | 来源:发表于2017-03-16 19:10 被阅读140次
    一、在Android的开发当中Tablayout和Viewpager的混合使用是很多的,

    效果图

    462363917730815980.jpg
    二、使用步骤

    1、导入依赖

    compile 'com.android.support:design:25.1.0'
    

    2、布局文件

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
    
        <!--Tab页-->
        <android.support.design.widget.TabLayout
            android:id="@+id/tabLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabIndicatorColor="@color/red"
            app:tabSelectedTextColor="@color/red"
            app:tabTextColor="@color/black" />
    
        <android.support.v4.view.ViewPager
            android:id="@+id/main_vp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>
    
    </LinearLayout>
    

    3、代码中

    /**
     * 商品管理
     */
    public class ProductManageActivity extends AppCompatActivity implements ViewPager.OnPageChangeListener, TabLayout.OnTabSelectedListener {
        @BindView(R.id.tabLayout)
        TabLayout tabLayout;
        @BindView(R.id.main_vp)
        ViewPager mViewPager;
    
        private Context mContext;
        private MainAdapter mainAdapter; //适配器
        private List<Fragment> mFragmentList;
        private List<String> mTitleList; //Tab的标题
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_product_manage);
            ButterKnife.bind(this);
    
            mContext = this;
            initData();
            initTabLayout();
            initViewPager();
        }
    
        private void initViewPager() {
            mainAdapter = new MainAdapter(getSupportFragmentManager());
            mViewPager.setAdapter(mainAdapter);//给ViewPager设置适配器
            mViewPager.setAdapter(mainAdapter);
            tabLayout.setupWithViewPager(mViewPager);
            mViewPager.setOnPageChangeListener(this);
        }
    
        //初始化ViewPager的数据源
        private void initData() {
            mFragmentList = new ArrayList<>();
            mFragmentList.add(new HasOnLineFragment());
            mFragmentList.add(new WaitOnlineFragment());
            mFragmentList.add(new OffLineFragment());
        }
    
        private void initTabLayout() {
            mTitleList = new ArrayList<>();
            //添加页卡标题
            mTitleList.add(getString(R.string.has_online));
            mTitleList.add(getString(R.string.wait_online));
            mTitleList.add(getString(R.string.off_line));
            tabLayout.addOnTabSelectedListener(this);
        }
    
    
       
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
    
        }
    
        @Override
        public void onPageSelected(int position) {
            //ViewPager滑动
            switch (position) {
                case 0:
                    break;
                case 1:
    
                    break;
                case 2:
    
                    break;
                default:
                    break;
            }
        }
    
        @Override
        public void onPageScrollStateChanged(int state) {
    
        }
    
        //TabLayout的Item被选中
        @Override
        public void onTabSelected(TabLayout.Tab tab) {
            int position = tab.getPosition();
            mViewPager.setCurrentItem(position); //设置当前fragment
        }
    
        @Override
        public void onTabUnselected(TabLayout.Tab tab) {
    
        }
    
        @Override
        public void onTabReselected(TabLayout.Tab tab) {
    
        }
    
        //适配器
        public class MainAdapter extends FragmentPagerAdapter {
    
            public MainAdapter(FragmentManager fm) {
                super(fm);
            }
    
            @Override
            public Fragment getItem(int position) {
                return mFragmentList.get(position);
            }
    
            @Override
            public int getCount() {
                return mFragmentList.size();
            }
    
          //获取标题
            @Override
            public CharSequence getPageTitle(int position) {
                return mTitleList.get(position);
            }
        }
    }
    
    

    相关文章

      网友评论

      • Mircale1:可以用来做底部导航栏的功能么?
        唠嗑008:@Mircale1 这种模式还是比较方便的,我目前项目也用的这种
        Mircale1: @陪你唠嗑 我用radiogroup+viewpager过时了 想找找有没有啥新方法
        唠嗑008:@Mircale1 当然是可以的,实现倒不是很难,只需要把tab的标题换成带icon的那种,去掉那个指示器
        即可
      • Victor_Xu:点击tab可以切换pager,但滑动pager时tab也要跟着切换,楼主在哪实现的?
        唠嗑008:@小前锋 是这样的,只要这句代码tabLayout.setupWithViewPager(mViewPager);就可以实现TabLayout和ViewPager的滑动效果,而且我的ViewPager的滑动事件都不用做任何处理。

      本文标题:TabLayout+ViewPager(一)

      本文链接:https://www.haomeiwen.com/subject/vjojnttx.html