這篇要透過CardView來製作一個簡易的清單
首先要在Gradle Scripts/build gradle(.app)裡增加CardView的功能
implementation 'androidx.cardview:cardview:1.0.0'
因為要使用的CardView有多個,所以外層要用ScrollView來幫助滾動才可以向下滑
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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="20dp"
android:background="#ffff"
android:orientation="vertical"
tools:context=".MainActivity" >
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="@+id/textView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="法式小點心"
android:textColor="#000"
android:textSize="30dp"
android:textStyle="bold" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<androidx.cardview.widget.CardView
//這裡可以設定CardView的外觀
android:layout_width="match_parent"
android:layout_height="120dp"
android:layout_marginTop="20dp"
app:cardCornerRadius="15dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFA042"
android:padding="10dp">
<TextView
android:id="@+id/t1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
android:text="可麗露"
android:textColor="#ffff"
android:textSize="30dp"
android:textStyle="bold" />
<TextView
android:id="@+id/t2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@id/t1"
android:layout_marginLeft="10dp"
android:layout_marginTop="3dp"
android:text="是一種小型的法式甜點,表層則是硬脆又厚實的褐色焦糖外殼,內部是半融化狀的蛋糕糊,散發著酒香和香草味。"
android:textColor="#ffff" />
</RelativeLayout>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="120dp"
android:layout_marginTop="20dp"
app:cardCornerRadius="15dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FF9797"
android:padding="10dp">
<TextView
android:id="@+id/t3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
android:text="馬卡龍"
android:textColor="#ffff"
android:textSize="30dp"
android:textStyle="bold" />
<TextView
android:id="@+id/t4"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@id/t3"
android:layout_marginLeft="10dp"
android:layout_marginTop="3dp"
android:text="是一種用色彩繽紛絢麗的法國甜品,外殼堅硬但易碎,內陷黏稠扎實"
android:textColor="#ffff" />
</RelativeLayout>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="120dp"
android:layout_marginTop="20dp"
app:cardCornerRadius="15dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#02F78E"
android:padding="10dp">
<TextView
android:id="@+id/t5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
android:text="瑪德蓮"
android:textColor="#ffff"
android:textSize="30dp"
android:textStyle="bold" />
<TextView
android:id="@+id/t6"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@id/t5"
android:layout_marginLeft="10dp"
android:layout_marginTop="3dp"
android:text="是一種傳統的貝殼形狀的小蛋糕,來自於法國東北部洛林大區的兩個市鎮科梅爾西和利韋爾丹。"
android:textColor="#ffff" />
</RelativeLayout>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="120dp"
android:layout_marginTop="20dp"
app:cardCornerRadius="15dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#46A3FF"
android:padding="10dp">
<TextView
android:id="@+id/t7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
android:text="舒芙蕾"
android:textColor="#ffff"
android:textSize="30dp"
android:textStyle="bold" />
<TextView
android:id="@+id/t8"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@id/t7"
android:layout_marginLeft="10dp"
android:layout_marginTop="3dp"
android:text="是一種源自法國的甜品,經烘焙後質感輕而蓬鬆"
android:textColor="#ffff" />
</RelativeLayout>
</androidx.cardview.widget.CardView>
</LinearLayout>
</LinearLayout>
</ScrollView>
</LinearLayout>
這樣就完成簡單的外觀設計了