[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

转载请著名出处！谢谢~~