先上效果图
此底部导航栏的布局很简单,其中用到的最主要的就是在突出布局的父布局设置android:clipChildren为false即可,默认为true,android:clipChildren的意思:是否限制子View在其范围内,然后设置突出布局android:layout_gravity=”bottom”就可以了
最后贴出代码,使用RadioGroup+RadioButton实现的底部导航
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipChildren="false"
android:orientation="vertical">
<ViewPager
android:id="@+id/vp_content"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
</ViewPager>
<View
android:id="@+id/div_view"
android:layout_width="fill_parent"
android:layout_height="1.0px"
android:background="#d9d9d9" />
<RadioGroup
android:id="@+id/rg_group"
android:layout_width="match_parent"
android:layout_height="48dp"
android:layout_gravity="bottom"
android:background="@color/apTabBackground"
android:clipChildren="false"
android:elevation="8dp"
android:gravity="center"
android:orientation="horizontal">
<RadioButton
android:id="@+id/first"
style="@style/Bottom_Tab_Style"
android:checked="true"
android:drawableTop="@drawable/first_selector"
android:text="首页"
android:textSize="11sp" />
<RadioButton
android:id="@+id/second"
style="@style/Bottom_Tab_Style"
android:drawableTop="@drawable/second_selector"
android:text="学堂"
android:textSize="11sp" />
<RadioButton
android:id="@+id/third"
style="@style/Bottom_Tab_Style1"
android:layout_gravity="bottom"
android:clipChildren="false"
android:drawableBottom="@drawable/third_selector"
android:textSize="11sp" />
<RadioButton
android:id="@+id/fourth"
style="@style/Bottom_Tab_Style"
android:drawableTop="@drawable/fourth_selector"
android:text="互动"
android:textSize="11sp" />
<RadioButton
android:id="@+id/fifth"
style="@style/Bottom_Tab_Style"
android:drawableTop="@drawable/fifth_selector"
android:text="我"
android:textSize="11sp" />
</RadioGroup>
</LinearLayout>