shape使用（设置虚线、圆角、渐变）

jackeysion

2014-05-02

先上效果图：

shape使用（设置虚线、圆角、渐变）

对于列表的一个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>

android