ToolBar+DrawerLayout+NavigationView

設置Activity樣式爲NoTitle類型

修改Activity的android:theme屬性,創建AppTheme.Base,繼承Theme.AppCompat,讓AppTheme繼承AppTheme.Base。設置windowActionBar和windowNoTitle,隱藏原有的ActionBar。

<style name="AppTheme.Base" parent="Theme.AppCompat">
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
</style>

<style name="AppTheme" parent="AppTheme.Base">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>

在佈局中添加控件

<android.support.v7.widget.Toolbar
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:background="#02B226"
    android:id="@+id/toolbar">
</android.support.v7.widget.Toolbar>

Activity中初始化ToolBar

//初始化toolbar控件
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
//調用該方法toolBar替換原本的actionBar
setSupportActionBar(toolbar);

添加控件

//添加導航圖標
toolbar.setNavigationIcon(R.drawable.bar5);
//添加logo圖標
toolbar.setLogo(R.drawable.bar6);
//添加主題,放在setSupportActionBar(toolbar)的前面才能生效
toolbar.setTitle("主題");
//添加主標題
toolbar.setSubtitle("主標題");

添加菜單

在res/menu下定義菜單文件

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context=".MainActivity">
    <item android:id="@+id/action_share"
        android:title="@string/share"
        android:orderInCategory="1"
        android:icon="@drawable/bar1"
        app:showAsAction="ifRoom" />
    <item android:id="@+id/action_search"
        android:title="@string/search"
        android:orderInCategory="3"
        android:icon="@drawable/bar3"
        app:showAsAction="ifRoom" />
    <item android:id="@+id/action_settings1"
        android:title="設置"
        android:orderInCategory="1"
        app:showAsAction="never" />
</menu>

item標籤中的app:showAsAction屬性表示該菜單是隱藏顯示還是不隱藏顯示,never表示隱藏(右側會出現三個點,點擊後彈出),android:orderInCategory屬相表示顯示的順序,隱藏顯示值小在上面,值大在下面。不隱藏顯示值小在左面,值大在右面。有隱藏顯示菜單選項隱藏菜單的三個點按鍵在最右邊。

activity中這是菜單

重寫onCreateOptionsMenu()方法

public boolean onCreateOptionsMenu(Menu menu) {
  getMenuInflater().inflate(R.menu.barmenu,menu);
     return super.onCreateOptionsMenu(menu);
 }

運行

這裏寫圖片描述

菜單設置事件監聽

toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
       @Override
       public boolean onMenuItemClick(MenuItem item) {
           String msg = "";
           switch (item.getItemId()) {
               case R.id.action_share:
                   msg += "分享";
                   break;
               case R.id.action_search:
                   msg += "搜索";
                   break;
               case R.id.action_settings1:
                   msg += "設置";
                   break;
           }

           if(!msg.equals("")) {
               Toast.makeText(MainActivity.this, msg, Toast.LENGTH_SHORT).show();
           }
           return true;
       }
   });

ToolBar菜單的其他設置

設置彈出隱藏菜單的三點按鍵的顏色

在AppTheme樣式中添加如下item:

<style name="AppTheme" parent="AppTheme.Base">
    <item name="android:textColorSecondary">@color/black</item>
</style>

設置彈出隱藏菜單的背景顏色、字體大小、彈出位置

創建名爲ToolbarPopupTheme的樣式,然後這隻ToolBar佈局控件的app:popupTheme=”@style/ToolbarPopupTheme”屬性。

<style name="ToolbarPopupTheme" parent="@style/ThemeOverlay.AppCompat.Dark">
    <!--彈出隱藏菜單的背景顏色-->
    <item name="android:colorBackground">@color/white</item>
    <!--彈出隱藏菜單的字體顏色-->
    <item name="android:textColor">@android:color/black</item>
    <!--彈出隱藏菜單的字體大小-->
    <item name="android:textSize">16sp</item>
    <item name="actionOverflowMenuStyle">@style/OverflowMenuStyle</item> <!--新增一個item,用於控制menu-->
    </style>
<style name="OverflowMenuStyle" parent="Widget.AppCompat.Light.PopupMenu.Overflow">
    <!--彈出隱藏菜單的位置-->
    <item name="overlapAnchor">false</item>  <!--把該屬性改爲false即可使menu位置位於toolbar之下-->
</style>

DrawerLayout使用

DrawerLayout是一個側滑佈局,在佈局中只需要添加V4包中的DrawerLayout空間就可以。在該空間中添加兩個子view,放在上面的view爲內容展示,放在下面的view爲菜單。

<!--
 DrawerLayout佈局
 一般作爲根佈局,否則可能會出現觸摸事件被屏蔽。
 -->
<android.support.v4.widget.DrawerLayout
    android:id="@+id/drawerlayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="bo.yi.chu.test2.MainActivity">

    <!--
    內容佈局
    內容佈局要放在側滑佈局的前面
    -->
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/rl_content"
        android:background="#fff">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/tv"
            android:layout_centerInParent="true"
            android:text="這裏是內容"
            android:textSize="14sp"
            android:textColor="#323232"/>
    </RelativeLayout>
    <!--
    側滑佈局
    側滑佈局必須設置layout_gravity屬性,start/left表示從左側滑出,right表示從右側滑出。
    不設置該屬性會報錯。
    -->
    <RelativeLayout
        android:layout_width="300dp"
        android:layout_height="match_parent"
        android:id="@+id/rl_menu"
        android:layout_gravity="left"
        android:background="#fff">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="這裏是側滑內容"
            android:textSize="14sp"
            android:textColor="#323232"/>
    </RelativeLayout>
</android.support.v4.widget.DrawerLayout>

DrawerLayout的開和關

在代碼中控制DrawerLayout的開關

/*
關閉側滑菜單,參數可以爲菜單佈局View
drawerLayout.closeDrawer(rlMenu);
*/
/*
開啓側滑菜單,參數可以爲菜單佈局View
drawerLayout.openDrawer(rlMenu);
*/

DrawerLayout和ToolBar的組合使用

創建DrawerLayout的監聽器

//創建DrawerLayout開關的監聽器
        actionBarDrawerToggle = new ActionBarDrawerToggle(this,drawerLayout,toolbar,R.string.open,R.string.close){
   @Override
   public void onDrawerClosed(View drawerView) {
       super.onDrawerClosed(drawerView);
   }

   @Override
   public void onDrawerOpened(View drawerView) {
       super.onDrawerOpened(drawerView);
   }
};
actionBarDrawerToggle.syncState();
drawerLayout.addDrawerListener(actionBarDrawerToggle);

對bar的設置

getSupportActionBar().setHomeButtonEnabled(true); //設置返回鍵可用
getSupportActionBar().setDisplayHomeAsUpEnabled(true);

運行

這裏寫圖片描述
ToolBar的左側會自動出現一個箭頭、三橫槓切換的圖標。顏色設置和ToolBar隱藏菜單的三點圖標一致。

DrawerLayout的菜單部分通常用NavigationView來做。
在佈局文件中加入NavigationView控件,作爲DrawerLayout的菜單。

<android.support.design.widget.NavigationView
    android:id="@+id/navigation"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#035698"
    app:menu="@menu/ngvmenu"
    app:headerLayout="@layout/ngv_head"/>

NavigationView的菜單佈局

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group android:checkableBehavior="none">
        <item
            android:id="@+id/nav_me"
            android:title="我"
            android:icon="@drawable/ngv1"/>
        <item
            android:id="@+id/nav_friend"
            android:title="好友"
            android:icon="@drawable/ngv2"/>
        <item
            android:id="@+id/nav_notification"
            android:title="通知"
            android:icon="@drawable/ngv3"/>
        <item
            android:id="@+id/nav_message"
            android:title="私信"
            android:icon="@drawable/ngv4"
            />
    </group>
    <group android:checkableBehavior="none"
        android:id="@+id/group_manage">
        <item
            android:id="@+id/nav_manage"
            android:title="應用管理"
            android:icon="@drawable/ngv5"/>
    </group>
    <group
        android:checkableBehavior="none"
        android:id="@+id/group_settings">
        <item android:id="@+id/nav_theme"
            android:title="主題風格"/>
        <item android:id="@+id/nav_night"
            android:title="夜間模式"/>
        <item android:id="@+id/nav_setting"
            android:title="設置"/>
        <item android:id="@+id/nav_suggestion"
            android:title="意見反饋"/>
        <item android:id="@+id/nav_about"
            android:title="關於"/>

    </group>
</menu>

需要給group設置id,不同的菜單組之間纔會出現分割線。

NavigationView的頭佈局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="10dp"
        android:src="@drawable/ngvhead1"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="10dp"
        android:text="登錄/註冊"
        android:textSize="16sp"
        android:textColor="#ffffff"/>

</LinearLayout>

運行

這裏寫圖片描述

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