安卓实现首页底部导航菜单中间图标凸起效果

效果图
1，Activity代码如下：

public class ThirdActivity extends BaseActivity {@BindView(R.id.fl_layout)FrameLayout flLayout;@BindView(R.id.radioGroup)RadioGroup radioGroup;@BindView(R.id.rb_home)RadioButton rbHome;@BindView(R.id.rb_pond)RadioButton rbPond;@BindView(R.id.rbAdd)ImageView rbAdd;  // 中间凸起的图标@BindView(R.id.rb_message)RadioButton rbMessage;@BindView(R.id.rb_me)RadioButton rbMe;@Overrideprotected int setLayout() {return R.layout.activity_third;}@Overrideprotected void initView() {initTabIcon();// 设置默认选中首页rbHome.setChecked(true);}@Overrideprotected void setListener() {radioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {@Overridepublic void onCheckedChanged(RadioGroup group, @IdRes int checkedId) {switch (checkedId){// 闲鱼case R.id.rb_home:break;// 鱼塘case R.id.rb_pond:break;// 消息case R.id.rb_message:break;// 我的case R.id.rb_me:break;default:break;}}});// 中间凸起图标的点击rbAdd.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {ToastUtil.ToastShow("点击了中间按钮");}});}private void initTabIcon() {// 使用radioButton时，会遇到无法设置drawable大小的问题，xml没法解决，那么我们可以通过java代码来动态的设置Drawable dbHome = getResources().getDrawable(R.drawable.selector_home);// 这个四参数指的是drawable将在被绘制在canvas的哪个矩形区域内,// 下面的代码会将drawable绘制在canvas内部(0, 0, 40, 40)表示的矩形区内（这个矩形区域的坐标是以canvas左上角为坐标原点的）// 单位为像素pxdbHome.setBounds(0, 0, DensityUtil.dp2px(20), DensityUtil.dp2px(20));rbHome.setCompoundDrawables(null, dbHome, null, null);Drawable dbPond = getResources().getDrawable(R.drawable.selector_pond);dbPond.setBounds(0, 0, DensityUtil.dp2px(20), DensityUtil.dp2px(20));rbPond.setCompoundDrawables(null, dbPond, null, null);Drawable dbMsg = getResources().getDrawable(R.drawable.selector_message);dbMsg.setBounds(0, 0, DensityUtil.dp2px(20), DensityUtil.dp2px(20));rbMessage.setCompoundDrawables(null, dbMsg, null, null);Drawable dbMe = getResources().getDrawable(R.drawable.selector_person);dbMe.setBounds(0, 0, DensityUtil.dp2px(20), DensityUtil.dp2px(20));rbMe.setCompoundDrawables(null, dbMe, null, null);}
}

2，布局文件：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"android:clipChildren="false"android:orientation="vertical"tools:context=".mvp.activity.ThirdActivity"><FrameLayoutandroid:id="@+id/fl_layout"android:layout_width="match_parent"android:layout_height="0dp"android:layout_weight="1" /><Viewandroid:layout_width="match_parent"android:layout_height="0.3dp"android:background="#33666666" /><RadioGroupandroid:id="@+id/radioGroup"android:layout_width="match_parent"android:layout_height="56dp"android:layout_gravity="bottom|center"android:background="#eee"android:clipChildren="false"android:gravity="center"android:orientation="horizontal"><RadioButtonandroid:id="@+id/rb_home"android:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"android:background="@null"android:button="@null"android:drawablePadding="6dp"android:gravity="center"android:padding="5dp"android:text="闲鱼"android:textSize="13sp"android:textColor="@drawable/navigator_color_selector" /><RadioButtonandroid:id="@+id/rb_pond"android:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"android:background="@null"android:button="@null"android:drawablePadding="6dp"android:gravity="center"android:padding="5dp"android:text="鱼塘"android:textSize="13sp"android:textColor="@drawable/navigator_color_selector" /><!-- 这里直接给其设置高度 让其超过父亲布局的56dp--><LinearLayoutandroid:gravity="center_horizontal"android:orientation="vertical"android:layout_width="0dp"android:layout_weight="1"android:layout_height="110dp"><ImageViewandroid:id="@+id/rbAdd"android:layout_width="55dp"android:layout_height="55dp"android:src="@drawable/comui_tab_post" /><TextViewandroid:textColor="@color/black"android:text="发布"android:padding="5dp"android:textSize="13sp"android:layout_width="wrap_content"android:layout_height="wrap_content" /></LinearLayout><RadioButtonandroid:id="@+id/rb_message"android:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"android:background="@null"android:button="@null"android:drawablePadding="6dp"android:gravity="center"android:padding="5dp"android:text="消息"android:textSize="13sp"android:textColor="@drawable/navigator_color_selector" /><RadioButtonandroid:id="@+id/rb_me"android:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"android:background="@null"android:button="@null"android:drawablePadding="6dp"android:gravity="center"android:padding="5dp"android:text="我的"android:textSize="13sp"android:textColor="@drawable/navigator_color_selector" /></RadioGroup>
</LinearLayout>

以上效果适用于点击了首页中间图标弹出菜单项以及跳转页面的场景，如果是需要实现和其他Tab一样的功能，即点击在当前页面切换到对应的子页面的话，就不是很适合了。

效果图
1，布局文件

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"android:clipChildren="false"android:orientation="vertical"tools:context=".mvp.activity.ThirdActivity"><FrameLayoutandroid:id="@+id/fl_layout"android:layout_width="match_parent"android:layout_height="0dp"android:layout_weight="1" /><Viewandroid:layout_width="match_parent"android:layout_height="0.3dp"android:background="#33666666" /><LinearLayoutandroid:layout_width="match_parent"android:layout_height="52dp"android:orientation="horizontal"android:background="#eee"android:gravity="center"><LinearLayoutandroid:id="@+id/ll_tab_one"android:layout_width="0dp"android:layout_weight="1"android:layout_height="match_parent"android:orientation="vertical"android:gravity="center"><ImageViewandroid:id="@+id/iv_tab_one"android:layout_width="23dp"android:layout_height="23dp"android:src="@drawable/comui_tab_home"/><TextViewandroid:id="@+id/tv_tab_one"android:layout_width="wrap_content"android:layout_height="wrap_content"android:textColor="#000"android:textSize="13sp"android:padding="5dp"android:text="闲鱼"/></LinearLayout><LinearLayoutandroid:id="@+id/ll_tab_two"android:layout_width="0dp"android:layout_weight="1"android:layout_height="match_parent"android:orientation="vertical"android:gravity="center"><ImageViewandroid:id="@+id/iv_tab_two"android:layout_width="23dp"android:layout_height="23dp"android:src="@drawable/comui_tab_pond"/><TextViewandroid:id="@+id/tv_tab_two"android:layout_width="wrap_content"android:layout_height="wrap_content"android:textColor="#000"android:textSize="13sp"android:padding="5dp"android:text="鱼塘"/></LinearLayout><LinearLayoutandroid:id="@+id/ll_tab_three"android:gravity="center_horizontal"android:orientation="vertical"android:layout_width="0dp"android:layout_weight="1"android:layout_height="110dp"><ImageViewandroid:id="@+id/iv_tab_three"android:layout_width="55dp"android:layout_height="55dp"android:src="@drawable/comui_tab_post2" /><TextViewandroid:id="@+id/tv_tab_three"android:text="发布"android:padding="5dp"android:textSize="13sp"android:textColor="#000"android:layout_width="wrap_content"android:layout_height="wrap_content" /></LinearLayout><LinearLayoutandroid:id="@+id/ll_tab_four"android:layout_width="0dp"android:layout_weight="1"android:layout_height="match_parent"android:orientation="vertical"android:gravity="center"><ImageViewandroid:id="@+id/iv_tab_four"android:layout_width="23dp"android:layout_height="23dp"android:src="@drawable/comui_tab_message"/><TextViewandroid:id="@+id/tv_tab_four"android:layout_width="wrap_content"android:layout_height="wrap_content"android:textColor="#000"android:textSize="13sp"android:padding="5dp"android:text="消息"/></LinearLayout><LinearLayoutandroid:id="@+id/ll_tab_five"android:layout_width="0dp"android:layout_weight="1"android:layout_height="match_parent"android:orientation="vertical"android:gravity="center"><ImageViewandroid:id="@+id/iv_tab_five"android:layout_width="23dp"android:layout_height="23dp"android:src="@drawable/comui_tab_person"/><TextViewandroid:id="@+id/tv_tab_five"android:layout_width="wrap_content"android:layout_height="wrap_content"android:textColor="#000"android:textSize="13sp"android:padding="5dp"android:text="我的"/></LinearLayout></LinearLayout></LinearLayout>

android:clipChildren="false"属性允许子视图超出父视图的范围，但是别忘记设置在父视图中（上述高度为52的布局）设置android:gravity=“center”，防止设置了却不生效。

2，Activity的代码：

public class ThirdActivity extends BaseActivity {@BindView(R.id.fl_layout)FrameLayout flLayout;@BindView(R.id.iv_tab_one)ImageView ivTabOne;@BindView(R.id.tv_tab_one)TextView tvTabOne;@BindView(R.id.iv_tab_two)ImageView ivTabTwo;@BindView(R.id.tv_tab_two)TextView tvTabTwo;@BindView(R.id.iv_tab_three)ImageView ivTabThree;@BindView(R.id.tv_tab_three)TextView tvTabThree;@BindView(R.id.iv_tab_four)ImageView ivTabFour;@BindView(R.id.tv_tab_four)TextView tvTabFour;@BindView(R.id.iv_tab_five)ImageView ivTabFive;@BindView(R.id.tv_tab_five)TextView tvTabFive;private ArrayList<Fragment> fragments;private FragmentTabAdapter tabAdapter;@Overrideprotected int setLayout() {return R.layout.activity_third;}@Overrideprotected void initView() {fragments = new ArrayList<>();fragments.add(new Afragment());fragments.add(new Bfragment());fragments.add(new Cfragment());fragments.add(new Dfragment());fragments.add(new Efragment());tabAdapter = new FragmentTabAdapter(this, fragments, R.id.fl_layout);// 默认选中首页tvTabOne.setTextColor(getResources().getColor(R.color.colorPrimary));ivTabOne.setImageResource(R.drawable.comui_tab_home_selected);}@OnClick({R.id.ll_tab_one,R.id.ll_tab_two, R.id.ll_tab_three, R.id.ll_tab_four, R.id.ll_tab_five})public void onClicked(View view) {switch (view.getId()) {case R.id.ll_tab_one:tabAdapter.setCurrentFragment(0);break;case R.id.ll_tab_two:tabAdapter.setCurrentFragment(1);break;case R.id.ll_tab_three:tabAdapter.setCurrentFragment(2);break;case R.id.ll_tab_four:tabAdapter.setCurrentFragment(3);break;case R.id.ll_tab_five:tabAdapter.setCurrentFragment(4);break;}}@Overrideprotected void setListener() {tabAdapter.setOnTabChangeListener(new FragmentTabAdapter.OnTabChangeListener() {@Overridepublic void OnTabChanged(int index) {tvTabOne.setTextColor(getResources().getColor(R.color.black));tvTabTwo.setTextColor(getResources().getColor(R.color.black));tvTabThree.setTextColor(getResources().getColor(R.color.black));tvTabFour.setTextColor(getResources().getColor(R.color.black));tvTabFive.setTextColor(getResources().getColor(R.color.black));ivTabOne.setImageResource(R.drawable.comui_tab_home);ivTabTwo.setImageResource(R.drawable.comui_tab_pond);ivTabThree.setImageResource(R.drawable.comui_tab_post2);ivTabFour.setImageResource(R.drawable.comui_tab_message);ivTabFive.setImageResource(R.drawable.comui_tab_person);switch (index) {case 0:tvTabOne.setTextColor(getResources().getColor(R.color.colorPrimary));ivTabOne.setImageResource(R.drawable.comui_tab_home_selected);break;case 1:tvTabTwo.setTextColor(getResources().getColor(R.color.colorPrimary));ivTabTwo.setImageResource(R.drawable.comui_tab_pond_selected);break;case 2:tvTabThree.setTextColor(getResources().getColor(R.color.colorPrimary));ivTabThree.setImageResource(R.drawable.comui_tab_post);break;case 3:tvTabFour.setTextColor(getResources().getColor(R.color.colorPrimary));ivTabFour.setImageResource(R.drawable.comui_tab_message_selected);break;case 4:tvTabFive.setTextColor(getResources().getColor(R.color.colorPrimary));ivTabFive.setImageResource(R.drawable.comui_tab_person_selected);break;}}});}}

上述列出主要的类，具体的其他类及图片素材见源码：https://github.com/gpf0205/ModuleTestDemo

安卓实现首页底部导航菜单中间图标凸起效果相关推荐

UI实用素材模板|app底部导航栏的图标可临摹素材，教你分析！
图标在产品中的应用非常重要,不同位置的图标有不同的设计思路. 底部导航栏图标重要性底部导航栏的图标是路牌,承担着指路的作用,给用户指明进入产品后可以分别通往什么页面.早期的底部导航栏是单一的指路功能 ...
android底部导航栏中间凸起,Flutter学习笔记--仿闲鱼底部导航栏带有中间凸起图标...
仿闲鱼底部导航栏带有中间凸起图标刚接触Flutter,需要实现一个类似闲鱼APP的底部导航栏的实现要实现的效果如图: 好的,下面开始上代码了: 一. 在main.dart文件中,定义APP的入口信 ...
闲鱼底部tab android,Flutter学习笔记--仿闲鱼底部导航栏带有中间凸起图标
image 霸图镇楼仿闲鱼底部导航栏带有中间凸起图标需求情景: 需要实现一个类似闲鱼APP的底部导航栏的实现要实现的效果如图 image 好的,下面开始上代码了: 一. 在main.dart文件 ...
mui 底部导航菜单功能（原创）
简单版 <!DOCTYPE html> <html><head><meta charset="UTF-8"><title> ...
html仿微信公众号底部菜单代码,模仿微信公众号底部导航菜单
模仿微信公众号底部导航菜单 demo *{ margin:0; padding:0; box-sizing: border-box; } body{ background: #fff; font-si ...
小程序底部导航栏(tabBar)图标的正确做法
许多人都认为小程序系统的底部导航栏特别不好看,为了美观而选择自定义,从此身陷漩涡无法自拔.其实真正的原因是图标的图片处理不当(说白了就是前端和设计太菜了),导致会有线条变粗,间距不当的视觉感受. 除小 ...
大前端Dux主题如何添加导航菜单字体图标
对于刚刚接触大前端Dux主题的小伙伴来说,想要在短时间内折腾出一个漂亮大气的网站博客,也并不是那么容易,因为大前端Dux主题的功能真的很多很多,你自己都不知道从那里下手.今天跟小伙伴们说说大前端Dux ...
css3+jQuery制作导航菜单（带动画效果）
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>css ...
html中怎么在图片上做导航,如何给导航菜单添加图标 | Catfish(鲶鱼) CMS | 免费开源CMS - 快速建站系统 - 官方网站...
我们访问某些网站的时候,会发现导航菜单的文字前面有一个小图标,如下图所示: 在鲶鱼系统里面我们怎么来添加这个文字前面的图标呢? 下面我们来介绍一下如何实现. 首先我们进入系统后台,在后台的侧边栏中找到 ...

安卓实现首页底部导航菜单中间图标凸起效果

安卓实现首页底部导航菜单中间图标凸起效果相关推荐

最新文章

热门文章