[Android] Android 類似今日頭條頂部的TabLayout 滑動標簽欄 效果

APP市場中大多數新聞App都有導航菜單，導航菜單是一組標簽的集合，在新聞客戶端中，每個標簽標示一個新聞類別，對應下面ViewPager控件的一個分頁面，今日頭條， 網易新聞等。

 

本文主要講的是用：TabLayout+ Fragment + ViewPager  實現  滑動標簽欄 效果

 

先演示下效果：

 

話不多說，直接開擼：

一、添加依賴

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

 

二、在布局文件中加入Layout

activity_main.xml

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".activity.MainActivity">

    <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="5dp"
        app:tabMode="fixed"
        app:tabSelectedTextColor="@color/colorPrimary"
        app:tabTextAppearance="@style/TabStyle" />

    <android.support.v4.view.ViewPager
        android:id="@+id/tab_viewpager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="@android:color/white" />

</LinearLayout>

 

附：幾個參數說明下

app:tabMode="scrollable" 設置tabMode屬性為可以左右滾動，
tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);

 

對應的是 app:tabMode="scrollable"   固定的

tabLayout.setTabMode(TabLayout.MODE_FIXED);

 

 android design library提供的TabLayout控件
 tabIndicatorColor：菜單下方移動的橫線的顏色
 tabSelectedTextColor ：菜單被選中之后的顏色
 tabTextColor : 菜單正常的顏色
 app:tabTextAppearance : 添加樣式，這里加了樣式主要是為了在文字前面加一個圖所用，就是把textAllCaps設置成false

 

三、Java代碼中綁定

package com.jack.apptabview.activity;

import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Window;

import com.jack.apptabview.R;
import com.jack.apptabview.fragment.TabFragment;

public class MainActivity extends AppCompatActivity {
    private TabLayout tabLayout = null;
    private ViewPager viewPager;
    private Fragment[] mFragmentArrays = new Fragment[8];
    private String[] mTabTitles = new String[8];

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        supportRequestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_main);

        initView();
        bindData();
    }


    private void initView() {
        tabLayout = (TabLayout) findViewById(R.id.tab_layout);
        viewPager = (ViewPager) findViewById(R.id.tab_viewpager);

    }

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

    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];
        }
    }
}

 

四、其他實現Fragment等

這里不多說。

 

五、Talk is cheap. Show me the code

話不多說，代碼在這里下載！

https://github.com/wukong1688/Android-BaseTabView

 

如果覺得有幫助，歡迎在 Github 為我 star！

 

本博客地址： wukong1688

本文原文地址：https://www.cnblogs.com/wukong1688/p/10733603.html

轉載請著名出處！謝謝~~