效果图
主要是中间的两个半圆和虚线的实现，其他都比较简单。但是其中也会涉及到一些细节性的东西，后面讲。
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" 属性，否则会是实线。
