目錄:
1.概述
2.實作過程與代碼
1.概述
在android開發中,咱們常常會有需求開發抽屜菜單,縱觀當下的主流APP,大多首頁都會有側滑抽屜菜單,它的好處就在于,它能夠
在有限的空間内顯示盡可能多的控件。
抽屜菜單的實作方式也有不少種方式,下面我僅僅是經過官方的DrawerLayout+NavigationView+toolbar來實作與導航欄相關聯的抽屜
菜單。
2.實作過程與代碼
2.1 效果截圖
由上面的效果圖能夠看出,其中的布局包括3部分,(1)主體布局,抽屜菜單未滑出時的顯示布局 (2)抽屜菜單的頭部布局 (3)抽屜菜單的菜單項布局
ok,下面會依次貼出上面的布局。
2.2 主布局檔案activity_main.xml
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
/>
注:能夠看出除了toolbar控件外,還導入了其drawerlayout_main布局,看看drawerlayout_main的布局以下
2.3 主布局檔案中include包含檔案drawerlayout_main.xml
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_height="match_parent"
android:layout_width="match_parent">
android:id="@+id/main_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
android:src="@drawable/background"
android:layout_width="match_parent"
android:layout_height="match_parent" />
android:id="@+id/drawer_navigation"
android:layout_width="480dp"
android:layout_height="match_parent"
android:layout_gravity="left"
app:menu="@menu/drawer_menu"
app:headerLayout="@layout/drawer_header"/>
注:看drawerlayout_main布局以DrawerLayout未根布局,并在裡面包含了FrameLayout布局和NavigationView控件,其中FrameLayout布局
就是主體布局内容,而NavigationView則是導航抽屜,細心的朋友能夠看見裡面的app:menu="@menu/drawer_menu"和
app:headerLayout="@layout/drawer_header"屬性,他們分别指定的是側滑抽屜菜單的menu和header,下面分别是抽屜菜單的頭部布局和菜單項
2.4 抽屜菜單header布局drawer_header.xml
android:layout_width="match_parent"
android:background="@drawable/navication_header"
android:layout_height="match_parent">
android:layout_marginTop="15dp"
android:id="@+id/header_icon"
android:layout_centerHorizontal="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/ic_launcher"/>
android:layout_marginTop="10dp"
android:layout_marginLeft="20dp"
android:layout_below="@+id/header_icon"
android:layout_alignParentLeft="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/nick_name"
android:text="Andy Lau"
android:textSize="18sp"/>
android:layout_marginLeft="20dp"
android:layout_below="@+id/nick_name"
android:layout_alignParentLeft="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/desc"
android:text="作一稞低頭的麥穗,飽滿而謙遜!"
android:textSize="18sp"/>
2.5 menu布局檔案drawer_menu.xml
android:title="購物愛好">
android:icon="@drawable/film"
android:title="電影"/>
android:icon="@drawable/mall"
android:title="商場"/>
android:title="我的中心">
android:icon="@drawable/wallet"
android:title="錢包"/>
android:icon="@drawable/collect"
android:title="收藏"/>
android:icon="@drawable/setting"
android:title="設定"/>
注:ok,布局基本貼完,下面是主要類代碼
2.6 主布局java類MainActivity,
package com.example.drawerlayout;
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.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.Toast;
public class MainActivity extends AppCompatActivity {
private Toolbar toolbar;
private DrawerLayout drawerLayout;
private NavigationView navigation;
private ActionBarDrawerToggle drawerToggle;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
//設定toolbar标題文本
toolbar.setTitle("首頁");
//設定toolbar
setSupportActionBar(toolbar);
//設定左上角圖示是否可點選
getSupportActionBar().setHomeButtonEnabled(true);
//左上角加上一個傳回圖示
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
//初始化ActionBarDrawerToggle(ActionBarDrawerToggle就是一個開關同樣用來打開或者關閉drawer)
drawerToggle = new ActionBarDrawerToggle(MainActivity.this,drawerLayout,toolbar,R.string.openString,R.string.closeString){
@Override
public void onDrawerOpened(View drawerView) {
Toast.makeText(MainActivity.this,"菜單打開了",Toast.LENGTH_SHORT).show();
super.onDrawerOpened(drawerView);
}
@Override
public void onDrawerClosed(View drawerView) {
Toast.makeText(MainActivity.this,"菜單關閉了",Toast.LENGTH_SHORT).show();
super.onDrawerClosed(drawerView);
}
};
navigation.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(MenuItem menuItem) {
Toast.makeText(MainActivity.this,menuItem.getTitle(),Toast.LENGTH_SHORT).show();
menuItem.setChecked(true);
drawerLayout.closeDrawers();
return false;
}
});
drawerToggle.syncState();
//設定DrawerLayout的抽屜開關監聽
drawerLayout.setDrawerListener(drawerToggle);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.toolbar_menu,menu);
return super.onCreateOptionsMenu(menu);
}
private void initView() {
toolbar = (Toolbar) findViewById(R.id.toolbar);
drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
navigation = (NavigationView) findViewById(R.id.drawer_navigation);
}
}
注:最後在附上對theme的自定義style
2.7 Theme風格自定義
false
@color/customArrayColor
@style/CustomNoActionBarTheme.drawerArrowStyle
@color/customColorPrimary
@color/colorAccent
@color/customArrayColor