手把手教你快速实现Android底部导航栏
16lz
2021-01-24
手把手教你快速实现Android底部导航栏
主流的安卓APP,首页经常会采用底部导航栏切换的效果。针对这种情况,封装成TabView工具类,方便大家使用。
正文大象哥哥爱撸码的博客地址:
http://www.jianshu.com/p/9dc6d7078b5e
一、界面分析
-
上图的效果,我们可以判断出界面是由viewpager+fragment+底部Tab实现。
二、开始撸码
只贴出了核心代码,具体请查看我的GitHub,记得点颗✨哦!
1. 实现底部的Tab,自定义TabContainerView 继承 RelativeLayout,这是我们最终封装的View工具类。其内部主要由viewpager和底部的TabHost类组成。
ViewPager初始化
contentViewPager = new ViewPager(context); LayoutParams contentVpLp = new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT); contentVpLp.addRule(RelativeLayout.ABOVE, R.id.divide_tab); contentViewPager.setLayoutParams(contentVpLp); contentViewPager.setId(R.id.viewpager_tab); contentViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() { @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { }
· @Override public void onPageSelected(int position) { tabHost.onChangeTabHostStatus(position); Tab selectedTab = tabHost.getTabForIndex(position); if (onTabSelectedListener != null && selectedTab != null) onTabSelectedListener.onTabSelected(selectedTab); }
@Override public void onPageScrollStateChanged(int state) { } }); addView(contentViewPager);
底部Tab是一个自定义的横向布局LinearLayout,动态添加多个宽度等分的Tab按钮
for (int i = 0; i < count; i++) { if((i+1)==hasMsgIndex){ hasMsg=true; } Tab tab = new Tab(context, textArray[i], textSize, textColor, selectedTextColor,drawablePadding,iconWidth,iconHeight, iconImageArray[i], selectedIconImageArray[i], i,hasMsg); addTab(tab);}
tab按钮的实现
rootView = new LinearLayout(context); childView=new RelativeLayout(context); LinearLayout.LayoutParams rootViewLp = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT); rootViewLp.weight = 1; rootView.setOrientation(LinearLayout.VERTICAL); rootView.setPadding(0,20,0,20); rootView.setLayoutParams(rootViewLp); textTextView = new TextView(context); iconImageView = new ImageView(context); /** * icon view */ iconImageView.setImageResource(iconImage); RelativeLayout.LayoutParams iconParam=new RelativeLayout.LayoutParams(iconWidth==0? ViewGroup.LayoutParams.WRAP_CONTENT:iconWidth,iconHeight==0? ViewGroup.LayoutParams.WRAP_CONTENT:iconHeight); iconParam.addRule(RelativeLayout.CENTER_HORIZONTAL); iconImageView.setLayoutParams(iconParam); iconImageView.setId(index+1); childView.addView(iconImageView); /** * text view */ textTextView.setText(text); textTextView.setTextColor(textColor); textTextView.setTextSize(TypedValue.COMPLEX_UNIT_PX,textSize); textTextView.setPadding(0,drawablePadding,0,0); RelativeLayout.LayoutParams txParam=new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT); txParam.addRule(RelativeLayout.BELOW,childView.getChildAt(0).getId()); txParam.addRule(RelativeLayout.CENTER_HORIZONTAL); textTextView.setLayoutParams(txParam); childView.addView(textTextView); if(hasMsg){ ImageView circleView=new ImageView(context); RelativeLayout.LayoutParams param = new RelativeLayout.LayoutParams(30,30); param.addRule(RelativeLayout.RIGHT_OF,iconImageView.getId()); circleView.setBackgroundResource(R.drawable.common_red_round); circleView.setLayoutParams(param); childView.addView(circleView); } RelativeLayout.LayoutParams childParam=new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT); childView.setLayoutParams(childParam); rootView.addView(childView);
三、使用方法
-
布局中引用
"@+id/tab_container" android:layout_width="match_parent" android:layout_height="match_parent" app:tabTextColor="@color/bottom_icon_up" app:selectedTextColor="@color/common_red" app:tabTextSize="12sp" app:drawablePadding="1dp" app:iconHeight="22dp" app:iconWidth="22dp" app:divideLineColor="@color/common_line_two" app:divideLineHeight="0.3dp"/>
-
ACTIVITY中引用
TabContainerView tabContainerView = (TabContainerView) findViewById(R.id.tab_container); MainViewAdapter mainViewAdapter=new MainViewAdapter(getSupportFragmentManager(),
new Fragment[] {new TabFragment1(), new TabFragment2(),new TabFragment3(), new TabFragment4(),new TabFragment5()}); mainViewAdapter.setHasMsgIndex(5); tabContainerView.setAdapter(mainViewAdapter); tabContainerView.setOnTabSelectedListener(new OnTabSelectedListener() {
@Override public void onTabSelected(Tab tab) { } });
-
布局自定义属性介绍
tabTextSize:导航按钮字体大小drawablePadding:导航图片与文字的间距iconHeight: 导航图标高度iconWidth:导航图标宽度divideLineColor:导航栏顶部分割线颜色divideLineHeight:导航栏顶部分割线高度
-
设置消息提醒(导航按钮旁边的红点)
setHasMsgIndex(5); //第五个导航按钮有消息提醒
demo地址:
https://github.com/Louis2014/TabView
博客地址:
http://www.jianshu.com/p/9dc6d7078b5e
更多相关文章
- 绘图机制
- Android:FlexboxLayout你值得拥有的流布局助力
- 浅谈Android布局样式
- Android(安卓)入门第四讲04-小结-RecyclerView(回顾)+Context(介绍
- 深入了解View(四)—— LayoutInflater原理及View测量/布局/绘制总
- android自定义checkBox的样式
- 【Android(安卓)界面效果10】Android中View,ViewGroup,Window之
- android 判断横竖屏问题的详解
- Android自动化测试学习之robotium笔记