Material Design
Material Design是谷歌新的设计语言,谷歌希望寄由此来统一各种平台上的用户体验,Material Design的特点是干净的排版和简单的布局,以此来突出内容。今天试了几个比较Support包中比较典型的Material Design控件,后期会在学习下Material Design的设计思想和理念。
Android Design Support 库依赖
compile 'com.android.support:design:24.2.1'
cardview
依赖:
compile 'com.android.support:cardview-v7:24.2.1'
效果图
代码(案例)
<?xml version="1.0" encoding="utf-8"?>
<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:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<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>
Floating Action Button 与 Snackbar
效果图(悬浮框按钮)
代码 (可以通过更改资源文件更改图形按钮图片)
<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" />
按钮事件
FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Snackbar.make(view, "Data deleted", Snackbar.LENGTH_SHORT)
.setAction("Undo", new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MainActivity.this, "Data restored", Toast.LENGTH_SHORT).show();
}
})
.show();
}
});
以使用app:elevation
来表示空闲状态高度,app:pressedTanslationZ
为按下状态的高度
按钮的颜色一般为主题的强调色,也可以使用 ”app:backgroundTint“修改
snackbar
Snackbar.make(view, "Data deleted", Snackbar.LENGTH_SHORT)
.setAction("Undo", new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MainActivity.this, "Data restored", Toast.LENGTH_SHORT).show();
}
})
.show();
AppBarLayout
当滑档内容时,为了腾出跟多的空间展示内容可以将AppBarLayout
隐藏
效果
代码
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
</android.support.design.widget.AppBarLayout>
Toolbar
Toolbar 比传统的 ActionBar 更灵活,功能也更多,我们可以看到现在市面上很多的 APP 已经用 Toolbar 替代了 actionbar,在 Desgin Support 的组件中,很多设计都可以和 Toolbar 协同工作,而不是和 actionbar,所以还是建议使用新的 toolbar 替换以前的 actionbar
去除actionbar
android:theme="@style/Theme.AppCompat.Light.NoActionBar">
代码
<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"
app:layout_scrollFlags="scroll|enterAlways|snap" />
通知系统使用 toolbar
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
一般我们都会把 toolbar 和 AppBarLayout 一起协同起来使用如下
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<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"
app:layout_scrollFlags="scroll|enterAlways|snap" />
</android.support.design.widget.AppBarLayout>
要想达到Toolbar隐藏的效果,看以上的布局文件,有几点说明:
1、首先顶层布局必须是CoordinatorLayout
2、给需要隐藏的组件设置 app:layout_scrollFlags滚动标志,比如这里的Toolbar。这个标志有四种,如下所示:
scroll: 所有想滚动出屏幕的view都需要设置这个flag, 没有设置这个flag的view将被固定在屏幕顶部。例如TabLayout 没有设置这个值,将会停留在屏幕顶部。
enterAlways: 设置这个flag时,向下的滚动都会导致该view变为可见,启用快速“返回模式”。
enterAlwaysCollapsed: 当你的视图已经设置minHeight属性又使用此标志时,你的视图只能以最小高度进入,只有当滚动视图到达顶部时才扩大到完整高度。
exitUntilCollapsed: 滚动退出屏幕,最后折叠在顶端。
toolbar事件
/**
* 重写父类的一个方法为toolbar引入图标
* @param menu
* @return
*/
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.toolbar, menu);
return true;
}
//toolbar 的监听事件
@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case android.R.id.home:
//打开左侧栏
mDrawerLayout.openDrawer(GravityCompat.START);
break;
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;
}
AppBarLayout当中嵌套CollapsingToolbarLayout
效果如下,这种效果在详情页面用的比较多,展现个性化内容,图像具有很强的吸引力。当往下滚动RecyclerView的时候,CollapsingToolbar会自动扩展自AppBarLayout的高度,当往上滚动的时候,CollapsingToolbar又会折叠,最终固定为Toolbar的高度,在CollapsingToolbarLayout当中放了一个ImageView,用于承载一张图片。
代码
<android.support.design.widget.CoordinatorLayout
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:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
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:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<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.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="15dp"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:layout_marginTop="35dp"
app:cardCornerRadius="4dp">
<TextView
android:id="@+id/fruit_content_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp" />
</android.support.v7.widget.CardView>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:src="@drawable/ic_comment"
app:layout_anchor="@id/appBar"
app:layout_anchorGravity="bottom|end" />
</android.support.design.widget.CoordinatorLayout>
要想达到隐藏的效果,必须跟上面的说明一样:
1、首先顶层布局必须是CoordinatorLayout。
关于CollapsingToolbarLayout,有几个属性说明:
1、Collapsing title:ToolBar的标题,当CollapsingToolbarLayout全屏没有折叠时,title显示的是大字体,在折叠的过程中,title不断变小到一定大小的效果。你可以调用setTitle(CharSequence)方法设置title。
2、Content scrim:ToolBar被折叠到顶部固定时候的背景,你可以调用setContentScrim(Drawable)方法改变背景或者 在属性中使用 app:contentScrim=”?attr/colorPrimary”来改变背景。
3、如果我们把CollapsingToolbarLayout的layout_scrollFlags的exitUntilCollapsed标志去掉,那么CollapsingToolbarLayout里面的控件在折叠的时候都不会显示在顶端,都会隐藏起来,忽略控件的折叠模式。
4、同时标志exitUntilCollapsed本身就包含Toolbar折叠到顶端,如果此时把Toolbar的app:layout_collapseMode设置为"parallax",那么Toolbar在折叠到顶端的时候,图标和菜单都不会显示出来,这个需要注意一下,所以一般把Toolbar的app:layout_collapseMode设置为"pin"。
CoordinatorLayout
在Material Design当中存在很多组件之间的交互,一般是以动画的形式呈现。在Design library当中引入了组件CoordinatorLayout,它是一个布局,继承自FrameLayout,通过协调调度子视图布局的形式来产生动画效果,来达到子控件之间的交互效果
通过上面 Floating Action Button ,AppBarLayout,Toolbar以及 控件的使用我们发现了一个问题
可以看到,Snackbar 遮挡住了我们的 view,这时候需要一个CoordinatorLayout
来协调 view 布局,当我们把Snackbar依附于CoordinatorLayout的时候,当点击FloatingActionButton弹出Snackbar的时候,FloatingActionButton会自动上移,然后隔一段时间Snackbar消失后,FloatingActionButton就会自动归位。
在一系列隐藏中都需要使用到他作为外部控件
注意
根据官方的谷歌文档,AppBarLayout目前必须是第一个嵌套在CoordinatorLayout里面的子view
在 toolbar 中加入属性,app:layout_collapseMode=”pin”,使得 Toolbar 中的按钮能固定在顶部
侧滑菜单 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">
<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:headerLayout="@layout/nav_header"
app:menu="@menu/nav_menu" />
</android.support.v4.widget.DrawerLayout>
nav_header
圆形库
compile 'de.hdodenhof:circleimageview:2.1.0'
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="180dp"
android:background="?attr/colorPrimary"
android:padding="10dp">
<de.hdodenhof.circleimageview.CircleImageView
android:id="@+id/icon_image"
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_centerInParent="true"
android:src="@drawable/nav_icon" />
<TextView
android:id="@+id/username"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:text="Tony Green"
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="[email protected]"
android:textColor="#FFF"
android:textSize="14sp" />
</RelativeLayout>
nav_menu
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<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>
侧滑菜单事件
打开事件
左滑
mDrawerLayout.openDrawer(GravityCompat.START);
右滑
mDrawerLayout.openDrawer(GravityCompat.END);
关闭事件
navView.setCheckedItem(R.id.nav_call);
//为左边的栏框的每一个item设置一个点击事件
navView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(MenuItem item) {
//关闭左侧栏
mDrawerLayout.closeDrawers();
return true;
}
});
到此结束我的讲解,喜欢的点个赞 谢谢!