Android自定义View之实现流行的底部菜单栏中间突起:高仿“咸鱼APP”的底部菜单。

版权声明:本文为博主原创文章,遵循 CC 4.0 BY 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://xuhong.blog.csdn.net/article/details/75808341

自定义View之实现流行的底部菜单栏中间突起:高仿“咸鱼APP”的底部菜单。


博主一份努力,转载请支持原创:http://blog.csdn.net/xh870189248/article/details/75808341


一、好奇心在作怪。

  • 今天纳闷地看了看咸鱼,看见其底部的菜单栏效果还不错,中间那个按钮是凸起来的!

这里写图片描述


  • 再看看我撸的界面:

这里写图片描述


2、何谓重要的属性 android:clipChildren=”false”。

  • 上网查询 ,该属性解释为,可以允许其子控件超过父控件,于是乎,按照一般的想法,都是以下的代码,但是发现中间那个按钮有点缺陷的!


  • 但是,我们把这个 android:clipChildren=”false” 代码撸上之后,就下图了,是不是很神秘!

这里写图片描述


3、完整的代码。


<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:clipChildren="false">

    <LinearLayout
        android:id="@+id/ll_bottom"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:layout_alignParentBottom="true"
        android:orientation="horizontal">
        <RelativeLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_gravity="bottom"
            android:layout_weight="1">
            <ImageView
                android:id="@+id/dd"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:src="@mipmap/ic_tab_home_normal" />

            <TextView
                android:padding="2dp"
                android:textSize="10sp"
                android:layout_centerInParent="true"
                android:text="首页"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/dd"/>

        </RelativeLayout>

        <RelativeLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_gravity="bottom"
            android:layout_weight="1">
            <ImageView
                android:id="@+id/dd2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:src="@mipmap/ic_tab_var_normal" />
            <TextView
                android:padding="2dp"
                android:textSize="10sp"
                android:layout_centerInParent="true"
                android:text="鱼塘"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/dd2"/>

        </RelativeLayout>

        <RelativeLayout
            android:layout_width="100dp"
            android:layout_height="90dp"
            android:layout_gravity="bottom">

            <ImageView
                android:id="@+id/dd5"
                android:layout_width="60dp"
                android:layout_height="60dp"
                android:layout_centerInParent="true"
                android:src="@mipmap/ic_tab_add" />
            <TextView
                android:padding="2dp"
                android:textSize="10sp"
                android:layout_centerInParent="true"
                android:text="添加"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/dd5"/>

        </RelativeLayout>

        <RelativeLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_gravity="bottom"
            android:layout_weight="1">
            <ImageView
                android:id="@+id/dd3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:src="@mipmap/ici_tab_scence_normal" />
            <TextView
                android:padding="2dp"
                android:textSize="10sp"
                android:layout_centerInParent="true"
                android:text="消息"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/dd3"/>

        </RelativeLayout>

        <RelativeLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_gravity="bottom"
            android:layout_weight="1">
            <ImageView
                android:id="@+id/dd4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:src="@mipmap/ic_tab_mine_normal" />
            <TextView
                android:padding="2dp"
                android:textSize="10sp"
                android:layout_centerInParent="true"
                android:text="我的"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/dd4"/>

        </RelativeLayout>>

    </LinearLayout>

</RelativeLayout>

  • 后期还会显示该APP的弹出效果,如下:

这里写图片描述


  • 敬请期待~
展开阅读全文
博主设置当前文章不允许评论。

没有更多推荐了,返回首页