[Xamarin] 使用 CardView 來製作Android Layout

2016-08-04

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

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

<?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>

結果:

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>

結果:

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>

結果:

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>

就可以做到這樣的效果:

不難而且很實用，注意如果執行起來會出現 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/

當麻許的超技八