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

mymdeep發表於2017-04-13

Material Design入門學習筆記寫了有兩篇了,有開發者問我,我說的這些網上都能搜到,為什麼還要再寫一遍。
網上的確是有許多關於Material Design的資料,但是方法並不詳細,有的偏於高階自定義的元件庫。我重新整理,首先是為了能介紹的更詳細,方便新手學習,其次我要自己寫出demo,看一看效果到底是什麼樣,有沒有什麼其他坑,再有對於自己也是一次加深印象的過程。
之前的文章:
『Material Design入門學習筆記』前言
『Material Design入門學習筆記』動畫(含demo)
『Material Design 入門學習筆記』RecyclerView 與 CardView(附 demo)
demo下載


AppCompatActivity

AppCompatActivity與Activity最大的差別就是介面頂上的ActionBar了,AppCompatActivity新增了許多方法用了實現ActionBar的功能。通過getSupportActionBar()可以獲得ActionBar的例項,然後進行操作:

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

    }複製程式碼

效果如圖:

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

如何設定點選事件呢:

  @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();
    }
}複製程式碼

主題

對於主題的設定分為Activity和AppCompatActivity兩種,對於系統原生提供的主題,不能混用,否則會報錯。

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>複製程式碼

對於屬性可以參考這張圖片(圖片來源自網路):

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

配置給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實現返回按鈕的標題欄,但是如果需求很多,擴充還是比較麻煩的,不如自己定製一個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:

<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了:

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

原生擴充

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");//設定副標題
    }

}複製程式碼

程式碼中都有註釋,不清楚什麼意思的可以看一下。
效果如下:

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

自定義擴充

你可能會覺得標題位置沒有居中,不好看,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  >複製程式碼

然後再看一下效果:

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

有了居中標題了對吧,也可以設定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>複製程式碼

看一下效果:

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

點選箭頭所示就會有選單效果:

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

選單效果可能有點不盡如人意,他擋住了你辛苦寫的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  >複製程式碼

這樣就可以了。

總結

基本上關於主題和ToolBar的東西就這些,這篇文章,圖片和程式碼都較多,需要的使用者請仔細檢視,有問題可以給我留言,或者關注我的公眾號留言。

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

相關文章