它是由谷歌设计师基于传统优秀的设计原则,结合丰富的创意和科学技术所发明的一套全新的界面设计语言,包括了视觉、运动、互动效果等特性。
一、Toolbar
(一)创建Toolbar
Material控件中的一个控件,类似于ActionBar。
1、将res/values/styles.xml文件中的parent属性改为Theme.AppCompat.Light.NoActionBar。
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
<style name="FruitActivityTheme" parent="AppTheme">
</style>
</resources>
2、修改activity_main中代码,将Toolbar放在一个FrameLayout内。
<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"/>
</FrameLayou>
Toolbar高度设置为ActionBar的高度,android:theme属性为Toolbar的主题,app:popupThem属性单独将弹出的菜单项指定为淡色主题。
3、修改MainActivity中代码。
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//得到Toolbar实例
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar); //使用Toolbar同时使其外观与功能与ActionBar一致
}
}
(二)修改标题栏显示文字的内容
1、修改AndroidManifest中< activity>的label属性。
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:supportsRtl="true"
android:theme="@style/AppTheme">
<activity
android:name=".MainActivity"
android:label="Fruits">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
(三)在Toolbar中添加action按钮
1、准备几张图片作为按钮的图标,放在drawable目录下。
2、右击res目录→New→Directory,创建一个menu文件夹。然后右击menu文件夹→New→Menu resource file,创建一个toolbar.xml文件。
<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/backup"
android:title="Backup"
app:showAsAction="always"/>
<item
android:id="@+id/delete"
android:icon="@drawable/delete"
android:title="Delete"
app:showAsAction="ifRoom"/>
<item
android:id="@+id/settings"
android:icon="@drawable/settings"
android:title="Settings"
app:showAsAction="never"/>
</menu>
其中通过<item>标签定位action按钮,app:showAsAction属性指定按钮显示的位置。
always表示永远显示在Toolbar中,如果屏幕空间不够这不显示。
ifRoom表示屏幕空间足够的情况下显示则Toolbar中,不够的话显示在菜单中。
never则表示永远显示在菜单中。
3、修改MainActivity中代码。
public class MainActivity extends AppCompatActivity {
……
@Override
public boolean onCreateOptionsMenu(Menu menu) {
//加载toolbar.xml文件
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 Click Backup", Toast.LENGTH_SHORT).show();
break;
case R.id.delete:
Toast.makeText(this, "You Click Delete", Toast.LENGTH_SHORT).show();
break;
case R.id.settings:
Toast.makeText(this, "You Click Settings", Toast.LENGTH_SHORT).show();
break;
default:
}
return true;
}
}
二、滑动菜单
滑动菜单是将一些菜单选项隐藏起来,而不是放置在主屏幕中,然后通过滑动的方式将菜单显示出来。
(一)DrawerLayout
DrawerLayout控件是一个布局,它允许放入两个直接子控件,第一个子控件为主屏幕中显示的内容。第二个子控件为滑动菜单中显示的内容。
1、修改activity_main中代码,使DrawerLayout嵌套FrameLayou和TextView两个子控件。
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
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 >
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start"
android:text="This is menu"
android:textSize="30sp"
android:background="#FFF"/>
</android.support.v4.widget.DrawerLayout>
其中第二个子控件android:layout_gravity属性是必须指定的,它告诉DrawerLayout滑动菜单是从屏幕左边还是右边出现,left、right、start和end选项。
2、在Toolbar的最左边加入导航按钮,点击该按钮也可将滑动菜单中的内容显示出来。
public class MainActivity extends AppCompatActivity {
private DrawerLayout mDrawerLayout;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
NavigationView navView = (NavigationView) findViewById(R.id.nav_view);
android.support.v7.app.ActionBar actionBar = getSupportActionBar();
if(actionBar != null){
//让导航按钮显示出来
actionBar.setDisplayHomeAsUpEnabled(true);
//设置导航按钮图标
actionBar.setHomeAsUpIndicator(R.drawable.menu);
}
}
……
@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()){
//HomeAsUp按钮的id永远为android.R.id.home
case android.R.id.home:
//展示滑动菜单,其中参数必须与XML文件中定义的一致
mDrawerLayout.openDrawer(GravityCompat.START);
break;
……
default:
}
return true;
}
}
(二)NavigationView
NavigationView是Material Support库中提供的一个控件,使滑动菜单页面的实现变得十分简单。
1、在app/build.gradle