定义阴影与裁剪视图

http://developer.android.com/intl/zh-cn/training/material/shadows-clipping.html

Material Design为 UI 元素引入高度。视图的高度将帮助用户更好的了解元素间的层次关系,而阴影效果正是高度这一属性(View的 Z 属性)在视觉上的表现。

指定视图高度

视图的 Z 值包含两个部分:

  • Elevation:静态属性。
  • Translation:用于动画的动态属性。

Z = elevation + translationZ
这里写图片描述
图 1 - 不同视图高度的阴影。

  1. 设置视图的高度

    使用 android:elevation属性,或者在代码使用 View.setElevation() 方法。如果要设置视图Translation,可以使用使用 View.setTranslationZ() 方法。

  2. 设置视图阴影变化的动画

    全新的 ViewPropertyAnimator.z() 与 ViewPropertyAnimator.translationZ() 方法让您能够轻松地为视图高度添加动画。 详情: ViewPropertyAnimator。
    也可使用 StateListAnimator 设置动画。详情: Animate View State Changes.

  3. Z 值以 dp(密度独立像素)为单位度量。

定制视图阴影与轮廓

视图的背景图片的边界将决定其阴影的默认形状。(轮廓代表图形对象的外形并定义触摸反馈的波纹区域。)

  1. xml文件中定义示例:
<TextView
    android:id="@+id/myview"
    ...
    android:elevation="2dp"
    android:background="@drawable/myrect" />

背景图片定义成一个圆角矩形(res/drawable/myrect.xml):

<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">
    <solid android:color="#42000000" />
    <corners android:radius="5dp" />
</shape>

视图将投射一个带有圆角的阴影,因为背景图片形状(圆角矩形)决定了视图(TextView)的轮廓。
2. 如果要在代码中的自定义视图轮廓,则可以通过以下几个步骤:

        1. 继承 ViewOutlineProvider 类。
        2. 复写 getOutline() 方法。
        3. 利用 View.setOutlineProvider() 方法为视图指定新的轮廓。
        4. (通常需要配合剪裁视图一起使用,具体见下面的介绍)

可以使用 Outline 类别中的方法创建带有圆角的椭圆形或矩形轮廓。视图的默认轮廓为其背景轮廓。 如果要防止视图投射阴影,请将其outline provider设置为 null。
3. 代码示例:

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super .onCreate(savedInstanceState);
        setContentView(R.layout. activity_main);

        TextView texView2 = (TextView)findViewById(R.id. myview2);

        //设置阴影轮廓
        texView2.setOutlineProvider( new ViewOutlineProvider() {
            @Override
            public void getOutline(View view, Outline outline) {
               //圆形轮廓
                outline.setOval(0,0 ,view.getMeasuredWidth(), view.getMeasuredHeight());
            }
        });
        //将视图按照Outline(轮廓)剪裁
        texView2.setClipToOutline( true);
    }
}

Demo截图:
这里写图片描述
TextView1: 未经过处理(用于效果对比,视图阴影效果皆为:android:elevation=”24dp”)
TextView2: 参照以上方法在xml中设置轮廓效果(由demo中看,xml中设置的阴影效果似乎存在问题)
TextView3: 使用示例代码进行设置轮廓及剪裁视图后的效果。(这里一定要对视图进行剪裁(texView2.setClipToOutline(true );),否则只有阴影轮廓是圆形而TextView仍为正方形)

裁剪视图

裁剪视图即可以改变视图形状。可以通过 View.setClipToOutline()方法或 android:clipToOutline 属性将视图裁剪至其轮廓的形状。但是据Outline.canClip()方法可知,仅有矩形、圆形和圆角矩形轮廓支持如此裁剪。
(Note:裁剪视图是一个成本高昂的操作,因此尽量避免为剪裁的视图添加动画效果。 如果真有这种需求,可以参照Reveal Effect。)

发布了42 篇原创文章 · 获赞 90 · 访问量 13万+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章