Android TabLayout 实现底部Tab的示例代码
前言
底部Tab已经是一个应用的标配了,因为手机屏幕大小的限制,使得我们必须去最大化的利用可见的空间。当然底部Tab一般为3个左右,最多不会超过5个。
效果图
下面是我使用TabLayout来实现的底部Tab,
实现方式也很简单,因为这里没有“小滑块”。只需要去处理,Tab的滑动和点击即可。
代码:
public class CustomBotTabItem { private TabLayout mTabLayout; private ViewPager mViewPager; private Context mContext; //底部Tab标题 private final String[] mTitles = {"主页", "理财", "添加", "消息", "我的"}; //返回CustomBotTabItem实例 public static CustomBotTabItem create() { return TabItemHolder.sCustomTabItem; } //创建CustomBotTabItem实例 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; } //设置与TabLayout关联的ViewPager public CustomBotTabItem setViewPager(ViewPager viewPager) { mViewPager = viewPager; return this; } //创建Tab public CustomBotTabItem build() { initTabLayout(); return this; } //初始化Tab private void initTabLayout() { mTabLayout.setupWithViewPager(mViewPager); //第二个参数为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]); //默认第一个tab选中,设置字体为选中色 if (position == 0) { tvTitle.setTextColor(Color.parseColor("#4192e3")); } else { tvTitle.setTextColor(Color.parseColor("#262a3b")); } //点击Tab切换 view.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { mViewPager.setCurrentItem(position); } }); return view; } //Tab监听 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("主页")); mFragmentList.add(TabFragment.getInstance("理财")); mFragmentList.add(TabFragment.getInstance("添加")); mFragmentList.add(TabFragment.getInstance("消息")); mFragmentList.add(TabFragment.getInstance("我的")); } //设置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>
好了,具体思路、代码就这么多了,其它需要的文件都比较简单,自己添加一下吧。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- Android 仿微信底部渐变Tab效果
- Android 使用FragmentTabHost实现底部菜单功能
- Android中修改TabLayout底部导航条Indicator长短的方法
- Android TabWidget底部显示效果
- Android编程实现将tab选项卡放在屏幕底部的方法
- Android中TabLayout+ViewPager 简单实现app底部Tab导航栏
- Android design包自定义tablayout的底部导航栏的实现方法
- 关注Ionic底部导航按钮tabs在android情况下浮在上面的处理
- Android仿微信底部实现Tab选项卡切换效果
- android 选项卡(TabHost)如何放置在屏幕的底部
相关文章
Android开发Popwindow仿微信右上角下拉菜单实例代码
这篇文章主要介绍了Popwindow仿微信右上角下拉菜单实例代码的相关资料,非常不错具有参考借鉴价值,感兴趣的朋友一起看看吧2016-10-10解决android studio 打包发现generate signed apk 消失不见问题
这篇文章主要介绍了解决android studio 打包发现generate signed apk 消失不见问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09Android依据名字通过反射获取在drawable中的图片
依据图片的名字,通过反射获取其在drawable中的ID,在根据此ID显示图片,具体实现如下,感兴趣的朋友可以参考下哈2013-06-06AndroidStudio安全管理签名文件keystroe和签名密码(星空武哥)
我们在使用AndroidStudio进行release版的apk签名的时候,往往都是将签名文件keystore放在项目中,密码写在build.gradle中,keystore和密码就随着代码上传到了Git仓库中了,这样往往很不安全,因为这样被人获取2017-09-09Android自定义ViewGroup嵌套与交互实现幕布全屏滚动
这篇文章主要为大家介绍了Android自定义ViewGroup嵌套与交互实现幕布全屏滚动效果示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-01-01
最新评论