Material Design ：原生TabLayout+viewpaper+fragment实现滑动效果

最新推荐文章于 2025-06-15 10:08:59 发布

原创最新推荐文章于 2025-06-15 10:08:59 发布 · 2.6k 阅读

7 ·

CC 4.0 BY-SA版权

Material Design 专栏收录该内容

12 篇文章

订阅专栏

简单实现

效果图

这里写图片描述

步骤：

需求：TabLayout的简单使用
确定布局—找到控件–设置adapter–
1 initView()
2 initAdapter()
3 initTablayout()
4 initViewpager()

布局：

Eclipse注意V4，V7，Design包里面的属性是不主动提示的，要手敲或copy

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
<!--要引用全路径+特有属性不提示，最好copy，title的大小不可设置，只能通过@style设置-->
    <android.support.design.widget.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="@color/colorAccent"
        app:tabBackground="@color/TabLayoutBG"
        app:tabGravity="fill"
        app:tabIndicatorColor="@color/colorAccent"
        app:tabIndicatorHeight="3dp"
        app:tabMode="fixed"
        app:tabSelectedTextColor="@android:color/holo_blue_dark"
        app:tabTextAppearance="@style/TabLayoutTabTextAppearance"
        app:tabTextColor="@android:color/black"/>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/tabLayout">
    </android.support.v4.view.ViewPager>
</RelativeLayout>

设置tab字体大小+去掉字母默认大写限制

<style name="TabLayoutTextStyle" parent="TextAppearance.Widget.AppCompat.Toolbar.Title">
    <item name="android:textAllCaps">false</item>
    <item name="android:textSize">15sp</item>
</style>

parent也可以是：

parent="TextAppearance.AppCompat.Widget.ActionBar.Title.Inverse">

java代码

//注意这2行代码的顺序：viewpaper要先设置adapter，才可以让 tablayout绑定,否则报错：viewpager没有setAdapter()
viewPager.setAdapter(adapter);
tabLayout.setupWithViewPager(viewPager);
viewPager.setCurrentItem(0);

常见问题

怎么添加Tittle

tabLayout.setTabMode(TabLayout.MODE_FIXED);//官网解释fixed是个滑动
tabLayout.addTab(tabLayout.newTab().setText(tabs.get(0)));/**注意创建TAB对象：tabLayout.newTab()*/
tabLayout.addTab(tabLayout.newTab().setText(tabs.get(1)));
tabLayout.addTab(tabLayout.newTab().setText(tabs.get(2)));
tabLayout.addTab(tabLayout.newTab().setText(tabs.get(3)));
tabLayout.addTab(tabLayout.newTab().setText(tabs.get(4)));

上述以前可以，但现在不行了，下面解释

怎么将二者绑定 TabLayout+Viewpager？

private void initViewPager() {
    //注意这2行代码的顺序：viewpaper要先设置adapter，才可以让 tablayout绑定,否则报错：viewpager没有setAdapter()
    viewPager.setAdapter(adapter);
    tabLayout.setupWithViewPager(viewPager);
    viewPager.setCurrentItem(0);
    }

为什么调用方法setupWithViewPager()后Title消失了？

因为setupWithViewPager()方法内部调用了removeAllTabs()。

按住ctrl+鼠标左键，进入源码：

Step1

tabLayout.setupWithViewPager(viewPager);

Step2:setupWithViewPager()

public void setupWithViewPager(@Nullable ViewPager viewPager) {
    setupWithViewPager(viewPager, true);
}

Step3：setupWithViewPager（）

private void setupWithViewPager(@Nullable final ViewPager viewPager, boolean autoRefresh,boolean implicitSetup) {

    if (viewPager != null) {
        ...
        if (adapter != null) {
            // Now we'll populate ourselves from the pager adapter, adding an observer if
            // autoRefresh is enabled
            setPagerAdapter(adapter, autoRefresh);
        }

    } else {
        // We've been given a null ViewPager so we need to clear out the internal state,
        // listeners and observers
        mViewPager = null;
        setPagerAdapter(null, false);
    }
    ...
}

Step4:setPagerAdapter()

void setPagerAdapter(@Nullable final PagerAdapter adapter, final boolean addObserver) {
    ...
    // Finally make sure we reflect the new adapter
    populateFromPagerAdapter();
}

Step5: populateFromPagerAdapter()

void populateFromPagerAdapter() {
    removeAllTabs();
    ...
}

到这里我们就应该知道原因了，下面在看看这个方法是怎么实现的。

Step6：removeAllTabs()

/**
 * Remove all tabs from the action bar and deselect the current tab.
 */
public void removeAllTabs() {
    // Remove all the views
    for (int i = mTabStrip.getChildCount() - 1; i >= 0; i--) {
        removeTabViewAt(i);
    }

    for (final Iterator<Tab> i = mTabs.iterator(); i.hasNext();) {
        final Tab tab = i.next();
        i.remove();
        tab.reset();
        sTabPool.release(tab);
    }

    mSelectedTab = null;
}

怎么解决：“调用方法setupWithViewPager()后Title消失” ？

方法一：

在setupWithViewPager()后添加title

tabLayout.setupWithViewPager(viewPager);
//如果不调用下面的代码，运行后发现tablayout没有了Title,
// 这是因为源码调用了removeAllTabs();以前没有，具体API几添加的这个方法不清楚
//方法一：
tabLayout.getTabAt(0).setText("精选");
tabLayout.getTabAt(1).setText("订阅");
tabLayout.getTabAt(2).setText("发现");

方法二：ViewPager的adapter中调用getPageTitle(int position)

//设置Tab的标题
@Override
public CharSequence getPageTitle(int position) {
    return titles[position];
}

app:tabGravity=”fill” app:tabGravity=”center”的区别？

app:tabGravity=”center” tab居中显示，若tab数量较少，导致无法填充满屏幕宽度，会居中显示，两边会有空白。

app:tabGravity=”fill”

这里写图片描述

app:tabGravity=”center”

这里写图片描述

android:background=”” 与app:tabBackground=“” 的区别？

见上图：

app:tabMode=”fixed”和app:tabMode=”scrollable”的区别？

app:tabMode=”fixed”和app:tabMode=”scrollable”的区别也是这样，fixed会充满屏幕宽度，tab数量较少时，scrollable不足以充满屏幕宽度，而且是左对齐。

这里写图片描述

怎么去掉下划线？

让下划线的高度为0即可。

app:tabIndicatorHeight="0dp"

怎么给tab添加分割线？

LinearLayout tab1 = (LinearLayout) tabLayout.getChildAt(0);
tab1.setShowDividers(LinearLayout.SHOW_DIVIDER_MIDDLE);
tab1.setDividerDrawable(getResources().getDrawable(R.drawable.divider));

divider.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/item6"/>
    <size android:width="1dp"/>
</shape>

属性

属性	含义
android:background=”“	整个TabLayout的背景色
app:tabBackground=“”	tab的背景色
app:tabMode=”fixed”	tab的摆放方式，fixed：充满屏幕;scrollable:左对齐
app:tabGravity=”fill”	tab的摆放方式，fill:充满屏幕宽度;center:水平居中
app:tabIndicatorColor=“”	下划线颜色
app:tabIndicatorHeight=“”	下划线高度
app:tabTextColor=”@android:color/black”	tab文字颜色
app:tabSelectedTextColor=”@color/colorAccent”	当前tab文字颜色
app:tabTextAppearance=”@style/TabLayoutTextStyle”	文字大小颜色等

下载源码

TabLayout添加TAB的3种方式

第一种：addTab()

tabLayout2.addTab(tabLayout2.newTab().setText("tab1").setIcon(R.mipmap.ic_launcher_round));

第二种：在xml布局中直接添加TabItem

 <android.support.design.widget.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="60dp">

        <android.support.design.widget.TabItem
            android:id="@+id/tab1"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:icon="@mipmap/ic_launcher"
            android:text="首页"/>

        <android.support.design.widget.TabItem
            android:id="@+id/tab2"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:icon="@mipmap/ic_launcher"
            android:text="联系人"/>

        <android.support.design.widget.TabItem
            android:id="@+id/tab3"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:icon="@mipmap/ic_launcher"
            android:text="朋友圈"/>

        <android.support.design.widget.TabItem
            android:id="@+id/tab4"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:icon="@mipmap/ic_launcher"
            android:text="我"/>
    </android.support.design.widget.TabLayout>

这里写图片描述

第三种：调用adapter中的方法getPageTitle（）

这也是最常用的

//设置Tab的标题
@Override
public CharSequence getPageTitle(int position) {
    return titles[position];
}

Android Developer 文档中还介绍了ViewPager包裹TabLayout，不知道怎么使用
这里写图片描述

SlidingTabLayout + SlidingTabStrip

https://git.oschina.net/AndroidUI/slidingtablayout01.git