Android中Material Design

Material Design是有谷歌设计工程师们基于传统的优秀的设计原则结合丰富的创意和科学技术所发明 的一套全新的界面设计语言,包括视觉,运动,互动效果等特性。
1.Toolbar
与Actionbar相似,但由于Actionbar的设计原因,被限制只能位于活动的顶部,从而不能实现一些Material Design的效果,因此官方不再建议使用它,
Toolbar的强大之处在于,它不仅继承了Actionbar的所有功能,而且灵活性很高,可以配合其他控件来完成一些material Design 的效果。
< style name=“AppTheme” parent=“Theme.AppCompat.NoActionBar”>为深色主题,他将界面的主体颜色设置为深色。陪衬颜色设置为淡色
< style name=“AppTheme” parent=“Theme.AppCompat.Light.NoActionBar”>为淡色主题,他将界面的主体颜色设置为淡色,陪衬色设成深色。
AppTheme中的属性重写,这里重写了colorPrimary,colorPrimaryDark和colorAccent这3个属性的颜色
除了上述3个属性外,还可以通过textColorPrimary,windowBackground和navigationBarColor等属性来控制更多位置的颜色。不过唯独colorAccent这个属性比较难理解,他不只用来指定这样一个按钮的颜色,而且更多表达了一个强调的意思,比如一些控件的选中状态也会使用colorAccent 的颜色。

<?xml version="1.0" encoding="utf-8"?>

< FrameLayout xmlns:android=“http://schemas.android.com/apk/res/android”
android:layout_width=“match_parent”
android:layout_height=“match_parent”
xmlns:app=“http://schemas.android.com/apk/res-auto”>
<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/Theme.AppCompat.Light">
</android.support.v7.widget.Toolbar>
< /FrameLayout>
注释:app:popupTheme指定的是一个命名空间,因此我们才能一直使用androiod:id、android:layout_width等写法,
这里指定了xmlns:app,也就是说现在可以使用app:attribute这样的写法了,这里需要xmlns:app命名空间的原因是:由于material Design是在Android5.0系统才出来的,而很多的Manterial属性在5.0之前的系统并不存在,那么为了能兼容之前的啦老系统,我们就不能使用android:attribute这样的写法了,而是应该使用app:attribute
接下来定义一个Toolbar控件,这个控件是由appcompat-v7库提供的,这里给toolbar指定了一个id设置高度为actionBar的高度,背景色设为colorPrimary。由于我们刚才在styles.xml中将程序的主题指定成淡色主题,因此Toolbar现在也是淡色主题,而Toolbar上面的各种元素就会自动使用深色系,这是为了和主体颜色区分开,但是效果很差,为了能让Toolbar单独使用深色主题,这里我们使用android:theme属性,将Toolbar的主题指定成了ThemeOverlay.AppCompat.Dark.ActionBar,但是这样指定完成了之后又会出现新的问题,如果Toolbar中有菜单按钮,那么弹出的菜单项也会变成深色主题,那么再次会变得难看,于是这里使用了app:popupTheme属性单独将弹出的菜单项指定为淡色主题,之所以使用它是因为popupTheme这个属性是在Android5.0系统中新增的,我们使用app:popupTheme就可以兼容Android5.0以下的系统了。

< 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/add"
android:title=“Add”
app:showAsAction=“always”>< /item>
< item
android:id="@+id/delete"
android:icon="@drawable/news"
android:title=“Delete”
app:showAsAction=“ifRoom”>< /item>
< item
android:id="@+id/settings"
android:icon="@drawable/ic"
android:title=“Settings”
app:showAsAction=“never”>< /item>

< /menu>

app:showAsAction表示按钮显示的位置,使用app命名空间,同样是为了能够兼容低版本的系统--
<always表示永远显示在toolbar中,若屏幕空间不够不显示–>
<ifRoom表示屏幕空间足够的情况下显示在Toolbar中,不够的话就显示在菜单中–>
<never表示永远显示在菜单中–>
<action只会显示图标不会显示文字–>

滑动菜单
Drawerlayout:所谓的滑动菜单就是将一些菜单的选项隐藏起来,而不是放置在主屏幕上,然后可以通过滑动的方式将菜单显示出来。这种方式既节约了屏幕空间,又实现了非常好的游戏效果
滑动菜单控件里面layout_gravity这个属性是必须指定的,因为我们需要告诉DrawerLayout滑动菜单是在屏幕左边还是右边,指定left表示滑动菜单在左边,指定right表示滑动菜单在右边,使用start表示会根据系统语言进行判断,如果系统语言是从左到右,滑动菜单就在左边,相反,在右边
NavigationView
NavigationView是Design Support库中提供的一个控件,它不仅仅是按照严格Material Design的要求来进行设计的,而且可以将滑动菜单页面实现变得非常简单
首先添加两个依赖
compile ‘com.android.support:design:28.0.0’
compile ‘de.hdodenhof:circleimageview:2.1.0’

悬浮按钮和可交互提示
立面设计是Material Design中一条非常重要的设计思想,也就是说,按照Material Design的理念,应用程序的界面不仅仅只是一个平面,而应该是一个有立体效果的。最具代表性的里面设计就是悬浮按钮,这种按钮不属于主界面平面的一部分,而是位于另一个维度的,因此给人一种悬浮的感觉
FloatingActionButton是Design Support库中提供的一个控件,该控件可以帮助我们轻松的实现悬浮按钮的效果

Snackbar 是Design Support库提供的更加先进的提示工具
Snackbar并不是Toast的替代品,他们两者间有着不同的应用场景。Toast的作用是告诉用户现在发生了什么事情,同时用户只能被动去接收这个事情,因为没有什么办法让用户进行选择。而Snackbar在这方面有了扩展,它允许在提示当中加入一个可交互按钮,当用户点击按钮的时候可以执行一些额外的逻辑操作。如:我们在执行删除操作的时候只弹出一个Toast提示,那么用户要是误删了某个重要数据的话肯定会十分抓狂,但是如果增加一个Undo按钮,就相当于给用户提供了一种弥补措施,从而大大降低了事故发生的概率,提升了用户体验
Snackbar.make(v,“Data delected”,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();
第一个参数需要传入一个View,只要是当前界面布局的任意一个View都可以,Snackbar会使用这个View来自动查找最外层的布局,用于展示Snackbar.第二个参数就是Snackbar中显示的内容,第三个参数是显示时长。
CoordinatorLayout可以说是一个加强版的FrameLayout是由Design Support提供的。
他可以监控所有子控件的各种时间,自动帮我们做出最为何苦的相应。
Snackbar不是CoordinatorLayout的子控件,为什么他却可以被监听到?
Snackbar 的make()方法中传入的第一个参数就是用来指定Snackbar是基于哪个View来触发的,刚才传入的是FloatingActionButton本身,而FloatingActionButton是CoordinatorLayout中的子控件,因此这个事件就理所应当的被监听到了。
卡片式布局
1.CardView
是用于实现卡片式布局效果的重要控件,由appcompat-v7库提供。实际上,CardView也是一个FrameLayout,只是额外提高了圆角和阴影等效果,看上去由立体的感觉
CardView基本用法:
<android.support.v7.widget.CardView
android:layout_width=“match_parent”
android:layout_height=“wrap_content”
app:cardCornerRadius=“4dp”
app:cardElevation=“5dp”>
< TextView
android:id="@+id/info_text"
android:layout_width=“match_parent”
android:layout_height=“wrap_content” />
</android.support.v7.widget.CardView>
app:cardCornerRadius属性指定卡片圆角的弧度,数值越大,圆角的弧度越大。
app:cardElevation属性指定卡片的高度,高度值越大,投影范围也就越大,但投影效果越淡。与FloatingActionButton是一致的。
然后在CardView布局中放置了一个TextView,那么这个TextView就会显示在一张卡片当中了,

compile ‘com.github.bumptech.glide:glide:3.7.0’
Glide库依赖,Glide是一个超级强大的图片加载库,它不仅仅可以加载本地图片,还可以加载网络图片,GIF图片,甚至本地视频,做i重要的是它用法简单,只需一行代码就可以轻松实现复杂的图片加载功能。
AppBarLayout是一个垂直方向的LinearLayout,它在内部做了很多滚动事件的封装,并应用了一些Material Design的设计理念。
app:layout_scrollFlags=“scroll|enterAlways|snap”>scroll表示当RecylerView向上滚动的时候,Toolbar会跟着一起向上滚动并实现隐藏,enterAlways表示RecyclerView向下滚动时Toolbar会跟着一起向下滚动并重新显示。snap表示当Toolbar还没有完全隐藏或显示的时候,会根据当前滚动的距离,自动选择是隐藏还是显示

下拉刷新
SwipeRefreshLayout就是用于实现下拉刷新功能的核心类,他是由support-v4库提供的,我们把想要实现下拉刷新功能的控件放置到SwipeRefreshLayout中,就可以迅速让这个控件实现下拉刷新。

可折叠式标题栏
CollapsingToolbarLayout是一个作用于Toolbar基础之上的布局,它也是由Design Support库提供的,他可以让Toolbar的效果变得更加丰富。但是他不能独立存在,他在设计的时候就被限定只能作为AppBarLayout的直接子布局来使用。而AppBarLayout又必须式CoordinatorLayout的子布局。
<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"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags=“scroll|exitUntilCollapsed”>
</android.support.design.widget.CollapsingToolbarLayout>
app:contentScrim="?attr/colorPrimary"用于指定CollapsingToolbarLayout在趋于折叠状态以及折叠之后的背景色,其实在折叠之后就是一个普通的Toolbar
app:layout_scrollFlags=“scroll|exitUntilCollapsed” scroll表示CollapsingToolbarlayout会随着水果内容详情的滚动一起滚动,exitUntilCollapsed表示当CollapsingToolbarlayout随着滚动完成折叠之后就保留在界面上,不再移出屏幕。

app:layout_collapseMode=“parallax”
app:layout_collapseMode=“pin”
该属性指定当前控件在CollapsingToolbarLayout折叠过程中的折叠模式,其中Toolbar指定成pin,表示在折叠的过程中位置始终保持不变,指定为parallax表示会在折叠的过程中产生一定的错位偏移

发布了25 篇原创文章 · 获赞 1 · 访问量 698

猜你喜欢

转载自blog.csdn.net/weixin_43551957/article/details/104181215