UIMaterial Design基础

Android5.0&6.0新特性

2017-07-09  本文已影响199人  LogosLi
5.0新特性

5.0新特性

1.简介

0.1 Material Design

0.4查看视频

0.5打开AndroidStudio和模拟器,展示5.0效果

0.5.1由于手机性能提升,5.0上原生API的控件,谷歌增加了很多动画

0.5.2可以变更标题栏和ActionBar的颜色

0.5.3其他的控件和动画展示

0.5.4 Material完整效果在5.0以上版本原生提供,Support包的兼容性无法做到完全一样

2.自定义状态栏、标题栏、导航栏的颜色

1.1参考图片说明和源码,修改新建项目的values-v21/styles.xml

1.2查看动态切换主题的代码,代码不重要,学生应该掌握查找代码的方法

3.阴影

2.1 z = elevation(海拔) + translationZ(属性动画里Z轴的位移)

2.2阴影范围越大,颜色越淡,表示海拔越高

2.3海拔高的控件显示在界面上层

2.4材料设计认为控件都是有实体质感的,可以拉伸折叠收缩,但是不能有“穿墙”的行为

2.3当子控件已经比父控件大,则阴影不会显示

4.圆形图片轮廓的显示方式

3.1 xml设置

outlineProvider:none|background|bounds|paddedBounds

3.2代码设置

view.setOutlineProvider(new ViewOutlineProvider(){

public void getOutLine(view,outine){

outline.setOval(0,0,view.getWidth(),view.getHeight());

}

});

3.3注意:阴影不会超出父view范围

5.图片选择器tint属性

4.1直接从文档展示

4.2创建Bitmap的Drawable文件,指定src、tintmode和tine可以生成新的图片

6.图片颜色抽取Palette

5.1直接从文档展示

5.2引入support下的palette包

Palette.from(drawable.getBitmap()).generate(new Palette.PaletteAsyncListener() {

@Override

public void onGenerated(Palette palette) {

int color = palette.getLightVibrantColor(Color.RED);

Log.d(TAG, "onGenerated: color="+color);

iv.setBackgroundColor(color);

}

});

7.矢量图

6.0矢量图和栅格图区别

6.1直接从文档展示

6.1.1创建vector的drawable

6.1.2指定宽高、以及viewport宽高

6.1.3指定绘制的path属性

name、fillcolor、pathdata

6.2可以创建矢量图的网站

http://editor.method.ac/

8.矢量图动画

7.0从源码查看

7.1创建animated-vector的drawable

7.2指定animator-vector的默认图片

7.3指定animator-vector的动画资源animator-1

7.4创建animator/animator-1.xml

7.5 animator-1为一个set,包含了多个objectAnimator

7.6 objectAnimator应该指定:

duration="2000",propertyName="pathData",valueType="pathType",valueFrom="图形数据",valueTo="图形数据"

9.按压时的波纹效果

8.1 background="?android:attr/selectableItemBackgroud"

8.2自定义波纹动画

Animator anim = ViewAnimationUtils.createCircularReveal(view, centerX, centerY,startRadius,endRadius);

//在指定view的指定位置,以startRadius为起始半径,endRadius为最终半径,绘制水波纹动画

anim.start();

10. SwipeRefreshLayout

9.0展示效果:下拉刷新列表

9.1增加到布局文件

9.2 find到view对象,并修改下拉颜色变化

9.3设置下拉监听

11. RecycleView

10.1展示效果:可以垂直/水平显示的列表/瀑布流,功能强大,用于替代ListView

10.2增加到布局文件

10.3 find到view对象,并设置Adapter

10.4设置布局管理器

10.5点击事件处理

12. CardView

11.1展示效果:具备阴影的控件,也就是具备z轴海拔的控件

11.2该View继承自FrameLayout,直接作为父布局包裹子控件即可

12.v7包的ToolBar

12.1用于替代ActionBar,继承自ViewGroup可以任意包裹子布局,灵活性更高

12.2使用时必须设置背景色

12.3设置主题,隐藏ActionBar

parent="Theme.AppCompat.NoActionBar"

12.4主界面继承自AactionBarActivity,onCreate方法执行时设置ToolBar作为ActionBar

setSupportActionBar(toolbar);

13. v4包的drawerToggle

13.1展示效果:抽屉效果,可以关联toolbar

13.2在布局文件添加DrawerLayout,包裹两个帧布局

13.3创建DrawerToggle对象

drawToggle = new ActionBarDrawerToggle(this,drawerLayout,toolbar,R.string.open,R.string.close);//构造方法里关联了drawLayout和toolbar

13.4设置监听

drawerLayout.setDrawerListener(drawerToggle);

13.5开启功能

```java

drawerToggle.sysncState();

```

0.1 Material Design

0.4查看视频

0.5打开AndroidStudio和模拟器,展示5.0效果

0.5.1由于手机性能提升,5.0上原生API的控件,谷歌增加了很多动画

0.5.2可以变更标题栏和ActionBar的颜色

0.5.3其他的控件和动画展示

0.5.4 Material完整效果在5.0以上版本原生提供,Support包的兼容性无法做到完全一样

2.自定义状态栏、标题栏、导航栏的颜色

1.1参考图片说明和源码,修改新建项目的values-v21/styles.xml

1.2查看动态切换主题的代码,代码不重要,学生应该掌握查找代码的方法

3.阴影

2.1 z = elevation(海拔) + translationZ(属性动画里Z轴的位移)

2.2阴影范围越大,颜色越淡,表示海拔越高

2.3海拔高的控件显示在界面上层

2.4材料设计认为控件都是有实体质感的,可以拉伸折叠收缩,但是不能有“穿墙”的行为

2.3当子控件已经比父控件大,则阴影不会显示

4.圆形图片轮廓的显示方式

3.1 xml设置

outlineProvider:none|background|bounds|paddedBounds

3.2代码设置

view.setOutlineProvider(new ViewOutlineProvider(){

public void getOutLine(view,outine){

outline.setOval(0,0,view.getWidth(),view.getHeight());

}

});

3.3注意:阴影不会超出父view范围

5.图片选择器tint属性

4.1直接从文档展示

4.2创建Bitmap的Drawable文件,指定src、tintmode和tine可以生成新的图片

6.图片颜色抽取Palette

5.1直接从文档展示

5.2引入support下的palette包

Palette.from(drawable.getBitmap()).generate(new Palette.PaletteAsyncListener() {

@Override

public void onGenerated(Palette palette) {

int color = palette.getLightVibrantColor(Color.RED);

Log.d(TAG, "onGenerated: color="+color);

iv.setBackgroundColor(color);

}

});

7.矢量图

6.0矢量图和栅格图区别

6.1直接从文档展示

6.1.1创建vector的drawable

6.1.2指定宽高、以及viewport宽高

6.1.3指定绘制的path属性

name、fillcolor、pathdata

6.2可以创建矢量图的网站

http://editor.method.ac/

8.矢量图动画

7.0从源码查看

7.1创建animated-vector的drawable

7.2指定animator-vector的默认图片

7.3指定animator-vector的动画资源animator-1

7.4创建animator/animator-1.xml

7.5 animator-1为一个set,包含了多个objectAnimator

7.6 objectAnimator应该指定:

duration="2000",propertyName="pathData",valueType="pathType",valueFrom="图形数据",valueTo="图形数据"

9.按压时的波纹效果

8.1 background="?android:attr/selectableItemBackgroud"

8.2自定义波纹动画

Animator anim = ViewAnimationUtils.createCircularReveal(view, centerX, centerY,startRadius,endRadius);

//在指定view的指定位置,以startRadius为起始半径,endRadius为最终半径,绘制水波纹动画

anim.start();

10. SwipeRefreshLayout

9.0展示效果:下拉刷新列表

9.1增加到布局文件

9.2 find到view对象,并修改下拉颜色变化

9.3设置下拉监听

11. RecycleView

10.1展示效果:可以垂直/水平显示的列表/瀑布流,功能强大,用于替代ListView

10.2增加到布局文件

10.3 find到view对象,并设置Adapter

10.4设置布局管理器

10.5点击事件处理

12. CardView

11.1展示效果:具备阴影的控件,也就是具备z轴海拔的控件

11.2该View继承自FrameLayout,直接作为父布局包裹子控件即可

12.v7包的ToolBar

12.1用于替代ActionBar,继承自ViewGroup可以任意包裹子布局,灵活性更高

12.2使用时必须设置背景色

12.3设置主题,隐藏ActionBar

parent="Theme.AppCompat.NoActionBar"

12.4主界面继承自AactionBarActivity,onCreate方法执行时设置ToolBar作为ActionBar

setSupportActionBar(toolbar);

13. v4包的drawerToggle

13.1展示效果:抽屉效果,可以关联toolbar

13.2在布局文件添加DrawerLayout,包裹两个帧布局

13.3创建DrawerToggle对象

drawToggle = new ActionBarDrawerToggle(this,drawerLayout,toolbar,R.string.open,R.string.close);//构造方法里关联了drawLayout和toolbar

13.4设置监听

drawerLayout.setDrawerListener(drawerToggle);

13.5开启功能

```java

drawerToggle.sysncState();

```

0.1 Material Design

0.4 查看视频

0.5 打开AndroidStudio和模拟器,展示5.0效果

0.5.1 由于手机性能提升,5.0上原生API的控件,谷歌增加了很多动画

0.5.2 可以变更标题栏和ActionBar的颜色

0.5.3 其他的控件和动画展示

0.5.4 Material完整效果在5.0以上版本原生提供,Support包的兼容性无法做到完全一样

自定义状态栏、标题栏、导航栏的颜色

1.1 参考图片说明和源码,修改新建项目的values-v21/styles.xml

1.2 查看动态切换主题的代码,代码不重要,学生应该掌握查找代码的方法

阴影

2.1 z = elevation(海拔) + translationZ(属性动画里Z轴的位移)

2.2 阴影范围越大,颜色越淡,表示海拔越高

2.3 海拔高的控件显示在界面上层

2.4 材料设计认为控件都是有实体质感的,可以拉伸折叠收缩,但是不能有“穿墙”的行为

2.3 当子控件已经比父控件大,则阴影不会显示

圆形图片轮廓的显示方式

3.1 xml设置

outlineProvider:none|background|bounds|paddedBounds

3.2 代码设置

view.setOutlineProvider(new ViewOutlineProvider(){

public void getOutLine(view,outine){

outline.setOval(0,0,view.getWidth(),view.getHeight());

}

});

3.3 注意:阴影不会超出父view范围

图片选择器 tint属性

4.1 直接从文档展示

4.2 创建Bitmap的Drawable文件,指定src、tintmode和tine可以生成新的图片

图片颜色抽取 Palette

5.1 直接从文档展示

5.2 引入support下的palette包

Palette.from(drawable.getBitmap()).generate(new Palette.PaletteAsyncListener() {

@Override

public void onGenerated(Palette palette) {

int color = palette.getLightVibrantColor(Color.RED);

Log.d(TAG, "onGenerated: color="+color);

iv.setBackgroundColor(color);

}

});

矢量图

6.0 矢量图和栅格图区别

6.1 直接从文档展示

6.1.1 创建vector的drawable

6.1.2 指定宽高、以及viewport宽高

6.1.3 指定绘制的path属性

name、fillcolor、pathdata

6.2 可以创建矢量图的网站

http://editor.method.ac/

矢量图动画  7.0 从源码查看  7.1 创建animated-vector的drawable  7.2 指定animator-vector的默认图片  7.3 指定animator-vector的动画资源animator-17.4 创建animator/animator-1.xml7.5 animator-1为一个set,包含了多个objectAnimator7.6 objectAnimator应该指定:duration="2000",propertyName="pathData",valueType="pathType",valueFrom="图形数据",valueTo="图形数据"

按压时的波纹效果

8.1 background="?android:attr/selectableItemBackgroud"

8.2 自定义波纹动画

Animator anim = ViewAnimationUtils.createCircularReveal(view, centerX, centerY,startRadius,endRadius);

// 在指定view的指定位置,以startRadius为起始半径,endRadius为最终半径,绘制水波纹动画

anim.start();

SwipeRefreshLayout

9.0 展示效果:下拉刷新列表

9.1 增加到布局文件

9.2 find到view对象,并修改下拉颜色变化

9.3 设置下拉监听

RecycleView

10.1 展示效果:可以垂直/水平显示的列表/瀑布流,功能强大,用于替代ListView

10.2 增加到布局文件

10.3 find到view对象,并设置Adapter

10.4 设置布局管理器

10.5 点击事件处理

CardView

11.1 展示效果:具备阴影的控件,也就是具备z轴海拔的控件

11.2 该View继承自FrameLayout,直接作为父布局包裹子控件即可

12.v7包的ToolBar

12.1 用于替代ActionBar,继承自ViewGroup可以任意包裹子布局,灵活性更高

12.2 使用时必须设置背景色

12.3 设置主题,隐藏ActionBar

parent="Theme.AppCompat.NoActionBar"

12.4 主界面继承自AactionBarActivity,onCreate方法执行时设置ToolBar作为ActionBar

setSupportActionBar(toolbar);

v4包的drawerToggle13.1 展示效果:抽屉效果,可以关联toolbar13.2 在布局文件添加DrawerLayout,包裹两个帧布局13.3 创建DrawerToggle对象drawToggle = new ActionBarDrawerToggle(this,drawerLayout,toolbar,R.string.open,R.string.close);// 构造方法里关联了drawLayout和toolbar13.4 设置监听drawerLayout.setDrawerListener(drawerToggle);13.5 开启功能java

drawerToggle.sysncState();

6.0新特性

1.okHttp

1.1 okHttp用于替代HttpUrlConnection和Apache HttpClient(6.0里已移除HttpClient)

1.2 okHttp优势

1.2.1 支持SPDY,共享同一个Socket来处理同一个服务器的所有请求

1.2.2 如果SPDY不可用,则通过连接池来减少请求延迟

1.2.3 无缝的支持GZIP来减少数据流量

1.2.4 缓存响应数据来减少重复的网络请求

1.3 导入依赖

1.3.0 图形化操作

file - project structrue - app - dependebcies - library dependencies - 搜索okhttp

1.3.1 修改build.gradle

compile "com.squareup.okhttp:okhttp:2.5.0"

1.3.2 下载jar文件

自行百度

1.3 发送get请求

1.3.1 创建OkHttpClient对象

1.3.2 使用Request.Builder构建请求对象

// http://wthrcdn.etouch.cn/weather_mini?citykey=101010100

Request request = new Request.Builder().url(url).build();

1.3.3 发送请求

Response res = okHttpClient.newCall(request).execute();

1.3.4 获取服务器返回的数据

String json = res.body();

1.4 发送post请求

1.4.1 声明post的数据类型

MediaType JSON = MediaType.parse("application/json;charset=utf-8");

1.4.2 构建JSON字符串

String jsonStr = "{name=\"你好啊!\"}";

1.4.3 创建RequestBody消息体对象

RequestBody body = RequestBody.create(JSON,jsonStr);

1.4.4 使用Request.Builder构建请求对象

// http://192.168.0.102:8080/TestProject/JsonServlet

Request request = new Request.Builder().url(url).post(body).build();

1.4.5 创建OkHttpClient对象,并发送请求

Response res = okHttpClient.newCall(request).execute();

1.4.6 获取返回结果

if(res.isSussessful()){

String json = res.getBody();

}

1.5 发送post请求,并传递字段

1.5.1 构建RequestBody消息体对象

// http://192.168.0.102:8080/TestProject/ParamServlet

RequestBody body = new FormEncodingBuilder()

.add("platform","android")

.add("version","23")

.add("SDK","24")

.build();

1.5.2 构建Request对象、OkHttpClient对象,发送post请求,并获取返回值

2.TextInputLayout

2.0 环境配置

2.0.1 需要引用Support v7 和 Support Design 包(从MAVEN库引用,或最新的%SDK%\extra\design\libs下有jar包)

2.0.2 创建xml的app属性(可以直接使用代码模板:appns)

xmlns:app="http://schemas.android.com/apk/res-auto"

2.1 展示效果:自带界面友好的错误提示

2.2 使用TextInputLayout包裹一个EditText

2.3 获取输入框

textInputLayout.getEditText(); // 不需要findViewById

2.4 显示错误提示

textInputLayout.setErrorEnable(true);

textInputLayout.setError(msg);

2.5 隐藏错误提示

textInputLayout.setErrorEnable(false);

3.TextSelection变更

3.1 展示效果:对比5.0的文本选择,6.0系统文本选择显示的菜单项可以被修改。

3.2 创建布局,添加TextView

3.3 获取TextView对象,注册回调监听

tv.setCustomSelectionActionModeCallBack()

3.4 自定义类实现监听接口 ActionMode.CallBack2

3.4 ActionMode.CallBack2的onCreateActionMode方法创建Meu对象

3.4.1 创建MenuInflate对象

MenuInflate menuInflate = actionMode.getMenuInflater();

3.4.2 填充menu对象

menuInflate.inflate(R.menu.main, menu);

3.4.3 方法返回值设置为true,说明该方法已被拦截

4.FloatingActionButton(FAB)

4.1 用于显示一个悬浮在界面上的按钮,可以设置点击事件(onClickListener)

4.2 设置按钮大小

app:fabSize="mini"

4.3 设置按钮背景色

app:backgroundTint="#fff";

5.SnackBar

5.1 展示效果:用于显示提示,官方建议用于替代Toast

5.2 对比Toast来使用

Toast.makeText(context,msg,0).show();

Snackbar.make(view,msg,0).show();

5.3 参数里View的作用

查看官方文档,该view用于查找ParentView,以确定SnackBar的显示位置

5.4 设置点击事件

snackBar.setAction("可点击的提示文字",onClickListener);

6.TabLayout

6.1 展示效果:方便的实现tab跟随Viewpager切换,不需要第三方或者自定义

6.3 在layout里使用tablayout

6.4 向tablayout对象addTab

tabLayout.addTab(tabLayout.newTab().setText(""))

6.5 关联ViewPager

方式一: viewpager.addOnPagerChangeListener(new TabLayoutOnPagerChangeListener(tabLayout))

方式二:tabLayout.setupWithViewPager(viewPager)

6.6 ViewPager使用的FragmentPagerAdapter

需要在getPagerTitle方法返回一个字符串,该字符串会作为对应position的tab的标题。

6.7 设置tab的点击事件

tabLayout.setOnTabSelectedListener

7.NavigationView

7.1 展示效果:用作侧滑菜单的侧边导航栏

7.2 必须嵌套在DrawerLayout里使用

DrawerLayout包含两个子布局,一个导航栏,另一个为显示的正文

7.3 NavigationView的属性:

7.3.1 app:headerLayout,可选项,可以指定一个布局作为导航内容的Header

7.3.2 app:menu,必需项,指定一个menu,作为导航内容的菜单

7.4 导航栏的点击响应

7.4.1 navigationView.setNavigationItemSelectedListener

该方法监听被点击的MenuItem,判断MenuItem对象处理对应的事件响应

8.CoordinatorLayout

8.1 展示效果:可以协调多个布局间的位置关系。让FloatActionBar上下滑动,为Snackbar留出空间;拓展或折叠toolbar;控制view扩展或收缩,以及大小比例

8.2 CoordinatorLayout作为根布局使用

8.3 配合FloatActionBar和SnackBar使用

8.3.1 布局里添加FAB,当界面上显示Snackbar的时候会自动的偏移FAB的位置

8.4 配合AppBarLayout和toolbar使用

8.4.1 用AppBarLayout包裹的子view会以一个整体的形式作为AppBar,从而具备统一的风格

8.4.2 设置toolbar属性可以使toolbar随着界面滑动而隐藏/显示

app:layout_scrollFlags="scroll|enterAlways"

// scroll 表示该view可以被折叠

// enterAlways 表示向上滑动则隐藏ToolBar,向下滑动则显示

// exitUntilCollapsed 将关闭滚动直到它被折叠起来(有 minHeight) 并且一直保持这样

// enterAlwaysCollapsed 定义了 View 是如何回到屏幕的,当你的 view 已经声明了一个minHeight, 并且你使用了这个标志,你的 View 只有在回到这个最小的高度的时候才会展开,只有当 view 已经到达顶部之后它才会重新展开全部高度。

8.4.3 可滚动的控件需要设置属性

app:layout_behavior="@string/appbar_scrolling_view_behavior"

// 标识自己发起的滚动可以导致AppBar收缩

8.4.3 带layout_scrollFlags的view需要放在布局的前面,这样收回的view才能够正常退出,而固定的view继续留在顶部

8.5 配合AppBarLayout和CollapsingToolbarLayout使用

8.5.1 AppBarLayout用于包裹且仅包裹CollapsingToolbarLayout,使得CollapsingToolbarLayout作为AppBar而存在

8.5.2 CollapsingToolbarLayout用于包含Toolbar和ImageView, 提供滑动中的渐变和视差效果

8.5.3 设置CollapsingToolbarLayout属性

app:expandedtitleMarginStart="10dp"// 指定文字和左边缘的间距

app:contextScrim="?attr/colorPrimary"//折叠后容器的颜色

app:layout_scrollFlag="scroll|exitUntilCollapsed"

// 拦截滚动的事件

// enterAlwaysCollpsed  ---------- ????????

// exitUntilCollapsed 可以让ToolBar固定在最顶部,而不伴随手势的滚动隐藏------- ??????????

8.5.4 设置ImageView属性

app:layout_collapseMode="parallax"

// parallax模式:在内容滚动时,CollapsingToolbarLayout里的view可以同时滚动,造出视差效果

8.5.4 设置Toolbar属性

app:layout_collapseMode="pin"

// pin模式:当CollapsingToolbarLayout完全收缩后,继续保留在屏幕上

android:layout_height="?attr/actionbarSize" // 设置高度为actionbar的高度

8.5.5 手势滑动时,修改toolbar文字大小,文字颜色

8.5.5.1 获取到CollapsingToolbarLayout对象

8.5.5.2 设置标题

collapsingToolbarLayout.setTitle

8.5.5.3 设置展开状态的颜色

collapsingToolbarLayout.ExpandedTitleColor

8.5.5.4 设置折叠状态的颜色

collapsingToolbarLayout.setCollapsedTitleTextColor

附:Android6.0 Design新特性搜索关键字:高逼格UI

上一篇下一篇

猜你喜欢

热点阅读