1.結(jié)合ViewPager使用
這是最常見的用法了，實(shí)現(xiàn)也比較簡(jiǎn)單。
image
布局文件：
<android.support.design.widget.TabLayout
android:id="@+id/tab_book"
android:layout_width="match_parent"
android:layout_height="38dp"
app:tabBackground="@drawable/ripple_tab_bg"
app:tabIndicatorColor="@color/colorTheme"
app:tabSelectedTextColor="@color/colorTheme"
app:tabTextColor="@color/colorTabText" />
<android.support.v4.view.ViewPager
android:id="@+id/vp_book"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v4.view.ViewPager>
對(duì)應(yīng)的Activity頁(yè)面：
public class WanFragment extends BaseFragment<NoViewModel,FragmentBookBinding> {
private ArrayList<String> mTitleList = new ArrayList<>(3);
private ArrayList<Fragment> mFragments = new ArrayList<>(3);
@Override
public void onActivityCreated(@Nullable Bundle savedInstanceState) {
super.onActivityCreated(savedInstanceState);
showLoading();
initFragmentList();
MyFragmentPagerAdapter myAdapter = new MyFragmentPagerAdapter(getChildFragmentManager(), mFragments, mTitleList);
bindingView.vpBook.setAdapter(myAdapter);
// 左右預(yù)加載頁(yè)面的個(gè)數(shù)
bindingView.vpBook.setOffscreenPageLimit(2);
myAdapter.notifyDataSetChanged();
bindingView.tabBook.setTabMode(TabLayout.MODE_FIXED);
bindingView.tabBook.setupWithViewPager(bindingView.vpBook);
showContentView();
}
@Override
public int setContent() {
return R.layout.fragment_book;
}
private void initFragmentList() {
mTitleList.clear();
mTitleList.add("玩安卓");
mTitleList.add("知識(shí)體系");
mTitleList.add("導(dǎo)航數(shù)據(jù)");
mFragments.add(BannerFragment.newInstance());
mFragments.add(TreeFragment.newInstance());
mFragments.add(NaviFragment.newInstance());
}
}
設(shè)置后就可以達(dá)到切換滑動(dòng)的效果在孝。
2.點(diǎn)擊滑動(dòng)選中崭篡，類似RadioGroup的效果
image
不過它與RadioGroup不同在于它有下劃線可以滑動(dòng)，更動(dòng)感...浸须，如果產(chǎn)品經(jīng)理要求這樣實(shí)現(xiàn)甲锡，就可以派上用場(chǎng)了。
布局文件：
<android.support.design.widget.TabLayout
android:id="@+id/tl_search"
android:layout_width="match_parent"
android:layout_height="30dp"
android:background="@color/colorTheme"
app:tabGravity="center"
app:tabIndicatorColor="@color/colorWhite"
app:tabMode="fixed"
app:tabSelectedTextColor="@color/colorWhite"
app:tabTextAppearance="@style/MyTabLayoutTextAppearance"
app:tabTextColor="@color/colorWhiteHalf">
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="玩安卓"
android:textColor="@color/colorWhite"
android:textSize="12sp" />
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="干貨 | 安卓"
android:textColor="@color/colorWhite"
android:textSize="12sp" />
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="干貨 | 全部"
android:textColor="@color/colorWhite"
android:textSize="12sp" />
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="網(wǎng)頁(yè)"
android:textColor="@color/colorWhite"
android:textSize="12sp" />
</android.support.design.widget.TabLayout>
當(dāng)然也可以在Activit動(dòng)態(tài)添加羽戒，其中的一些顏色設(shè)置等就不細(xì)說了~：
for (String bean : list) {
MyTabLayout.Tab tab = binding.tlSearch.newTab();
tab.setText(bean.getName());
binding.tlSearch.addTab(tab);
}
然后再監(jiān)聽點(diǎn)擊的時(shí)候做處理：
binding.tlSearch.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
// 選中 邏輯操作 (再次點(diǎn)擊不會(huì)觸發(fā))
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
}
});
3.點(diǎn)擊滑動(dòng)到屏幕中央缤沦，并再次點(diǎn)擊可取消
image
這樣的效果很實(shí)用，很多App都會(huì)有這樣的效果易稠，以前我都是用HorizontalScrollView來實(shí)現(xiàn)的缸废，設(shè)置點(diǎn)擊的item滑動(dòng)到屏幕中央。
后來想想TabLayout繼承自HorizontalScrollView驶社，選中也會(huì)自動(dòng)滾動(dòng)并居中企量，于是就選用了它來實(shí)現(xiàn)，相對(duì)于直接使用HorizontalScrollView代碼量更少亡电。
布局文件：
<android.support.design.widget.TabLayout
android:id="@+id/tl_tag"
android:layout_width="match_parent"
android:layout_height="40dp"
app:tabIndicatorHeight="0dp"
app:tabMode="scrollable"
app:tabSelectedTextColor="@color/color_theme" />
Activity里控制：
// 添加自定義Tab
for (int i = 0; i < result.size(); i++) {
TabLayout.Tab tab = bindingView.tlTag.newTab();
bindingView.tlTag.addTab(tab.setCustomView(getTabView(result.get(i).getName())));
}
// 默認(rèn) 手動(dòng)設(shè)置 position=0的Tab不選中
if (bindingView.tlTag.getTabAt(0) != null
&& bindingView.tlTag.getTabAt(0).getCustomView() != null) {
bindingView.tlTag.getTabAt(0).getCustomView().setSelected(false);
}
// 添加監(jiān)聽
addTagListener();
// 哪個(gè)tag被選擇過
private int tagSelectPosition = 0;
// 是否被選中
private boolean tagSelect = false;
// 主要處理取消選中的狀態(tài)
private void addTagListener() {
bindingView.tlTag.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
// // 切換到此tab届巩，則設(shè)置已選中position和選中的狀態(tài)
tagSelectPosition = tab.getPosition();
tagSelect = true;
// do something..
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
// // Tab再次被點(diǎn)擊會(huì)走這里
// 之前手動(dòng) [取消] 的tab角標(biāo) 初始值為0
if (tagSelectPosition == tab.getPosition()) {
if (tagSelect) {
// tab之前被選中，則手動(dòng)取消
if (bindingView.tlTag.getTabAt(tab.getPosition()) != null
&& bindingView.tlTag.getTabAt(tab.getPosition()).getCustomView() != null) {
tagSelectPosition = tab.getPosition();
tagSelect = false;
bindingView.tlTag.getTabAt(tab.getPosition()).getCustomView().setSelected(false);
// do something..
}
} else {
// tab之前被取消份乒，則手動(dòng)將其選中
if (bindingView.tlTag.getTabAt(tab.getPosition()) != null
&& bindingView.tlTag.getTabAt(tab.getPosition()).getCustomView() != null) {
tagSelectPosition = tab.getPosition();
tagSelect = true;
// do something..
}
}
} else {
// 一般不會(huì)觸發(fā)恕汇，以防萬一
if (bindingView.tlTag.getTabAt(tab.getPosition()) != null
&& bindingView.tlTag.getTabAt(tab.getPosition()).getCustomView() != null) {
tagSelectPosition = tab.getPosition();
tagSelect = true;
// do something..
}
}
}
});
}
相關(guān)代碼
第一部分：WanFragment.java
第二部分：SearchActivity.java
完整Demo項(xiàng)目：https://github.com/youlookwhat/CloudReader
引用：http://www.reibang.com/p/46ca8d4f93e7
