底部导航栏凸起效果

先上效果图

底部导航栏

此底部导航栏的布局很简单,其中用到的最主要的就是在突出布局的父布局设置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>
坚持原创技术分享,您的支持将鼓励我继续创作!
0%