Android shape implements order card production (shape draws semicircles and rectangles with rounded corners, gradients, and dotted lines (not displayed?))

 How can I do this without a picture? How about drawing it myself? Two semicircles, four rounded corners of a rectangle, and a dotted line, let’s combine it:

order_pay_shape_left.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#fff"
        />
    <!--实现半圆,别想了哥们儿,没哪个属性,用corners设置试一把-->
    <corners
        android:bottomLeftRadius = "0dp"
        android:bottomRightRadius = "19dp"
        android:topLeftRadius = "0dp"
        android:topRightRadius = "19dp"/>
</shape>

order_pay_shape_right.xml

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

order_details_background.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <!--实现渐变   angle必须是45的倍数 0左到右 90下到上 180右到左 270上到下 -->
    <gradient android:startColor="#FFE9CA" android:endColor="#FFDBAC"
        android:angle="270"/>
    <corners android:radius="4dip"/>
</shape>

order_details_lines.xml 

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="line">
    <stroke
        android:color="#F1CB98"
        android:width = "0.5dp"
        android:dashGap = "2dp"
        android:dashWidth = "3dp"/>
</shape>

main_test.xml

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <LinearLayout
            android:layout_margin="17dip"
            android:background="@drawable/order_details_background"
            android:layout_width="match_parent"
            android:orientation="vertical"
            android:gravity="center_horizontal"
            android:layout_height="202dip">

            <TextView
                android:layout_marginTop="25dip"
                android:textSize="25sp"
                android:text="单价:¥500"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
            <TextView
                android:layout_marginTop="70dip"
                android:textSize="20sp"
                android:text="姓名:张三"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
            <TextView
                android:layout_marginTop="10dip"
                android:textSize="16sp"
                android:text="地址:北京市朝阳区望京西路225号"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />

        </LinearLayout>
        <LinearLayout
            android:layout_marginTop="104dip"
            android:layout_width="match_parent"
            android:orientation="horizontal"
            android:layout_height="wrap_content">

            <ImageView
                android:src="@drawable/order_pay_shape_left"
                android:layout_width="34dip"
                android:layout_height="35dip" />
            <View
                android:layout_gravity="center"
                android:layout_marginLeft="5dip"
                android:layout_marginRight="5dip"
                android:background="@drawable/order_details_lines"
                android:layout_width="0dip"
                android:layout_weight="1"
                android:layout_height="1dip"/>
            <ImageView
                android:src="@drawable/order_pay_shape_right"
                android:layout_width="34dip"
                android:layout_height="35dip" />
        </LinearLayout>
    </RelativeLayout>

Let’s get familiar with the attributes of shape again:

     solid

       Description: Internal padding

       Attribute: android:color fill color

      size

       Description: size

       Attributes:

                 android:width width

                 android:height 高

     gradient

        Description: gradient color

        Attributes:

                   android:startColor gradient starting color

                   android:endColor gradient end color

                   android:centerColor gradient middle color

                   android:angle The angle of the gradient. When angle=0, the gradient color is from left to right, and then turns counterclockwise; when angle=90, the gradient color is from top to bottom. angle must be a multiple of 45

                   android:type gradient type: linear (linear), radial (radioactive, centered on the starting color), sweep (scan line gradient)

                   android:userLevel must be set to true if you want to use the LevelListDrawable object. Set true to have no gradient color, false to have gradient color

                   android:grdientRadial gradient radius, this value only takes effect when type is set to radial

                   android:centerX relative position of gradient center X point coordinates

                   android:centerY relative position of gradient center Y point coordinates

    stroke

        Description: Stroke

        Attributes:

                   android:width stroke width

                   android:color stroke color

                   android:dashwidth The width of the stroke style when it is dashed. When the value is 0, it is a solid line. When the value is greater than 0, it is a dashed line.

                   android:dashGap When the stroke is a dotted line, the interval between the dotted lines

    corners

        Description: rounded corners

        Attributes:

                   android:radius four corner radius values

                   android:topLeftRadius upper left corner radius value

                   android:topRightRadius upper right corner radius value

                   android:bottomLeftRadius lower right corner radius value

                   android:bottomRightRadius lower left corner radius value

    padding

        Description: Padding

        Attributes:

                   android:left left padding

                   android:right right padding

                   android:top top padding

                   android:bottom bottom padding


Why the dashed line is not displayed or the solid line is displayed:

 1. Not displayed: The height of the View cannot be greater than the height of the dotted line. Set the height of the View to be greater than the length of the wieth in the shape;

 2. Solid line: In AndroidManifest.xml, android:hardwareAccelerated="false" is added to the current Activity.

 

Guess you like

Origin blog.csdn.net/Android_hv/article/details/83866021