優化購物車品項排版與按鈕樣式
1. 新增按鈕背景與 Icon 向量資源 - 新增 bg_quantity_outline_button.xml：為加減按鈕設計的背景，底色為頁面背景，帶有 1.5dp 黑色圓角外框。 - 新增 bg_waste_outline_button.xml：為移除按鈕設計的背景，底色為頁面背景，帶有 1.5dp 警告色圓角外框。 - 新增 add_24.xml、remove_24.xml、close_24.xml：將原本填充式圖示改寫為純線段，設定黑色線條且加粗 (strokeWidth="3")。 - 新增 close_warning_24.xml：移除按鈕專用的叉叉圖示，線條同樣加粗，顏色改為警告色。 2. 優化購物車清單排版 (recycler_cart_operation.xml) - 圖片縮小：將商品圖片寬高從 120dp 縮減為 80dp。 - 文字調整：將商品名稱字級放大至 24sp，並將字重調整為 normal。 - 將單一品項金額設為隱藏，並將小計金額從最右側移至商品名稱下方。 - 加減按鈕：尺寸調整為 44dp 並加上 10dp padding，套用新的黑色外框背景與加粗 Icon。 - 移除按鈕：尺寸同樣調整為 44dp，改用 Warning 樣式外框與 Icon，並加大左側邊距 (marginStart=32dp) 以拉開間隔。 3. 其他連帶變更 - 包含 fragment_shopping_cart.xml 與多語系 strings.xml 的相關微小變動。
This commit is contained in:
TaiwanStar Developer
parent
ee732e03a3
commit
5af9a94a0c
11
app/src/main/res/drawable/add_24.xml
Normal file
11
app/src/main/res/drawable/add_24.xml
Normal file
@ -0,0 +1,11 @@
|
||||
<vector xmlns:android="http://schemas.android.com/apk/res/android"
|
||||
android:width="24dp"
|
||||
android:height="24dp"
|
||||
android:viewportWidth="24"
|
||||
android:viewportHeight="24">
|
||||
<path
|
||||
android:strokeColor="#FF000000"
|
||||
android:strokeWidth="3"
|
||||
android:strokeLineCap="round"
|
||||
android:pathData="M12,5v14M5,12h14"/>
|
||||
</vector>
|
||||
12
app/src/main/res/drawable/bg_quantity_outline_button.xml
Normal file
12
app/src/main/res/drawable/bg_quantity_outline_button.xml
Normal file
@ -0,0 +1,12 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<shape xmlns:android="http://schemas.android.com/apk/res/android"
|
||||
android:shape="rectangle">
|
||||
<!-- 頁面背景色 -->
|
||||
<solid android:color="@color/background" />
|
||||
<!-- 黑色外框線 -->
|
||||
<stroke
|
||||
android:width="1.5dp"
|
||||
android:color="@color/black" />
|
||||
<!-- 圓角 -->
|
||||
<corners android:radius="8dp" />
|
||||
</shape>
|
||||
12
app/src/main/res/drawable/bg_waste_outline_button.xml
Normal file
12
app/src/main/res/drawable/bg_waste_outline_button.xml
Normal file
@ -0,0 +1,12 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<shape xmlns:android="http://schemas.android.com/apk/res/android"
|
||||
android:shape="rectangle">
|
||||
<!-- 頁面背景色 -->
|
||||
<solid android:color="@color/background" />
|
||||
<!-- 警告色外框線 -->
|
||||
<stroke
|
||||
android:width="1.5dp"
|
||||
android:color="@color/warning" />
|
||||
<!-- 圓角 -->
|
||||
<corners android:radius="8dp" />
|
||||
</shape>
|
||||
11
app/src/main/res/drawable/close_24.xml
Normal file
11
app/src/main/res/drawable/close_24.xml
Normal file
@ -0,0 +1,11 @@
|
||||
<vector xmlns:android="http://schemas.android.com/apk/res/android"
|
||||
android:width="24dp"
|
||||
android:height="24dp"
|
||||
android:viewportWidth="24"
|
||||
android:viewportHeight="24">
|
||||
<path
|
||||
android:strokeColor="#FF000000"
|
||||
android:strokeWidth="3"
|
||||
android:strokeLineCap="round"
|
||||
android:pathData="M19,5L5,19M5,5l14,14"/>
|
||||
</vector>
|
||||
11
app/src/main/res/drawable/close_warning_24.xml
Normal file
11
app/src/main/res/drawable/close_warning_24.xml
Normal file
@ -0,0 +1,11 @@
|
||||
<vector xmlns:android="http://schemas.android.com/apk/res/android"
|
||||
android:width="24dp"
|
||||
android:height="24dp"
|
||||
android:viewportWidth="24"
|
||||
android:viewportHeight="24">
|
||||
<path
|
||||
android:strokeColor="@color/warning"
|
||||
android:strokeWidth="3"
|
||||
android:strokeLineCap="round"
|
||||
android:pathData="M19,5L5,19M5,5l14,14"/>
|
||||
</vector>
|
||||
11
app/src/main/res/drawable/remove_24.xml
Normal file
11
app/src/main/res/drawable/remove_24.xml
Normal file
@ -0,0 +1,11 @@
|
||||
<vector xmlns:android="http://schemas.android.com/apk/res/android"
|
||||
android:width="24dp"
|
||||
android:height="24dp"
|
||||
android:viewportWidth="24"
|
||||
android:viewportHeight="24">
|
||||
<path
|
||||
android:strokeColor="#FF000000"
|
||||
android:strokeWidth="3"
|
||||
android:strokeLineCap="round"
|
||||
android:pathData="M5,12h14"/>
|
||||
</vector>
|
||||
@ -7,12 +7,23 @@
|
||||
android:background="@color/white"
|
||||
android:orientation="vertical">
|
||||
|
||||
<!-- 購物車上方商品數量 -->
|
||||
<TextView
|
||||
android:id="@+id/totalItemsTextView"
|
||||
android:layout_width="match_parent"
|
||||
android:layout_height="wrap_content"
|
||||
android:paddingHorizontal="24dp"
|
||||
android:paddingVertical="16dp"
|
||||
android:text="@string/total_items_format"
|
||||
android:textColor="@color/black"
|
||||
android:textSize="23sp"
|
||||
android:textStyle="bold" />
|
||||
|
||||
<!-- 购物车商品列表 -->
|
||||
<androidx.recyclerview.widget.RecyclerView
|
||||
android:id="@+id/shoppingCartRecyclerView"
|
||||
android:layout_width="match_parent"
|
||||
android:layout_height="0dp"
|
||||
android:layout_marginHorizontal="48dp"
|
||||
android:layout_weight="1"
|
||||
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager" />
|
||||
|
||||
@ -30,41 +41,27 @@
|
||||
android:id="@+id/summaryContainer"
|
||||
android:layout_width="match_parent"
|
||||
android:layout_height="120dp"
|
||||
android:gravity="center|end"
|
||||
android:orientation="horizontal"
|
||||
android:paddingHorizontal="40dp">
|
||||
android:paddingHorizontal="100dp">
|
||||
|
||||
<LinearLayout
|
||||
android:layout_width="0dp"
|
||||
android:layout_height="match_parent"
|
||||
android:layout_weight="1"
|
||||
android:orientation="horizontal"
|
||||
android:paddingHorizontal="60dp"
|
||||
android:paddingVertical="12dp">
|
||||
<TextView
|
||||
android:layout_width="wrap_content"
|
||||
android:layout_height="wrap_content"
|
||||
android:text="小記"
|
||||
android:textColor="@color/black"
|
||||
android:textSize="26sp"
|
||||
android:textStyle="bold" />
|
||||
|
||||
<TextView
|
||||
android:id="@+id/totalItemsTextView"
|
||||
android:layout_width="0dp"
|
||||
android:layout_height="match_parent"
|
||||
android:layout_marginEnd="40dp"
|
||||
android:layout_weight="1"
|
||||
android:gravity="center|end"
|
||||
android:text="@string/total_items_format"
|
||||
android:textColor="#767676"
|
||||
android:textSize="46sp"
|
||||
android:textStyle="bold" />
|
||||
|
||||
|
||||
<TextView
|
||||
android:id="@+id/totalAmountTextView"
|
||||
android:layout_width="0dp"
|
||||
android:layout_height="match_parent"
|
||||
android:layout_weight="1"
|
||||
android:gravity="center|end"
|
||||
android:text="@string/total_amount_format"
|
||||
android:textColor="@color/red"
|
||||
android:textSize="52sp"
|
||||
android:textStyle="bold" />
|
||||
</LinearLayout>
|
||||
<TextView
|
||||
android:id="@+id/totalAmountTextView"
|
||||
android:layout_width="wrap_content"
|
||||
android:layout_height="wrap_content"
|
||||
android:layout_marginStart="8dp"
|
||||
android:text="@string/total_amount_format"
|
||||
android:textColor="@color/primary"
|
||||
android:textSize="52sp"
|
||||
android:textStyle="bold" />
|
||||
</LinearLayout>
|
||||
|
||||
<LinearLayout
|
||||
|
||||
@ -17,11 +17,11 @@
|
||||
<!-- 1. 圖片 -->
|
||||
<ImageView
|
||||
android:id="@+id/image_product"
|
||||
android:layout_width="120dp"
|
||||
android:layout_height="120dp"
|
||||
android:layout_width="80dp"
|
||||
android:layout_height="80dp"
|
||||
android:scaleType="centerInside" />
|
||||
|
||||
<!-- 2. 標題與單價 -->
|
||||
<!-- 2. 標題與單價（小記） -->
|
||||
<LinearLayout
|
||||
android:id="@+id/layout_product"
|
||||
android:layout_width="0dp"
|
||||
@ -37,15 +37,29 @@
|
||||
android:ellipsize="end"
|
||||
android:maxLines="2"
|
||||
android:text="商品"
|
||||
style="@style/TextAppearance.App.QuickCart.Medium" />
|
||||
style="@style/TextAppearance.App.QuickCart.Medium"
|
||||
android:textSize="24sp"
|
||||
android:textStyle="normal" />
|
||||
|
||||
<!-- 單一品項金額，為免 Adapter 找不到 View 而出錯，予以保留但隱藏 -->
|
||||
<TextView
|
||||
android:id="@+id/textPrice"
|
||||
android:layout_width="wrap_content"
|
||||
android:layout_height="wrap_content"
|
||||
android:layout_marginTop="8dp"
|
||||
android:visibility="gone"
|
||||
android:text="$ 0"
|
||||
style="@style/TextAppearance.App.QuickCart.Small"
|
||||
style="@style/TextAppearance.App.QuickCart.Small" />
|
||||
|
||||
<!-- 小記金額（移至此處） -->
|
||||
<TextView
|
||||
android:id="@+id/totalPriceTextView"
|
||||
android:layout_width="wrap_content"
|
||||
android:layout_height="wrap_content"
|
||||
android:layout_marginTop="8dp"
|
||||
android:ellipsize="end"
|
||||
android:maxLines="1"
|
||||
android:text="$ 0.0000"
|
||||
style="@style/TextAppearance.App.QuickCart.Medium"
|
||||
android:textColor="@color/primary" />
|
||||
|
||||
</LinearLayout>
|
||||
@ -59,9 +73,11 @@
|
||||
|
||||
<ImageView
|
||||
android:id="@+id/buttonMinus"
|
||||
android:layout_width="56dp"
|
||||
android:layout_height="56dp"
|
||||
android:src="@drawable/ic_minus" />
|
||||
android:layout_width="44dp"
|
||||
android:layout_height="44dp"
|
||||
android:padding="10dp"
|
||||
android:background="@drawable/bg_quantity_outline_button"
|
||||
android:src="@drawable/remove_24" />
|
||||
|
||||
<TextView
|
||||
android:id="@+id/textQuantity"
|
||||
@ -70,33 +86,26 @@
|
||||
android:gravity="center"
|
||||
android:text="1"
|
||||
style="@style/TextAppearance.App.QuickCart.Medium"
|
||||
android:textColor="@color/primary" />
|
||||
android:textColor="@color/black" />
|
||||
|
||||
<ImageView
|
||||
android:id="@+id/buttonPlus"
|
||||
android:layout_width="56dp"
|
||||
android:layout_height="56dp"
|
||||
android:src="@drawable/ic_plus" />
|
||||
android:layout_width="44dp"
|
||||
android:layout_height="44dp"
|
||||
android:padding="10dp"
|
||||
android:background="@drawable/bg_quantity_outline_button"
|
||||
android:src="@drawable/add_24" />
|
||||
</LinearLayout>
|
||||
|
||||
<!-- 4. 刪除鈕（現有 Adapter / ShoppingCartFragment 沿用） -->
|
||||
<ImageView
|
||||
android:id="@+id/buttonWaste"
|
||||
android:layout_width="40dp"
|
||||
android:layout_height="40dp"
|
||||
android:layout_marginStart="12dp"
|
||||
android:src="@drawable/ic_waste" />
|
||||
|
||||
<!-- 5. 小計（現有 Adapter 寫入 totalPriceTextView） -->
|
||||
<TextView
|
||||
android:id="@+id/totalPriceTextView"
|
||||
android:layout_width="180dp"
|
||||
android:layout_height="wrap_content"
|
||||
android:ellipsize="end"
|
||||
android:gravity="end"
|
||||
android:maxLines="1"
|
||||
android:text="$ 0.0000"
|
||||
style="@style/TextAppearance.App.QuickCart.Medium" />
|
||||
android:layout_width="44dp"
|
||||
android:layout_height="44dp"
|
||||
android:layout_marginStart="32dp"
|
||||
android:padding="10dp"
|
||||
android:background="@drawable/bg_waste_outline_button"
|
||||
android:src="@drawable/close_warning_24" />
|
||||
|
||||
</LinearLayout>
|
||||
|
||||
|
||||
@ -408,8 +408,8 @@
|
||||
<string name="add_more_items">Add More Items</string>
|
||||
<string name="go_to_pay">Proceed to Checkout</string>
|
||||
<string name="cancel_button_format">Cancel (%d sec)</string>
|
||||
<string name="total_items_format">Items: (%d)</string>
|
||||
<string name="total_amount_format">NT$ %d</string>
|
||||
<string name="total_items_format">Cart Items (%d)</string>
|
||||
<string name="total_amount_format">NT$%d</string>
|
||||
<string name="cart_out_of_stock">Out of Stock</string>
|
||||
<string name="cart_cannot_decrease">Cannot Decrease Further</string>
|
||||
<string name="cart_max_items">Up to 8 items per cart</string>
|
||||
|
||||
@ -410,8 +410,8 @@
|
||||
<string name="add_more_items">商品を追加</string>
|
||||
<string name="go_to_pay">お会計へ進む</string>
|
||||
<string name="cancel_button_format">キャンセル（%d秒）</string>
|
||||
<string name="total_items_format">商品数：(%d)</string>
|
||||
<string name="total_amount_format">NT$ %d</string>
|
||||
<string name="total_items_format">商品数（%d個）</string>
|
||||
<string name="total_amount_format">NT$%d</string>
|
||||
<string name="cart_out_of_stock">在庫切れ</string>
|
||||
<string name="cart_cannot_decrease">これ以上減らせません</string>
|
||||
<string name="cart_max_items">カートは最大8点まで購入できます</string>
|
||||
|
||||
@ -327,8 +327,8 @@
|
||||
<string name="add_more_items">加購商品</string>
|
||||
<string name="go_to_pay">前往結帳</string>
|
||||
<string name="cancel_button_format">取消（%d秒）</string>
|
||||
<string name="total_items_format">商品數量：(%d)</string>
|
||||
<string name="total_amount_format">NT$ %d</string>
|
||||
<string name="total_items_format">購物車品項（%d件）</string>
|
||||
<string name="total_amount_format">NT$%d</string>
|
||||
<string name="cart_out_of_stock">超出庫存</string>
|
||||
<string name="cart_cannot_decrease">不能減少了</string>
|
||||
<string name="cart_max_items">購物車最多可購買 8 件商品</string>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user