設置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隱藏菜單的三點圖標一致。
NavigationView的使用
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>