Android 設定控制元件陰影的三種方式
第一種方式:elevation
View的大小位置都是通過x,y確定的,而現在有了z軸的概念,而這個z值就是View的高度(elevation),而高度決定了陰影(shadow)的大小。
![7508328-3e32937b95b6bb6b](https://i.iter01.com/images/7ccf0407b11feb9a74b53f37ad510dc56e0fccbdca28240466ae5facfaf3a0aa.png)
View Elevation(檢視高度)
View的z值由兩部分組成,elevation和translationZ(它們都是Android L新引入的屬性)。
eleavation是靜態的成員,translationZ是用來做動畫。
Z = elevation + translationZ
在layout中使用** android:elevation屬性去定義
在程式碼中使用 View.setElevation 方法去定義
設定檢視的translation,可以使用View.setTranslationZ方法
新的ViewPropertyAnimator.z和ViewPropertyAnimator.translationZ方法可以設定檢視的elevation**值
我們通過設定elevation的值也會達到卡片陰影效果
![7508328-fc294ad0a3e742b5.png](https://i.iter01.com/images/74941f2d692051e24fe1474168797d1f14e1a7ce806d751081327b53a23f222d.png)
第二種方式:CardView
今天有空學習了下CardView的使用,既然是使用,不凡使用一個例項操作一下
CardView是Android5.0的新控制元件,所以我們需要在dependencies中新增支援:compile 'com.android.support:cardview-v7:26.0.0'
CardView是繼承FrameLayout的一個佈局控制元件,從原始碼可以看出CardView支援的屬性有:
card_view:cardElevation 陰影的大小
card_view:cardMaxElevation 陰影最大高度
card_view:cardBackgroundColor 卡片的背景色
card_view:cardCornerRadius 卡片的圓角大小
card_view:contentPadding 卡片內容於邊距的間隔
- card_view:contentPaddingBottom
- card_view:contentPaddingTop
- card_view:contentPaddingLeft
- card_view:contentPaddingRight
- card_view:contentPaddingStart
- card_view:contentPaddingEnd
card_view:cardUseCompatPadding 設定內邊距,V21+的版本和之前的版本仍舊具有一樣的計算方式
card_view:cardPreventConrerOverlap 在V20和之前的版本中新增內邊距,這個屬性為了防止內容和邊角的重疊
我們看一下今天要實現的效果圖:
![7508328-fa2d056a53e845b2](https://i.iter01.com/images/afded4f86bc53ab8dad7cf64d3d9a24d51720dfd9f7d3515d01be8eb7857c279.png)
有興趣的朋友可以嘗試使用ViewPager+CardView實現卡片畫廊的效果
其實CardView的使用相當於加了一個佈局使用,其CardView裡面內容的實現,還是在佈局中設計
銀行卡布局:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffff"
android:padding="16dp">
<android.support.v7.widget.CardView
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="180dp"
app:cardBackgroundColor="#099A8C"
app:cardCornerRadius="10dp"
app:cardElevation="10dp"
app:contentPadding="16dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:background="@drawable/icon_01" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical"
android:padding="8dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="中國農業銀行"
android:textColor="#ffffff"
android:textSize="18sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="儲蓄卡"
android:textColor="#ffffff"
android:textSize="16sp" />
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textColor="#ffffff"
android:gravity="center_vertical"
android:textSize="22sp"
android:text="**** **** **** 1234"/>
</LinearLayout>
<ImageView
android:layout_width="60dp"
android:layout_height="15dp"
android:background="@drawable/icon_02" />
</LinearLayout>
</android.support.v7.widget.CardView>
</RelativeLayout>
特別注意的是:使用CardView的屬性時,記得加上名稱空間的宣告
xmlns:app="http://schemas.android.com/apk/res-auto
第三種方式:最強按鈕通過Color來進行設定
自認為這是按鈕最好看的效果,還自帶按下效果,設定也非常簡單,秒殺一切陰影效果,我們先來看下他的效果
未按下效果
![7508328-b7767a3c5233d300.png](https://i.iter01.com/images/749cfd8b9723c4c13f177a269f119df3755107e54d5f5f4473a641339636ad26.png)
按下效果
![7508328-9ff4bcf8e0b80e8b.png](https://i.iter01.com/images/6de8b79382ccbb3e268ff7a8f18dbfca2091a381769ebad3190078677d5117bd.png)
其實這種效果非常簡單,就是定義了一個顏色。對就是一個顏色就可以達到這種效果
那這個顏色要怎麼定義才能達到這種效果呢
比如上圖的按鈕顏色是粉紅色,顏色程式碼 #f692bf,我們只需要在前面加上#ff,最後這樣#ff692bf 就可以達到這種效果
相關文章
- canvas設定陰影效果Canvas
- 假陰影,低開銷的陰影實現方式
- 給控制元件新增陰影效果SystemDropShadowChrome控制元件Chrome
- unity陰影(一)烘焙和Quality中Shadows的設定Unity
- Android Material Design 陰影實現AndroidMaterial Design
- flutter: 相鄰控制元件陰影被遮蓋Flutter控制元件
- Android開發中陰影效果的實現Android
- C# Winform 設定焦點控制元件的兩種方式和注意事項C#ORM控制元件
- CSS陰影效果三劍客CSS
- # Flutter控制元件的顯示和隱藏的三種方式Flutter控制元件
- Go定時器的三種實現方式Go定時器
- Android ImageView對齊方式設定AndroidView
- css圖片陰影、文字陰影CSS
- Android中圖片圓形設定三種方法介紹Android
- Android 檢視高度和陰影的那點事兒Android
- Android中js呼叫java本地方法的三種方式AndroidJSJava
- Android三種方式擷取任意介面螢幕Android
- 陰影進階,實現更加的立體的陰影效果!
- 【Avalonia】【跨平臺】關於控制元件陰影簡單用法控制元件
- boder 陰影
- CSS 陰影進階,實現更加的立體的陰影效果!CSS
- UIView設定背景圖片幾種方式UIView
- Shadow Map(陰影貼圖)跟Soft Shadows(軟陰影)
- android獲取控制元件的幾種方法Android控制元件
- CSS實現帶陰影的三角形CSS
- 小Tip:有三角的指示框陰影實現
- uni-app&H5&Android混合開發三 || uni-app呼叫Android原生方法的三種方式APPH5Android
- JavaScript的三種引入方式JavaScript
- ios 手機端網頁input高度設定和內建頂部陰影iOS網頁
- Ubuntu設定root登入有兩種方式Ubuntu
- win10怎麼設定預設瀏覽器 三種方式修改預設遊覽器Win10瀏覽器
- Android5.0以後,materialDesign風格的加陰影和裁剪效果Android
- 活在三星陰影下的韓國晶片巨頭晶片
- springAOP的三種實現方式Spring
- selenium中的三種等待方式
- WiFi攻擊的三種方式WiFi
- Selenium裡的三種等待方式
- flowable 部署流程的三種方式
- hibernate的三種查詢方式