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()
        }
    }
}