『Material Design入门学习笔记』主题与AppCompatActivity（附demo）

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);

    }复制代码

效果如图：

如何设置点击事件呢：

@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>复制代码

对于属性能够参考这张图片（图片来源自网络）：

配置给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了：

原生拓展

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 >复制代码

这样就能够了。

总结

基本上关于主题和ToolBar的东西就这些，这篇文章，图片和代码都较多，须要的用户请仔细查看，有问题能够给我留言，或者关注个人公众号留言。