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)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市父晶,隨后出現(xiàn)的幾起案子哮缺,更是在濱河造成了極大的恐慌,老刑警劉巖甲喝,帶你破解...
    沈念sama閱讀 222,729評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件尝苇,死亡現(xiàn)場離奇詭異,居然都是意外死亡埠胖,警方通過查閱死者的電腦和手機糠溜,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,226評論 3 399
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來直撤,“玉大人非竿,你說我怎么就攤上這事∧笔” “怎么了汽馋?”我有些...
    開封第一講書人閱讀 169,461評論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀的道長圈盔。 經(jīng)常有香客問我豹芯,道長,這世上最難降的妖魔是什么驱敲? 我笑而不...
    開封第一講書人閱讀 60,135評論 1 300
  • 正文 為了忘掉前任铁蹈,我火速辦了婚禮,結果婚禮上众眨,老公的妹妹穿的比我還像新娘握牧。我一直安慰自己容诬,他們只是感情好,可當我...
    茶點故事閱讀 69,130評論 6 398
  • 文/花漫 我一把揭開白布沿腰。 她就那樣靜靜地躺著览徒,像睡著了一般。 火紅的嫁衣襯著肌膚如雪颂龙。 梳的紋絲不亂的頭發(fā)上习蓬,一...
    開封第一講書人閱讀 52,736評論 1 312
  • 那天,我揣著相機與錄音措嵌,去河邊找鬼躲叼。 笑死,一個胖子當著我的面吹牛企巢,可吹牛的內容都是我干的枫慷。 我是一名探鬼主播,決...
    沈念sama閱讀 41,179評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼浪规,長吁一口氣:“原來是場噩夢啊……” “哼或听!你這毒婦竟也來了?” 一聲冷哼從身側響起笋婿,我...
    開封第一講書人閱讀 40,124評論 0 277
  • 序言:老撾萬榮一對情侶失蹤誉裆,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后萌抵,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,657評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡元镀,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 38,723評論 3 342
  • 正文 我和宋清朗相戀三年绍填,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片栖疑。...
    茶點故事閱讀 40,872評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡讨永,死狀恐怖,靈堂內的尸體忽然破棺而出遇革,到底是詐尸還是另有隱情卿闹,我是刑警寧澤,帶...
    沈念sama閱讀 36,533評論 5 351
  • 正文 年R本政府宣布萝快,位于F島的核電站锻霎,受9級特大地震影響,放射性物質發(fā)生泄漏揪漩。R本人自食惡果不足惜旋恼,卻給世界環(huán)境...
    茶點故事閱讀 42,213評論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望奄容。 院中可真熱鬧冰更,春花似錦产徊、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,700評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至奠衔,卻和暖如春谆刨,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背涣觉。 一陣腳步聲響...
    開封第一講書人閱讀 33,819評論 1 274
  • 我被黑心中介騙來泰國打工痴荐, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人官册。 一個月前我還...
    沈念sama閱讀 49,304評論 3 379
  • 正文 我出身青樓生兆,卻偏偏與公主長得像,于是被迫代替她去往敵國和親膝宁。 傳聞我的和親對象是個殘疾皇子鸦难,可洞房花燭夜當晚...
    茶點故事閱讀 45,876評論 2 361

推薦閱讀更多精彩內容