TabLayout自定義選擇背景滑塊
阿新 • • 發佈：2018-12-24
TabLayout是Android 的Material Design包中的一個控制元件，可以和V4包中的ViewPager搭配產生一個聯動的效果。這裡我自定義了一個滑塊能夠跟隨TabLayout進行滑動選擇的SliderLayout。效果見下圖（白色方框）：
下面是MTabLayout的原始碼（之前的程式碼有一些bug，當TabLayout本身進行滑動的時候會和Slider錯開，所以就自定義了一個MTabLayout，並把SliderLayout作為內部類放到MTabLayout）：
import android.content.Context;
import android.graphics.drawable.Drawable;
import 其中比較關鍵的一個類是SliderOnPageChangeListener 這個類繼承的TabLayout.TabLayoutOnPageChangeListener類這個類我們看原始碼（下面）這個是監聽ViewPager滑動選擇的一個介面。我們要做的就是在這個類基礎上進行擴充套件讓SliderLayout也能監聽到ViewPager的滑動。
public static class TabLayoutOnPageChangeListener implements ViewPager.OnPageChangeListener {
private final WeakReference<TabLayout> mTabLayoutRef;
private int mPreviousScrollState;
private int mScrollState;
public TabLayoutOnPageChangeListener(TabLayout tabLayout) {
mTabLayoutRef = new WeakReference<>(tabLayout);
}
@Override
public void onPageScrollStateChanged(int state) {
mPreviousScrollState = mScrollState;
mScrollState = state;
}
@Override
public void onPageScrolled(int position, float positionOffset,
int positionOffsetPixels) {
//省略
}
}
@Override
public void onPageSelected(int position) {
//省略
}
private void reset() {
mPreviousScrollState = mScrollState = SCROLL_STATE_IDLE;
}
}計算每次SliderLayout需要滑動的距離的方法是calculateScrollXForTab(int position, float positionOffset)（詳細看原始碼）根據監聽到的ViewPager滑動進行相關的計算並滑動SliderLayout
應用的時候一定要注意viewPager.setOnPageChangeListener(new SliderLayout.SliderOnPageChangeListener(mTabLayout,layout));要在mTabLayout.setupWithViewPager(viewPager);之後呼叫：
public class MainActivity extends AppCompatActivity {
public static final String TAG = MainActivity.class.getName();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ViewPager viewPager = (ViewPager) findViewById(R.id.vp);
viewPager.setAdapter(new MViewPagerAdapter(getSupportFragmentManager()));
mTabLayout.setupWithViewPager(viewPager);
}
class MViewPagerAdapter extends FragmentPagerAdapter {
public final String[] names = new String[]{"音樂","電影","電視","綜藝","直播","音樂","電影","電視","綜藝","直播"};
public MViewPagerAdapter(FragmentManager fm) {
super(fm);
}
@Override
public Fragment getItem(int position) {
return BlankFragment.newInstance("param1", "param2");
}
@Override
public int getCount() {
return 10;
}
@Override
public CharSequence getPageTitle(int position) {
return names[position];
}
}
}
佈局：
<?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:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<com.example.yyw.waterripple.MTableLayout
android:id="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="@color/cardview_dark_background"
app:tabGravity="center"
app:tabIndicatorColor="#00000000"
app:tabMode="scrollable"
app:tabSelectedTextColor="#ff0000"
app:tabTextColor="#ffffff"/>
<android.support.v4.view.ViewPager
android:id="@+id/vp"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
<declare-styleable name="SliderLayout">
<attr name="slider_pic" format="reference" />
</declare-styleable><?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners
android:topLeftRadius="10dp"
android:topRightRadius="10dp"
android:bottomLeftRadius="10dp"
android:bottomRightRadius="10dp" />
<solid android:color="#ffffff" />
</shape>