1. Toolbar
1.使用Toolbar,首先需要将系统的ActionBar隐藏,打开res/values/styles.xml文件,修改AppTheme的parent为
Theme.AppCompat.Light.NoActionBar
(淡色主题),或者Theme.AppCompat.NoActionBar(深色主题)
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">@color/colorPrimary</item>
<item name="android:colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="android:colorAccent">@color/colorAccent</item>
</style>
两者设置的效果差异如下:
关于其他属性的设置说明如下图:
2.隐藏完ActionBar之后就可以在xml文件中布局Toolbar了
<LinearLayout 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">
</android.support.v7.widget.Toolbar>
</LinearLayout>
以上这段代码中,使用xmlns:app指定了一个新的命名空间,是因为MaterialDesign是在Android5.0系统中才出现的,而很多Material属性在5.0之前的系统并不存在,为了能够兼容之前的老系统,无法使用android:attribute这样的写法,所以只能使用app:attribute
3.布局完Toobar之后就可以在activity添加Toolbar了
//获得Toolbar实例
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
//调哟个setSupportActionBar()方法,设置Toolbar
setSupportActionBar(toolbar);
4.如果要修改Toolbar显示的标签,需要在AndroidManifest.xml文件中进行设置
<activity
android:name=".MainActivity"
android:label="Fruits"
>
5.给Toolbar添加按钮
创建一个menu文件夹(res->New->Directory),然后在menu目录下创建一个toolbar.xml布局文件(右击menu->New->Menu resource file),作为Toolbar的布局文件
<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>
上面这段代码中
<item>
:用来定义action按钮
android:id
: 用于指定按钮id
android:title
: 用于指定按钮文字
android:icon
: 用于指定按钮的图标
app:showAsAction
用于指定按钮的显示未知showAsAction:有以下几种值可选
- always:表示永远显示在Toolbar中
- ifRoom:表示屏幕空间足够的情况下显示在Toolbar中,不够的话显示在菜单中。
- never:表示永远显示在菜单当中。
注:Toolbar中的action按钮只会显示图标,菜单中的按钮只会显示文字。
6.监听Toolbar中action按钮的点击事件:
@Override
public boolean onCreateOptionsMenu(Menu menu) {
//加载toolbar.xml文件
getMenuInflater().inflate(R.menu.toolbar, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
///处理Toolbar中action按钮的点击事件
switch (item.getItemId()){
case R.id.backup:
Toast.makeText(this, "点击了backup按钮", Toast.LENGTH_SHORT).show();
break;
case R.id.delete:
Toast.makeText(this, "点击了delete按钮", Toast.LENGTH_SHORT).show();
break;
case R.id.settings:
Toast.makeText(this, "点击了settings按钮", Toast.LENGTH_SHORT).show();
break;
case android.R.id.home:
mDrawerLayout.openDrawer(GravityCompat.START);
break;
}
return true;
}
如上代码所示:监听Toolbar中action按钮的点击事件,只需在onCreatOptionMenu()方法中加载toolbar.xml文件,然后在onOptionsItemSelected()方法中处理各个按钮的点击事件即可。
2.DrawerLayout(滑动菜单)
1.Android中可以使用DrawerLayout来实现滑动(显示/隐藏)菜单的功能。
DrawerLayout :是一个布局,在布局允许放入两个字空间,第一个空间是主屏幕中显示的内容,第二个控件是滑动菜单中显示的内容。
综上,添加一个DrawerLayout布局框架代码如下:
<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">
<LinearLayout 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">
<!--这里面是主屏幕布局-->
</LinearLayout>
<!--这里面是滑动菜单布局-->
<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>
如上代码,需要注意的是,在第二个子控件中
layout_gravity
这个属性是必须确定的,这个属性是用来设置DrawerLayout滑动菜单是在屏幕左边还是右边,设为left
表示滑动菜单在左边,设为right
表示在右边,设为start
表示会根据系统语言进行判断,如果系统语言是从左往右就在左边,反之则在右边。
2.在Toolbar中添加一个导航按钮,实现点击的时候也会滑出滑动菜单,代码如下
private DrawerLayout mDrawerLayout;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.layout_main);
///toolbar部分
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);//添加toolbar
mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);//获得DrawerLayout实例
ActionBar actionBar = getSupportActionBar();//获得ActionBar
if (actionBar != null) {
actionBar.setDisplayHomeAsUpEnabled(true);//让导航按钮显示出来
actionBar.setHomeAsUpIndicator(R.drawable.ic_backup);//设置导航按钮的图标,默认为一个返回的箭头
}
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
///处理Toolbar中action按钮的点击事件
switch (item.getItemId()){
case R.id.backup:
Toast.makeText(this, "点击了backup按钮", Toast.LENGTH_SHORT).show();
break;
case R.id.delete:
Toast.makeText(this, "点击了delete按钮", Toast.LENGTH_SHORT).show();
break;
case R.id.settings:
Toast.makeText(this, "点击了settings按钮", Toast.LENGTH_SHORT).show();
break;
//如果点击了导航按钮,弹出滑动菜单
case android.R.id.home:
mDrawerLayout.openDrawer(GravityCompat.START);
break;
}
return true;
}
如上代码,在onCreate()函数中添加了导航按钮,然后在onOptionsItemSelected()方法中实现,导航按钮的点击事件。需要注意的是,设置的HomeAsUp按钮的id用于都是android.R.id.home
3.NavigationView
NavigationView是滑动菜单页面的一个布局,当然我们可以在滑动菜单页面定制任意的布局,只不过NavigationView更加简单高效。
1.使用前需要先添加Design Support库compile 'com.android.support:design:26.0.0-alpha1'
2.添加完库之后,还需要准备menu和headerLayout两个布局,headerLayout是用来在NavigationView中显示头部布局的,menu是用来在Navigation中显示具体菜单项的。
2.1添加menu文件(右击menu文件夹->New->Menu resource file),布局代码如下:
<menu
xmlns:android="http://schemas.android.com/apk/res/android">
//single表示所有菜单项功能智能单选
<group android:checkableBehavior="single">
<item
android:id="@+id/nav_call"
//菜单项的图标
android:icon="@drawable/nav_call"
//菜单项的文字
android:title="Call"/>
<item
android:id="@+id/nav_friends"
android:icon="@drawable/nav_friends"
android:title="Friends"
/>
<item
android:id="@+id/nav_location"
android:icon="@drawable/nav_location"
android:title="Location"/>
<item
android:id="@+id/nav_mail"
android:icon="@drawable/nav_mail"
android:title="Mail"
/>
<item
android:id="@+id/nav_task"
android:icon="@drawable/nav_task"
android:title="Tasks"/>
</group>
</menu>
如上代码,menu中添加了5个菜单项
2.2添加完menu菜单项之后,还需创建headerLayout文件(右击layout文件夹-New->Layout resource file)
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="180dp"
android:padding="10dp"
android:background="?attr/colorPrimary"
android:id="@+id/nav_header">
<de.hdodenhof.circleimageview.CircleImageView
android:id="@+id/icon_image"
android:layout_width="70dp"
android:layout_height="70dp"
android:src="@drawable/nav_icon"
android:layout_centerInParent="true"/>
<TextView
android:id="@+id/username"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:text="tonygreendev@gmail.com"
android:textColor="#FFF"
android:textSize="14sp"/>
<TextView
android:id="@+id/mail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@+id/username"
android:text="Tony Green"
android:textColor="#FFF"
android:textSize="14sp"/>
</RelativeLayout>
如上代码,headerLayout中添加了一张图片,还有两个标签属性
3.menu和headerLayout都准备好后,就可以使用NavigationView了。
修改DrawerLayout的第二个控件为NavigationView,如下:
<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">
<LinearLayout 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">
<!--这里面是主屏幕布局-->
</LinearLayout>
<!--这里面是滑动菜单布局-->
<android.support.design.widget.NavigationView
android:id="@+id/nav_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start"
app:menu="@menu/nav_menu"
app:headerLayout="@layout/nav_header">
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
如上代码,将DrawerLayout中的第二个控件为NavigationView,并将menu和headerLayout设置进去
4.添加完NavigationView之后,还要监听NavigationView中的menu选项的点击事件。
///navigation部分
NavigationView navView = (NavigationView) findViewById(R.id.nav_view);//获得nav实例
View headerView = navView.getHeaderView(0);//获得headerview实例
CircleImageView img = (CircleImageView) headerView.findViewById(R.id.icon_image);//通过headerview获得头像
//监听头像的点击事件
img.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MainActivity.this, "点击了头像", Toast.LENGTH_SHORT).show();
}
});
//监听菜单项的点击事件
navView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
switch (item.getItemId()) {
case R.id.nav_call:
Toast.makeText(MainActivity.this, "点击了call", Toast.LENGTH_SHORT).show();
break;
case R.id.nav_friends:
Toast.makeText(MainActivity.this, "点击了Friends", Toast.LENGTH_SHORT).show();
break;
case R.id.nav_location:
Toast.makeText(MainActivity.this, "点击了Location", Toast.LENGTH_SHORT).show();
break;
case R.id.nav_mail:
Toast.makeText(MainActivity.this, "点击了Mail", Toast.LENGTH_SHORT).show();
break;
case R.id.nav_task:
Toast.makeText(MainActivity.this, "点击了Tasks", Toast.LENGTH_SHORT).show();
break;
case R.id.icon_image:
Toast.makeText(MainActivity.this, "点击了头像", Toast.LENGTH_SHORT).show();
}
mDrawerLayout.closeDrawers();
return true;
}
});
如上代码所示,在onCreate()方法中,先获得NavigationView实例,然后通过调用setNavigationItemSelectListener()方法监听菜单项的点击事件
具体的效果如下
4.FloatingActionButton和Snackbar(悬浮按钮和可交互提示)
1.悬浮按钮
添加一个悬浮按钮的代码如下
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="16dp"
android:src="@drawable/ic_done"
android:elevation="1dp"/>
如上代码,需要注意的是,gravity属性,表示将按钮设置在右下方,end值表示当系统语言是从左往右时按钮在右方,反之则在左方。
1.1监听悬浮按钮的点击事件
FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
///Snackbar提示框
Snackbar.make(v, "是否删除数据", Snackbar.LENGTH_SHORT).setAction("否", new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MainActivity.this, "数据未删除", Toast.LENGTH_LONG).show();
}
}).show();
}
});
2.Snackbar可交互式提示框
///Snackbar提示框
Snackbar.make(v, "是否删除数据", Snackbar.LENGTH_SHORT).setAction("否", new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MainActivity.this, "数据未删除", Toast.LENGTH_LONG).show();
}
}).show();
如上代码,调用了Snackbar的make()方法来创建一个Snackbar对象,make()接收三个参数
第一个:当前界面的任意一个View
第二个:Snackbar中显示的内容
第三个:Snacker显示的时长
然后在调用setAction()方法,来设置一个动作,最后再调用show()方法让Snackbar显示出来。
5.CoordinatorLayout
当可交互式提示框从底部弹出时,可能会遮挡住界面部分内容,这时就可使用CoordinatorLayout来解决这一问题,CoordinLayout可以监听子控件的所有事件,是一个加强版的FrameLayout,使用时直接将FrameLayout替换成CoordinatorLayout即可。注:这里由于Snackbar的make()方法为一个CoordinatorLayout的子控件,所以Snackbar也会受到监听。
6.CardView(卡片式布局)
用于实现卡片式布局效果的中药控件,由appcompat-v7提供,实际上跟CardView也是一个FrameLayout,只是额外提供了圆角和阴影等效果,看上去会有立体感。使用前依旧需要添加依赖
compile 'com.android.support:cardview-v7:26.0.0-alpha1'
2.布局一个CardView的具体代码如下:
<android.support.v7.widget.CardView
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="wrap_content"
android:layout_margin="5dp"
app:cardCornerRadius="4dp">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="@+id/fruit_image"
android:layout_width="match_parent"
android:layout_height="100dp"
android:scaleType="centerCrop"/>
<TextView
android:id="@+id/fruit_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_margin="5dp"
android:textSize="16sp"/>
</LinearLayout>
</android.support.v7.widget.CardView>
如上代码:app:cardCornerRadius属性指定了卡片圆角的弧度,数值越大,圆角的弧度越大;另外还可通过app:elevation属性指定卡片的高度,高度值越大,投影范围越大,但是投影效果也越淡。这一点和悬浮按钮的是一致的。
在CardView布局中放置了一个LinearLayout布局。布局中加入了一个ImageView和一个TextView。
7.AppBarLayout
AppBarLayout实际上是一个垂直方向上的LinearLayout,它在内部做了很多滚动事件的封装,并应用了一些Material Design的设计理念。AppBarLayout必须是CoordinatorLayout的子布局。
8.SwipeRefreshLayout(下拉刷新)
SwipeRefreshLayout是实现下拉刷新功能的核心类,由support-v4库提供,使用时只需把控件放到SwipeRefreshLayout中,即可让这个空间支持下拉刷新的功能。
<android.support.v4.widget.SwipeRefreshLayout
android:id="@+id/swip_refresh"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<android.support.v7.widget.RecyclerView
android:id="@+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
</android.support.v7.widget.RecyclerView>
</android.support.v4.widget.SwipeRefreshLayout>
- 在activity中处理具体的刷新逻辑
//获得SwipeRefreshLayout实例
swipeRefresh = (SwipeRefreshLayout) findViewById(R.id.swip_refresh);
swipeRefresh.setColorSchemeResources(R.color.colorPrimary);//设置刷新动画的颜色
swipeRefresh.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
@Override
public void onRefresh() {
//处理具体的刷新逻辑
refreshFruits();
}
});
9.CollapsingToolbarlayout(可折叠式标题栏)
CollapsingToolbarlayout是一个作用于Toolbar基础之上的布局,可以让Toolbar的效果变得更佳丰富,CollapsingToolbarlayout在设计的时候被限定只能作为AppBarLayout的直接子布局,而AppBarLayout又必须是CoordinatorLayout的子布局。
android:id="@+id/appBar"
android:layout_width="match_parent"
android:layout_height="250dp"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:contentScrim="?attr/colorPrimary"
>
<ImageView
android:id="@+id/fruit_image_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax"/>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:contentScrim="?attr/colorPrimary"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
如上代码中,在CollapsingTollbarLayout中定义了一个ImageView和一个Toolbar,意味着这个标题栏是由图片和普通的标题栏组合而成。其中app:layout_collapseMode 用于指定控件在折叠过程中的折叠模式,其中Toolbar指定成pin表示在折叠的过程中位置始终保持不变,ImageView指定成parallax表示会在折叠过程中产生一定的错位偏移。
。