Android-Android 5.X新特性之视图和阴影 _Android

得意犹堪夸世俗，诏黄新湿字如鸦。这篇文章主要讲述Android-Android 5.X新特性之视图和阴影相关的知识，希望能为你提供帮助。
Material Design的一个很重要的特点就是拟扁平化，通过使用Material Design中的阴影和光线，配合完美的动画效果，模拟出一个动感十足有美丽大胆的视觉效果。
1.阴影效果
以往的android版本中，View通常只有两个属性--X和Y，而在Android 5.X中，Google为其增加了一个新的属性--Z，对应垂直上方向上的高度变化。在Android 5.X中，View的Z值由两部分构成，elevation和translationZ(它们都是Android 5.X新引入的属性)。elevation是静态的成员，translationZ可以在代码中使用来实现动画效果，它们的关系如下
【Android-Android 5.X新特性之视图和阴影】 Z = elevation + translationZ
我们通过在XMl布局中使用如下属性来设置View的高度
android:elevation = ""

1 < ?xml version="1.0" encoding="utf-8"?> 2 < LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 3android:layout_width="match_parent" 4android:layout_height="match_parent" 5android:orientation="vertical"> 6< TextView 7android:elevation="20dp" 8android:id="@+id/id_textView" 9android:background="#5FF" 10android:layout_width="300dp" 11android:layout_height="300dp" /> 12 < /LinearLayout>

效果如图

文章图片

仔细的看一下图片，会发现TextView背后有一部分阴影。
同样，我们还可在使用java代码来动态更改TextView的高度。
view.setTranslationZ();
2.Tinting和Clipping
Android 5.X 在对图像的操作上有了更多的功能。下面来看看Android 5.X 的两个操作图像的新功能--Tinting(着色)和Clipping(裁剪)。
(1)Tinting(着色)
Tint的使用非常的简单，只要在XML代码中配置好Tint和TintMode就可以了。

1 < ?xml version="1.0" encoding="utf-8"?> 2 < LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 3android:layout_width="match_parent" 4android:layout_height="match_parent" 5android:gravity="center" 6android:orientation="vertical"> 7< ImageView 8android:src="https://www.songbingjia.com/android/@mipmap/ic_launcher" 9android:layout_width="wrap_content" 10android:layout_height="wrap_content" /> 11< ImageView 12android:tint="#5FF" 13android:src="https://www.songbingjia.com/android/@mipmap/ic_launcher" 14android:layout_width="wrap_content" 15android:layout_height="wrap_content" /> 16< ImageView 17android:tintMode="add" 18android:tint="#5FF" 19android:src="https://www.songbingjia.com/android/@mipmap/ic_launcher" 20android:layout_width="wrap_content" 21android:layout_height="wrap_content" /> 22< ImageView 23android:tintMode="multiply" 24android:tint="#5FF" 25android:src="https://www.songbingjia.com/android/@mipmap/ic_launcher" 26android:layout_width="wrap_content" 27android:layout_height="wrap_content" /> 28< ImageView 29android:tintMode="screen" 30android:tint="#5FF" 31android:src="https://www.songbingjia.com/android/@mipmap/ic_launcher" 32android:layout_width="wrap_content" 33android:layout_height="wrap_content" /> 34 35 < /LinearLayout>

效果如图

文章图片

(2)Cliping(裁剪)
Clipping可以让我们改变一个视图的外形。要使用Clipping，首先需要使用ViewOutlineProvider来修改outline，然后通过setOutlineProvider将outline作用到视图上去

1 < ?xml version="1.0" encoding="utf-8"?> 2 < LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 3android:layout_width="match_parent" 4android:layout_height="match_parent" 5android:gravity="center" 6android:orientation="vertical"> 7 8< TextView 9android:id="@+id/id_textView1" 10android:elevation="1dp" 11android:layout_width="200dp" 12android:layout_height="200dp" 13/> 14 15< TextView 16android:id="@+id/id_textView2" 17android:elevation="1dp" 18android:layout_width="200dp" 19android:layout_height="200dp" 20android:layout_marginTop="10dp" 21/> 22 < /LinearLayout>

1 public class MainActivity extends AppCompatActivity { 2private TextView mTextView1 = null; 3private TextView mTextView2 = null; 4 5@Override 6protected void onCreate(@Nullable Bundle savedInstanceState) { 7super.onCreate(savedInstanceState); 8setContentView(R.layout.activity_main); 9mTextView1 = (TextView) findViewById(R.id.id_textView1); 10mTextView2 = (TextView) findViewById(R.id.id_textView2); 11ViewOutlineProvider viewOutlineProvider = new ViewOutlineProvider() { 12@Override 13public void getOutline(View view, Outline outline) { 14//裁剪为圆角矩形 15outline.setRoundRect(0, 0, view.getWidth(), view.getHeight(), 30); 16} 17}; 18ViewOutlineProvider viewOutlineProvider1 = new ViewOutlineProvider() { 19@Override 20public void getOutline(View view, Outline outline) { 21//裁剪为圆形 22outline.setOval(0, 0, view.getWidth(), view.getHeight()); 23} 24}; 25mTextView1.setOutlineProvider(viewOutlineProvider); 26mTextView2.setOutlineProvider(viewOutlineProvider1); 27} 28 }

效果如图