A list,

  • inAndroidDevelopment, can be usedshapeDefine a variety of shapes. You can also define some image resources that are used relative to traditional imagesshapeIt reduces resource usage, reduces package size, and works well with different phone sizes.

2. Subtag attributes

  • The Shape attribute defines the display effects of the control, such as rounded corners, gradients, fills, strokes, sizes, margins…

    
        

<shape xmlns:android="http://schemas.android.com/apk/res/android"

       android:shape=["rectangle"|"oval"|"line"|"ring"] >// Define the shape<corners// Rounded corner propertyandroid:radius="integer"

        android:topLeftRadius="integer"

        android:topRightRadius="integer"

        android:bottomLeftRadius="integer"

        android:bottomRightRadius="integer" />

    <gradient// The gradient propertyandroid:angle="integer"

        android:centerX="integer"

        android:centerY="integer"

        android:centerColor="integer"

        android:endColor="color"

        android:gradientRadius="integer"

        android:startColor="color"

        android:type=["linear"|"radial"|"sweep"]

        android:useLevel=["true"|"false"/ >

    <padding// Margin propertyandroid:left="integer"

        android:top="integer"

        android:right="integer"

        android:bottom="integer" />

    <size// Size attributeandroid:width="integer"

        android:height="integer" />

    <solid// Populate the propertiesandroid:color="color" />

    <stroke// Stroke propertiesandroid:width="integer"

        android:color="color"

        android:dashWidth="integer"

        android:dashGap="integer" />

</shape>
Copy the code

  • Corners: Used to define rounded corners.

    
        

<shape xmlns:android="http://schemas.android.com/apk/res/android" >

    <corners// Define rounded cornersandroid:radius="20dp"// Full fillet radiusandroid:topLeftRadius="10dp"// The radius of the top left cornerandroid:topRightRadius="10dp"// The radius of the rounded corner in the upper right cornerandroid:bottomLeftRadius="10dp"// Lower left corner radiusandroid:bottomRightRadius="10dp" />// Lower right corner radius</shape>
Copy the code

  • Solid: Specifies the internal fill color.

    
        

<shape xmlns:android="http://schemas.android.com/apk/res/android" >

    <solid android:color="#f66"/>// Inside fill color</shape>
Copy the code

  • Gradient: Used to define gradient, can define two-color gradient, three-color gradient and gradient style.

    
        

<shape xmlns:android="http://schemas.android.com/apk/res/android" >

    <gradient

        android:type=["linear"|"radial"|"sweep"] / /3Medium gradient types: Linear gradient (default), Radial gradient, scan gradient;android:angle="90"// Gradient Angle, must be45A multiple of,0Is from left to right,90From top to bottom;android:centerX="0.5"// Gradient centerXThe corresponding position of, and the range is0~1;android:centerY="0.5"// Gradient centerYThe corresponding position of, and the range is0~1;android:startColor="#24e9f2"// The color of the beginning of the gradient;android:centerColor="#2564ef"// The color of the middle point of the gradient, between the beginning and the end point;android:endColor="#25f1ef"// Gradient end point color;android:gradientRadius="5dp"// Radius of the gradient, only if the gradient type isradialCan only be used;android:useLevel="false" />// Set to true when LevelListDrawable is used. The gradient effect only works when set to false.</shape>
Copy the code

  • Stroke: is a stroke property that defines stroke width, color, dashed and solid lines, etc.

    
        

<shape xmlns:android="http://schemas.android.com/apk/res/android" >

    <stroke

        android:width="1dp"// Width of strokeandroid:color="#ff0000"// The color of the stroke // The following two properties are set to dashed linesandroid:dashWidth="1dp"// The width of the dashed line is0The solid lineandroid:dashGap="1dp" />// Dashed line spacing</shape>
Copy the code

  • Padding: Used to define the internal margin.

    
        

<shape xmlns:android="http://schemas.android.com/apk/res/android" >

    <padding

        android:left="10dp"// left inner margin;android:top="10dp"// upper inner margin;android:right="10dp"// Right inner margin;android:bottom="10dp" />// Lower inner margin.</shape>
Copy the code

  • Size: Defines the size of the graph.

    
        

<shape xmlns:android="http://schemas.android.com/apk/res/android" >

    <size

        android:width="50dp"/ / widthandroid:height="50dp" />/ / height</shape>
Copy the code

Three, special attributes

  • The Shape special property defines the Shape of the current Shape, such as rectangle, oval, line, circle… This is all done through the Shape attribute.

    
        

<shape xmlns:android="http://schemas.android.com/apk/res/android"

       android:shape=["rectangle"|"oval"|"line"|"ring"] / /ShapeDefault is rectangle, can be set to rectangle (rectangle), oval (oval), linear shape (line), ring (ring) // The following attributes are available only inandroid:shape="ring"When available:android:innerRadius="10dp"// Radius of the inner ringandroid:innerRadiusRatio="2"// Float, representing the radius of the inner ring in the ratio of the width of the ringandroid:thickness="3dp"// Ring thicknessandroid:thicknessRatio="2"// Float to indicate the thickness of the ring in the ratio of its widthandroid:useLevel="false">// Boolean, true if used as LevelListDrawable, false otherwise.</shape>
Copy the code

  • Rectangle, rectangle

    
        

<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">

    <solid android:color="@color/colorPrimary" />

</shape>
Copy the code

  • Oval, elliptical

    
        

<shape xmlns:android="http://schemas.android.com/apk/res/android"

       android:shape="oval">

    <solid android:color="@color/colorPrimary" />

    <size android:height="100dp" android:width="100dp" />

</shape>
Copy the code

  • Line: line

    
        

<shape xmlns:android="http://schemas.android.com/apk/res/android"

       android:shape="line">

    <stroke

        android:width="1dp"

        android:color="@color/colorAccent"

        android:dashGap="3dp"// Dashed line spacingandroid:dashWidth="4dp" />// Dashed line width<size android:height="3dp" />

</shape>
Copy the code

  • Ring, ring

    
        

<shape xmlns:android="http://schemas.android.com/apk/res/android"

      android:shape="ring"

      android:useLevel="false"

      android:innerRadius="20dp"// Radius of the inner ringandroid:thickness="10dp">// Ring width<! -- useLevel must be set to false -->

    <solid android:color="@color/colorAccent"/>

</shape>
Copy the code

Four, the use of

  • The Shape file is created in the RES /drawable folder, for example, shape_text.xml

  • shape_text.xml

    
        
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <! -- Set a border -->
    <stroke android:width="5px" android:color="#f11" />
    <! Background gradient -->
    <gradient
        android:angle="90"
        android:endColor="#fcf"
        android:startColor="#cff"/>
    <! Add inner spacing to use containers -->
    <padding
        android:left="20dp"
        android:top="20dp"
        android:right="20dp"
        android:bottom="20dp"/>
</shape>
Copy the code

  • Use in layout

    
        
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <! -- Flow layout -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:gravity="center">
        <! -- Input box -->
        <TextView
            android:id="@+id/dzm"
            android:layout_width="300dp"
            android:layout_height="300dp"
            android:text="@string/app_name"
            android:textSize="50sp"
            android:background="@drawable/shape_text" />
    </LinearLayout>

</androidx.constraintlayout.widget.ConstraintLayout>
Copy the code