先上效果图:
对于列表的一个item的布局activity_fragment_my_route_item.xml如下:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_gravity="top"
android:orientation="vertical"
android:layout_marginLeft="10dp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="6dp"
android:orientation="vertical" >
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="20dp">
<include layout="@layout/shape_startoff_view"/>
<TextView
android:id="@+id/lx_start_text"
android:layout_width="wrap_content"
android:layout_height="20dp"
android:text="起始地点"
android:textColor="#000000"
android:gravity="center_vertical|left"
android:textSize="15sp"
android:layout_marginLeft="10dp"/>
</LinearLayout>
<!-- 切的虚线图 -->
<ImageView
android:id="@+id/imageView5"
android:layout_width="22dp"
android:layout_height="8dp"
android:src="@drawable/lx_split" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="20dp" >
<include layout="@layout/shape_destination_view"/>
<TextView
android:id="@+id/lx_stop_text"
android:layout_width="wrap_content"
android:layout_height="20dp"
android:layout_gravity="center_vertical"
android:text="达到地点"
android:gravity="center_vertical|left"
android:textColor="#000000"
android:textSize="15sp"
android:layout_marginLeft="10dp"/>
</LinearLayout>
<ImageView
android:id="@+id/lx_time_part_split"
android:layout_width="22dp"
android:layout_height="8dp"
android:src="@drawable/lx_split" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="20dp"
android:id="@+id/lx_time_part">
<ImageView
android:id="@+id/lx_time_image"
android:layout_width="wrap_content"
android:layout_height="20dp"
android:scaleType="centerInside"
android:src="@drawable/lx_time" />
<TextView
android:id="@+id/lx_time_text"
android:layout_width="wrap_content"
android:layout_height="20dp"
android:text="出发时间"
android:textColor="#000000"
android:gravity="center_vertical|left"
android:textSize="15sp"
android:layout_marginLeft="10dp"/>
</LinearLayout>
<!-- <ImageView
android:id="@+id/lx_dis_part_split"
android:layout_width="22dp"
android:layout_height="8dp"
android:src="@drawable/lx_split" />
<LinearLayout
android:id="@+id/lx_dis_part"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageView
android:id="@+id/imageView4"
android:layout_width="wrap_content"
android:layout_height="15dp"
android:src="@drawable/lx_dis" />
<TextView
android:id="@+id/lx_dis_text"
android:layout_width="wrap_content"
android:layout_height="15dp"
android:text="距离"
android:gravity="center_vertical|left"
android:textColor="#000000"
android:textSize="10dp" />
</LinearLayout>
-->
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="6dp"
android:orientation="vertical" >
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="right"
android:gravity="center_vertical"
android:orientation="vertical"
android:layout_marginRight="10dp" >
<ImageView
android:id="@+id/lx_r_btn"
android:layout_width="wrap_content"
android:layout_height="30dp"
android:src="@drawable/ypc" />
</LinearLayout>
</LinearLayout>
这里使用到一个切的虚线图(见附件图),而圆形图是自己做的:
shape_startoff_view.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="20dp"
android:layout_height="20dp"
android:background="@drawable/shape_circle" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="@string/my_route_start_off"
android:textStyle="bold" />
</RelativeLayout>
shape_destination_view.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="20dp"
android:layout_height="20dp"
android:background="@drawable/shape_circle" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="@string/my_route_destination"
android:textStyle="bold" />
</RelativeLayout>
shape_distance_view.xml
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="20dp" android:layout_height="20dp" android:background="@drawable/shape_circle" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:text="@string/my_route_distance" android:textStyle="bold" /> </RelativeLayout>
共用的圆圈背景:
shape_circle.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <!-- 填充颜色(shape背景) --> <solid android:color="#FFFFFF"></solid> <!-- 线的宽度,颜色灰色 --> <stroke android:width="1dp" android:color="@color/circle_bg"></stroke> <!-- 矩形的圆角半径--> <corners android:radius="10dp" /> <!-- 圆角 <corners android:radius="11dp" android:topLeftRadius="11dp" android:topRightRadius="11dp" android:bottomLeftRadius="11dp" android:bottomRightRadius="11dp"/> --> </shape>