Android使用ToolBar+DrawerLayout+NavigationView實現側滑抽屜效果

時間  2020-05-13
標籤 android 使用 toolbar+drawerlayout+navigationview toolbar drawerlayout navigationview 實現 側滑 抽屜 效果 欄目 Android 简体版
原文   原文鏈接
  • 學會使用DrawerLayout
  • 學會使用NavigationView
  • 學會使用ToolBar+DrawerLayout+NavigationView實現側滑抽屜效果
  • 學會實現Toolbar在頂部以及Toolbar被遮擋的兩種效果

效果展現

側滑控件咱們在開發的過程當中常常用到,廢話很少說,先上圖:java

實現過程

若是要實現上圖的展現效果,須要先建立個BaseActivit類,這個類裏面包含Toolbar的初始化,而後再建立DrawerLayout相關的Activityandroid

建立BaseActivity及相關XML文件

  • activity_base.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/colorPrimary"
            app:contentInsetStartWithNavigation="0dp"
            android:theme="@style/ToolBarStyle"
            app:titleTextColor="@color/white">

        </android.support.v7.widget.Toolbar>

        <FrameLayout
            android:id="@+id/frameLayout"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

        </FrameLayout>
    </LinearLayout>

</LinearLayout>
  • BaseActivity
package com.vv.drawerlayout.ui.base;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.FrameLayout;

import com.vv.drawerlayout.R;

import butterknife.ButterKnife;

/**
 * @author ShenZhenWei
 * @date 2018/7/4
 */
public abstract class BaseActivity extends AppCompatActivity {
    protected Toolbar mToolbar;
    protected FrameLayout mContainerLayout;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_base);

        mToolbar = findViewById(R.id.toolbar);
        mContainerLayout = findViewById(R.id.frameLayout);
        boolean isToobar = initToolbar();
        if (isToobar) {
            setSupportActionBar(mToolbar);
            getSupportActionBar().setDisplayHomeAsUpEnabled(true);
            mToolbar.setNavigationOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    onNavigationClick();
                }
            });
        } else {
            mToolbar.setVisibility(View.GONE);
        }

        initContent(getLayoutId());
    }

    private void initContent(int layoutId) {
        if (layoutId != 0) {
            View contentView = LayoutInflater.from(this).inflate(layoutId, mContainerLayout, false);
            mContainerLayout.addView(contentView);
            ButterKnife.bind(this);
            initViews();
        }
    }


    /**
     * 初始化佈局
     */
    protected abstract void initViews();

    /**
     * 獲取佈局控件
     *
     * @return
     */
    protected abstract int getLayoutId();

    private void onNavigationClick() {
        finish();
    }

    /**
     * 初始化Toolbar
     *
     * @return
     */
    protected abstract boolean initToolbar();
}

建立DrawerLayout相關的Activity以及相關的XML文件

  • activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout 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:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".ui.MainActivity">

    <android.support.design.widget.NavigationView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/navigation_view"
        android:layout_gravity="left|start"
        app:headerLayout="@layout/header_layout"
        app:menu="@menu/navigation_menu">

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

</android.support.v4.widget.DrawerLayout>
  • header_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:gravity="center"
    android:background="@color/_0091ea"
    android:orientation="vertical"
    >
    <ImageView
        android:id="@+id/img_avatar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher_round" />

    <TextView
        android:id="@+id/tv_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:textColor="@color/white"
        android:text="" />

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

    <item
        android:id="@+id/menu_favorite_article"
        android:icon="@drawable/ic_favorite_gray_24dp"
        android:title="@string/favorite_article"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/menu_about"
        android:icon="@drawable/ic_about_us_gray_24dp"
        android:title="@string/about_us"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/menu_exit"
        android:icon="@drawable/ic_exit_to_app_gray_24dp"
        android:title="@string/exit"
        app:showAsAction="ifRoom"
        />

</menu>
  • 若是使用Toolbar,那麼須要把系統的主題換成沒有ActionBar的主題,修改style.xml文件
<resources>

    <!-- Base application theme. -->
    <style name="AppTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

    <style name="AppTheme" parent="AppTheme.Base"></style>


    <style name="ToolBarStyle" parent="@style/BaseToolBarStyle"></style>

</resources>
  • MainActivity實現
package com.vv.drawerlayout.ui;

import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.design.widget.NavigationView;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarDrawerToggle;
import android.view.MenuItem;

import com.vv.drawerlayout.R;
import com.vv.drawerlayout.ui.base.BaseActivity;

import butterknife.Bind;

/**
 * @author ShenZhenWei
 */
public class MainActivity extends BaseActivity {

    @Bind(R.id.navigation_view)
    NavigationView mNavigationView;
    @Bind(R.id.drawer_layout)
    DrawerLayout mDrawerLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        ActionBarDrawerToggle mToggle = new ActionBarDrawerToggle(this,mDrawerLayout,mToolbar,
                R.string.navigation_drawer_open,
                R.string.navigation_drawer_close);
        mToggle.syncState();
        mDrawerLayout.addDrawerListener(mToggle);
        mNavigationView.setItemIconTintList(null);
        mNavigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                return false;
            }
        });
    }

    @Override
    protected void initViews() {

    }

    @Override
    protected int getLayoutId() {
        return R.layout.activity_main;
    }

    @Override
    protected boolean initToolbar() {
        mToolbar.setTitle(R.string.home);
        mToolbar.setNavigationIcon(R.drawable.ic_menu_black_24dp);
        return true;
    }


}
  • 運行查看效果

優化

可是如今咱們發現側邊欄是沒有選中狀態的,如效果圖所示,git

15307558160904_2

咱們怎麼才能是左邊的導航欄有選擇狀態呢?github

給左邊的導航欄加上選中效果

  • 首先在佈局文件中,NavigationView的控件的meun中註明一個behavior
<group
        android:checkableBehavior="single">
        <item
            android:title="@string/home">

        </item>
    </group>
android:checkableBehavior="single"

表示每一項都是單選,若是不標明的話,NavigationView不會有選中效果.app

  • 在Java文件中增長監聽器
mNavigationView.setNavigationItemSelectedListener(onNavigationItemSelectedListener);
NavigationView.OnNavigationItemSelectedListener onNavigationItemSelectedListener = new NavigationView.OnNavigationItemSelectedListener() {
        @Override
        public boolean onNavigationItemSelected(@NonNull MenuItem item) {
            switch (item.getItemId()) {
                case R.id.menu_favorite_article:
                    break;
                case R.id.menu_about:
                    break;
                case R.id.menu_exit:
                    break;
                case R.id.menu_home:
                    break;
                default:
                    break;
            }
            //關閉側邊欄
            mDrawerLayout.closeDrawers();
            return true;
        }
    };
  • 運行效果

device-2018-07-05-10370515307584630889_2

改變圖標的顏色

咱們給剛剛增長的NavigationView的控件的meun的Item增長一個iconide

<group
        android:checkableBehavior="single">
        <item
            android:id="@+id/menu_home"
            android:icon="@mipmap/ic_launcher"
            android:title="@string/home">

        </item>
    </group>

ok看下如今的效果:佈局

device-2018-07-05-105127

5咱們發現首頁 旁邊的圖標變成了黑色.這並非咱們想要的.優化

咱們怎麼去更改Icon的顏色呢,有兩種方法:ui

  • 在NavigationView的佈局xml文件裏增長app:itemIconTint="@color/xxx"屬性,能夠設置Icon的圖片顏色爲統一的一種顏色

activity_main.xmlthis

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout 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:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".ui.MainActivity">

    <android.support.design.widget.NavigationView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/navigation_view"
        android:layout_gravity="left|start"
        app:headerLayout="@layout/header_layout"
        app:menu="@menu/navigation_menu"
        app:itemIconTint="@color/_0091ea">

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

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

運行效果以下:

device-2018-07-05-110042

咱們能夠看到全部的Icon的圖片顏色所有換成了統一的藍色.可是首頁旁邊的Icon仍不是咱們想要的圖標顏色.這就得須要第二種方法了.

  • 咱們若是想讓Icon顯示本省的顏色,就得在java文件裏面調用如下方法:
mNavigationView.setItemIconTintList(null);

MainActivity

package com.vv.drawerlayout.ui;

import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.design.widget.NavigationView;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarDrawerToggle;
import android.view.MenuItem;

import com.vv.drawerlayout.R;
import com.vv.drawerlayout.ui.base.BaseActivity;

import butterknife.Bind;

/**
 * @author ShenZhenWei
 */
public class MainActivity extends BaseActivity {

    @Bind(R.id.navigation_view)
    NavigationView mNavigationView;
    @Bind(R.id.drawer_layout)
    DrawerLayout mDrawerLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        ActionBarDrawerToggle mToggle = new ActionBarDrawerToggle(this,mDrawerLayout,mToolbar,
                R.string.navigation_drawer_open,
                R.string.navigation_drawer_close);
        mToggle.syncState();
        mDrawerLayout.addDrawerListener(mToggle);
        mNavigationView.setItemIconTintList(null);
        mNavigationView.setNavigationItemSelectedListener(onNavigationItemSelectedListener);
    }

    @Override
    protected void initViews() {

    }

    @Override
    protected int getLayoutId() {
        return R.layout.activity_main;
    }

    @Override
    protected boolean initToolbar() {
        mToolbar.setTitle(R.string.home);
        mToolbar.setNavigationIcon(R.drawable.ic_menu_black_24dp);
        return true;
    }


    NavigationView.OnNavigationItemSelectedListener onNavigationItemSelectedListener = new NavigationView.OnNavigationItemSelectedListener() {
        @Override
        public boolean onNavigationItemSelected(@NonNull MenuItem item) {
            switch (item.getItemId()) {
                case R.id.menu_favorite_article:
                    break;
                case R.id.menu_about:
                    break;
                case R.id.menu_exit:
                    break;
                case R.id.menu_home:
                    break;
                default:
                    break;
            }
            //關閉側邊欄
            mDrawerLayout.closeDrawers();
            return true;
        }
    };

}

運行效果:

device-2018-07-05-110546

能夠看到,這個效果就是咱們想要的~

改變Item的背景,改變Item的TextColor

  • 若是要改變Item的背景,咱們須要用到NavigationView的.app:itemBackground=""方法
  • 若是要改變Item的TextColor,咱們須要用到NavigationView的app:itemTextColor=""方法

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout 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:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".ui.MainActivity">

    <android.support.design.widget.NavigationView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/navigation_view"
        android:layout_gravity="left|start"
        app:headerLayout="@layout/header_layout"
        app:menu="@menu/navigation_menu"
        app:itemBackground="@color/_0091ea"
        app:itemTextColor="@color/white"
        app:itemIconTint="@color/_0091ea">

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

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

效果以下:

device-2018-07-05-111309

給Item之間增長分割線

咱們只須要在以上基礎上增長一個group_id便可.即:講menu先放入到group組中,而後再給這個group賦上id的值,就能實現分割線效果.

navigation_menu.xml

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

    <item
        android:id="@+id/menu_favorite_article"
        android:icon="@drawable/ic_favorite_gray_24dp"
        android:title="@string/favorite_article"
        app:showAsAction="ifRoom"
        app:itemIconTint="@color/_0091ea"/>
    <item
        android:id="@+id/menu_about"
        android:icon="@drawable/ic_about_us_gray_24dp"
        android:title="@string/about_us"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/menu_exit"
        android:icon="@drawable/ic_exit_to_app_gray_24dp"
        android:title="@string/exit"
        app:showAsAction="ifRoom"
        />

    <group
        android:id="@+id/group_home"
        android:checkableBehavior="single"
        >
        <item
            android:id="@+id/menu_home"
            android:icon="@mipmap/ic_launcher_round"

            android:title="@string/home">

        </item>
    </group>
</menu>

運行效果

device-2018-07-05-111851

怎麼實現Toolbar被遮擋的側滑抽屜效果

咱們常見的應用,像網易雲音樂,QQ等都是Toolbar被遮擋的側滑效果.

device-2018-07-05-113031-1device-2018-07-05-113158-1

咱們實現這種效果就得讓DrawerLayout包含在Toolbar外面

activity_drawer_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout 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:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <android.support.design.widget.AppBarLayout
            android:id="@+id/appBarLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:theme="@style/AppTheme.AppBarOverlay">

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="?attr/colorPrimary"
                app:popupTheme="@style/AppTheme.PopupOverlay" />

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

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">
            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:text="@string/home"
                android:gravity="center"/>
        </LinearLayout>

    </LinearLayout>


    <android.support.design.widget.NavigationView
        android:id="@+id/navigation_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/header_layout"
        app:itemIconTint="@color/colorAccent"
        app:menu="@menu/navigation_menu">

    </android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
package com.vv.drawerlayout.ui;

import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.support.design.widget.NavigationView;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.MenuItem;

import com.vv.drawerlayout.R;

import butterknife.Bind;
import butterknife.ButterKnife;

/**
 * @author ShenZhenWei
 * @date 2018/7/5
 */
public class DrawerLayoutActivity extends AppCompatActivity {
    @Bind(R.id.toolbar)
    Toolbar mToolbar;
    @Bind(R.id.navigation_view)
    NavigationView mNavigationView;
    @Bind(R.id.drawer_layout)
    DrawerLayout mDrawerLayout;

    private ActionBarDrawerToggle mToggle;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_drawer_layout);
        ButterKnife.bind(this);
        //設置Toolbar
        setToolbar();

        //設置DrawerToggle 開關
        setDrawerToggle();

        //設置監聽器
        setListener();
    }

    private void setListener() {
        mNavigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                mDrawerLayout.closeDrawers();
                return true;
            }
        });
    }

    private void setDrawerToggle() {
        mToggle=new ActionBarDrawerToggle(this,mDrawerLayout,mToolbar,
                R.string.navigation_drawer_open,
                R.string.navigation_drawer_close);
        mDrawerLayout.addDrawerListener(mToggle);
        //同步DrawerLayout的狀態
        mToggle.syncState();
    }

    private void setToolbar() {
        setSupportActionBar(mToolbar);
        // 顯示Home的圖標
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
    }
}

注意: setSupportActionBar(mToolbar);必定要寫在mDrawerLayout.addDrawerListener(mToggle); 以前,不然將沒法響應Home頁面上的Icon點擊事件.

運行效果:

15308425514883_2

代碼

爲了方便,代碼已經上傳GitHub,敬請下載~

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程