Android零基礎入門第71節:CardView簡單實現卡片式佈局
還記得我們一共學過了多少UI控制元件了嗎?都掌握的怎麼樣啊。
安卓中一些常用控制元件學習得差不多了,今天再來學習一個新的控制元件CardView,在實際開發中也有非常高的地位。
一、CardView簡介
CardView是Android 5.0系統引入的控制元件,相當於FragmentLayout佈局控制元件然後新增圓角及陰影的效果。
CardView繼承自Framelayout,所以FrameLayout所有屬性CardView均可以直接拿來用,不過CardView還有自己獨有的屬性,常用屬性如下:
-
app:cardElevation:設定陰影的大小。
-
app:cardMaxElevation:設定陰影最大高度。
-
app:cardBackgroundColor:設定卡片的背景色。
-
app:cardCornerRadius:設定卡片的圓角大小。
-
app:contentPadding:設定內容的padding。
-
app:contentPaddingTop:設定內容的上padding。
-
app:contentPaddingLeft:設定內容的左padding。
-
app:contentPaddingRight:設定內容的右padding。
-
app:contentPaddingBottom:設定內容的底padding。
-
app:cardUseCompatPadding:是否使用CompatPadding。
-
app:cardPreventConrerOverlap:是否使用PreventCornerOverlap。
這裡有一點需要值得注意,之前學習到的控制元件屬性都是android:開頭的,而這裡所列的屬性是app:開頭的,如果繼續使用預設的會提示找不見對應屬性,需要我們定義一個app名稱空間,在佈局檔案中需要加入xmlns:app="http://schemas.android.com/apk/res-auto"語句,具體見後續案例,這裡不作過多介紹,後續再詳細學習。
二、CardView示例1
接下來通過幾個簡單的小示例程式來進一步學習CardView。
繼續使用WidgetSample工程的advancedviewsample模組,首先需要新增支援庫,具體操作步驟同之前分享的揭開RecyclerView廬山真面目,這裡不再重複分享。這次輸入的關鍵字是cardview,即可完成CardView依賴庫的新增。
在src/main/res/layout/目錄下建立cardview_layout.xml檔案,在其中填充如下程式碼片段:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp">
<TextView
android:layout_width="match_parent"
android:layout_height="70dp"
android:text="正常使用效果"
android:gravity="center_horizontal|center_vertical"
android:textSize="20sp"
android:padding="10dp"
android:layout_margin="10dp"/>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
app:cardBackgroundColor="#669900"
app:cardCornerRadius="10dp">
<TextView
android:layout_width="match_parent"
android:layout_height="70dp"
android:text="設定背景和標籤"
android:gravity="center_horizontal|center_vertical"
android:textSize="20sp"
android:padding="20dp"
android:layout_margin="10dp"/>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
app:cardBackgroundColor="#874528"
app:cardElevation="20dp"
app:cardCornerRadius="10dp">
<TextView
android:layout_width="match_parent"
android:layout_height="70dp"
android:text="設定陰影"
android:gravity="center_horizontal|center_vertical"
android:textSize="20sp"
android:padding="10dp"
android:layout_margin="10dp"/>
</android.support.v7.widget.CardView>
</LinearLayout>
然後新建CardViewActivity.java檔案,載入上面的佈局檔案,填充的程式碼如下:
public class CardViewActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.cardview_layout);
}
}
修改啟動的Activity,執行程式可以看到下圖所示效果。
三、CardView示例2
CardView被包裝為一種佈局,並且經常在ListView和RecyclerView的Item佈局中,作為一種容器使用。CardView應該被使用在顯示層次性的內容時;在顯示列表或網格時更應該被選擇,因為這些邊緣可以使得使用者更容易去區分這些內容。
接下來簡單定義一個CardView的item項,並在Java程式碼中修改CardView的屬性,關於結合ListView和RecyclerView的部分比較簡單,這裡不做過多介紹。
繼續再上一個案例的基礎上進行修改,修改後的cardview_layout.xml檔案程式碼如下:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/cardview"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_margin="15dp">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:scaleType="centerCrop"
android:src="@drawable/image_01"/>
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="10dp"
android:layout_marginRight="10dp"
android:clickable="true"
android:gravity="right|bottom"
android:text="CardView作為item使用"
android:textColor="@android:color/white"
android:textSize="24sp"/>
</android.support.v7.widget.CardView>
繼續修改CardViewActivity.java檔案,獲得CardView元件並動態修改其屬性,修改後的程式碼如下:
package com.jinyu.cqkxzsxy.android.advancedviewsample;
import android.graphics.Color;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.CardView;
/**
* @建立者 鑫鱻
* @描述 Android零基礎入門到精通系列教程,歡迎關注微信公眾號ShareExpert
*/
public class CardViewActivity extends AppCompatActivity {
private CardView mCardView = null;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.cardview_layout);
mCardView = (CardView) findViewById(R.id.cardview);
// 設定卡片圓角的半徑大小
mCardView.setRadius(20);
// 設定卡片背景的顏色
mCardView.setCardBackgroundColor(Color.RED);
// 設定陰影部分大小
mCardView.setCardElevation(10);
// 設定卡片距離陰影大小
mCardView.setContentPadding(10, 10, 10, 10);
}
}
重新執行程式,可以得到下圖所示效果。
至此,CardView的學習到此告一段落,是不是發現使用起來也非常簡單,更多用法建議自己去摸索。
今天就先到這裡,如果有問題歡迎留言一起探討,也歡迎加入Android零基礎入門技術討論微信群,共同成長!
此文章版權為微信公眾號分享達人秀(ShareExpert)——鑫鱻所有,若需轉載請聯絡作者授權,特此宣告!
往期總結分享:
Android零基礎入門第17節:文字框TextView
Android零基礎入門第18節:輸入框EditText
Android零基礎入門第19節:按鈕Button
Android零基礎入門第37節:初識ListView
Android零基礎入門第38節:初識Adapter
相關推薦
Android零基礎入門第71節:CardView簡單實現卡片式佈局
還記得我們一共學過了多少UI控制元件了嗎?都掌握的怎麼樣啊。 安卓中一些常用控制元件學習得差不多了,今天再來學習一個新的控制元件CardView,在實際開發中也有非常高的地位。 一、CardView簡介 CardView是Androi
Android零基礎入門第11節:簡單幾步帶你飛,運行Android Studio工程
tar imageview 現在 沒有 ref rip hello pac 需要 之前講過Eclipse環境下的Android虛擬設備的創建和使用,現在既然升級了Android Studio開發工具,那麽對應的Android虛擬設備也該一起升級了。 那麽本期我們就來一起學習
Android零基礎入門第15節:掌握Android Studio項目結構,揚帆起航
str ems undle int 兼容 總結 local cati 它的 經過前面的學習,Android Studio開發環境已準備OK,運行Android應用程序的原生模擬器和Genymotion模擬器都準備妥當。在之前簡單講過Eclipse中Android工程的項目結
Android零基礎入門第16節:Android用戶界面開發概述
目錄 protect 支持 利用 訪問 params 相同 用戶界面 圖形用戶界面 相信通過前面15期的學習,Android的開發環境已經基本掌握了,如果仍有問題,歡迎到Android零基礎入門技術討論微信群交流,從本期開始正式來一步一步踏入Android開發之路。 And
Android零基礎入門第18節:EditText的屬性和使用方法
-i layout rec 底層 篩選 .com xtra dap xmlns EditText與TextView非常相似,它甚至與TextView 共用了絕大部分XML屬性和方法。EditText與TextView的最大區別在於:EditText可以接受用戶輸入。 一、
Android零基礎入門第19節:Button使用詳解
用戶界面 ket 派生 觸發 eat c99 list 一個 blank Button(按鈕)是Android開發中使用非常頻繁的組件,主要是在UI界面上生成一個按鈕,該按鈕可以供用戶單擊,當用戶單擊按鈕時,按鈕會觸發一個onClick點擊事件。 一、Button
Android零基礎入門第22節:ImageView的屬性和方法大全
子類 parent ide eight odin 使用詳解 統架構 討論 架構 通過前面幾期的學習,TextView控件及其子控件基本學習完成,可以在Android屏幕上顯示一些文字或者按鈕,那麽從本期開始來學習如何在進行圖片展示,這就是涉及到另外一個非常重要的控件家族,那
Android零基礎入門第24節:自定義View簡單使用
子類 protect jin 討論 我們 @+ amp 進階 運行程序 當我們開發中遇到Android原生的組件無法滿足需求時,這時候就應該自定義View來滿足這些特殊的組件需求。 一、概述 很多初入Android開發的程序員,對於Android自定義View可能比較
Android零基礎入門第30節:兩分鐘掌握FrameLayout幀布局
控制 toggle b2b 遮擋 布局 edittext 文章 manage .com 原文:Android零基礎入門第30節:兩分鐘掌握FrameLayout幀布局前面學習了線性布局、相對布局、表格布局,那麽本期來學習第四種布局——FrameLayout幀布局。
Android零基礎入門第29節:善用TableLayout表格布局,事半功倍
ren 成長 xml文件 apk 定義 升級 checkbox 方式 繼續 原文:Android零基礎入門第29節:善用TableLayout表格布局,事半功倍前面學習了線性布局和相對布局,線性布局雖然方便,但如果遇到控件需要排列整齊的情況就很難達到要求,用相對布局又比較麻
Android零基礎入門第32節:新推出的GridLayout網格布局
class bfd 性能 tex db4 button share sample ide 原文:Android零基礎入門第32節:新推出的GridLayout網格布局 本期主要學習的是網格布局是Android 4.0新增的布局,和前面所學的TableLayout表格布局
Android零基礎入門第39節:ListActivity和自定義列表項
arraylist component save 高速 ram 如果 view設置 ren 屬性 相信通過前兩期的學習,以及會開發最簡單的一些列表界面了吧,那麽本期接著來學習更多方法技巧。 一、使用ListActivity 如果程序的窗口僅僅需要
Android零基礎入門第40節:自定義ArrayAdapter
出發點 ppc vsa abs 顯示 osi adc this launcher ListView用起來還是比較簡單的,也是Android應用程序中最重要的一個組件,但其他ListView可以隨你所願,能夠完成很多想要的精美列表,而這正是我們接下來要學習的內容。
Android零基礎入門第46節:下拉框Spinner
targe GridView 通過 寫代碼 top tel 前世今生 spa oncreate 上一期學習了GridView的使用,你已經掌握了嗎?本期一起來學習Spinner的使用。 一、認識Spinner Spinner其實就是一個列表選擇框
Android零基礎入門第47節:自動完成文本框AutoCompleteTextView
edit 監聽 private 項目 通過 幀布局 nco enc 屬性 上一期學習的Spinner的使用,掌握的怎麽樣?本期一起來學習AutoCompleteTextView的使用。 一、認識AutoCompleteTextView AutoC
Android零基礎入門第49節:AdapterViewFlipper圖片輪播
討論 表格 微信 列表 自動播放 clas padding spa absolute 上一期學習了ExpandableListView的使用,你已經掌握了嗎?本期開始學習AdapterViewFilpper的使用。 一、認識AdapterViewFilp
Android零基礎入門第51節:進度條ProgressBar
動態更新 監聽 bar 統架構 堆疊 rop sha bfd 自動完成文本 不知不覺這已經是第51期了,在前面50期我們學了Android開發中使用頻率非常高的一些UI組件,當然這些組件還不足夠完成所有APP的開發,還會經常用到一些諸如進度條、拖動條、搜索框、時間和日
Android零基礎入門第55節:ImageSwitcher和TextSwitcher使用
dad arr 縮放 設置 cfa gen 通過 share man 上一期我們了解了ViewAnimator組件和ViewSwitcher組件的使用,你都掌握了嗎?本期一起來學習ViewSwitcher的兩個子組件ImageSwitcher和TextSwitche
Android零基礎入門第57節:日期選擇器DatePicker和時間選擇器TimePicker
oncreate ted show imageview bce min date 教程 運行程序 在實際開發中,經常會遇見一些時間選擇器、日期選擇器、數字選擇器等需求,那麽從本期開始來學習Android中常用選擇器,今天學習的是DatePicker和TimePicke
Android零基礎入門第58節:數值選擇器NumberPicker
bundle 介紹 ets ebe db4 是不是 列表 com lin 上一期學習了日期選擇器DatePicker和時間選擇器TimePicker,是不是感覺非常簡單,本期繼續來學習數值選擇器NumberPicker 。 一、NumberPicker概述