Material Design入門學習筆記寫了有兩篇了，有開發(fā)者問我，我說的這些網(wǎng)上都能搜到，為什么還要再寫一遍。
網(wǎng)上的確是有許多關(guān)于Material Design的資料，但是方法并不詳細，有的偏于高級自定義的組件庫。我重新整理，首先是為了能介紹的更詳細，方便新手學習，其次我要自己寫出demo，看一看效果到底是什么樣，有沒有什么其他坑，再有對于自己也是一次加深印象的過程。
之前的文章：
『Material Design入門學習筆記』前言
『Material Design入門學習筆記』動畫（含demo）
demo下載
AppCompatActivity
AppCompatActivity與Activity最大的差別就是界面頂上的ActionBar了，AppCompatActivity新增了許多方法用了實現(xiàn)ActionBar的功能。通過getSupportActionBar()可以獲得ActionBar的實例，然后進行操作：
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
setTitle("aaaaa");
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
}
效果如圖：
如何設(shè)置點擊事件呢：
@Override
public boolean onSupportNavigateUp() {
finish();
return super.onSupportNavigateUp();
}
這樣點擊返回鍵，就可以回到上一界面了。
如果是Activity怎么使用呢？使用方式差不多：
public class TestActivity extends Activity{
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_testactivity);
setTitle("TestActivity");
getActionBar().setDisplayHomeAsUpEnabled(true);
getActionBar().setHomeButtonEnabled(true);
}
@Override
public boolean onNavigateUp() {
finish();
return super.onNavigateUp();
}
}
主題
對于主題的設(shè)置分為Activity和AppCompatActivity兩種，對于系統(tǒng)原生提供的主題，不能混用，否則會報錯。
AppCompatActivity
對于AppCompatActivity配置的theme必須要繼承自Theme.AppCompat
<style name="TestAppTheme" parent="Theme.AppCompat.Light">
<!-- Customize your theme here. -->
<item name="colorPrimary">#6a1b9a</item>
<item name="colorPrimaryDark">#ec407a</item>
<item name="colorAccent">#f44336</item>
</style>
對于屬性可以參考這張圖片（圖片來源自網(wǎng)絡(luò)）：
配置給AppCompatActivity:
<activity android:name=".theme.TestAppComActivity"
android:theme="@style/TestAppTheme">
</activity>
Activity
對于Activity，配置的主題，不能使用Theme.AppCompat，可以選擇Theme.Material下的主題：
<activity android:name=".theme.TestActivity"
android:theme="@android:style/Theme.Material.Light.DarkActionBar">
</activity>
ToolBar
前面我們說到了可以使用自帶的ActionBar實現(xiàn)返回按鈕的標題欄，但是如果需求很多，拓展還是比較麻煩的，不如自己定制一個ToolBar。
Android 5.0的時候就用Toolbar替代了ActionBar,而ActionBarActivity又被AppCompatActivity替代。
首先我們需要改變一下AppCompatActivity的主題，把ActionBar去掉，否則會出現(xiàn)兩個，那就很奇怪了。
修改一下主題：
<style name="TestAppTheme" parent="Theme.AppCompat.Light">
<!-- Customize your theme here. -->
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="colorPrimary">#6a1b9a</item>
<item name="colorPrimaryDark">#ec407a</item>
<item name="colorAccent">#f44336</item>
</style>
去掉ActionBar，并把相關(guān)的代碼去掉，否則也會報錯。
然后新建一個layout，titlebar的layout：
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:background="#4e342e"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize">
</android.support.v7.widget.Toolbar >
然后在你的布局中inclue一下：
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<include layout="@layout/toolbar_test"/>
</LinearLayout>
修改對應代碼:
public class TestAppComActivity extends AppCompatActivity{
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_testappcompat);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
}
}
這樣運行就有toolbar了：
原生拓展
Toolbar給我們提供了一些原生的功能可以使用，我們修改一下代碼：
public class TestAppComActivity extends AppCompatActivity{
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_testappcompat);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
setTitle("aaaa");//設(shè)置標題
toolbar.setNavigationIcon(R.mipmap.ic_launcher_round);//設(shè)置返回鍵，我這里沒有，就有icon代替吧
toolbar.setNavigationOnClickListener(new OnClickListener() {
@Override
public void onClick(View view) {
finish();
}
});//返回監(jiān)聽
toolbar.setLogo(R.mipmap.ic_launcher);//設(shè)置logo
toolbar.setSubtitle("bbbb");//設(shè)置副標題
}
}
代碼中都有注釋，不清楚什么意思的可以看一下。
效果如下：
自定義拓展
你可能會覺得標題位置沒有居中，不好看，Toolbar實際是ViewGroup的子類，我們可以在其中添加一些自己想要的元素和對應位置，修改toolbar的布局文件：
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:background="#4e342e"
android:id="@+id/toolbar"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="這是標題"/>
</android.support.v7.widget.Toolbar >
然后再看一下效果：
有了居中標題了對吧，也可以設(shè)置id，通過
findViewById動態(tài)設(shè)置，這都是可以的，你可以認為這就是一個布局文件而已。
設(shè)置菜單
重寫onCreateOptionsMenu這個方法:
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu_main,menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case R.id.btn_first:
Toast.makeText(this,"first",Toast.LENGTH_LONG).show();
break;
case R.id.btn_senond:
Toast.makeText(this,"second",Toast.LENGTH_LONG).show();
break;
}
return super.onOptionsItemSelected(item);
}
寫一個res/menu/新增一個文件menu_main：
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item android:id="@+id/btn_first"
android:title="第一項"
/>
<item android:id="@+id/btn_senond"
android:title="第一項"
/>
</menu>
看一下效果：
點擊箭頭所示就會有菜單效果：
菜單效果可能有點不盡如人意，他擋住了你辛苦寫的toolbar了。
新建一個style：
<style name="testToolBar" parent="@style/Widget.AppCompat.Light.PopupMenu.Overflow">
<item name="overlapAnchor">false</item>
</style>
然后讓你toolbar使用這個主題：
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:toolbar="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:background="#4e342e"
android:id="@+id/toolbar"
android:layout_height="wrap_content"
toolbar:popupTheme="@style/testToolBar"
android:minHeight="?attr/actionBarSize">
</android.support.v7.widget.Toolbar >
這樣就可以了。
總結(jié)
基本上關(guān)于主題和ToolBar的東西就這些，這篇文章，圖片和代碼都較多，需要的用戶請仔細查看，有問題可以給我留言，或者關(guān)注我的公眾號留言。
