1. 程式人生 > >Android--新增陰影效果--CardView的使用

Android--新增陰影效果--CardView的使用

Android5.0中向我們介紹了一個全新的控制元件–CardView,從本質上看,可以將CardView看做是FrameLayout在自身之上添加了圓角和陰影效果。請注意:CardView被包裝為一種佈局,並且經常在ListView和RecyclerView的Item佈局中,作為一種容器使用。


CardView應該被使用在顯示層次性的內容時;在顯示列表或網格時更應該被選擇,因為這些邊緣可以使得使用者更容易去區分這些內容。

使用CardView

首先,假設你的佈局如同下面的形式:

<FrameLayout  xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content">
<!-- Main Content View --> <RelativeLayout> ... </RelativeLayout> </FrameLayout>

為了使用上面的佈局方式來建立一個卡片,首先你需要匯入支援的依賴庫(android-support-v7-cardview的jar包)在你的build.gradle檔案中。

dependencies { ... compile 'com.android.support:cardview-v7:21.0.2' }

現在將FrameLayout替換為CardView,

<android.support.v7.widget.CardView  xmlns:card_view="http://schemas.android.com/apk/res-auto" xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height
="wrap_content">
<!-- Main Content View --> <RelativeLayout> ... </RelativeLayout> </android.support.v7.widget.CardView>

就是這樣!使用依賴庫能夠保證你的程式穩定的相容之前的版本;儘管在AndroidL和之前的Android版本中對其處理方式有所不同。

定製CardView

CardView提供了一個預設的elevation(意為CardView的Z軸陰影)和圓角角度,所以每一個卡片都能夠在不同的裝置上保持相同的外觀。然而,你也可以根據自己的需求去定製這些值。

<android.support.v7.widget.CardView  xmlns:card_view="http://schemas.android.com/apk/res-auto" xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" card_view:cardCornerRadius="8dp" card_view:cardElevation="8dp"> <!-- Main Content View --> <RelativeLayout> ... </RelativeLayout> </android.support.v7.widget.CardView>

注意:cardElevation屬性被用來決定陰影的大小以及柔和度,以至於可以逼真的模擬出對於深度效果的描述。

新增波紋點選效果

預設情況,CardView是不可點選的,並且沒有任何的觸控反饋效果。觸控反饋動畫在使用者點選CardView時可以給使用者以視覺上的反饋。為了實現這種行為,你必須提供一下屬性:

<android.support.v7.widget.CardView ... android:clickable="true" android:foreground="?android:attr/selectableItemBackground"> ... </android.support.v7.widget.CardView>

使用android:foreground=”?android:attr/selectableItemBackground”可以使CardView點選產生波紋的效果,有觸控點向外擴散。

對更早的版本的支援

在AndroidL之前的裝置上,CardView為了支援圓角的效果加上了padding,圓角剪裁操作可以算是很昂貴的操作。相似的,對陰影效果來說,在AndroidL之前,也會提供padding去繪製陰影面積,這些內容的padding是和elevation屬性相關的,按照文件:

padding值為:
左右兩邊的值為:maxCardElevation + (1 - cos45) * cornerRadius
上下兩邊的值為:maxCardElevation * 1.5 + (1 - cos45) * cornerRadius

因此,如果你需要給自己的內容加上padding的話,需要使用新的屬性:card_view:contentPadding
相似的,如果改變CardView的背景,也需要使用新的屬性:card_view:cardBackgroundColor

相關推薦

Android--新增陰影效果--CardView的使用

Android5.0中向我們介紹了一個全新的控制元件–CardView,從本質上看,可以將CardView看做是FrameLayout在自身之上添加了圓角和陰影效果。請注意:CardView被包裝為一種佈局,並且經常在ListView和RecyclerView的Item佈局

Android圖片新增陰影效果的兩種方式

給圖片新增陰影效果,這是很常見的需求。第一種方法是自定義drawable,使用layer-list定義兩個圖片,程式碼如下: show_view.xml: <?xml version="1.0" encoding="utf-8"?> <

[Xcode10 實際操作]二、檢視與手勢-(6)給影象檢視新增陰影效果

本文將演示給影象檢視新增陰影效果 1 import UIKit 2 3 class ViewController: UIViewController { 4 5 override func viewDidLoad() { 6 super.viewDid

android新增陰影

android底部增加背景 <?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <!--第一層

如何給文字新增陰影效果

package com.loaderman.customviewdemo; import android.app.Activity; import android.graphics.Color; import android.os.Bundle; import android.widget.

android元件陰影效果

最近開發遇到設計圖是帶陰影效果的。但覺很蒙圈,那不是MD風格的嗎??幾番思索原來使用.9圖就可以實現。 效果如下 但是在設定完背景後,佈局內部元件位置有點錯亂,完全不理解,搜到資料解釋是當你把背景設定為別的內容的時候.9圖片裡面的padding依然有效導

Swift 給檢視新增邊框,給影象檢視新增圓角效果,給影象檢視新增陰影效果

// MARK:給檢視新增邊框,給影象檢視新增圓角效果,給影象檢視新增陰影效果     private func addLayer(){         let img = UIImage(named: "image")         let imgView =

一種Android 按鈕陰影效果(基於selector實現)

先上效果圖                        圖一 正常效果                   圖二點選效果直接上程式碼:tv_bg_selector.xml<?xml version="1.0" encoding="utf-8"?> <sel

Android 去除Button預設陰影效果新增自定義陰影

1、首先先說一下預設的陰影效果 // Java setStateListAnimator(null); // xml android:stateListAnimator="@null" 2、自定義陰影實現的方式有很多種 a、將Button分層,將兩層的背景區分開就OK,但

android中圖型的陰影效果(shadow-effect-with-custom-shapes)

sim 狀態 odi bottom msu custom top ado cto 思路:在自己定義shape中添加一層或多層,並錯開。就可以顯示陰影效果。為添加立體感,button按下的時候,僅僅設置一層。我們能夠通過top, bottom, right 和 left 四

Android中實現陰影效果

sta 技術 wid 語言 mat floating 大表 ado sch 在Android L推出後,Google提出了全新的設計語言:材質設計。其中很重要的一點就是陰影效果的使用,你可以為每一個View設置一個elevation值,相當於除了x、y之外的z值,z值決定

Android 按鍵按下實現陰影效果

nal turn view font .cn ges activity rda als final Button btn_gallery=(Button)findViewById(R.id.btn_gallery);btn_gallery.setOnClickListene

Android項目實戰(三十六):給背景加上陰影效果

灰色 top set 設置 star 部分 ble utf 產品 原文:Android項目實戰(三十六):給背景加上陰影效果 圓角背景大家應該經常用: 一個drawable資源文件 裏面控制corner圓角 和solid填充色 <shape xmlns

Android 卡片邊框模糊陰影效果實現

1. 使用<shape>標籤實現 <?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android">

Android 魔術字型 (背景陰影,外陰影效果

先隨便貼兩張效果圖                                       &n

iOS之給圖片新增圓角效果陰影效果(Swift4.2)

給圖片新增圓角效果  override func viewDidLoad() { super.viewDidLoad() //給圖片新增圓角效果

Android 魔術字型按鈕(高亮,陰影效果

    效果如下,封裝記錄原始碼:        double_arrow.png    圖示資源   介面: <LinearLayout

Android 給文字新增陰影

<TextView android:id="@+id/tv_title_event" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layou

Android 5.0以上版本去掉Button自帶陰影效果的方法

關鍵程式碼: style=”?android:attr/borderlessButtonStyle” 具體配置: <Button android:layout_width="wra

解決Android 5.0以上版本Button自帶陰影效果的方法

今天跟UI對介面,發現一個按鈕使用系統自帶的button會自動有一個陰影。然而在4.x上卻沒有這個問題。直覺就是因為MD導致的Android版本差異。 果斷Google,在stackoverflow上