Android开发中常见的优惠券样式实现和需要注意的细节

Posted 2022-09-16 yechaoa

效果图

主要是中间的两个半圆和虚线的实现，其他都比较简单。但是其中也会涉及到一些细节性的东西，后面讲。

item布局

整体分为三部分：左边、中间、右边，即以虚线为分割。

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/cardView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginBottom="@dimen/dp_6"
    android:layout_marginLeft="@dimen/dp_10"
    android:layout_marginRight="@dimen/dp_10"
    android:layout_marginTop="@dimen/dp_6"
    android:foreground="?android:attr/selectableItemBackground"
    app:cardBackgroundColor="@color/white"
    app:cardCornerRadius="@dimen/dp_10"
    app:cardElevation="@dimen/dp_0"
    app:contentPadding="@dimen/dp_0">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:baselineAligned="false"
        android:orientation="horizontal">

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="6"
            android:orientation="vertical"
            android:padding="@dimen/dp_10">

            <TextView
                android:id="@+id/tv_coupon_name"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:ellipsize="end"
                android:maxLines="1"
                android:text="@string/text"
                android:textColor="@color/red"
                android:textSize="@dimen/sp_20"
                android:textStyle="normal"/>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="@dimen/dp_10"
                android:orientation="horizontal">

                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:orientation="vertical">

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="领取人数/次数"
                        android:textColor="@color/textGray"
                        android:textSize="@dimen/sp_12"/>

                    <TextView
                        android:id="@+id/tv_coupon_customer_and_all"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="@dimen/dp_10"
                        android:text="@string/text"
                        android:textColor="@color/black"
                        android:textSize="@dimen/sp_12"/>

                </LinearLayout>

                <View
                    android:layout_width="1dp"
                    android:layout_height="match_parent"
                    android:layout_marginLeft="@dimen/dp_20"
                    android:layout_marginRight="@dimen/dp_20"
                    android:background="@color/gray"/>

                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:orientation="vertical">

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="已使用"
                        android:textColor="@color/textGray"
                        android:textSize="@dimen/sp_12"/>

                    <TextView
                        android:id="@+id/tv_coupon_sumNumber"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="@dimen/dp_10"
                        android:text="@string/text"
                        android:textColor="@color/black"
                        android:textSize="@dimen/sp_12"/>

                </LinearLayout>

            </LinearLayout>

        </LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="0.5"
            android:gravity="center"
            android:orientation="vertical">

            <View
                android:layout_width="15dp"
                android:layout_height="15dp"
                android:background="@drawable/shape_bg_semi_circle_top"/>

            <View
                android:layout_width="100dp"
                android:layout_height="match_parent"
                android:background="@drawable/shape_bg_dotted_line"
                android:layerType="software"/>

            <View
                android:layout_width="15dp"
                android:layout_height="15dp"
                android:background="@drawable/shape_bg_semi_circle_bottom"/>

        </LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="3.5"
            android:gravity="center"
            android:orientation="vertical"
            android:padding="@dimen/dp_10">

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:baselineAligned="false"
                android:orientation="horizontal">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="@dimen/dp_2"
                    android:text="¥ "
                    android:textColor="@color/red"
                    android:textSize="@dimen/sp_16"/>

                <TextView
                    android:id="@+id/tv_coupon_faceValue"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/text"
                    android:textColor="@color/red"
                    android:textSize="@dimen/sp_20"
                    android:textStyle="bold"/>

            </LinearLayout>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="@dimen/dp_10"
                android:text="截止日期"
                android:textColor="@color/black"
                android:textSize="@dimen/sp_12"/>

            <TextView
                android:id="@+id/tv_coupon_end_time"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="@dimen/dp_10"
                android:text="@string/text"
                android:textColor="@color/black"
                android:textSize="@dimen/sp_12"/>

        </LinearLayout>

    </LinearLayout>

</android.support.v7.widget.CardView>

半圆和虚线的实现

这里都是用shape的方式完成的。

• shape_bg_semi_circle_top.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">
    <solid
        android:color="@color/bgGreen"/>
    <corners
        android:topLeftRadius="0dp"
        android:topRightRadius="0dp"
        android:bottomLeftRadius="16dp"
        android:bottomRightRadius="16dp"/>

</shape>

• shape_bg_semi_circle_bottom.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">

    <solid
        android:color="@color/bgGreen"/>
    <corners
        android:topLeftRadius="16dp"
        android:topRightRadius="16dp"
        android:bottomLeftRadius="0dp"
        android:bottomRightRadius="0dp"/>

</shape>

• shape_bg_dotted_line.xml

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
        android:fromDegrees="90"
        android:toDegrees="90">
    <shape
        android:shape="line">
        <stroke
            android:width="1dp"
            android:color="#ff9999"
            android:dashGap="5dp"
            android:dashWidth="5dp"/>
    </shape>
</rotate>

其中需要注意的细节

• 金额数值与 ¥ 的显示对齐问题，这个地方涉及到基准线的知识点， 在LinearLayout中，默认是底部对齐的，只需要设置LinearLayout的android:baselineAligned属性为false 就行了，这样就是以顶部对齐。但是因为TextView默认是有一点padding的，所以显示 ¥ 的textview又marginTop了2dp，这样看起来顶部会在同一水平线。

• 最外层用的是CardView，效果图中看起来还是蛮不错的，但是在5.0以下，CardView显示内部会有留白，那两个半圆就会显示在白色的背景之内，极其影响美观，所以就可以根据5.0为分水岭做一个判断，具体可查看解决CardView在5.0以下留白的问题。

• 半圆的背景色要与整体的背景色保持一致。

• 虚线其实是水平方向的，android:fromDegrees=”90”，android:toDegrees=”90”，旋转了90度就变成了竖线。

• 使用虚线的控件还要添加android:layerType="software" 属性，否则会是实线。