[Android] Android 类似今日头条顶部的TabLayout 滑动标签栏 效果

时间：2024-11-17 13:07:14

APP市场中大多数新闻App都有导航菜单，导航菜单是一组标签的集合，在新闻客户端中，每个标签标示一个新闻类别，对应下面ViewPager控件的一个分页面，今日头条， 网易新闻等。

本文主要讲的是用：TabLayout+ Fragment + ViewPager  实现  滑动标签栏 效果

先演示下效果：

[Android] Android 类似今日头条顶部的TabLayout 滑动标签栏 效果

话不多说，直接开撸：

一、添加依赖

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=""

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

    private String[] mTabTitles = new String[];

    @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[] = "推荐";

        mTabTitles[] = "热点";

        mTabTitles[] = "科技";

        mTabTitles[] = "体育";

        mTabTitles[] = "健康";

        mTabTitles[] = "军事";

        mTabTitles[] = "娱乐";

        mTabTitles[] = "热点";

//        tabLayout.setTabMode(TabLayout.MODE_FIXED); //固定模式，也就是说 tab顶部不能滚动

        tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE); //滚动模式 ,可左右滚动，类 今日头条

        mFragmentArrays[] = TabFragment.newInstance();

        mFragmentArrays[] = TabFragment.newInstance();

        mFragmentArrays[] = TabFragment.newInstance();

        mFragmentArrays[] = TabFragment.newInstance();

        mFragmentArrays[] = TabFragment.newInstance();

        mFragmentArrays[] = TabFragment.newInstance();

        mFragmentArrays[] = TabFragment.newInstance();

        mFragmentArrays[] = 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

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

相关文章