Android --中间突出的底部导航栏布局简单实现

||版权声明：本文为博主原创文章，未经博主允许不得转载。

目前很多应用都加入了底部导航栏的功能，根据点击的具体Tab显示不同的内容，前段时间，本人在学习实现这个功能的时候遇到了点问题，发现我要实现的底部导航是以下这种中间部件突出的复杂布局（当时感觉算复杂啦）。

为了实现这个布局，博主尝试了各种布局的嵌套，修正，仍然无法解决中间部件与其他控件的冲突问题，无法实现图中效果，于是网上拜读了各位大牛的相关文章，发现或使用已过时的TabHost或是更加复杂的布局，于是各取所长，这里采用radiobutton+frameLayout实现，具体如下：



res/layout下custom_tab.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_gravity="bottom"
android:background="#ECEDEE" >

<RadioGroup
android:id="@+id/RadioG_Bottem"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="2dp"
android:background="#fff"
android:orientation="horizontal"
android:paddingTop="5dp" >

<RadioButton
android:id="@+id/tab_same"
style="@style/main_bottom_tab_style"
android:drawablePadding="-18.0dip"
android:drawableTop="@drawable/tab_btn_tongren" />

<RadioButton
android:id="@+id/tab_cos"
style="@style/main_bottom_tab_style"
android:drawablePadding="-18.0dip"
android:drawableTop="@drawable/tab_btn_cos" />

<RadioButton
android:id="@+id/tab_home_bg"
style="@style/main_bottom_tab_style"
android:layout_height="match_parent"
android:checked="true"
/>

<RadioButton
android:id="@+id/tab_photo"
style="@style/main_bottom_tab_style"
android:drawablePadding="-18.0dip"
android:drawableTop="@drawable/tab_btn_photo" />

<RadioButton
android:id="@+id/tab_cv"
style="@style/main_bottom_tab_style"
android:drawablePadding="-18.0dip"
android:drawableTop="@drawable/tab_btn_cv" />
</RadioGroup>

</FrameLayout>

res/values/style radiobutton所对应的style

<style name="base_tab_style">
<item name="android:gravity">center</item>
<item name="android:layout_width">0.0dip</item>
<item name="android:layout_height">fill_parent</item>
<item name="android:button">@null</item>
<item name="android:layout_weight">1.0</item>
</style>
<style name="main_bottom_tab_style" parent="@style/base_tab_style">
<item name="android:layout_gravity">center</item>
<item name="android:background">@null</item>
<item name="android:layout_height">wrap_content</item>
</style>

res/layout 下activity_main.xml中嵌套custom_tab

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >

<include
android:id="@+id/tab"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
layout="@layout/custom_tab" />

<FrameLayout
android:id="@+id/FrameAct_FragmentGroup"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="@id/tab"
>
</FrameLayout>

<FrameLayout
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true" >

<ImageView
android:id="@+id/Iv_home_bg"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="bottom"
android:scaleType="fitXY"
android:src="@drawable/home_sel" />
</FrameLayout>

</RelativeLayout>

其中@id/FrameAct_FragmentGroup是用于之后填充多个具体fragment要使用的

下面所加framelayout 中imageview即为导航栏布局中间突出部件。同样如上面radiobutton一样所有控件均使用了背景选择器，以使得相应控件被点击之后切换不同状态。

<?xml version="1.0" encoding="utf-8"?>
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:drawable="@drawable/icon_cos_sel" />
<item android:state_pressed="true" android:drawable="@drawable/icon_cos_sel" />
<item android:state_checked="false" android:state_pressed="false" android:drawable="@drawable/icon_cos" />
</selector>

同时点击之后切换相应fragment。

不足之处欢迎大家指正。

以上除drawable下原始图片资源外均属博主原创，转载请知会博主并注明出处，谢谢！