本模块共有六篇文章,参考郭神的《第一行代码》,对Material Design的学习做一个详细的笔记,大家可以一起交流一下:
写在文首,什么是Material Design?这里参考一下郭神的说法:
不过ActionBar由于其设计原因,被限定只能位于活动的顶部,从而不能实现一些Material Design的效果,因此官方现在已经不建议
使用ActionBar了。
<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>
虽然这段代码不长,但是里面着实有不少技术点是需要我们去仔细琢磨一下的。
而是应该使用app:attribute
定义了一个Toolbar控件
,这个控件是由appcompat-v7库提供的。
这里我们给Toolbar指定了一个id,将它的
宽度设置为matchparent,
高度设置为actionBar的高度,
背景色设置为colorPrimary。在styles.xml中将程序的主题指定成了淡色主题
,因此Toolbar现在也是淡色主题
(“白底(黑字)”),而TooIbar上面的各种元素就会自动使用深色主题
(“(白底)黑字”),这是为了和主体颜色区别开(具体可以看文章开头对于深色浅色主题的解释)。
在styles.xml中将程序的主题指定成了淡色主题,Toolbar现在也是淡色主题,TooIbar上面的各种元素就会自动使用深色主题
但是这个效果看起来就会很差
,之前
使用ActionBar时文字都是白色
的,现在变成黑色
的会很难看
。那么为了能让Toolbar单独(全局是用由APPTheme制定的浅色主题的,故相对而言这里用“单独”)使用深色主题
,这里我们使用android:theme
属性,将Toolbar的主题指定成了ThemeOverlay.AppCompat.Dark.ActionBar。
再次变得十分难看
,于是这里使用了app:popupTheme属性单独将弹出的菜单项指定成了淡色主题。
小结:
app:attribute
,而不是android:attribute
;android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
让Toolbar单独使用深色主题;app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
单独将弹出的菜单项指定成了淡色主题;protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
}
现在运行一下程序,效果如图:
接下来在学习一些Toolbar比较常用的功能,比如修改标题栏上显示的文字内容,这段文字是在AndroidManifest.xml中指定的,如下所示:
<?xml version="1.0" encoding="utf-8"?>
<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/ic_backup"
android:title="Backup"
app:showAsAction="always"/>
<item
android:id="@+id/delete"
android:icon="@drawable/ic_delete"
android:title="Delete"
app:showAsAction="ifRoom"/>
<item
android:id="@+id/settings"
android:icon="@drawable/ic_settings"
android:title="Settings"
app:showAsAction="never"/>
</menu>
接下来就是创建菜单的套路了,修改MainActivity中的代码,如下所示:
package com.example.materialtest;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.Toast;
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);
}
@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,"You clicked Backup" , Toast.LENGTH_SHORT).show();
break;
case R.id.delete:
Toast.makeText(this,"You clicked Delete" , Toast.LENGTH_SHORT).show();
break;
case R.id.settings:
Toast.makeText(this,"You clicked Settings" , Toast.LENGTH_SHORT).show();
break;
default:
}
return true;
}
}