仿微信底部导航栏您真的会了吗？

来源：互联网发布：java命令行参数是什么编辑：程序博客网时间：2024/04/29 11:14

像微信底部导航栏应该说是经典中的经典了吧！
效果图如下
这里写图片描述

由于很久没写布局所以复习下！主要用到以下布局 LinearLayout 线性布局分为horizontal和vertical 水平合垂直

相对布局RelativeLayout
layout_centerHorizontal=”true” 水平居中
layout_centerVertical=”true” 垂直居中
layout_alignParentBottom=”true” 是否显示在父容器底部 true表示是 false表示不显示

废话不多说直接上布局代码

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:layout_alignParentBottom="true"    android:orientation="vertical" >    <!-- 普通底部导航栏 -->      <View         android:background="@color/black2"        android:layout_width="match_parent"        android:layout_height="1dip"/>      <LinearLayout         android:id="@+id/_main_bottom"        android:layout_width="match_parent"        android:layout_height="54dp"        android:background="#ffffff"        android:gravity="center_vertical"        android:orientation="horizontal"        >             <RelativeLayout             android:id="@+id/re_wx"            android:layout_width="0dp"            android:layout_height="match_parent"            android:layout_weight="1"            android:onClick="onTabClicked"            android:padding="3dp"            >              <RelativeLayout                    android:layout_width="60dp"                   android:layout_height="match_parent"                   android:layout_centerHorizontal="true"                   android:gravity="center"                >               <ImageView                     android:id="@+id/ib_wx"                    android:layout_width="wrap_content"                    android:layout_height="28dp"                    android:layout_centerHorizontal="true"                    android:background="#ffffff"                    android:focusable="false"                    android:scaleType="centerInside"                    android:src="@drawable/tab_wx"                  />                <TextView                     android:id="@+id/wx_tv"                    android:layout_width="wrap_content"                    android:layout_height="wrap_content"                    android:gravity="center_vertical"                    android:layout_below="@id/ib_wx"                    android:layout_centerHorizontal="true"                    android:layout_marginTop="3dp"                    android:text="微信"                    android:textSize="12sp"                    android:textColor="#9A9A9A"                    />                 <TextView                    android:id="@+id/unread_msg_number"                    android:layout_width="wrap_content"                    android:layout_height="wrap_content"                    android:layout_alignParentRight="true"                    android:layout_marginRight="8dp"                    android:background="@drawable/icon_tip"                    android:gravity="center"                    android:text="5"                    android:textColor="@android:color/white"                    android:textSize="12sp"                    android:visibility="visible" />              </RelativeLayout>        </RelativeLayout>         <RelativeLayout             android:id="@+id/re_contact_list"            android:layout_width="0dp"            android:layout_height="match_parent"            android:layout_weight="1"            android:onClick="onTabClicked"            android:padding="3dp"            >            <RelativeLayout                 android:layout_width="60dp"                android:layout_height="match_parent"                android:layout_centerHorizontal="true"                android:gravity="center"                >            <ImageView                     android:id="@+id/ib_contact_list"                    android:layout_width="wrap_content"                    android:layout_height="28dp"                    android:layout_centerHorizontal="true"                    android:background="#ffffff"                    android:focusable="false"                    android:scaleType="centerInside"                    android:src="@drawable/tab_contact"                  />             <TextView                     android:id="@+id/contact_list_tv"                    android:layout_width="wrap_content"                    android:layout_height="wrap_content"                    android:gravity="center_vertical"                    android:layout_below="@id/ib_contact_list"                    android:layout_centerHorizontal="true"                    android:layout_marginTop="3dp"                    android:text="通讯录"                    android:textSize="12sp"                    android:textColor="#9A9A9A"                    />             </RelativeLayout>        </RelativeLayout>         <RelativeLayout             android:id="@+id/re_find"            android:layout_width="0dp"            android:layout_height="match_parent"            android:layout_weight="1"            android:onClick="onTabClicked"            android:padding="3dp"            >            <RelativeLayout                 android:layout_width="60dp"                android:layout_height="match_parent"                android:layout_centerHorizontal="true"                android:gravity="center"                >                <ImageView                     android:id="@+id/ib_find"                    android:layout_width="wrap_content"                    android:layout_height="28dp"                    android:layout_centerHorizontal="true"                    android:background="#ffffff"                    android:focusable="false"                    android:scaleType="centerInside"                    android:src="@drawable/tab_find"                  />                <TextView                     android:id="@+id/find_tv"                    android:layout_width="wrap_content"                    android:layout_height="wrap_content"                    android:gravity="center_vertical"                    android:layout_below="@id/ib_find"                    android:layout_centerHorizontal="true"                    android:layout_marginTop="3dp"                    android:text="发现"                    android:textSize="12sp"                    android:textColor="#9A9A9A"                    />            </RelativeLayout>         </RelativeLayout>         <RelativeLayout             android:id="@+id/re_profile"            android:layout_width="0dp"            android:layout_height="match_parent"            android:layout_weight="1"            android:onClick="onTabClicked"            android:padding="3dp"            >            <RelativeLayout                 android:layout_width="60dp"                android:layout_height="match_parent"                android:layout_centerHorizontal="true"                android:gravity="center"                >                <ImageView                     android:id="@+id/ib_profile"                    android:layout_width="wrap_content"                    android:layout_height="28dp"                    android:layout_centerHorizontal="true"                    android:background="#ffffff"                    android:focusable="false"                    android:scaleType="centerInside"                    android:src="@drawable/tab_profile"                  />                <TextView                     android:id="@+id/profile_tv"                    android:layout_width="wrap_content"                    android:layout_height="wrap_content"                    android:gravity="center_vertical"                    android:layout_below="@id/ib_profile"                    android:layout_centerHorizontal="true"                    android:layout_marginTop="3dp"                    android:text="我的"                    android:textSize="12sp"                    android:textColor="#9A9A9A"                    />            </RelativeLayout>        </RelativeLayout>    </LinearLayout></LinearLayout>

大家可以自己替换自己的底部导航图片

tab_wx.xml

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android" >    <item  android:drawable="@drawable/weixin_pressed" android:state_selected="true"></item>    <item android:drawable="@drawable/weixin_normal"></item></selector>

tab_contact.xml

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android">    <item android:drawable="@drawable/contact_list_pressed" android:state_selected="true"></item>    <item android:drawable="@drawable/contact_list_normal"></item></selector>

tab_find.xml

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android">    <item android:drawable="@drawable/find_pressed" android:state_selected="true"></item>    <item android:drawable="@drawable/find_normal"></item></selector>

tab_profile.xml

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android">    <item android:drawable="@drawable/profile_pressed" android:state_selected="true"></item>    <item android:drawable="@drawable/profile_normal"></item></selector>

到这里结束了记个笔记而已！

0 0