Android TabLayout 實(shí)現(xiàn)底部Tab的示例代碼
前言
底部Tab已經(jīng)是一個(gè)應(yīng)用的標(biāo)配了,因?yàn)槭謾C(jī)屏幕大小的限制,使得我們必須去最大化的利用可見的空間。當(dāng)然底部Tab一般為3個(gè)左右,最多不會(huì)超過5個(gè)。
效果圖
下面是我使用TabLayout來實(shí)現(xiàn)的底部Tab,
實(shí)現(xiàn)方式也很簡(jiǎn)單,因?yàn)檫@里沒有“小滑塊”。只需要去處理,Tab的滑動(dòng)和點(diǎn)擊即可。
代碼:
public class CustomBotTabItem { private TabLayout mTabLayout; private ViewPager mViewPager; private Context mContext; //底部Tab標(biāo)題 private final String[] mTitles = {"主頁(yè)", "理財(cái)", "添加", "消息", "我的"}; //返回CustomBotTabItem實(shí)例 public static CustomBotTabItem create() { return TabItemHolder.sCustomTabItem; } //創(chuàng)建CustomBotTabItem實(shí)例 private static class TabItemHolder { private static CustomBotTabItem sCustomTabItem = new CustomBotTabItem(); } //引入布局需要的Context public CustomBotTabItem setContext(Context context) { mContext = context; return this; } //需要自定義的TabLayout public CustomBotTabItem setTabLayout(TabLayout tabLayout) { mTabLayout = tabLayout; return this; } //設(shè)置與TabLayout關(guān)聯(lián)的ViewPager public CustomBotTabItem setViewPager(ViewPager viewPager) { mViewPager = viewPager; return this; } //創(chuàng)建Tab public CustomBotTabItem build() { initTabLayout(); return this; } //初始化Tab private void initTabLayout() { mTabLayout.setupWithViewPager(mViewPager); //第二個(gè)參數(shù)為selector,下同 mTabLayout.getTabAt(0).setCustomView(getTabView(0, R.drawable.home_icon_selector)); mTabLayout.getTabAt(1).setCustomView(getTabView(1, R.drawable.manage_icon_selector)); mTabLayout.getTabAt(2).setCustomView(getTabView(2, R.drawable.add_icon_selector)); mTabLayout.getTabAt(3).setCustomView(getTabView(3, R.drawable.find_icon_selector)); mTabLayout.getTabAt(4).setCustomView(getTabView(4, R.drawable.money_icon_selector)); tabSelectListener(); } //自定義Tab樣式 private View getTabView(final int position, int resId) { final View view = LayoutInflater.from(mContext).inflate(R.layout.bottom_tab_item, null); TextView tvTitle = (TextView) view.findViewById(R.id.id_tv_title); final ImageView ivTitle = (ImageView) view.findViewById(R.id.id_iv_title); ivTitle.setImageResource(resId); tvTitle.setText(mTitles[position]); //默認(rèn)第一個(gè)tab選中,設(shè)置字體為選中色 if (position == 0) { tvTitle.setTextColor(Color.parseColor("#4192e3")); } else { tvTitle.setTextColor(Color.parseColor("#262a3b")); } //點(diǎn)擊Tab切換 view.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { mViewPager.setCurrentItem(position); } }); return view; } //Tab監(jiān)聽 private void tabSelectListener() { mTabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() { @Override public void onTabSelected(TabLayout.Tab tab) { changeTabStatus(tab, true); } @Override public void onTabUnselected(TabLayout.Tab tab) { changeTabStatus(tab, false); } @Override public void onTabReselected(TabLayout.Tab tab) { } }); } //切換Tab文字是否選中的的顏色 private void changeTabStatus(TabLayout.Tab tab, boolean selected) { View view = tab.getCustomView(); if (view == null) { return; } TextView tvTitle = (TextView) view.findViewById(R.id.id_tv_title); if (selected) { tvTitle.setTextColor(Color.parseColor("#4192e3")); } else { tvTitle.setTextColor(Color.parseColor("#262a3b")); } } }
Activity 代碼:
public class BottomTabLayoutActivity extends AppCompatActivity { private TabLayout mTabLayout; private ViewPager mViewPager; private List<Fragment> mFragmentList; @Override protected void onCreate(@Nullable Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_bot_tab_layout); findView(); initFragmentList(); setVpAdapter(); CustomBotTabItem item = CustomBotTabItem.create(); item.setContext(this) .setViewPager(mViewPager) .setTabLayout(mTabLayout) .build(); } //findViewById private void findView() { mTabLayout = (TabLayout) findViewById(R.id.id_tab_layout); mViewPager = (ViewPager) findViewById(R.id.id_vp); } //初始化需要的Fragment private void initFragmentList() { mFragmentList = new ArrayList<>(); mFragmentList.add(TabFragment.getInstance("主頁(yè)")); mFragmentList.add(TabFragment.getInstance("理財(cái)")); mFragmentList.add(TabFragment.getInstance("添加")); mFragmentList.add(TabFragment.getInstance("消息")); mFragmentList.add(TabFragment.getInstance("我的")); } //設(shè)置ViewPager的Adapter private void setVpAdapter() { mViewPager.setAdapter(new FragmentAdapter(getSupportFragmentManager(), mFragmentList, this)); } }
Activity.xml
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout 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.support.design.widget.TabLayout android:id="@+id/id_tab_layout" android:layout_width="match_parent" android:layout_height="70dp" android:layout_alignParentBottom="true" android:background="#fff" android:fillViewport="false" app:layout_scrollFlags="scroll" app:tabIndicatorHeight="0dp" app:tabMode="fixed" > </android.support.design.widget.TabLayout> <android.support.v4.view.ViewPager android:id="@+id/id_vp" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_above="@+id/id_tab_layout" /> </RelativeLayout>
好了,具體思路、代碼就這么多了,其它需要的文件都比較簡(jiǎn)單,自己添加一下吧。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Android 仿微信底部漸變Tab效果
- Android 使用FragmentTabHost實(shí)現(xiàn)底部菜單功能
- Android中修改TabLayout底部導(dǎo)航條Indicator長(zhǎng)短的方法
- Android TabWidget底部顯示效果
- Android編程實(shí)現(xiàn)將tab選項(xiàng)卡放在屏幕底部的方法
- Android中TabLayout+ViewPager 簡(jiǎn)單實(shí)現(xiàn)app底部Tab導(dǎo)航欄
- Android design包自定義tablayout的底部導(dǎo)航欄的實(shí)現(xiàn)方法
- 關(guān)注Ionic底部導(dǎo)航按鈕tabs在android情況下浮在上面的處理
- Android仿微信底部實(shí)現(xiàn)Tab選項(xiàng)卡切換效果
- android 選項(xiàng)卡(TabHost)如何放置在屏幕的底部
相關(guān)文章
Android開發(fā)Popwindow仿微信右上角下拉菜單實(shí)例代碼
這篇文章主要介紹了Popwindow仿微信右上角下拉菜單實(shí)例代碼的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值,感興趣的朋友一起看看吧2016-10-10解決android studio 打包發(fā)現(xiàn)generate signed apk 消失不見問題
這篇文章主要介紹了解決android studio 打包發(fā)現(xiàn)generate signed apk 消失不見問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-09-09Android 簡(jiǎn)單跳轉(zhuǎn)頁(yè)面工具的實(shí)例詳解
這篇文章主要介紹了Android 簡(jiǎn)單跳轉(zhuǎn)頁(yè)面工具的實(shí)例詳解,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-03-03Android依據(jù)名字通過反射獲取在drawable中的圖片
依據(jù)圖片的名字,通過反射獲取其在drawable中的ID,在根據(jù)此ID顯示圖片,具體實(shí)現(xiàn)如下,感興趣的朋友可以參考下哈2013-06-06AndroidStudio安全管理簽名文件keystroe和簽名密碼(星空武哥)
我們?cè)谑褂肁ndroidStudio進(jìn)行release版的apk簽名的時(shí)候,往往都是將簽名文件keystore放在項(xiàng)目中,密碼寫在build.gradle中,keystore和密碼就隨著代碼上傳到了Git倉(cāng)庫(kù)中了,這樣往往很不安全,因?yàn)檫@樣被人獲取2017-09-09Flutter簡(jiǎn)潔實(shí)用的圖片編輯器的實(shí)現(xiàn)
本文主要介紹了Flutter簡(jiǎn)潔實(shí)用的圖片編輯器的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-02-02Android自定義View實(shí)現(xiàn)時(shí)鐘效果
這篇文章主要為大家詳細(xì)介紹了Android自定義View實(shí)現(xiàn)時(shí)鐘效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-01-01Android自定義ViewGroup嵌套與交互實(shí)現(xiàn)幕布全屏滾動(dòng)
這篇文章主要為大家介紹了Android自定義ViewGroup嵌套與交互實(shí)現(xiàn)幕布全屏滾動(dòng)效果示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-01-01Android使用SQLite數(shù)據(jù)庫(kù)的簡(jiǎn)單實(shí)例
這篇文章主要介紹了Android使用SQLite數(shù)據(jù)庫(kù)的簡(jiǎn)單實(shí)例,有需要的朋友可以參考一下2013-12-12