TabLayout顶部导航根据textview长度决定下划线长度
废话不多说，虽然很简单，但我还是想记录一下这美好的时刻
效果就不上了，因为我是真机测试的，也懒得搞这个
首先需要一个依赖，当然，这个依赖跟之前底部导航一样，都需要选择design依赖
compile 'com.android.support:design:27.1.0'
老样子，先走布局
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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">
<android.support.design.widget.TabLayout
android:id="@+id/tab_goods"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#fff"
app:tabIndicatorColor="#f00"
app:tabSelectedTextColor="#f00"
app:tabMode="scrollable"
app:tabGravity="center"
app:tabTextAppearance="@style/TabLayoutTextStyle"
app:tabTextColor="#0f0"/>
<android.support.v4.view.ViewPager
android:id="@+id/vp_goods"
android:background="#fff"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v4.view.ViewPager>
</LinearLayout>
fragment_blank.xml
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".BlankFragment">
<!-- TODO: Update blank fragment layout -->
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="哈哈" />
</FrameLayout>
fragment_blank_fragment2.xml
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".BlankFragment2">
<!-- TODO: Update blank fragment layout -->
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="啦啦啦啦啦啦" />
</FrameLayout>
fragment_blank_fragment3.xml
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".BlankFragment3">
<!-- TODO: Update blank fragment layout -->
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="嘻" />
</FrameLayout>
style中添加一个样式
<style name="TabLayoutTextStyle">
<item name="android:textSize">16sp</item>
<item name="android:textAllCaps">true</item>
</style>
mainactivity.java
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import java.util.ArrayList;
import java.util.List;
public class MainActivity extends AppCompatActivity {
private List<Fragment> list=new ArrayList<>();
private String title[]={"哈哈","啦啦啦啦啦啦","嘻","哗哗哗","哔哩哔哩","哈哈哈哈哈哈啊哈哈哈"};
private MyFragmentAdapter adapter;
private TabLayout tab;
private ViewPager vp;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
tab= (TabLayout)findViewById(R.id.tab_goods);
vp= (ViewPager) findViewById(R.id.vp_goods);
addTabs(tab);
//添加完所有tab后调用！！
Utils.reflex(tab);
initFragment();
}
private void initFragment() {
BlankFragment blankFragment1=new BlankFragment();
BlankFragment2 blankFragment2=new BlankFragment2();
BlankFragment3 blankFragment3=new BlankFragment3();
BlankFragment3 blankFragment4=new BlankFragment3();
BlankFragment3 blankFragment5=new BlankFragment3();
BlankFragment3 blankFragment6=new BlankFragment3();
list.add(blankFragment1);
list.add(blankFragment2);
list.add(blankFragment3);
list.add(blankFragment4);
list.add(blankFragment5);
list.add(blankFragment6);
adapter=new MyFragmentAdapter(getSupportFragmentManager(),title,list);
vp.setAdapter(adapter);
tab.setupWithViewPager(vp);
}
public void addTabs(TabLayout tabLayout){
tabLayout.addTab(tabLayout.newTab().setText("哈哈哈"));
tabLayout.addTab(tabLayout.newTab().setText("啦啦啦啦啦啦"));
tabLayout.addTab(tabLayout.newTab().setText("嘻"));
tabLayout.addTab(tabLayout.newTab().setText("哗哗哗"));
tabLayout.addTab(tabLayout.newTab().setText("哔哩哔哩"));
tabLayout.addTab(tabLayout.newTab().setText("哈哈哈哈哈哈啊哈哈哈"));
}
}
fragment就不多写了，自己写就行了
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
/**
* A simple {@link Fragment} subclass.
*/
public class BlankFragment extends Fragment {
public BlankFragment() {
// Required empty public constructor
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
return inflater.inflate(R.layout.fragment_blank, container, false);
}
}
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import java.util.List;
/**
* Created by jlj on 2019/2/13.
*/
public class MyFragmentAdapter extends FragmentPagerAdapter {
private String []title;
private List<Fragment> list;
public MyFragmentAdapter(FragmentManager fm, String[] title, List<Fragment> list) {
super(fm);
this.title = title;
this.list = list;
}
@Override
public Fragment getItem(int position) {
return list.get(position);
}
@Override
public int getCount() {
return list.size();
}
@Override
public CharSequence getPageTitle(int position) {
return title[position];
}
}
最后的都是压箱底的，这个utils相当重要
import android.content.Context;
import android.support.design.widget.TabLayout;
import android.view.View;
import android.widget.LinearLayout;
import android.widget.TextView;
import java.lang.reflect.Field;
/**
* Created by jlj on 2019/2/13.
*/
public class Utils {
public static void reflex(final TabLayout tabLayout) {
//了解源码得知 线的宽度是根据 tabView的宽度来设置的
tabLayout.post(new Runnable() {
@Override
public void run() {
try {
//拿到tabLayout的mTabStrip属性
Field mTabStripField = tabLayout.getClass().getDeclaredField("mTabStrip");
mTabStripField.setAccessible(true);
LinearLayout mTabStrip = (LinearLayout) mTabStripField.get(tabLayout);
int dp10 = Utils.dip2px1(tabLayout.getContext(), 10);
for (int i = 0; i < mTabStrip.getChildCount(); i++) {
View tabView = mTabStrip.getChildAt(i);
//拿到tabView的mTextView属性
Field mTextViewField = tabView.getClass().getDeclaredField("mTextView");
mTextViewField.setAccessible(true);
TextView mTextView = (TextView) mTextViewField.get(tabView);
tabView.setPadding(0, 0, 0, 0);
//因为我想要的效果是 字多宽线就多宽，所以测量mTextView的宽度
int width = 0;
width = mTextView.getWidth();
if (width == 0) {
mTextView.measure(0, 0);
width = mTextView.getMeasuredWidth();
}
//设置tab左右间距为10dp 注意这里不能使用Padding 因为源码中线的宽度是根据 tabView的宽度来设置的
LinearLayout.LayoutParams params = (LinearLayout.LayoutParams) tabView.getLayoutParams();
params.width = width;
params.leftMargin = dp10;
params.rightMargin = dp10;
tabView.setLayoutParams(params);
tabView.invalidate();
}
} catch (NoSuchFieldException e) {
e.printStackTrace();
} catch (IllegalAccessException e) {
e.printStackTrace();
}
}
});
}
public static int dip2px1(Context context, float dipValue) {
final float scale = context.getResources().getDisplayMetrics().density;
return (int) (dipValue * scale + 0.5f);
}
}
还有一点需要注意，很多次了，系统的东西一般都会有一个水纹效果，项目中肯定是不需要的，主要是中国人也不喜欢这个，反正我个人也不喜欢，当初因为这个水纹效果，害的我找了很多这个动画，原来是个背景，不需要的朋友，只需要在tablayout布局上添加
app:tabBackground="@null"这个就好了，其实感觉这个水纹效果还是挺不错的，就是中国人没那风情
欢迎加入qq群：490959314 一起探讨Android技术
