底部栏 布局

底部栏布局

在Android中底部栏是非常非常常用的.这里简单介绍一下几种实现方式.

1. ViewPager+RadioGroup

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              xmlns:tools="http://schemas.android.com/tools"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:orientation="vertical"
              tools:context="com.xfhy.wisdombeijing.fragment.ContentFragment">

    <!--主界面的Fragment布局-->

    <!--上面的布局-->
    <android.support.v4.view.ViewPager
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">
    </android.support.v4.view.ViewPager>

    <!--下面的底部栏-->
    <RadioGroup
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:background="@drawable/bottom_tab_bg"
        android:orientation="horizontal">

        <RadioButton
            android:id="@+id/rb_home"
            style="@style/Bottom_Tab_Style"
            android:checked="true"
            android:drawableTop="@drawable/selector_tab_home"
            android:text="首页"/>

        <RadioButton
            android:id="@+id/rb_news"
            style="@style/Bottom_Tab_Style"
            android:drawableTop="@drawable/selector_tab_news"
            android:text="新闻中心"/>

        <RadioButton
            android:id="@+id/rb_smart"
            style="@style/Bottom_Tab_Style"
            android:drawableTop="@drawable/selector_tab_smart"
            android:text="智慧服务"/>

        <RadioButton
            android:id="@+id/gova"
            style="@style/Bottom_Tab_Style"
            android:drawableTop="@drawable/selector_tab_gova"
            android:text="政务"/>

        <RadioButton
            android:id="@+id/rb_setting"
            style="@style/Bottom_Tab_Style"
            android:drawableTop="@drawable/selector_tab_setting"
            android:text="设置"/>

    </RadioGroup>

</LinearLayout>

<style name="Bottom_Tab_Style">
    <item name="android:layout_width">0dp</item>
    <item name="android:layout_height">match_parent</item>
    <item name="android:layout_weight">1</item>
    <item name="android:drawablePadding">5dp</item>
    <item name="android:gravity">center</item>
    <item name="android:button">@null</item>
    <item name="android:padding">5dp</item>
    <item name="android:textColor">@color/selector_txt_tab</item>
    <item name="android:textSize">14sp</item>
    <item name="android:background">@android:color/transparent</item>
</style>
复制代码

2. BottomNavigationView (API 25才加入的)

官方地址:https://developer.android.com/reference/android/support/design/widget/BottomNavigationView.html

官方解释:

代表应用程序的标准底部导航栏。 它是MD风格底部导航的实现。

底部导航栏可让用户轻松浏览并单击头顶视图之间进行切换。 当应用程序有三到五个顶级目的地时，应该使用它。

可以通过指定菜单资源文件来填充栏内容。 每个菜单项标题，图标和启用状态将用于显示底部导航栏项。 菜单项也可用于以编程方式选择当前活动的目的地。 可以使用MenuItem＃setChecked（true）

使用:

1.创建一个menu文件夹，新建名字为bottom_view.xml的Menu resource文件

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

     <item
        android:icon="@drawable/ic_account_balance_white_24dp"
        android:title="首页" />
    <item
        android:icon="@drawable/ic_face_white_24dp"
        android:title="好友" />
    <item
        android:icon="@drawable/ic_accessibility_white_24dp"
        android:title="广场" />

    <item
        android:icon="@drawable/ic_settings_white_24dp"
        android:title="设置" />

</menu>
复制代码

2.布局文件

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/bnv_bottom_activity"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        app:itemBackground="@color/colorAccent"
        app:itemIconTint="@android:color/white"
        app:itemTextColor="@android:color/white"
        app:menu="@menu/bottom_view" />


</RelativeLayout>
复制代码

3.在Activity使用

public class BottomViewActivity extends AppCompatActivity {
    private MenuItem lastItem; // 上一个选中的item

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_bottom_view);
        initView();
    }

    /**
     * 初始化
     */
    private void initView() {
       BottomNavigationView bnv = (BottomNavigationView) findViewById(R.id.bnv_bottom_activity);
        //拿到默认选中的item
        lastItem = bnv.getMenu().getItem(0);
        //点击选择item
        bnv.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                if (lastItem != item) { // 判断当前点击是否为item自身
                    lastItem = item;
                    String title = item.getTitle().toString();
                    Toast.makeText(BottomViewActivity.this, title, Toast.LENGTH_LONG).show();
                    return true;
                }
                return false;
            }
        });
    }
}
复制代码