Android DrawerLayout抽屜效果和Toolbar標題欄的簡單使用

原創 一醉南柯 2018-10-27 07:06

話不多說先看運行效果：

View層

佈局layout：

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:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context=".MainActivity"
    android:id="@+id/drawer_layout"
    android:fitsSystemWindows="true"
    tools:openDrawer="start">

    <include
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        layout="@layout/app_bar_main"/>
    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/nav_header_main"
        app:menu="@menu/navigation_item"/>
</android.support.v4.widget.DrawerLayout>

app_bar_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <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="#ffffff"
            app:navigationIcon="@mipmap/head"
            app:popupTheme="@style/AppTheme.PopupOverlay">
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/title"
                android:textSize="24sp"
                android:textColor="#045FB4"
                android:textStyle="bold"
                android:layout_gravity="center_horizontal"
                />
        </android.support.v7.widget.Toolbar>
    </android.support.design.widget.AppBarLayout>

    <include layout="@layout/content_main"/>
</android.support.design.widget.CoordinatorLayout>

content_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:showIn="@layout/app_bar_main"
    tools:context=".MainActivity">

<!--app:layout_behavior="@string/appbar_scrolling_view_behavior":防止ToolBar遮住內容-->
    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@mipmap/nature" />
</android.support.constraint.ConstraintLayout>

nav_header_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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="165dp"
    android:background="@color/design_default_color_primary_dark"
    android:gravity="bottom"
    android:orientation="vertical"
    android:padding="16dp"
    android:theme="@style/ThemeOverlay.AppCompat.Dark">


    <ImageView
        android:id="@+id/imageView"
        android:layout_width="58dp"
        android:layout_height="58dp"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@mipmap/head" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="4dp"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        android:paddingLeft="5dp"
        android:text="@string/name"
        android:textSize="18sp"
        android:textStyle="bold"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/imageView"
        tools:ignore="RtlSymmetry" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="12dp"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        android:text="@string/work"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView" />

</android.support.constraint.ConstraintLayout>

menu配置文件：

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/action_add"
        android:icon="@mipmap/add"
        android:title="@string/add"
        app:showAsAction="ifRoom">
        <menu>
            <item
                android:icon="@mipmap/create"
                android:title="@string/create" />
            <item
                android:icon="@mipmap/clean"
                android:title="@string/clean"/>
            <item
                android:icon="@mipmap/addfriend"
                android:title="@string/add_friend"/>
            <item
                android:icon="@mipmap/pay"
                android:title="@string/pay"/>
        </menu>
    </item>
    <!--　showAsAction這個屬性可接受的值有：
　　1、always：使菜單項一直顯示在ToolBar上。
　　2、ifRoom：如果有足夠的空間，這個值會使菜單項顯示在ToolBar上。
　　3、never：使菜單項永遠都不出現在ToolBar上,在…的子項中顯示。
　　4、withText：使菜單項和它的圖標，菜單文本一起顯示。
    -->
</menu>

navigation_item.xml

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

    <group android:checkableBehavior="single">
        <item
            android:id="@+id/girl1"
            android:icon="@mipmap/header"
            android:title="女友一：小紅"/>
        <item
            android:id="@+id/girl2"
            android:icon="@mipmap/header"
            android:title="女友二：小紫"/>
        <item
            android:id="@+id/girl3"
            android:icon="@mipmap/header"
            android:title="女友三：小花"/>

        <item
            android:id="@+id/girl4"
            android:icon="@mipmap/header"
            android:title="女友四：小青"/>
        <item
            android:id="@+id/girl5"
            android:icon="@mipmap/header"
            android:title="女友五：小蘭"/>
    </group>
    <item android:title="交友網站">
        <menu>
            <item
                android:title="微博"
                android:icon="@mipmap/weibo"
                />
            <item
                android:icon="@mipmap/tianya"
                android:title="天涯"/>
        </menu>
    </item>
</menu>

values配置文件：

string.xml

<resources>
    <string name="app_name">ActionBarUsing</string>
    <string name="add">添加</string>
    <string name="setting">setting</string>
    <string name="name">小明</string>
    <string name="work">職位：極客</string>
    <string name="navigation_drawer_open">Open navigation drawer</string>
    <string name="navigation_drawer_close">Close navigation drawer</string>
    <string name="title">標題</string>
    <string name="create">創建羣聊</string>
    <string name="clean">掃一掃</string>
    <string name="add_friend">加好友/羣</string>
    <string name="pay">收付款</string>
</resources>

styles.xml

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" 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.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar"/>
    <style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light">
        <item name="overlapAnchor">false</item><!--不覆蓋toolbar-->
        <item name="android:paddingRight">6dp</item>
    </style>
    <!--<style name="AppTheme.toolbar.menuItem" parent="Base.Widget.AppCompat.PopupMenu.Overflow">-->
      <!---->
    <!--</style>-->
</resources>

Control層

MainActivity.java

package com.example.actionbarusing;

import android.support.annotation.NonNull;
import android.support.design.widget.NavigationView;
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.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;


public class MainActivity extends AppCompatActivity implements NavigationView.OnNavigationItemSelectedListener, View.OnClickListener {

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

    }

    public void init() {
        Toolbar toolbar = findViewById(R.id.toolbar);
        toolbar.setTitle("");//清空原標題
//        toolbar.setNavigationIcon(R.mipmap.ic_launcher_round);
        setSupportActionBar(toolbar);

        DrawerLayout drawerLayout = findViewById(R.id.drawer_layout);
        ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(this, drawerLayout, toolbar,
                R.string.navigation_drawer_open, R.string.navigation_drawer_close);
        toggle.setDrawerIndicatorEnabled(false);//取消左邊三條橫槓的圖標
        drawerLayout.addDrawerListener(toggle);
        toggle.syncState();// 需要將ActionDrawerToggle與DrawerLayout的狀態同步

        //setNavigationOnClickListener一定要放在setSupportActionBar(toolbar)
        // 和 drawerLayout.addDrawerListener(toggle)之後,不然onclick無效
        toolbar.setNavigationOnClickListener(this);//自定義圖標打開左側菜單

        NavigationView navigation = findViewById(R.id.nav_view);
        navigation.setNavigationItemSelectedListener(this);//給側拉菜單添加監聽事件

    }

    //Android中在按下back鍵時會調用到onBackPressed()方法，onBackPressed相對於finish方法
    @Override
    public void onBackPressed() {
        super.onBackPressed();
        DrawerLayout layout = findViewById(R.id.drawer_layout);
        if (layout.isDrawerOpen(GravityCompat.START)) {
            layout.closeDrawer(GravityCompat.START);
        } else {
            super.onBackPressed();
        }
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menu, menu);
        return true;
    }



    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            case R.id.action_add:

                break;
            default:
                return super.onOptionsItemSelected(item);
        }
        return true;
    }

    //抽屜Item的選擇方法
    @Override
    public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {
        switch (menuItem.getItemId()){
            case R.id.girl1:
                break;
            case R.id.girl2:
                break;
            case R.id.girl3:
                break;
            case R.id.girl4:
                break;
            case R.id.girl5:
                break;
            default:
                break;
        }
        DrawerLayout drawer=findViewById(R.id.drawer_layout);
        drawer.closeDrawer(GravityCompat.START);
        return true;
    }

    @Override
    public void onClick(View v) {   //在定義圖標打開左拉菜單點擊事件
        DrawerLayout drawer = findViewById(R.id.drawer_layout);
        drawer.openDrawer(GravityCompat.START);
    }
}

 

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

【Android NDK學習之路：第一節】搭建Android Studio的NDK環境

1.關於NDK的一些基礎問題 1.什麼是ndk？有啥作用？？ NDK是Native Development Kit的縮寫，意思是原生開發工具包，它可以讓我們在Android應用中使用C和C++代碼，通過其提供的衆多平臺庫，我們可

苏青岩 2020-07-02 14:37:12

HIDL理解

lf12345678910 2020-02-24 00:45:04

使用GDB調試Android Native Lib

bingoCoder2013 2019-06-21 21:47:34

Android Fragment實踐之簡易的新聞應用

一醉南柯 2018-11-12 23:27:46

Android Activity最佳實踐--隨時隨地退出程序

一醉南柯 2018-11-04 07:31:26

Android屬性動畫----ValueAnimator

一醉南柯 2018-11-04 07:31:26

Android中SurfaceView簡單使用

一醉南柯 2018-10-27 07:06:47

Android Uri.parse的詳細資料

一醉南柯 2018-10-27 07:06:47

Android Notification通知的簡單使用

一醉南柯 2018-10-27 07:06:47

Android開發不得不收藏的開源庫(控件)

一醉南柯 2018-10-21 06:17:15

CoordinatorLayout使用詳解: 打造摺疊懸浮效果

一醉南柯 2018-10-20 06:56:07

Android ViewFlipper翻轉視圖的基本使用

一醉南柯 2018-10-20 06:56:07

Android ViewPager引導頁的使用

一醉南柯 2018-10-13 06:43:22

Android DrawerLayout抽屜的使用

一醉南柯 2018-10-13 06:43:22

Android自定義View動畫

一醉南柯 2018-10-10 07:43:29