1. 程式人生 > >Android使用ToolBar+DrawerLayout+NavigationView實現側滑抽屜效果

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

ets 代碼 ret r+ content custom port 單選 常見

  • 學會使用DrawerLayout
  • 學會使用NavigationView
  • 學會使用ToolBar+DrawerLayout+NavigationView實現側滑抽屜效果
  • 學會實現Toolbar在頂部以及Toolbar被遮擋的兩種效果

效果展示

側滑控件我們在開發的過程中經常用到,廢話不多說,先上圖:

技術分享圖片

實現過程

如果要實現上圖的展示效果,需要先創建個BaseActivit類,這個類裏面包含Toolbar的初始化,然後再創建DrawerLayout相關的Activity

創建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;
    }


}
  • 運行查看效果

優化

但是現在我們發現側邊欄是沒有選中狀態的,如效果圖所示,

技術分享圖片

我們怎麽才能是左邊的導航欄有選擇狀態呢?

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

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

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

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

  • 在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;
        }
    };
  • 運行效果

技術分享圖片技術分享圖片

改變圖標的顏色

我們給剛剛增加的NavigationView的控件的meun的Item增加一個icon

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

        </item>
    </group>

ok看下現在的效果:

技術分享圖片

5我們發現首頁 旁邊的圖標變成了黑色.這並不是我們想要的.

我們怎麽去更改Icon的顏色呢,有兩種方法:

  • 在NavigationView的布局xml文件裏增加app:itemIconTint="@color/xxx"屬性,可以設置Icon的圖片顏色為統一的一種顏色

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:itemIconTint="@color/_0091ea">

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

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

運行效果如下:

技術分享圖片

我們可以看到所有的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;
        }
    };

}

運行效果:

技術分享圖片

可以看到,這個效果就是我們想要的~

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

  • 如果要改變Item的背景,我們需要用到NavigationView.app:itemBackground=""方法
  • 如果要改變Item的TextColor,我們需要用到NavigationViewapp: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>

效果如下:

技術分享圖片

給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>

運行效果

技術分享圖片

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

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

技術分享圖片技術分享圖片

我們實現這種效果就得讓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點擊事件.

運行效果:

技術分享圖片

代碼

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

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