目录
什么是Material Design
Material Design 是谷歌的一套全新的界面设计语言,包含了视觉,运动,互动效果等特性。
Design Support库,将Material Design中最具代表性的一些控件和效果进行了封装。
Toolbar
Toolabr继承了ActionBar的所有功能,,灵活性很高,而且可配合其他控件来完成一些Material Design效果。
创建的基本步骤:
1.更改程序的ActionBar主题
2.在布局中添加Toolbar控件
3.活动中设置支持动作栏
示例:
1.
把之前默认的深色主题改为不带ActionBar的主题
<resources>
<!-- Base application theme. -->
<!-- Theme.AppCompat.Light.NoActionBar不带标题栏淡色主题 -->
<!-- Theme.AppCompat.Light.NoActionBar不带标题栏的深色主题 -->
<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>
</resources>
2.
<androidx.appcompat.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:id="@+id/toolbar"
android:background="?attr/colorPrimary"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
/>
<!-- android:theme 设置Toolbar的主题风格-->
<!-- app:popupTheme 单独指定弹出的菜单项的主题-->
Toolbar toolbar = (Toolbar)findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
修改标题栏上显示的文字内容
<activity
android:name=".MainActivity"
android:label="在这修改">
</activity>
在activity标签中修改,如果没有指定,默认用application中指定的label内容。
添加action按钮
和添加普通菜单流程基本一样。
1.创建菜单项的xml文件
注:
app:showAsAction 指示按钮的显示位值,always:永远显示在Toolbar中,ifRoom:屏幕空间足够的情况下显示在Toolbar中,never:永远显示在菜单中
如果菜单项指定图标,Toolbar的action按钮只显示图标,菜单中的action只显示文字
<?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/item1"
android:title="Backup"
android:icon="@mipmap/ic_launcher"
app:showAsAction="always"/>
<item
android:id="@+id/item2"
android:title="Delete"
app:showAsAction="ifRoom"/>
<item
android:id="@+id/item3"
android:title="Setting"
app:showAsAction="never"/>
</menu>
2.加载菜单文件
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.toolbarmenu,menu);
return true;
}
3.设置点击事件
@Override
public boolean onOptionsItemSelected(@NonNull 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;
}
return true;
}
滑动菜单
示例:
DrawerLayout
DrawerLayout控件可用来实现滑动菜单的效果。首先它是一个布局,在布局中允许放入两个直接子控件,第一个子控件用于显示主屏幕中的内容,第二个子控件用于显示滑动菜单中的内容
示例:
<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.appcompat.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/colorPrimary"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
</FrameLayout>
<TextView
android:id="@+id/text_view"
android:text="This is menu"
android:background="#fff"
android:textSize="30sp"
android:layout_gravity="start"//侧拉栏的布局必须声明这一属性,left表示侧拉栏在左,right表示侧拉栏在右,start则会根据系统语言来自动选择
android:layout_width="match_parent"
android:layout_height="match_parent" />
</androidx.drawerlayout.widget.DrawerLayout>
设置友好提示
滑动菜单只有在屏幕的边缘进行拖动时才将菜单拖出来,有些用户可能不知道这个功能,Material Design建议的做法是在Toolbar左边加一个导航按钮。
代码实现:
private DrawerLayout drawerLayout;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar)findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
drawerLayout = (DrawerLayout)findViewById(R.id.drawerLayout);
ActionBar actionBar = getSupportActionBar();
if(actionBar != null){
actionBar.setDisplayHomeAsUpEnabled(true); //让导航按钮显示出来
actionBar.setHomeAsUpIndicator(R.mipmap.ic_launcher);