自定义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的弹出效果,如下:
- 敬请期待~