众所周知，Google从Android5.x之后就推出了Material Design材料设计，其中很多新的控件的确是造福码农，但感觉在国内这类设计并没被大规模的应用，所以个人也一直没在项目中具体用过。最近正好有一个项目，本身适用的设备就是5.0x以上的系统，所以打算小试一下。
如下，有一页面：
Paste_Image.png
这类页面很常见，网上也有很多方法来实现，比如radioGroup+ViewPager,或者用开源库：PageSlidingTabStrip+ViewPagerIndicator 都可以，但比较起来，Material Design中的TabLayout实现起来就更Easy了（当然对于我第一次吃🦀的人来说，还是被夹了几下）面我们就一步步的来：
首先分析下，选项卡背景是一个圆角矩形的框，页面内容是一个ViewPager嵌套Fragment，选项卡的两个tab会随着ViewPager的切换变换背景颜色和字体颜色，大致就这些要点。ok,分析完之后，就开始动手吧。
首先来一个圆角矩形背景框：
shape_tab_round_bg.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="2dp" />
<stroke
android:width="1dp"
android:color="@color/color_ff5a60" />
</shape>
再来一个选中效果的背景：
shape_tab_selected.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="@color/color_ff5a60" />
<corners
android:radius="2dp"/>
</shape>
继续来个未选中的背景：
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners
android:radius="2dp"/>
</shape>
ok,各种背景准备好了,先放一边，接下来实现整个布局：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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffff"
android:orientation="vertical">
<android.support.design.widget.TabLayout
android:id="@+id/izen_tablayout"
android:layout_marginTop="20dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:background="@drawable/shape_tab_round_bg"/>
<android.support.v4.view.ViewPager
android:id="@+id/pay_viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
</LinearLayout>
这些弄完之后，我们就可以在Activity当中使用了：
package com.izen;
import android.graphics.Color;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentStatePagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
/**
* Created by izen on 2017/01/05.
*
*/
public class MainActivity extends AppCompatActivity {
private ViewPager viewPager;
private TabLayout tabLayout;
private Fragment1 fragment1;
private Fragment2 fragment2;
public static final String[] titles = {"扫码", "支付码"};
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
}
void initView() {
tabLayout = (TabLayout) findViewById(R.id.izen_tablayout);
viewPager = (ViewPager) findViewById(R.id.pay_viewpager);
viewPager.setAdapter(new FragmentStatePagerAdapter(getSupportFragmentManager()) {
@Override
public Fragment getItem(int position) {
switch (position) {
case 0:
if (fragment1 == null) {
return new Fragment1();
}
break;
case 1:
if (fragment2 == null) {
return new Fragment2();
}
break;
}
return null;
}
@Override
public int getCount() {
return titles.length;
}
});
viewPager.setCurrentItem(0);
tabLayout.addTab(tabLayout.newTab());
tabLayout.addTab(tabLayout.newTab());
tabLayout.setupWithViewPager(viewPager);
tabLayout.getTabAt(0).setText(titles[0]);
tabLayout.getTabAt(1).setText(titles[1]);
//设置选中和非选中的文字颜色
tabLayout.setTabTextColors("0xffff5a60","0xffffffff");
}
}
写到这里就莫名其妙地被夹了一下：最开始添加两个Tab的时候是这么写的：
tabLayout.addTab(tabLayout.newTab().setText(titles[0]));
tabLayout.addTab(tabLayout.newTab().setText(titles[1]));
tabLayout.setupWithViewPager(viewPager);
运行后发现Tab是有了 但是没有标题文字。。。好费解。。。然后百度一下，结果都提到了源码，这才想起去看源码（囧，不合格程序员。。哈哈），才发现真的是被夹的不冤枉：
Paste_Image.png
这里的removeAllTabs()；在赤裸裸的嘲笑你 你 你~~~没法干掉它，所以只能默默的回头修改下自己的代码：
tabLayout.setupWithViewPager(viewPager);
tabLayout.getTabAt(0).setText(titles[0]);
tabLayout.getTabAt(1).setText(titles[1]);
这时候在运行一下，文字标题就有了。。。
当然还没完，tab的文字颜色和字体大小以及单个tab在切换时候的背景颜色变化我们还没实现，这里其实也被夹到了，刚开始常规的思路想，这些变化我得在tab切换或者ViewPager切换时，在onSelected监听切换背景，改变颜色等等。但看源码（学乖了）发现单个tab并没有提供给我们设置背景颜色和文本颜色的方法。而TabLayout里却提供了一个方法：setTabTextColors(color1,color2),只需一行代码设置文本颜色变化：
//设置选中和非选中的文字颜色
tabLayout.setTabTextColors("0xffff5a60","0xffffffff");
so easy~~
而tab的背景颜色，貌似也只能通过设置tabLayout的style样式设置tabBackground的属性值来实现(如果有其他方法，请告知，谢谢~)：
样式如下：
<!--选项卡样式设置-->
<style name="TabLayoutStyle">
<item name="tabBackground">@drawable/selector_tab_background</item>
<item name="tabTextAppearance">@style/TabLayoutTextViewStyle</item>
</style>
<style name="TabLayoutTextViewStyle">
<item name="android:textColor">#ffffff</item>
<item name="android:textSize">18sp</item>
</style>
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/shape_tab_selected" android:state_selected="true" />
<item android:drawable="@drawable/shape_tab_unselected" android:state_selected="false" />
</selector>
最后，给TabLayout添加上面的样式：
<android.support.design.widget.TabLayout
android:id="@+id/izen_tablayout"
android:layout_marginTop="20dp"
android:layout_width="match_parent"
android:layout_height="48dp"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
style="@style/TabLayoutStyle"
android:background="@drawable/shape_tab_round_bg"/>
完美de选项卡就实现了。怎么样，是不是比之前的方式简单多了呢，赶快试试吧~
网友评论