terrylee/TaiwanStar_general_size_s_Chengwai
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI: 優化商品卡片結構與樣式

Browse Source 
- 新增快速新增按鈕
- 卡片版面區分為上下區塊，統一由最外層控制邊距
- 調整商品圖片為 1:1，並帶有 padding 白框效果
- 貨道與庫存資訊移至左上角垂直排列，分別套用圓角背景色
- 修正金額為 0 時不顯示的問題
- 售罄遮罩覆蓋全卡片，文字改為白色「售完」
This commit is contained in:
TaiwanStar Developer 2026-06-12 17:27:12 +08:00
parent 0a19e965a8
commit a10a51ec10
4 changed files with 143 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
app/src/main/java/com/unibuy/smartdevice/ui/devs/vmc/RecyclerVmcBuyListAdpter.java
View File

@ -103,22 +103,18 @@ public class RecyclerVmcBuyListAdpter extends RecyclerView.Adapter<RecyclerVmcBu
boolean isLock = slot.isLock();
int price = machinePrice > 0 ? machinePrice : sellingPrice;
if (price > 0) {
holder.binding.textPrice.setVisibility(View.VISIBLE);
holder.binding.textPrice.setText("NT$ " + price);
} else {
holder.binding.textPrice.setVisibility(View.GONE);
}
holder.binding.textPrice.setVisibility(View.VISIBLE);
holder.binding.textPrice.setText("NT$ " + price);
// 綁定庫存數量顯示
holder.binding.textStock.setText("庫存: " + count);
holder.binding.textStock.setText("庫存" + count);
holder.binding.mask.setVisibility(View.GONE);
holder.binding.textMask.setText("");
if (count <= 0) {
holder.binding.mask.setVisibility(View.VISIBLE);
holder.binding.textMask.setText("補貨中");// 已經售完
holder.binding.textMask.setText("售完");
}
if (isLock) {

6
app/src/main/res/drawable/bg_rounded_light_gray.xml Normal file
View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="@color/light_gray" />
<corners android:radius="8dp" />
</shape>

6
app/src/main/res/drawable/bg_rounded_primary.xml Normal file
View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="@color/primary" />
<corners android:radius="8dp" />
</shape>

216
app/src/main/res/layout/recycler_vmc_buy_list.xml
View File

@ -10,111 +10,148 @@
app:cardCornerRadius="8dp"
app:cardElevation="2dp">
<androidx.constraintlayout.widget.ConstraintLayout
<!-- root：無 padding，讓 mask 可覆蓋完整卡片 -->
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!-- 商品圖片 1:1 -->
<ImageView
android:id="@+id/imageProductPicture"
<!-- 內容容器：統一控制上方與左右 padding -->
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:src="@drawable/default_product"
android:scaleType="centerCrop"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
<!-- 貨道資訊 (左上角) -->
<TextView
android:id="@+id/textSlot"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:paddingStart="8dp"
android:paddingEnd="8dp"
android:paddingTop="4dp"
android:paddingBottom="4dp"
android:background="@color/primary"
android:text="貨道: 01"
android:textColor="@color/onPrimary"
android:textSize="18sp"
android:textStyle="bold"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent" />
android:paddingTop="12dp"
android:paddingStart="12dp"
android:paddingEnd="12dp">
<!-- 庫存資訊 (右下角) -->
<TextView
android:id="@+id/textStock"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:paddingStart="8dp"
android:paddingEnd="8dp"
android:paddingTop="4dp"
android:paddingBottom="4dp"
android:background="@color/gray"
android:text="庫存: 0"
android:textColor="@color/black"
android:textSize="18sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="@+id/imageProductPicture"
app:layout_constraintEnd_toEndOf="@+id/imageProductPicture" />
<!-- 上半部：圖片容器 (1:1) -->
<FrameLayout
android:id="@+id/imageContainer"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent">
<!-- 商品名稱 -->
<TextView
android:id="@+id/textProductName"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:ellipsize="end"
android:singleLine="true"
android:text="@string/product_name"
android:textColor="@color/black"
android:textSize="24sp"
android:textStyle="bold"
app:layout_constraintTop_toBottomOf="@+id/imageProductPicture"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
<!-- 商品圖片 -->
<ImageView
android:id="@+id/imageProductPicture"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="@drawable/default_product"
android:scaleType="centerCrop" />
<!-- 商品價格 (左下角) -->
<TextView
android:id="@+id/textPrice"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginStart="16dp"
android:layout_marginBottom="16dp"
android:text="NT$ 000"
android:textColor="@color/primary"
android:textSize="24sp"
android:textStyle="bold"
app:layout_constraintTop_toBottomOf="@+id/textProductName"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toBottomOf="parent" />
<!-- 貨道 & 庫存標籤 (左上角，垂直排列) -->
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|start"
android:layout_margin="8dp"
android:orientation="vertical">
<!-- 售罄覆蓋層 -->
<!-- 貨道資訊 -->
<TextView
android:id="@+id/textSlot"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingStart="8dp"
android:paddingEnd="8dp"
android:paddingTop="4dp"
android:paddingBottom="4dp"
android:background="@drawable/bg_rounded_primary"
android:text="貨道01"
android:textColor="@color/onPrimary"
android:textSize="18sp"
android:textStyle="bold" />
<!-- 庫存資訊 -->
<TextView
android:id="@+id/textStock"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:paddingStart="8dp"
android:paddingEnd="8dp"
android:paddingTop="4dp"
android:paddingBottom="4dp"
android:background="@drawable/bg_rounded_light_gray"
android:text="庫存0"
android:textColor="@color/black"
android:textSize="18sp"
android:textStyle="bold" />
</LinearLayout>
</FrameLayout>
<!-- 下半部：商品名稱 + 金額列 -->
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingBottom="12dp"
app:layout_constraintTop_toBottomOf="@+id/imageContainer"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent">
<!-- 商品名稱 -->
<TextView
android:id="@+id/textProductName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:ellipsize="end"
android:singleLine="true"
android:text="@string/product_name"
android:textColor="@color/black"
android:textSize="24sp"
android:textStyle="bold" />
<!-- 金額 + 快速新增按鈕 -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:gravity="center_vertical"
android:orientation="horizontal">
<!-- 商品價格 -->
<TextView
android:id="@+id/textPrice"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="NT$ 000"
android:textColor="@color/primary"
android:textSize="24sp"
android:textStyle="bold" />
<!-- 快速新增按鈕 -->
<com.google.android.material.button.MaterialButton
android:id="@+id/buttonQuickAdd"
style="@style/Widget.Material3.Button.IconButton.Filled"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="4dp"
app:icon="@drawable/add_24"
app:backgroundTint="@color/primary"
app:iconTint="@color/onPrimary" />
</LinearLayout>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
<!-- 售罄覆蓋層（覆蓋整張卡片含 padding 留白） -->
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/mask"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/transparent_black"
android:visibility="gone"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent">
android:visibility="gone">
<TextView
android:id="@+id/textMask"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/product_sold_out"
android:text="售完"
android:textColor="@color/white"
android:textSize="30sp"
android:textStyle="bold"
@ -124,5 +161,6 @@
app:layout_constraintEnd_toEndOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</FrameLayout>
</androidx.cardview.widget.CardView>