[Xamarin] 使用 CardView 來製作Android Layout

2016-08-04

基於Material Design 中有一個有趣且好用的Layout 叫做 CardView ,這是網路上的展示畫面
card_travel

就是製作像中間像卡片的東西現在我們來製作像這樣的東西,以前我曾經製作過像這樣的畫面,非常麻煩,利用這不用處理框線等,就會比較簡單。
sh159

1. 先引用 Android Support Library v7 CardView
image
2.Layout 的部分在root element 的部分一定要加上 xmlns:cardview="http://schemas.android.com/apk/res-auto"

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:cardview="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

3.基本的cardview:

<android.support.v7.widget.CardView
    android:layout_width="fill_parent"
    android:layout_height="100dp"
    android:layout_margin="10dp"
    android:layout_gravity="center_horizontal">
  <TextView
      android:text="基本 CardView 測試"
      android:layout_marginTop="0dp"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:gravity="center"
      android:layout_centerVertical="true"
      android:layout_alignParentRight="true"
      android:layout_alignParentEnd="true" />
</android.support.v7.widget.CardView>

結果:
image

4.增加陰影 20dp 加上去後感覺該card 有浮起來的感覺

<android.support.v7.widget.CardView
   android:layout_width="fill_parent"
   android:layout_height="100dp"
   android:layout_margin="10dp"
   cardview:cardElevation="20dp"
   android:layout_gravity="center_horizontal">
  <TextView
      android:text="陰影20dp"
      android:layout_marginTop="0dp"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:gravity="center"
      android:layout_centerVertical="true"
      android:layout_alignParentRight="true"
      android:layout_alignParentEnd="true" />
</android.support.v7.widget.CardView>

結果:
image

5. 圓角 10dp

<android.support.v7.widget.CardView
  android:layout_width="fill_parent"
  android:layout_height="100dp"
  android:layout_margin="10dp"
 cardview:cardCornerRadius="10dp"
  android:layout_gravity="center_horizontal">
  <TextView
      android:text="圓角10dp"
      android:layout_marginTop="0dp"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:gravity="center"
      android:layout_centerVertical="true"
      android:layout_alignParentRight="true"
      android:layout_alignParentEnd="true" />
</android.support.v7.widget.CardView>

結果:
image

6. 複雜的Layout ,透過relative 組裝後

<android.support.v7.widget.CardView
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:layout_margin="10dp"
      cardview:contentPadding="10dp"
      android:layout_gravity="center_horizontal">
  <RelativeLayout
      android:orientation="vertical"
      android:layout_width="fill_parent"
      android:layout_height="fill_parent"
      android:minWidth="25px"
      android:minHeight="25px">
    <ImageView
        android:src="@drawable/auser"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:id="@+id/imgUser"
        android:paddingTop="5dp"
        android:layout_marginLeft="5dp" />
    <TextView
        android:text="Donma Hsu"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/imgUser"
        android:id="@+id/txtUserName"
        android:textColor="#FF8800"
        android:textSize="22dp"
        android:paddingLeft="5dp" />
    <TextView
        android:text="5分鐘前"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/txtDate"
        android:paddingTop="10dp"
        android:paddingRight="10dp"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true" />
    <TextView
        android:text="內文內文內文內文內文內文內文內文內文內文內文內文內文內文內文內文內文內文內文內文內文內文內文內文內文內文內文內文內文內文內文內文內文內文內文內文內文內文內文內文"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/txtUserName"
        android:layout_toRightOf="@id/imgUser"
        android:id="@+id/txtIntro"
        android:paddingRight="10dp"
        android:paddingLeft="5dp" />
    <TextView
        android:text="繼續閱讀"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/txtIntro"
        android:layout_toRightOf="@id/imgUser"
        android:id="@+id/txtReadMore"
        android:textColor="#0044BB"
        android:textSize="15dp"
        android:paddingLeft="5dp" />
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:scaleType="centerCrop"
        android:layout_below="@id/txtReadMore"
        android:layout_toRightOf="@id/imgUser"
        android:id="@+id/imgMain"
        android:paddingRight="10dp"
        android:paddingTop="5dp"
        android:src="@drawable/ss"
        android:paddingLeft="5dp" />
  </RelativeLayout>
</android.support.v7.widget.CardView>

就可以做到這樣的效果:
Screenshot_20160804-171528

不難而且很實用,注意如果執行起來會出現 Error inflating class android.support.v7.widget.CardView 可以clean 專案之後重新引入component 在執行,因為我在那邊也卡了一下,不知道原因。

更多的關於cardview 的設定可以參考
https://developer.android.com/training/material/lists-cards.html
https://developer.xamarin.com/guides/android/user_interface/cardview/


當麻許的超技八 2014 | Donma Hsu Design.