温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

Android 5.0新特性

发布时间:2020-06-19 04:26:11 来源:网络 阅读:4649 作者:tlw90 栏目:移动开发

1.   Android5.0新特性

  系统主题,如何自定义主题  高度与阴影  阴影与轮廓  轮廓与裁剪  矢量图  drawable染色  取色器  涟漪动画  xml涟漪动画  代码涟漪动画  状态动画  矢量图动画  路径动画  揭示动画  Activity转场动画  共享元素转场动画  xml配置转场动画  CardView  如何兼容低版本

1.1.Material DesignMD)简介

Material Design材料设计,是的一种新的设计风格,谷歌希望寄由此来统一各种平台上的应用外观和用户体验。

 

官网介绍:

http://www.google.com/design/spec/material-design/introduction.html

 

1.2.主题样式

l  系统自带的三个材料风格主题:

@android:style/Theme.Material (深色)

@android:style/Theme.Material.Light (亮色)

@android:style/Theme.Material.Light.DarkActionBar(亮色,actionbar为深色)

 

l  如何使用材料风格主题?

官方资料:http://developer.android.com/training/material/theme.html

           file:///D:/Android/android-sdk-windows/docs/training/material/theme.html

颜色取色器:

           http://www.materialpalette.com/

 

(1)定义主题:

<!--  api21以上版本生效 -->

<style name="RedTheme"  parent="android:Theme.Material">
    
<!-- 状态栏颜色,会被statusBarColor效果覆盖-->
    
<item name="android:colorPrimaryDark">@color/status_red</item>
    
<!-- 状态栏颜色,继承自colorPrimaryDark  -->
    
<item name="android:statusBarColor">@color/status_red</item>
    
<!--  actionBar颜色 -->
    
<item name="android:colorPrimary">@color/action_red</item>
    
<!-- 窗口背景颜色 -->
    
<item name="android:windowBackground">@color/window_bg_red</item>
    
<!-- 底部导航栏颜色 -->
    
<item name="android:navigationBarColor">@color/navigation_red</item>
 
    
<!-- 前景色:ListView的分割线颜色,switch滑动区域色-->
    
<item name="android:colorForeground">@color/fg_red</item>
    
<!-- 背景色:popMenu的背景色  -->
    
<item name="android:colorBackground">@color/bg_red</item>
 
    
<!-- 控件默认颜色 ,效果会被colorControlActivated取代  -->
    
<item name="android:colorAccent">@color/control_activated_red</item>
    
<!-- 控件默认状态时的颜色  -->
    
<item name="android:colorControlNormal">@color/control_normal_red</item>
    
<!-- 控件按下时的颜色,会影响水波纹效果,继承自colorAccent  -->
    
<item name="android:colorControlHighlight">@color/control_highlight_red</item>
    
<!-- 控件选中时(selectedchecked)的颜色 -->
    
<item name="android:colorControlActivated">@color/control_activated_red</item>
 
    
<!--  Button的默认背景颜色 -->
    
<item name="android:colorButtonNormal">@color/button_normal_red</item>
    
<!--  ButtontextView的文字颜色  -->
    
<item name="android:textColor">@color/white_text</item>
    
<!--  RadioButton checkbox等控件的文字 -->
    
<item name="android:textColorPrimaryDisableOnly">@color/white_text</item>
    
<!--  actionBar的标题文字颜色 -->
    
<item name="android:textColorPrimary">@color/white_text</item>
 </
style>

 

(2)使用主题:(有两种方式)

    a) 配置文件中配置

<application
    
android:theme="@style/RedTheme">

 

    b) 代码方式:

protected void onCreate(Bundle  savedInstanceState) {
     setTheme(R.style.
RedTheme);   // 设置主题
    
super.onCreate(savedInstanceState);
     setContentView(R.layout.
activity_main);
 }

 

l  通过V7(部分)包兼容低版本

(1)添加support v7

     build.gradledependencies节点下添加:

compile 'com.android.support:appcompat-v7:23.0.3'

 

(2)使用Theme.AppCompat主题

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">

 

(3)继承AppCompatActivity

 界面不再继承 Activity, FragmentActivity ActionBarActivity, 而是继承AppCompatActivity, 目的是为了将MD的风格,

 Toolbar等新的特效兼容到低版本。

 

注意V7包只是兼容了材料主题的部分功能,一些主题样式目前在低版本还无法使用

     如:导航栏样式修改;

1.3.高度与阴影

n  阴影大小Z = elevation + translationZ  elevation是相对于父控件的高度)

n  比父控件的高宽小,才能显示阴影

n  高度(阴影大小)决定了View的遮盖关系

 

阴影效果设置:

android:elevation="4dp"    

android:translationZ="4dp"

 

1.4.轮廓(outlineProvider属性)

n 指定控件的轮廓

// 默认为background

android:outlineProvider="none|background|bounds|paddedBounds"

 

n  若控件背景为半透明的shape或图片,则不会产生阴影。需要在代码中设置。

// 代码设置轮廓
 
circle1.setOutlineProvider(new ViewOutlineProvider()  {
    
public void getOutline(View view, Outline outline)  {
        
// 可以指定圆形,矩形,圆角矩形,path
        
outline.setOval(0, 0,  view.getWidth(), view.getHeight());
     }
 });
 
 
// 代码设置轮廓:减少轮廓
 
circle2.setOutlineProvider(new ViewOutlineProvider()  {
    
public void getOutline(View view, Outline outline)  {
         
int padding = dp2px(5);
         outline.setOval(padding,  padding,
                 view.getWidth() -  padding,
                 view.getHeight() -  padding);
     }
 });

 

1.5.裁剪

n  裁剪视图可以轻松改变视图形状;

n  裁剪方法:

通过mView.clipToOutline(true)android:clipToOutline="true"

将视图裁剪成轮廓指定形状

n  不是所有轮廓都可裁剪:

仅有矩形、圆形和圆角矩形轮廓支持裁剪,Path、椭圆无法进行裁剪;

可通过Outline.canClip()判断指定的轮廓是否可裁剪:

 

mTextView.setOutlineProvider(new ViewOutlineProvider()  {
    
public void getOutline(View view, Outline outline)  {

// 指定轮廓:圆形
    
outline.setOval(0, 0,  view.getWidth(), view.getHeight());

        // 指定轮廓:圆角矩形
        
// outline.setRoundRect(0, 0,  view.getWidth(), view.getHeight(), dp2px(10));

         cut2.setText("判断是否可裁剪: "  + outline.canClip());
     }

 
});
 
mTextView.setClipToOutline(true); // 裁剪

1.6.染色(Tint

n  十六种PorterDuffXfermode(参考ApiDemographics / xfermodes

 从上面我们可以看到PorterDuff.Mode为枚举类,一共有16个枚举值:

1.PorterDuff.Mode.CLEAR  

  所绘制不会提交到画布上。
2.PorterDuff.Mode.SRC

   显示上层绘制图片
3.PorterDuff.Mode.DST

  显示下层绘制图片
4.PorterDuff.Mode.SRC_OVER

  正常绘制显示,上下层绘制叠盖。
5.PorterDuff.Mode.DST_OVER

  上下层都显示。下层居上显示。
6.PorterDuff.Mode.SRC_IN

   取两层绘制交集。显示上层。
7.PorterDuff.Mode.DST_IN

  取两层绘制交集。显示下层。
8.PorterDuff.Mode.SRC_OUT

 取上层绘制非交集部分。
9.PorterDuff.Mode.DST_OUT

 取下层绘制非交集部分。
10.PorterDuff.Mode.SRC_ATOP

 取下层非交集部分与上层交集部分
11.PorterDuff.Mode.DST_ATOP

 取上层非交集部分与下层交集部分
12.PorterDuff.Mode.XOR

  异或:去除两图层交集部分
13.PorterDuff.Mode.DARKEN

  取两图层全部区域,交集部分颜色加深
14.PorterDuff.Mode.LIGHTEN

  取两图层全部,点亮交集部分颜色
15.PorterDuff.Mode.MULTIPLY

  取两图层交集部分叠加后颜色
16.PorterDuff.Mode.SCREEN

  取两图层全部区域,交集部分变为透明色

  

n  tint模式

android:background="@drawable/ring"
android:backgroundTint="@color/color_tint"       //tint颜色
android:backgroundTintMode="add"                   // 染色模式

 

n  一张图片实现选择器:

按下的样式:drawable/ring_tint.xml

<?xml  version="1.0"  encoding="utf-8"?>
 
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
    
android:src="@drawable/ring"
    
android:tint="#5677fc"
    
android:tintMode="multiply" />

 

选择器的定义:

<?xml  version="1.0"  encoding="utf-8"?>
 
<selector xmlns:android="http://schemas.android.com/apk/res/android">
     <
item android:drawable="@drawable/ring_tint" android:state_pressed="true" />
     <
item android:drawable="@drawable/ring" />
 
</selector>

 

1.7.调色板(Palette)

Palette:调色板,取色板,它是v7包中的类: android.support.v7.graphics.Palette

可以用来获取一张图片中的颜色值。

 

Vibrant         鲜艳的

Vibrant dark    鲜艳的暗色

Vibrant light    鲜艳的亮色

Muted          柔和的

Muted dark     柔和的暗色

Muted light     柔和的亮色

 

Bitmap bitmap  = BitmapFactory.decodeResource(getResources(),  R.drawable.palette);
 
 

// 对图片取色是一个比较消耗性能的操作,其内部会在子线程中运行。
 
Palette.from(bitmap).generate(new Palette.PaletteAsyncListener()  {
   
public void onGenerated(Palette palette) {
      
v.setBackgroundColor(palette.getVibrantColor(Color.BLACK));
      
vd.setBackgroundColor(palette.getDarkVibrantColor(Color.BLACK));
      
vl.setBackgroundColor(palette.getLightVibrantColor(Color.BLACK));
      
m.setBackgroundColor(palette.getMutedColor(Color.BLACK));
      
md.setBackgroundColor(palette.getDarkMutedColor(Color.BLACK));
      
ml.setBackgroundColor(palette.getLightMutedColor(Color.BLACK));
    }
 });

 

1.8.矢量图

l  SVG 矢量图可以用一个根节点为svgxml文件表示;   

l  w3矢量图文档https://www.w3.org/TR/SVG11/paths.html

 

l  绘制矢量图:  http://editor.method.ac/

l  Svg --> vectorhttp://inloop.github.io/svg2android/

要在android中显示矢量图,需要把svg文件转换为vector文件

 

Android 5.0新特性

<LinearLayout
    
android:layout_width="match_parent"
    
android:layout_height="wrap_content"
    
android:gravity="center"
    
android:orientation="horizontal">
     <
ImageView
        
android:layout_width="50dp"
        
android:layout_height="50dp"
        
android:background="@drawable/heart" />
     <
ImageView
        
android:layout_width="200dp"
        
android:layout_height="200dp"
        
android:background="@drawable/heart" />
 </
LinearLayout>

 

// drawable/heart.xml

<?xml version="1.0" encoding="utf-8"?>
 
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    
android:width="100dp"
    
android:height="100dp"
    
android:viewportHeight="40"
    
android:viewportWidth="40">
     <
path
        
android:fillColor="#ff00ff"
        
android:pathData="M20.5,9.5
                          c-1.955,0,-3.83,1.268,-4.5,3
                          c-0.67,-1.732,-2.547,-3,-4.5,-3
                          C8.957,9.5,7,11.432,7,14
                         c0,3.53,3.793,6.257,9,11.5
                          c5.207,-5.242,9,-7.97,9,-11.5
                          C25,11.432,23.043,9.5,20.5,9.5z"
/>
 </
vector>

 

1.9.全新动画

MaterialDesign设计中,为用户与app交互反馈他们的动作行为和提供了视觉上的连贯性。Material主题为控件和Activity的过渡提供了一些默认的动画,在android L上,允许自定义这些动画:

 

Touch feedback 触摸反馈动画 (水波纹动画,涟漪动画)

Circular Revealanimation  圆形揭示动画

Path-based animations 基于路径的动画(Curvedmotion曲线运动)

View state changes 视图状态动画

Vector Drawables 矢量图动画

Activity transitionsActivity转场动画

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI