Android 仿“今日头条”顶部导航栏跟页面滑动效果 最简单方式MD控件TabLayout实现

1.配置依赖

//implementation 'com.android.support:appcompat-v7:+'

implementation 'com.android.support:appcompat-v7:23.4.0'
implementation 'com.android.support:design:23.4.0'
implementation 'com.android.support:recyclerview-v7:23.4.0'
implementation 'com.android.support:cardview-v7:23.4.0'

2.activity的xml布局ConstraintLayout

• layout_constraintTop_toBottomOf :当前View在另一个View的下侧 与below相似
• layout_constraintBottom_toTopOf :当前View在另一个View的上方 与above相似

<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">



    //默认会有横线，颜色默认是大粉红色的,去掉红线用 app:tabIndicatorHeight="0dp"
    <android.support.design.widget.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="@color/cardview_dark_background">


    </android.support.design.widget.TabLayout>


    <android.support.v4.view.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorAccent"
        app:layout_constraintTop_toBottomOf="@id/tab_layout">


    </android.support.v4.view.ViewPager>


</android.support.constraint.ConstraintLayout>

3. 页面的逻辑

主要的几个点

1）。文字和fragment是怎么绑定的 ===通过fragmentAdapter

 @Override

        public Fragment getItem(int position) {

            return mFragmentArrays[position];

        }

 

        @Override

        public CharSequence getPageTitle(int position) {//标题的现实

            return mTabTitles[position];

        }

2）。绑定viewpager和Tablayout

tabLayout.setupWithViewPager(viewPager);//绑定viewpager和Tablayout

3）。滑动  

tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE); //滚动模式 ,可左右滚动,类今日头条private Fragment[] mFragmentArrays = new Fragment[8];

4).设置带有图片的TabLayout

tabLayout.removeAllTabs();//所以在我们需要给选项卡设置图片就需要把选项卡的内容给清空，使用下面的方法

for(int i=0;i<mTabTitles.length;i++){
    TabLayout.Tab tab =tabLayout.newTab();
    tab.setIcon(R.mipmap.ic_launcher);
    tab.setText(mTabTitles[i]);
    tabLayout.addTab(tab);
}

5).添加监听事件

//设置监听事件
tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
    @Override
    public void onTabSelected(TabLayout.Tab tab) {
        
    }

    @Override
    public void onTabUnselected(TabLayout.Tab tab) {

    }

    @Override
    public void onTabReselected(TabLayout.Tab tab) {

    }
});

6）。Tablayout的下滑线

<android.support.design.widget.TabLayout
    android:id="@+id/tab_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#E0E0E0"
    app:tabIndicatorColor="@color/colorAccent"
    app:tabIndicatorHeight="0dp"
    app:tabMode="fixed"
    app:tabSelectedTextColor="@color/colorPrimary"
    app:tabTextAppearance="@style/TabStyle" />private String[] mTabTitles = new String[8];

  private void bindData() {
        mTabTitles[0] = "推荐";
        mTabTitles[1] = "热点";
        mTabTitles[2] = "科技";
        mTabTitles[3] = "体育";
        mTabTitles[4] = "健康";
        mTabTitles[5] = "军事";
        mTabTitles[6] = "娱乐";
        mTabTitles[7] = "热点";

//        tabLayout.setTabMode(TabLayout.MODE_FIXED); //固定模式，也就是说 tab顶部不能滚动
        tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE); //滚动模式 ,可左右滚动，类 今日头条

        mFragmentArrays[0] = TabFragment.newInstance();
        mFragmentArrays[1] = TabFragment.newInstance();
        mFragmentArrays[2] = TabFragment.newInstance();
        mFragmentArrays[3] = TabFragment.newInstance();
        mFragmentArrays[4] = TabFragment.newInstance();
        mFragmentArrays[5] = TabFragment.newInstance();
        mFragmentArrays[6] = TabFragment.newInstance();
        mFragmentArrays[7] = TabFragment.newInstance();



        PagerAdapter pagerAdapter = new MyViewPagerAdapter(getSupportFragmentManager());
        viewPager.setAdapter(pagerAdapter);

        //将ViewPager和TabLayout绑定
        tabLayout.setupWithViewPager(viewPager);

        //设置监听事件
        tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {

            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {

            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {

            }
        });

        addTab();

    }

    private  void addTab(){

        tabLayout.removeAllTabs();//所以在我们需要给选项卡设置图片就需要把选项卡的内容给清空，使用下面的方法

        for(int i=0;i<mTabTitles.length;i++){
            TabLayout.Tab tab =tabLayout.newTab();
            tab.setIcon(R.mipmap.ic_launcher);
            tab.setText(mTabTitles[i]);
            tabLayout.addTab(tab);
        }

    }

    final class MyViewPagerAdapter extends FragmentPagerAdapter {
        public MyViewPagerAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public Fragment getItem(int position) {
            return mFragmentArrays[position];
        }

        @Override
        public int getCount() {
            return mFragmentArrays.length;
        }

        @Override
        public CharSequence getPageTitle(int position) {
            return mTabTitles[position];
//            return tabLayout.getTabAt(position).getText();
//            return  tabLayout.getTabCount()
        }
    }
}