TabLayout頂部導航根據textview長度決定下劃線長度
阿新 • • 發佈：2019-02-13
struct 自己 flex ext.get exc orien andro http pat
廢話不多說，雖然很簡單，但我還是想記錄一下這美好的時刻
效果就不上了，因為我是真機測試的，也懶得搞這個
首先需要一個依賴，當然，這個依賴跟之前底部導航一樣，都需要選擇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"這個就好了，其實感覺這個水紋效果還是挺不錯的，就是中國人沒那風情
TabLayout頂部導航根據textview長度決定下劃線長度