viewpagerindicator的取代品之一TabLayout(谷歌官方控件)

viewpagerindicator的取代品之一TabLayout(谷歌官方控件)

首先展示一下,代码成功之后大概的效果(我承认很丑!).

---

本人使用的为Android Studio

首先在build.gradle中添加compile 'com.android.support:design:22.2.0'

后面的这个版本号可能需要修改一下.

比如我的程序targetSdkversion是23的就会出现下面的错误.

解决办法,如下图

完成之后,会在build.gradle中看到 compile 'com.android.support:design:xx.xx.xx'已添加

---

开始使用

布局文件

    <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:orientation="vertical"        android:layout_height="match_parent"        tools:context=".MainActivity">        <android.support.design.widget.TabLayout            android:id="@+id/tab"            android:layout_width="match_parent"            app:tabIndicatorColor="#FF00FF00"            app:tabSelectedTextColor="#FFFFFF00"            app:tabTextColor="#FFFF0000"            android:layout_height="wrap_content"/>        <android.support.v4.view.ViewPager            android:id="@+id/vp"            android:layout_width="fill_parent"            android:layout_height="0dp"            android:layout_weight="1"            />    </LinearLayout>

其中 app:tabIndicatorColor="#FF00FF00" // 下方下划线颜色
app:tabSelectedTextColor="#FFFFFF00" // 被选中后，文字的颜色
app:tabTextColor="#FFFF0000" // 默认的文本颜色
运行一下就明白.

程序中的关键代码

1. tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);//用来设置tab宽度超出屏幕时的解决办法,这里设置为可滑动.

2. viewPager.setAdapter();//不会这个请另行搜索

   值得注意的是,在重写viewPager适配器的时候,要重写

       @Override    public CharSequence getPageTitle(int position) {          return strs[position];    }

3. tabLayout.setupWithViewPager(viewPager);//一定将这句话放到viewpager设置适配器的后面.

大功告成!