1.有关TabLayout的使用网上有很多,关于其只是其宽度的问题目前主流的有以下几种:
1.1利用反射,相关地址,在某些机型有问题,https://blog.csdn.net/u013134391/article/details/70833903;
1.2还有一种也是根据tabTitlte文字的宽度,进行变换指示器的宽度,其相关链接https://stackoverflow.com/questions/40480675/android-tab-layout-wrap-tab-indicator-width-with-respect-to-tab-title
2.这个都不符合我的需求,做类似的效果,如下,要解决的问题是将指示器宽度固定,并且位于灰色线上方,在这里需要注意,不能给tablayout设置样式,如果设置样式,会造成自定义指示器始终与灰色分割线有一定的距离。
这种做法的缺点是指示器没有动画
1.首先定义布局tablayout
<?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"
android:background="#ffffff"
tools:context=".MainActivity">
<android.support.design.widget.TabLayout
android:id="@+id/tab"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabIndicatorHeight="0dp"
android:background="#fff"
app:tabMode="fixed"
app:tabGravity="center"/>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="@color/line_color"/>
<android.support.v4.view.ViewPager
android:id="@+id/vp"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>
2.自定义tablayout布局
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:tools="http://schemas.android.com/tools">
<TextView
android:id="@+id/tab_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TAB"
android:layout_centerInParent="true"
android:textColor="@color/colorPrimary"
android:textSize="16sp"
/>
<View
android:id="@+id/tab_indicator"
android:layout_width="20dp"
android:layout_height="4dp"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"
/>
</RelativeLayout>
3.activity
package com.example.tablayout;
import android.graphics.Typeface;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.content.ContextCompat;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.TextView;
import java.util.ArrayList;
import java.util.List;
import java.util.Objects;
public class MainActivity extends AppCompatActivity implements TabLayout.BaseOnTabSelectedListener {
private TabLayout mTab;
private ViewPager mVp;
private Fragment[] mFragment;
private String[] titles =new String[] {"日历", "资讯"};
private TabAdapter mAdapter;
private int currentPos = 0;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mTab = findViewById(R.id.tab);
mVp = findViewById(R.id.vp);
initFragments();
mAdapter = new TabAdapter(getSupportFragmentManager(), this, titles, mFragment);
mVp.setAdapter(mAdapter);
mTab.setupWithViewPager(mVp);
for (int i = 0; i < mTab.getTabCount(); i++) {
TabLayout.Tab tab = mTab.getTabAt(i);
Objects.requireNonNull(tab).setCustomView(mAdapter.getTabView(i, currentPos));
}
mTab.addOnTabSelectedListener(this);
}
private void initFragments() {
mFragment = new Fragment[]{FirstFragment.newInstance(), SecondFragment.newInstance()};
}
@Override
public void onTabSelected(TabLayout.Tab tab) {
mVp.setCurrentItem(tab.getPosition(), true);
((TextView) Objects.requireNonNull(tab.getCustomView()).findViewById(R.id.tab_title)).setTextColor(ContextCompat.getColor(this, R.color.colorPrimaryDark));
tab.getCustomView().findViewById(R.id.tab_indicator).setVisibility(View.VISIBLE);
((TextView) Objects.requireNonNull(tab.getCustomView()).findViewById(R.id.tab_title)).setTypeface(Typeface.defaultFromStyle(Typeface.BOLD));
tab.getCustomView().findViewById(R.id.tab_indicator).setBackgroundColor(ContextCompat.getColor(this, R.color.colorPrimary));
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
((TextView) Objects.requireNonNull(tab.getCustomView()).findViewById(R.id.tab_title)).setTextColor(ContextCompat.getColor(this, R.color.untab_color));
((TextView) Objects.requireNonNull(tab.getCustomView()).findViewById(R.id.tab_title)).setTypeface(Typeface.defaultFromStyle(Typeface.NORMAL));
tab.getCustomView().findViewById(R.id.tab_indicator).setVisibility(View.INVISIBLE);
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
}
}
4.pagerAdapter的代码如下:
package com.example.tablayout;
import android.content.Context;
import android.graphics.Typeface;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.content.ContextCompat;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.TextView;
public class TabAdapter extends FragmentPagerAdapter {
private Context mContext;
private String[] titles;
private Fragment[] fragments;
public TabAdapter(FragmentManager fm,Context context,String[]titles,Fragment[]fragments) {
super(fm);
this.mContext=context;
this.titles=titles;
this.fragments=fragments;
}
@Override
public Fragment getItem(int i) {
return fragments[i];
}
@Nullable
@Override
public CharSequence getPageTitle(int position) {
return titles[position];
}
@Override
public int getCount() {
return titles.length;
}
public View getTabView(int position,int currentPosition){
View tabView = LayoutInflater.from(mContext).inflate(R.layout.tabview, null);
TextView tabTitle = tabView.findViewById(R.id.tab_title);
tabTitle.setText(getPageTitle(position));
View tabIndicator=tabView.findViewById(R.id.tab_indicator);
if (position == currentPosition) {
tabTitle.setTextColor(ContextCompat.getColor(mContext, R.color.colorPrimary));
tabTitle.setTypeface(Typeface.defaultFromStyle(Typeface.BOLD));
tabIndicator.setBackgroundColor(ContextCompat.getColor(mContext,R.color.colorPrimary));
tabIndicator.setVisibility(View.VISIBLE);
} else {
tabTitle.setTypeface(Typeface.defaultFromStyle(Typeface.NORMAL));
tabIndicator.setVisibility(View.INVISIBLE);
}
return tabView;
}
}
5.对于Fragment创建创建空白面板即可,运行的效果图如下
如有错误不足的地方,还望各位大佬指出