『Material Design入門學習筆記』主題與AppCompatActivity（附demo）

時間 2019-11-17

標籤 material design 入門學習筆記主題 appcompatactivity demo 简体版

原文原文鏈接

Material Design入門學習筆記寫了有兩篇了，有開發者問我，我說的這些網上都能搜到，爲何還要再寫一遍。
網上的確是有許多關於Material Design的資料，可是方法並不詳細，有的偏於高級自定義的組件庫。我從新整理，首先是爲了能介紹的更詳細，方便新手學習，其次我要本身寫出demo，看一看效果究竟是什麼樣，有沒有什麼其餘坑，再有對於本身也是一次加深印象的過程。
以前的文章：
『Material Design入門學習筆記』前言
 『Material Design入門學習筆記』動畫（含demo）
『Material Design 入門學習筆記』RecyclerView 與 CardView（附 demo）
demo下載javascript

AppCompatActivity

AppCompatActivity與Activity最大的差異就是界面頂上的ActionBar了，AppCompatActivity新增了許多方法用了實現ActionBar的功能。經過getSupportActionBar()能夠得到ActionBar的實例，而後進行操做：java

@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        setTitle("aaaaa");
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);

    }複製代碼

效果如圖：android

如何設置點擊事件呢：

@Override
    public boolean onSupportNavigateUp() {
        finish();
        return super.onSupportNavigateUp();
    }複製代碼

這樣點擊返回鍵，就能夠回到上一界面了。
若是是Activity怎麼使用呢？使用方式差很少：git

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();
    }
}複製代碼

主題

對於主題的設置分爲Activity和AppCompatActivity兩種，對於系統原生提供的主題，不能混用，不然會報錯。github

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>複製代碼

對於屬性能夠參考這張圖片（圖片來源自網絡）：app

配置給AppCompatActivity:

<activity android:name=".theme.TestAppComActivity"
                  android:theme="@style/TestAppTheme">
        </activity>複製代碼

Activity

對於Activity，配置的主題，不能使用Theme.AppCompat，能夠選擇Theme.Material下的主題：ide

<activity android:name=".theme.TestActivity"
                  android:theme="@android:style/Theme.Material.Light.DarkActionBar">
        </activity>複製代碼

前面咱們說到了可使用自帶的ActionBar實現返回按鈕的標題欄，可是若是需求不少，拓展仍是比較麻煩的，不如本身定製一個ToolBar。
Android 5.0的時候就用Toolbar替代了ActionBar,而ActionBarActivity又被AppCompatActivity替代。
首先咱們須要改變一下AppCompatActivity的主題，把ActionBar去掉，不然會出現兩個，那就很奇怪了。
修改一下主題：佈局

<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，並把相關的代碼去掉，不然也會報錯。
而後新建一個layout，titlebar的layout：post

<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");//設置標題
        toolbar.setNavigationIcon(R.mipmap.ic_launcher_round);//設置返回鍵，我這裏沒有，就有icon代替吧
        toolbar.setNavigationOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View view) {
                finish();
            }
        });//返回監聽
        toolbar.setLogo(R.mipmap.ic_launcher);//設置logo
        toolbar.setSubtitle("bbbb");//設置副標題
    }

}複製代碼

代碼中都有註釋，不清楚什麼意思的能夠看一下。
效果以下：

自定義拓展

你可能會以爲標題位置沒有居中，很差看，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  >複製代碼

而後再看一下效果：

有了居中標題了對吧，也能夠設置id，經過 findViewById動態設置，這都是能夠的，你能夠認爲這就是一個佈局文件而已。

設置菜單

重寫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 >複製代碼