本文要实现的最终效果:可滑动的,指定样式的,均分屏幕宽度的TabLayout
先上最终效果图:
本文主要包括的技术点如下:
一,TabLayout中的Tab间隔设置方法
二,单个tab的样式的定制
三,TabLayout有多个标签tab时,如何在标签可滑动的情况下,一屏只显示指定的tab数
下面直接上代码:
1,主界面布局
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
tools:context="jrzl.rb.com.tablayout.MainActivity">
<jrzl.rb.com.tablayout.MBTabLayout
android:id="@+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="35dp"
android:paddingBottom="5dp"
android:paddingTop="5dp"
app:tabBackground="@drawable/tablayout_item_selector"
app:tabIndicatorHeight="0dp"
app:tabMode="scrollable"
app:tabTextAppearance="@style/TabLayoutTextStyle"
app:tabSelectedTextColor="#4a4a4a"
app:tabTextColor="#4a4a4a"/>
</RelativeLayout>
MBTablayout继承自Tablayout,通过反射的方法实现在TabLayout有多个标签tab时,在保证标签可滑动的情况下,一屏只显示指定的tab数。
android:layout_height="35dp" 用来指定Tablayout的高度。
app:tabBackground="@drawable/tablayout_item_selector" 用来指定单个tab的样式,包括选中状态及未选中状态。
app:tabIndicatorHeight="0dp" 通过把下划线高度设置为0dp,可以去掉下划线。
app:tabMode="scrollable" 保证tab标签可以滑动。
app:tabTextAppearance="@style/TabLayoutTextStyle" 通过这个属性可以设置tab的字体大小颜色。
下面两个属性基本就见名知意了。
2,下面是MainActivity的代码
package jrzl.rb.com.tablayout;
import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v7.app.AppCompatActivity;
import android.widget.Toast;
public class MainActivity extends AppCompatActivity {
private TabLayout mTabLayout;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mTabLayout = (TabLayout) findViewById(R.id.tabLayout);
mTabLayout.addTab(mTabLayout.newTab().setText("全部"));
mTabLayout.addTab(mTabLayout.newTab().setText("营销"));
mTabLayout.addTab(mTabLayout.newTab().setText("客户"));
mTabLayout.addTab(mTabLayout.newTab().setText("项目"));
mTabLayout.addTab(mTabLayout.newTab().setText("合同"));
mTabLayout.addTab(mTabLayout.newTab().setText("资管"));
mTabLayout.addTab(mTabLayout.newTab().setText("运营"));
mTabLayout.addTab(mTabLayout.newTab().setText("办公"));
mTabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
Toast.makeText(MainActivity.this, tab.getText(), Toast.LENGTH_SHORT).show();
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
}
});
}
}
3,自定义MBTabLayout代码
package jrzl.rb.com.tablayout;
import android.content.Context;
import android.support.design.widget.TabLayout;
import android.util.AttributeSet;
import java.lang.reflect.Field;
/**
* Created by cuilk on 2018/2/28.
* 通过设置TabViewNumber的值,可以决定一屏被几个tab均分
*/
public class MBTabLayout extends TabLayout {
private static final int TabViewNumber = 4;
private static final String SCROLLABLE_TAB_MIN_WIDTH = "mScrollableTabMinWidth";
public MBTabLayout(Context context) {
super(context);
initTabMinWidth();
}
public MBTabLayout(Context context, AttributeSet attrs) {
super(context, attrs);
initTabMinWidth();
}
public MBTabLayout(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
initTabMinWidth();
}
private void initTabMinWidth() {
int screenWidth=getResources().getDisplayMetrics().widthPixels;
int tabMinWidth = screenWidth / TabViewNumber;
Field field;
try {
field = TabLayout.class.getDeclaredField(SCROLLABLE_TAB_MIN_WIDTH);
field.setAccessible(true);
field.set(this, tabMinWidth);
} catch (NoSuchFieldException e) {
e.printStackTrace();
} catch (IllegalAccessException e) {
e.printStackTrace();
}
}
}
参考文章:http://www.jb51.net/article/131304.htm
http://blog.csdn.net/wanglaohushiwo/article/details/72857691