1. 程式人生 > >Android零基礎入門第71節:CardView簡單實現卡片式佈局

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基礎門第71CardView簡單實現片式佈局

   還記得我們一共學過了多少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基礎門第16Android用戶界面開發概述

目錄 protect 支持 利用 訪問 params 相同 用戶界面 圖形用戶界面 相信通過前面15期的學習,Android的開發環境已經基本掌握了,如果仍有問題,歡迎到Android零基礎入門技術討論微信群交流,從本期開始正式來一步一步踏入Android開發之路。 And

Android基礎門第18EditText的屬性和使用方法

-i layout rec 底層 篩選 .com xtra dap xmlns EditText與TextView非常相似,它甚至與TextView 共用了絕大部分XML屬性和方法。EditText與TextView的最大區別在於:EditText可以接受用戶輸入。 一、

Android基礎門第19Button使用詳解

用戶界面 ket 派生 觸發 eat c99 list 一個 blank Button(按鈕)是Android開發中使用非常頻繁的組件,主要是在UI界面上生成一個按鈕,該按鈕可以供用戶單擊,當用戶單擊按鈕時,按鈕會觸發一個onClick點擊事件。 一、Button

Android基礎門第22ImageView的屬性和方法大全

子類 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基礎門第39ListActivity和自定義列表項

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基礎門第49AdapterViewFlipper圖片輪播

討論 表格 微信 列表 自動播放 clas padding spa absolute 上一期學習了ExpandableListView的使用,你已經掌握了嗎?本期開始學習AdapterViewFilpper的使用。 一、認識AdapterViewFilp

Android基礎門第51進度條ProgressBar

動態更新 監聽 bar 統架構 堆疊 rop sha bfd 自動完成文本 不知不覺這已經是第51期了,在前面50期我們學了Android開發中使用頻率非常高的一些UI組件,當然這些組件還不足夠完成所有APP的開發,還會經常用到一些諸如進度條、拖動條、搜索框、時間和日

Android基礎門第55ImageSwitcher和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概述