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

简单实现

效果图

步骤：

• 需求：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字体大小：

<!--TextAppearance.AppCompat.Widget.ActionBar.Title--><style name="MyTablayoutTextAppearance" parent="TextAppearance.AppCompat.Widget.ActionBar.Title.Inverse">    <item name="android:textSize">15sp</item></style>

怎么添加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的标题@Overridepublic 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不足以充满屏幕宽度，而且是左对齐。

属性

属性 含义 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/tabLayout1"        android:layout_width="match_parent"        android:layout_height="wrap_content">        <android.support.design.widget.TabItem            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="tab1"/>        <android.support.design.widget.TabItem            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="tab2"/>        <android.support.design.widget.TabItem            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="tab3"/></android.support.design.widget.TabLayout>

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

这也是最常用的

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

Android Developer 文档中还介绍了ViewPager包裹TabLayout，不知道怎么使用