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

最新推荐文章于 2023-09-24 01:16:10 发布
最新推荐文章于 2023-09-24 01:16:10 发布
阅读量2.6k 收藏 5
点赞数
分类专栏： Android 文章标签： 首页导航凸起效果
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gpf1320253667/article/details/102485071
版权

效果图
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;

    @Override
    protected int setLayout() {
        return R.layout.activity_third;
    }

    @Override
    protected void initView() {

        initTabIcon();
        // 设置默认选中首页
        rbHome.setChecked(true);

    }


    @Override
    protected void setListener() {
        radioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public 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() {
            @Override
            public 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左上角为坐标原点的）
        // 单位为像素px
        dbHome.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">

    <FrameLayout
        android:id="@+id/fl_layout"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />

    <View
        android:layout_width="match_parent"
        android:layout_height="0.3dp"
        android:background="#33666666" />

    <RadioGroup
        android: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">
        <RadioButton
            android: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" />

        <RadioButton
            android: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-->
        <LinearLayout
            android:gravity="center_horizontal"
            android:orientation="vertical"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="110dp">
            <ImageView
                android:id="@+id/rbAdd"
                android:layout_width="55dp"
                android:layout_height="55dp"
                android:src="@drawable/comui_tab_post" />
            <TextView
                android:textColor="@color/black"
                android:text="发布"
                android:padding="5dp"
                android:textSize="13sp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
        </LinearLayout>


        <RadioButton
            android: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" />

        <RadioButton
            android: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">

    <FrameLayout
        android:id="@+id/fl_layout"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />

    <View
        android:layout_width="match_parent"
        android:layout_height="0.3dp"
        android:background="#33666666" />
    
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="52dp"
        android:orientation="horizontal"
        android:background="#eee"
        android:gravity="center"
        >

        <LinearLayout
            android:id="@+id/ll_tab_one"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:gravity="center">
            
            <ImageView
                android:id="@+id/iv_tab_one"
                android:layout_width="23dp"
                android:layout_height="23dp"
                android:src="@drawable/comui_tab_home"/>

            <TextView
                android: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>

        <LinearLayout
            android:id="@+id/ll_tab_two"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:gravity="center">

            <ImageView
                android:id="@+id/iv_tab_two"
                android:layout_width="23dp"
                android:layout_height="23dp"
                android:src="@drawable/comui_tab_pond"/>

            <TextView
                android: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>

        <LinearLayout
            android:id="@+id/ll_tab_three"
            android:gravity="center_horizontal"
            android:orientation="vertical"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="110dp">
            <ImageView
                android:id="@+id/iv_tab_three"
                android:layout_width="55dp"
                android:layout_height="55dp"
                android:src="@drawable/comui_tab_post2" />
            <TextView
                android: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>

        <LinearLayout
            android:id="@+id/ll_tab_four"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:gravity="center">

            <ImageView
                android:id="@+id/iv_tab_four"
                android:layout_width="23dp"
                android:layout_height="23dp"
                android:src="@drawable/comui_tab_message"/>

            <TextView
                android: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>

        <LinearLayout
            android:id="@+id/ll_tab_five"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:gravity="center">

            <ImageView
                android:id="@+id/iv_tab_five"
                android:layout_width="23dp"
                android:layout_height="23dp"
                android:src="@drawable/comui_tab_person"/>

            <TextView
                android: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;

    @Override
    protected int setLayout() {
        return R.layout.activity_third;
    }

    @Override
    protected 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;
        }
    }

    @Override
    protected void setListener() {
        tabAdapter.setOnTabChangeListener(new FragmentTabAdapter.OnTabChangeListener() {
            @Override
            public 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

智玲君
关注
专栏目录
Android 实现底部导航中间菜单凸起效果
06-14
Android 实现底部导航中间菜单凸起效果,不满意不要钱,哈哈 ~
Android中底部导航条，底部tab中间凸起效果
05-03
Android底部导航条、底部tab中间凸起效果，中间凸出按钮，可用于签到、发布等的凸出效果
Text+底部导航+中间凸起图标
yangg194的博客
05-17 2093
main_activity 主布局文件 xml version="1.0" encoding="utf-8"?> xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_paren
底部导航栏中间突出范例
ckwccc的博客
12-13 1321
首先先看一下实现的简单布局： 实现这个布局的核心是要在根布局添加该属性android:clipChildren="false"这个属性的意思是是否限制子布局在其范围内，默认是true，表示限制1.xml代码：这里放了五个LinearLayout配合上面的容器进行切换<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/a
Android中底部tab，中间凸起按钮的效果
暖暖的云阳的博客
03-13 4675
Android中底部Tab中间按钮凸显效果 经小伙伴建议， 先上效果图： 如上所示漂亮的主页面。那么这是如何实现的呢？其实主要就是在XML文件中进行的操作。然后就是在代码逻辑那边使用ViewPager + Fragment进行页面展示。 来看activity_main.xml文件 &amp;amp;amp;lt;?xml version=&amp;amp;quot;1.0&amp;amp;quot; encoding=&amp;amp;quot;utf-8&amp;
android底部导航,中间凸起底部导航
weixin_47884471的博客
03-20 4644
最近在做一个项目,底部导航中间部分需要凸起,本来一开始我是用一个圆形的背景的但是这样子边上就会有很生硬的边角. 比如就像这样: 这样子就很不美观,于是就用贝斯尔曲线重新绘制一个带有弧形的 首先我们是要知道贝塞尔曲线是怎么绘制的,这里的话我们是用到了二阶的贝塞尔曲线,由二阶贝赛尔公式:B（t）=（1 - t）²Po + 2t（1 - t）P1 + t²P2，t∈[0，1]; 在这里Po是起点，P2是终点，P1是控制点，我们给公式做一个分解因式的转换 B（t）= （1-t）...
Android 底部导航栏 中间凸起
热门推荐
薛定谔的猫
01-17 2万+
andrid 中有一种常见底部导航栏中间凸起样式，如图： 中间凸起样式常见的实现方式： 1.借助父布局的clipchildren属性，设置为false，即允许子view超出父view的限制 2.直接在原来view上覆盖view，拦截底层（原来）view的事件。 因项目中中使用了BottomNavigationViewEx 作为底部导航栏，本文主要探讨第二种实现方式。Bot
Android底部tab导航栏中间凸起、动态配置替换底部导航栏Tab图标
weixin_38090079的博客
03-11 1281
Android底部tab导航栏中间凸起、动态配置替换底部导航栏Tab图标
底部导航栏中间圆形按钮凸起效果demo
07-04
标题“底部导航栏中间圆形按钮凸起效果demo”所涉及的是如何在底部导航栏的中间按钮实现一个突出的视觉效果，以吸引用户的注意力并提供焦点。描述中提到，这个效果是通过使用`RelativeLayout`、`RadioGroup`和`...
Android实现淘宝底部图标导航栏
08-26
Android实现淘宝底部图标导航栏是Android开发中一个非常重要的知识点，今天我们来详细介绍一下如何实现淘宝底部图标导航栏。 首先，我们需要了解什么是淘宝底部图标导航栏。淘宝底部图标导航栏是指在Android应用...
android底部凸起导航菜单
09-30
在Android应用开发中，底部导航菜单（Bottom Navigation）是一种常见的用户界面设计，它允许用户在应用的多个主要功能之间快速切换。本知识点将详细介绍如何利用FrameLayout实现一个具有底部凸起效果并具备选中高亮...
Android 底部导航中间突起
FlyPig_Vip的博客
05-26 547
自己写个椭圆摆上去 <com.as.zqfjavasample.base.custom_views.TuoyuanView android:layout_width="@dimen/dp160" android:layout_height="@dimen/dp60" /> 宽高变化,也就变化了 public class TuoyuanView extends View { private Pai..
Android 底部导航栏中间凸起、越界显示
司徒游的博客
07-23 1605
1、只需在根节点设置Android:clipChildren为false即可，默认为true 2、可以通过android:layout_gravity控制超出的部分如何显示。 3、android:clipChildren的意思：是否限制子View在其范围内 一：实现效果： 二：关键原理： 1、只需在根节点设置Android:clipChildren为false即可，默认为true 2、可以通过android:layout_gravity控制超出的部分如何显示。 3、android:cl.
android自定义底部中间突出导航栏,Android实现带有指示器的自定义底部导航栏
weixin_42130862的博客
05-25 844
今天这篇文章，主要是给大家实现一个自定义的带有指示器的底部导航栏。先看一下实现的效果吧。这个自定义控件的使用要注意以下几个方面：1.没有布局文件及资源文件，只需要一个java文件就可调用2.可以非常灵活的使用，一句代码就可以添加到项目中3.暂时只支持4.0以上版本，颜色值使用的是系统自带色值，如需在低版本使用，请自己替换颜色值4.支持智能适配，可以根据底部按钮的数量，自动的调整布局5.主内容区域，...
Android 底部导航栏中间凸起、动态配置替换底部导航栏Tab图标(按钮、标签)的实现方案
编程之美
03-02 1万+
标签：底部导航栏中间凸起、动态配置底部导航、底部导航中间大圆圈 类似 京东 淘宝 等app,在一些节假日的时候，首页UI 一般都是配置的节日气息很浓重，这类的实现一般是不需要发版，思路是 由后台直接配置，第一次开启App后台下载，在下次打开时 直接展示下载的图标。 思路分析 一般默认 一套普通图标平日展示使用， 后台下载一套新的图标，固定时间段展示使用。 比如 淘宝 ...
android底部导航栏中间凸起效果的制作
罗春娥的技术园
07-04 1万+
这是一个使用RelativeLayout+RadiouGroup+ImageView制作的中间凸起的按钮效果，效果如下： TabDemo源码下载
Android底部导航中间突起
IT小白
08-05 8782
看到很多应用下面都有一些特别突出的导航菜单，中间凸起的那种，自己分享一个项目里的吧！如下图： 源码如下： 点击打开链接
android底部导航栏中间凸起,Flutter学习笔记--仿闲鱼底部导航栏带有中间凸起图标...
weixin_30849865的博客
05-26 648
仿闲鱼底部导航栏带有中间凸起图标刚接触Flutter,需要实现一个类似闲鱼APP的底部导航栏的实现要实现的效果如图: 好的,下面开始上代码了:一. 在main.dart文件中,定义APP的入口信息import 'package:flutter/material.dart';import 'pages/MainPage.dart';void main() => runApp(LightLang...
BottomNavigationView 实现底部凸起菜单
最新发布
一个IT人的技术成长历程。
09-24 468
其中关键点在于 利用LinearLayout 的-5dp 实现与背景round_circle_white 的item的5dp的高度进行重合，遮挡住BottomNavigationView 上边线，显示round_circle_white的弧形部分边线1px，这样就实现了边线的完美重叠过度。注意在8.0和4.4上面，要去掉BottomNavigationView水波纹效果和选中背景效果，不然会无法沉浸到凸起的菜单，比较尴尬。关键背景：round_circle_white.xml。
android底部导航栏中间凸起
05-19
你可以使用Android的BottomNavigationView来创建底部导航栏。要创建凸起的效果，你需要使用一个自定义布局来替换默认的菜单项。以下是一些步骤： 1. 创建一个自定义布局，例如一个带有凸起图标的ImageButton。 2. ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

智玲君

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值