Android DrawerLayout+ToolBar+NavigationView實現側滑選單效果,沉浸式狀態列
阿新 • • 發佈：2019-01-26
最近看到很多APP都使用了Android Support Library的DrawerLayout實現側滑效果,下面我就自己寫了一個Demo來實現,其中還用到了Toolbar,NavigationView,沉浸式狀態列效果
先看效果圖
新增依賴 compile 'com.android.support:design:24+'
首先是佈局檔案,一共有四個xml檔案兩個menu檔案,先看xml
activity_main.xml, 主頁面的佈局檔案引用了app_bar_main.xml主內容頁面佈局檔案和activity_main_drawer.xml側滑選單的menu檔案,並使用了NavigationView來作為側拉頁面的容器,引用了nav_header_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 app_bar_main.xml, 使用CoordinatorLayout作為最外層的容器,主要是用來協調子佈局的動畫效果,這裡沒有效果,當使用一些滑動列表view比如scrollview或者recyclerview等就會有相應的效果;Tollbar外面包裹一層AppBarLayout來作為標題欄,實現自定義;FloatingActionButton浮動的button
<?xml version="1.0" encoding="utf-8"?>
<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"
android:fitsSystemWindows="true"
android:orientation="vertical"
tools:context=".MainActivity">
<android.support.design.widget.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>
<include layout="@layout/content_main" />
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_margin="@dimen/fab_margin"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:src="@android:drawable/ic_input_add"/>
</android.support.design.widget.CoordinatorLayout>content_main.xml, 內容佈局,這裡用了一個textView來簡單實現一下效果
<?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="match_parent"
android:orientation="horizontal">
<TextView
android:id="@+id/tv_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="Hello World"
android:textColor="@android:color/holo_red_dark"
android:textSize="20sp"
/>
</LinearLayout>nav_header_main.xml, 包含一個imgeview和兩個textview
<?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="@dimen/nav_header_height"
android:background="@mipmap/side_nav_bar"
android:gravity="bottom"
android:orientation="vertical"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:theme="@style/ThemeOverlay.AppCompat.Dark">
<ImageView
android:id="@+id/imageview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="@dimen/nav_header_vertical_spacing"
android:src="@android:drawable/sym_def_app_icon" />
<TextView
android:id="@+id/nav_tv1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="@dimen/nav_header_vertical_spacing"
android:text="京東電商雲"
android:textAppearance="@style/TextAppearance.AppCompat.Body1" />
<TextView
android:id="@+id/nav_tv2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="http://www.jcloud.com/" />
</LinearLayout>下面就是兩個menu檔案, activity_main_drawer.xml,側滑頁面的item
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="@+id/favorite"
android:checked="true"
android:icon="@mipmap/ic_launcher"
android:title="收藏" />
<item
android:id="@+id/wallet"
android:icon="@mipmap/ic_launcher"
android:title="錢包" />
<item
android:id="@+id/photo"
android:icon="@mipmap/ic_launcher"
android:title="相簿" />
<item
android:id="@+id/file"
android:icon="@mipmap/ic_launcher"
android:title="檔案" />
<group android:id="@+id/id">
<item
android:id="@+id/navigation_daily"
android:icon="@mipmap/ic_daily"
android:title="@string/common_navigation_daily" />
<item
android:id="@+id/navigation_welfare"
android:icon="@mipmap/ic_welfare"
android:title="@string/common_welfare" />
<item
android:id="@+id/navigation_android"
android:icon="@mipmap/ic_android"
android:title="@string/common_android" />
<item
android:id="@+id/navigation_ios"
android:icon="@mipmap/ic_ios"
android:title="@string/common_ios" />
<item
android:id="@+id/navigation_js"
android:icon="@mipmap/ic_js"
android:title="@string/common_js" />
<item
android:id="@+id/navigation_video"
android:icon="@mipmap/ic_video"
android:title="@string/common_video" />
<item
android:id="@+id/navigation_resources"
android:icon="@mipmap/ic_resources"
android:title="@string/common_resources" />
<item
android:id="@+id/navigation_app"
android:icon="@mipmap/ic_app"
android:title="@string/common_app" />
</group>
</menu>base_toolbar_menu.xml, Toolbar右側的item
<?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_main_about"
android:icon="@mipmap/ic_about"
android:orderInCategory="6"
android:title="關於"
app:showAsAction="ifRoom" />
<item
android:id="@+id/menu_main_home_page"
android:orderInCategory="26"
android:title="item1"
app:showAsAction="never" />
<item
android:id="@+id/menu_main_top_github"
android:orderInCategory="26"
android:title="item2"
app:showAsAction="never" />
</menu>styles.xml, 樣式檔案,自定義一下主題
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- 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.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
</resources>
MainActivity的java程式碼
package com.jd.demo;
import android.graphics.Color;
import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.NavigationView;
import android.support.design.widget.Snackbar;
import android.support.v4.view.GravityCompat;
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.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.TextView;
import android.widget.Toast;
public class MainActivity extends AppCompatActivity implements NavigationView.OnNavigationItemSelectedListener {
private Toolbar toolbar;
private FloatingActionButton fab;
private DrawerLayout drawerLayout;
private TextView textView;
private NavigationView navigationView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//設定狀態列透明
setStatus();
textView = (TextView) findViewById(R.id.tv_main);
//設定Toolbar
initToobar();
//按鈕點選事件
initButton();
//設定選單開啟關閉的監聽
initDrawerLayout();
//選單的設定
initgNavagationView();
}
//選單的設定
private void initgNavagationView() {
navigationView = (NavigationView) findViewById(R.id.nav_view);
navigationView.setNavigationItemSelectedListener(this);
}
//設定選單開啟關閉的監聽
private void initDrawerLayout() {
drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(this, drawerLayout, toolbar, R.string.nav_open, R.string.nav_close);
drawerLayout.addDrawerListener(toggle);
toggle.syncState();
}
//按鈕點選事件
private void initButton() {
fab = (FloatingActionButton) findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Snackbar.make(v, "Snack", Snackbar.LENGTH_LONG)
.setAction("clickSnack", new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MainActivity.this, "Snack被點選了", Toast.LENGTH_LONG).show();
}
})
.show();
}
});
}
//設定Toolbar
private void initToobar() {
toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
}
//設定狀態列透明
private void setStatus() {
getWindow().setStatusBarColor(Color.TRANSPARENT);
getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN | View.SYSTEM_UI_FLAG_LAYOUT_STABLE);
}
//新增Toolbar右上方的選單
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.base_toolbar_menu, menu);
return true;
}
//Toolbar右上方選單item的點選回撥
@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case R.id.menu_main_about:
case R.id.menu_main_home_page:
case R.id.menu_main_top_github:
textView.setText(item.getTitle());
return true;
}
return super.onOptionsItemSelected(item);
}
//左側選單item點選時回撥
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
switch (item.getItemId()) {
case R.id.favorite:
case R.id.wallet:
case R.id.photo:
case R.id.file:
case R.id.navigation_daily:
case R.id.navigation_welfare:
case R.id.navigation_android:
case R.id.navigation_ios:
case R.id.navigation_js:
case R.id.navigation_video:
case R.id.navigation_resources:
case R.id.navigation_app:
textView.setText(item.getTitle());
break;
}
drawerLayout.closeDrawer(GravityCompat.START);
return true;
}
//返回鍵的處理
@Override
public void onBackPressed() {
if (drawerLayout.isDrawerOpen(GravityCompat.START)) {
drawerLayout.closeDrawer(GravityCompat.START);
} else {
super.onBackPressed();
}
}
}