AndroidStudio添加gradle依赖
//TabLayout
compile 'com.android.support:support-v4:26.+'
compile 'com.android.support:design:26.0.0-alpha1'
//ViewPage
android.support.v4.view.ViewPager
layout布局
<?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:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/mainBack"
android:layout_marginBottom="58dp">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:paddingLeft="10dp"
android:paddingRight="10dp">
<android.support.design.widget.TabLayout
android:id="@+id/tab"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginRight="40dp"
android:layout_marginLeft="40dp"
app:tabGravity="fill"
app:tabIndicatorHeight="2dp"
app:tabTextColor="@color/tabText"
app:tabSelectedTextColor="@color/tabText"
app:tabIndicatorColor="@color/tab_buttom"
app:tabTextAppearance="@style/MyTabLayoutTextAppearance"/>
<ImageButton
android:id="@+id/ib_camera"
android:layout_width="25dp"
android:layout_height="20dp"
android:layout_marginBottom="10dp"
android:layout_marginTop="10dp"
android:background="@mipmap/camera"
android:layout_centerVertical="true"
android:layout_marginLeft="10dp"
android:layout_gravity="center_vertical|right"
/>
</FrameLayout>
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="@android:color/white"
android:paddingBottom="15dp"/>
</LinearLayout>
注意点:
1。要实现文字和底部标签indicator分离需要设定
app:tabGravity="fill"
2。设置底部indicator的高度和颜色
app:tabIndicatorHeight="2dp"
app:tabIndicatorColor="@color/tab_buttom"
3。设置tab文字样式
app:tabTextAppearance="@style/MyTabLayoutTextAppearance"
在style中
<!-- tablayout的字体和颜色 -->
<style name="MyTabLayoutTextAppearance" parent="TextAppearance.AppCompat.Widget.ActionBar.Title">
<item name="android:textSize">20sp</item>
<item name="android:textColor">@color/tabText</item>
</style>
效果
Activity准备实现
1。FragmentPagerAdapter用来给viewpager指定适配器
package com.wj.shoes.adapter;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import java.util.List;
/**
* for: viewpager的适配器
* Created by wangjian on 2017/8/3.
*/
public class SocialViewpagerAdapter extends FragmentPagerAdapter{
private List<Fragment> list;
private String[] titles = new String[]{"话题", "热点", "关注"};
public SocialViewpagerAdapter(FragmentManager fm, List<Fragment> list) {
super(fm);
this.list = list;
}
@Override
public Fragment getItem(int position) {
return list.get(position);
}
@Override
public int getCount() {
return list.size();
}
//重写这个方法,将设置每个Tab的标题,避免tab中文字不显示
@Override
public CharSequence getPageTitle(int position) {
return titles[position];
}
}
2。根据tab个数的Fragment
自己定义几个Fragment
3。将tab与viewpager关联
private List<Fragment> list = new ArrayList<>();
private SocialViewpagerAdapter adapter;
//数据源
list.add(new TopicFragment());
list.add(new HotFragment());
list.add(new AttentionFragment());
//适配器
FragmentManager fm = getSupportFragmentManager();
adapter = new SocialViewpagerAdapter(fm,list);
viewpager.setAdapter(adapter);
tabLayout.setupWithViewPager(viewpager);
//默认选中
tabLayout.getTabAt(1).select();
4。设置tab的indicator宽度
方法
package com.wj.shoes.widget;
import android.content.res.Resources;
import android.support.design.widget.TabLayout;
import android.util.TypedValue;
import android.view.View;
import android.widget.LinearLayout;
import java.lang.reflect.Field;
/**
* for: 设置tablayout的指示器长度
* Created by wangjian on 2017/8/3.
*/
public class TablayoutIndicator {
public void setIndicator(TabLayout tabs, int leftDip, int rightDip) {
Class<?> tabLayout = tabs.getClass();
Field tabStrip = null;
try {
tabStrip = tabLayout.getDeclaredField("mTabStrip");
} catch (NoSuchFieldException e) {
e.printStackTrace();
}
tabStrip.setAccessible(true);
LinearLayout llTab = null;
try {
llTab = (LinearLayout) tabStrip.get(tabs);
} catch (IllegalAccessException e) {
e.printStackTrace();
}
int left = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, leftDip, Resources.getSystem().getDisplayMetrics());
int right = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, rightDip, Resources.getSystem().getDisplayMetrics());
for (int i = 0; i < llTab.getChildCount(); i++) {
View child = llTab.getChildAt(i);
child.setPadding(0, 0, 0, 0);
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(0, LinearLayout.LayoutParams.MATCH_PARENT, 1);
params.leftMargin = left;
params.rightMargin = right;
child.setLayoutParams(params);
child.invalidate();
}
}
}
使用
@Override
public void onStart() {
super.onStart();
tabLayout.post(new Runnable() {
@Override
public void run() {
/**
* 在tablayout渲染之后设置tablayout的指示器长度
* tab left right
*/
new TablayoutIndicator().setIndicator(tabLayout, 20, 20);
}
});
}