Android之仿嗶哩嗶哩客戶端首頁+抽屜式導航

本文使用Toobar+DrawerLayout+NavigationView仿嗶哩嗶哩客戶端首頁+抽屜式導航，同時實現(xiàn)了沉浸式狀態(tài)欄的效果。

一、效果圖

圖片及圖標色彩等沒有刻意模仿，結構相同。




上圖可以看出實現(xiàn)了沉浸式狀態(tài)欄。

二、頁面布局

<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white"
    android:fitsSystemWindows="true">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <include layout="@layout/app_bar"></include>
    </FrameLayout>

    <android.support.design.widget.NavigationView
        android:id="@+id/navigation"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="@color/white"
        app:headerLayout="@layout/view_nav"
        app:menu="@menu/menu_nav"/>

</android.support.v4.widget.DrawerLayout>

在這里可以看到，最外層布局是DrawerLayout，里面嵌套了兩個布局，一層是FrameLayout，其中通過include進來的主界面內容，第二層是側滑的內容，即NavigationView。

主界面布局
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".home.MainActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        style="@style/Theme.AppCompat.Light"
        app:elevation="0dp">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="@color/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay"/>
        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabBackground="@color/colorPrimary"
            app:tabIndicatorColor="@color/white">
        </android.support.design.widget.TabLayout>


    </android.support.design.widget.AppBarLayout>
    <android.support.v4.view.ViewPager
        android:id="@+id/vp_moudle"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
    </android.support.v4.view.ViewPager>


</android.support.design.widget.CoordinatorLayout>

主界面布局先是CoordinatorLayout嵌套了AppBarLayout以及ViewPager。AppBarLayout中嵌套了ToolBar以及TabLayout。在Activity中讓ViewPager和TabLayout關聯(lián)，實現(xiàn)ViewPager頁面滑動時對應標簽的聯(lián)動。

抽屜界面布局

抽屜界面由NavigationView來實現(xiàn)，主要由兩部分來實現(xiàn)，包含導航欄頭部，以及菜單欄。
導航欄頭部

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:orientation="vertical"
                android:layout_width="match_parent"
                android:layout_height="150dp"
                android:background="@drawable/nav_header">
    <ImageView

        android:layout_marginBottom="10dp"
        android:layout_marginLeft="20dp"
        android:src="@drawable/nav_header_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/iv_user_photo"
        android:layout_above="@+id/tv_login"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:textSize="12sp"
        android:text="點擊頭像登錄"
        android:textColor="@color/white"
        android:padding="8dp"
        android:layout_marginLeft="20dp"
        android:layout_marginBottom="20dp"
        android:gravity="center"
        android:id="@+id/tv_login"
        android:layout_alignParentBottom="true"/>



</RelativeLayout>

菜單欄

<menu xmlns:android="http://schemas.android.com/apk/res/android"
  >
  <group android:checkableBehavior="single"
      >
      <item android:title="首頁" android:id="@+id/mn_home" android:icon="@drawable/menu_home"></item>
      <item android:title="離線緩存" android:id="@+id/mn_download" android:icon="@drawable/menu_download"></item>
      <item android:title="我的收藏" android:id="@+id/mn_store" android:icon="@drawable/menu_store"></item>
      <item android:title="個性化信息" android:id="@+id/mn_personal" android:icon="@drawable/menu_personal" ></item>
      <item android:title="設置與幫助" android:id="@+id/mn_setting" android:icon="@drawable/menu_setting"></item>
      <item android:title="注銷" android:id="@+id/mn_out" android:icon="@drawable/menu_out"></item>
  </group>
</menu>

這兩部分都在NavigationView布局中引用了，直接生效。
注意：菜單欄的彩色圖標的顏色不會生效，默認展示為灰色。需要在Activity中設置如下代碼才會恢復彩色：
navigationView.setItemIconTintList(null);

三、MainActivity中代碼

設置ToolBar

 /**
     * 設置ToolBar
     */
    private void setToolBar() {
        setSupportActionBar(mToolbar);
        ActionBar actionBar = getSupportActionBar();
        //菜單按鈕可用
        actionBar.setHomeButtonEnabled(true);
        //回退按鈕可用
        actionBar.setDisplayHomeAsUpEnabled(true);
        //將drawlayout與toolbar綁定在一起
        ActionBarDrawerToggle abdt = new ActionBarDrawerToggle(this, mAmDl, mToolbar, R.string.app_name, R.string.app_name);
        abdt.syncState();//初始化狀態(tài)
        //設置drawlayout的監(jiān)聽事件 打開/關閉
        mAmDl.setDrawerListener(abdt);
        //actionbar中的內容進行初始化
        mToolbar.setTitle("Live圈");//設置標題
        mToolbar.setTitleTextColor(getResources().getColor(R.color.white));
    }

若想在ToolBar中添加菜單欄，可以設置布局，然后在MainActivity中調用onCreateOptionsMenu進行初始化。詳情可以下載源碼（下面有鏈接）。
沉浸式狀態(tài)欄

4.4及其以上都是可以實現(xiàn)沉浸式狀態(tài)欄效果的，5.0及其以上可以直接在主題中設置顏色，或者調用 Window 類中的 setStatusBarColor(int color) 來實現(xiàn)，這兩種方式在5.0上都比較簡單，但是如何兼容到4.4，這是一個需要解決的問題。

解決思路：

給狀態(tài)欄設置顏色

先設置狀態(tài)欄透明屬性；
給根布局加上一個和狀態(tài)欄一樣大小的矩形View（色塊），添加到頂上；
然后設置根布局的 FitsSystemWindows 屬性為 true,此時根布局會延伸到狀態(tài)欄，處在狀態(tài)欄位置的就是之前添加的色塊，這樣就給狀態(tài)欄設置上顏色了。

/**
     * 為DrawerLayout 布局設置狀態(tài)欄變色
     *
     * @param activity       需要設置的activity
     * @param drawerLayout   DrawerLayout
     * @param color          狀態(tài)欄顏色值
     * @param statusBarAlpha 狀態(tài)欄透明度
     */
    public static void setColorForDrawerLayout(Activity activity, DrawerLayout drawerLayout, @ColorInt int color,
                                               int statusBarAlpha) {
        //系統(tǒng)小于4.4
        if (Build.VERSION.SDK_INT < Build.VERSION_CODES.KITKAT) {
            return;
        }
        //5.0以上 直接設置狀態(tài)欄為透明色
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            activity.getWindow().addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
            activity.getWindow().clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
            activity.getWindow().setStatusBarColor(Color.TRANSPARENT);
        } else {
            //4.4-5.0之間先設置透明狀態(tài)欄
            activity.getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
        }
        // 生成一個狀態(tài)欄大小的矩形
        // 添加 statusBarView 到布局中
        ViewGroup contentLayout = (ViewGroup) drawerLayout.getChildAt(0);
        View fakeStatusBarView = contentLayout.findViewById(FAKE_STATUS_BAR_VIEW_ID);
        if (fakeStatusBarView != null) {
            if (fakeStatusBarView.getVisibility() == View.GONE) {
                fakeStatusBarView.setVisibility(View.VISIBLE);
            }
            fakeStatusBarView.setBackgroundColor(color);
        } else {
            contentLayout.addView(createStatusBarView(activity, color), 0);
        }
        // 內容布局不是 LinearLayout 時,設置padding top
        if (!(contentLayout instanceof LinearLayout) && contentLayout.getChildAt(1) != null) {
            contentLayout.getChildAt(1)
                    .setPadding(contentLayout.getPaddingLeft(), getStatusBarHeight(activity) + contentLayout.getPaddingTop(),
                            contentLayout.getPaddingRight(), contentLayout.getPaddingBottom());
        }
        // 設置屬性
        setDrawerLayoutProperty(drawerLayout, contentLayout);
       //將狀態(tài)欄設置一定的透明度
        addTranslucentView(activity, statusBarAlpha);
    }

關于更多沉浸式狀態(tài)欄知識，可以參考這篇文章。

通過以上內容就達到了模仿嗶哩嗶哩客戶端首頁+抽屜式導航的效果，具體圖標及顏色沒有刻意地模仿。
源碼下載 里面包含一些亂七八糟地東西，沒有好好整理。只需要了解MainActivity相關內容即可。

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容