第一行程式碼學習筆記——Material Design實戰（1）
阿新 • • 發佈：2018-12-12
Toolbar 在MD設計中，用ToolBar去取代ActionBar，首先要去style.xml中設定隱藏ActionBar
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
隱藏完畢，在activity_main.xml修改：
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" /> </FrameLayout>
這邊高度設定為actionBar的高度 android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"可以使得Toolbar單獨使用深色主題 app:popupTheme="@style/ThemeOverlay.AppCompat.Light"單獨將彈出的選單項指定為淡色主題 修改MainActivity
public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); Toolbar toolbar=(Toolbar) findViewById(R.id.toolbar); setSupportActionBar(toolbar);//傳入Toolbar例項，技能用Toolbar，又可以讓它外觀和功能與ActionBar一樣
修改標題欄顯示的文字： 在AndroidManifest.xml中的 android:label即可
<activity
android:name=".MainActivity"
android:label="Fruits"
>
建立選單按鈕 準備好選單圖示圖片作為圖示icon放到drawable目錄下，在res下新建menu資料夾，在menu資料夾下新建Menu resource file，建立一個toolbar.xml檔案，並編寫如下程式碼
<menu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto"> <item android:id="@+id/backup" android:icon="@drawable/backup" android:title="上傳" app:showAsAction="always"/> <item android:id="@+id/delete" android:icon="@drawable/delete" android:title="刪除" app:showAsAction="ifRoom"/> <item android:id="@+id/setting" android:icon="@drawable/setting" android:title="設定" app:showAsAction="never"/> </menu>
app:showAsAction有3個值可選： 1.always 永遠顯示在Toolbar中，如果螢幕空間不夠則不顯示 2.ifRoom 螢幕空間足夠時顯示在Toolbar中，不夠空間則顯示在選單中 3.never 表示永遠顯示在選單中 注：Toolbar的按鈕只會顯示圖示，選單中的按鈕只會顯示文字 增加MainActivity程式碼
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.toolbar,menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()){
case R.id.backup:
Toast.makeText(this, "你點選了上傳", Toast.LENGTH_SHORT).show();
break;
case R.id.delete:
Toast.makeText(this, "你點選了刪除", Toast.LENGTH_SHORT).show();
break;
case R.id.setting:
Toast.makeText(this, "你點選了設定", Toast.LENGTH_SHORT).show();
break;
}
return true;
}
滑動選單
藉助drawerLayout實現滑動選單，drawerLayout是一個佈局，在佈局中允許放如主螢幕顯示內容以及滑動選單顯示的內容 修改activity_main.xml的程式碼：
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/drawer_layout"
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
/>
</FrameLayout>
<!--layout_gravity="start"表示讓DrawerLayout知道滑動選單是在螢幕的左邊left還是右邊right，start表示根據系統語言方向判斷 -->
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start"
android:textSize="30sp"
android:background="#FFF"
>
</android.support.v4.widget.DrawerLayout>
這樣只能從螢幕的左邊拉出來這個選單，不過使用者不一定知道有這麼個選單在左邊隱藏，所以需要加個導航按鈕來作為提示，點選了導航按鈕也會滑出選單 提前準備導航按鈕的圖片放到drawable資料夾下
更改MainActivity程式碼：
public class MainActivity extends AppCompatActivity {
//drawerLayout是一個佈局，在佈局中允許放入兩個直接子控制元件，第一個控制元件是主螢幕中顯示的內容，第二個子控制元件是滑動選單中顯示的內容
private DrawerLayout mDrawerLayout;
@Override
protected void onCreate(Bundle savedInstanceState) {
........
mDrawerLayout =(DrawerLayout)findViewById(R.id.drawer_layout);
ActionBar actionBar=getSupportActionBar();//得到ActionBar的例項，但是具體實現是由ToolBar來完成的
if (actionBar!=null){
actionBar.setDisplayHomeAsUpEnabled(true);//顯示導航按鈕
actionBar.setHomeAsUpIndicator(R.drawable.menu);//設定導航按鈕的圖示，即為toolbar最左邊的按鈕就叫做HomeAsUp，預設 的圖示是一個返回的箭頭，意味著返回上一個活動，在這裡我們把它的預設樣式和作用都做了修改
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()){
case android.R.id.home://HomeAsUp按鈕的id永遠 都是android.R.id.home
mDrawerLayout.openDrawer(GravityCompat.START);//呼叫DrawerLayout的openDrawer()的方法顯示該滑動選單，傳入的引數表示保證這裡的行為和XML中定義的一致
break;
............
滑動選單裡只有一個TextView，太單調，還需要給自己定製佈局進行美化：
NavigationView 將滑動選單的頁面的實現變得非常簡單 第一步： 需要在build.gradle中增加依賴 其中design的版本要和appcompat的版本一致
implementation 'com.android.support:design:27.1.1'
implementation'de.hdodenhof:circleimageview:2.1.0'
de.hdodenhof:circleimageview相當於imageView那樣使用，它可以輕鬆實現把圖片圓形化。 第二步：準備menu和headerLayout menu：用來在NavigationView中顯示具體選單項，headerLayout用來在NavigationView中顯示頭部佈局 先把menu的圖片準備好放在drawable目錄下，在menu資料夾新建Menu resource file——nav_menu.xml 程式碼如下：
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<!--menu中巢狀一個一個group標籤，group表示一個組，把group的checkableBehavior屬性定為single表示組內所有選單項只能單選 -->
<group android:checkableBehavior="single">
<item
android:id="@+id/nav_call"
android:icon="@drawable/nav_call"
android:title="打電話"
/>
<item
android:id="@+id/nav_friends"
android:icon="@drawable/nav_friends"
android:title="朋友"/>
<item
android:id="@+id/nav_location"
android:icon="@drawable/nav_location"
android:title="位置"/>
<item
android:id="@+id/nav_mail"
android:icon="@drawable/nav_mail"
android:title="郵件"/>
<item
android:id="@+id/nav_task"
android:icon="@drawable/nav_task"
android:title="任務"/>
</group>
</menu>
然後準備headerLayout，是一個自己定義的佈局，在其中放進頭像，使用者名稱，郵箱地址。也找個頭像圖片放到drawerable資料夾，在layout資料夾下新建Layout resource file——nav_header.xml
<!--headerLayout是一個隨意定製的佈局，這裡放頭像，使用者名稱，郵箱地址3個內容 -->
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="180dp"
android:padding="10dp"
android:background="?attr/colorPrimary"
>
<de.hdodenhof.circleimageview.CircleImageView
android:id="@+id/icon_image"
android:layout_width="70dp"
android:layout_height="70dp"
android:src="@drawable/nav_icon"
android:layout_centerInParent="true"
/>
<TextView
android:id="@+id/username"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:text="[email protected]"
android:textColor="#fff"
android:textSize="15sp"
/>
<TextView
android:id="@+id/mail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@+id/username"
android:text="ysk"
android:textColor="#fff"
android:textSize="15sp"
/>
</RelativeLayout>
搞完menu和headerLayout，就能用NavigationView了， 更改activity_main.xml
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/drawer_layout"
>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
/>
</FrameLayout>
<!--layout_gravity="start"表示讓DrawerLayout知道滑動選單是在螢幕的左邊left還是右邊right，start表示根據系統語言方向判斷 -->
<android.support.design.widget.NavigationView
android:id="@+id/nav_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start"
app:menu="@menu/nav_menu"
app:headerLayout="@layout/nav_header"
>
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
app:menu="@menu/nav_menu" app:headerLayout="@layout/nav_header" 把我們剛才準備的menu和headerLayout設定進去了。於是乎定義好了NavigationView
選單項點選事件設定 更改MainActivity程式碼：
public class MainActivity extends AppCompatActivity {
//drawerLayout是一個佈局，在佈局中允許放入兩個直接子控制元件，第一個控制元件是主螢幕中顯示的內容，第二個子控制元件是滑動選單中顯示的內容
private DrawerLayout mDrawerLayout;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar=(Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);//傳入Toolbar例項，技能用Toolbar，又可以讓它外觀和功能與ActionBar一樣
mDrawerLayout =(DrawerLayout)findViewById(R.id.drawer_layout);
***NavigationView navView=(NavigationView)findViewById(R.id.nav_view) ;***
ActionBar actionBar=getSupportActionBar();//得到ActionBar的例項，但是具體實現是由ToolBar來完成的
if (actionBar!=null){
actionBar.setDisplayHomeAsUpEnabled(true);//顯示導航按鈕
actionBar.setHomeAsUpIndicator(R.drawable.menu);//設定導航按鈕的圖示，即為toolbar最左邊的按鈕就叫做HomeAsUp，預設 的圖示是一個返回的箭頭，意味著返回上一個活動，在這裡我們把它的預設樣式和作用都做了修改
}
***navView.setCheckedItem(R.id.nav_call);//將打電話選單項預設選中
navView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
//此處可以新增選中選單項的邏輯
mDrawerLayout.closeDrawers();//將滑動選單關閉
return true;
}
});***
}
.......................................