用XML文件对控件的设置-shape形状的使用与自定义图形_xml如何调节布局圆角

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <!-- 内边距  将该背景图片的边框与图片形成10dp的边框-->
    <padding android:left="10dp" android:top="10dp" android:right="10dp" android:bottom="10dp" />
    <!-- 填充  将边框内的颜色都填充为红色-->
    <solid android:color="#ff0000"/>
    <!-- 描边   背景的边框的颜色 下面设置的为黄色 且 边框为5dp-->
    <stroke android:width="5dp" android:color="#ffff00"/>
    <!-- 圆角  设置边框的四个角为圆形，下面将圆角的半径设置为15dp  左上右下可以单独设置弧度-->
    <corners android:radius="15dp" />
    <!-- 渐变  将边框内的颜色从左王右渐变 下面三个分别表示为开始、中间、结束的颜色  起始位置的设置见下面  可以通过angle属性来控制渐变的方向  默认从左到右 -90为从上到下-->
    <gradient android:startColor="#ff0000" android:centerColor="#00ff00" android:endColor="#0000ff" />
    <!-- 注意：渐变与填充都是对边框内的颜色的设置，所以哪个属性后设置就以哪个为准(因为会覆盖前者) -->
</shape>

属性说明: 

android:shape="rectangle" 自定义图片的形状
rectangle长方形    oval 椭圆形     ring环形    line 线性   
        
// 定义图片的大小  android:width宽   android:height高
<size android:width="100dp"  android:height="50dp"/>
        
//定义图片的背景色  
<solid android:color="#ff0000"/> 
    
//定义圆角的幅度      android:radius 表示幅度对应的半径
<corners android:radius="20dp"/> 
     
//指定内容与该图片的内边剧
<padding android:left="10dp" android:top="20dp"/>
        
//表示渐变色  android:angle="90" 表示渐变色的起始方向  (默认从左至右),值必须是45整数倍数, android:startColor起始颜色值  android:endColor结束颜色值
<gradient android:angle="90"  android:startColor="#ff0000" android:centerColor="#0000ff"  android:endColor="#ff0000"/>
    
//表示边框线  android:width边框线的宽度  android:color="#0000ff" 边框线的颜色
<stroke android:width="2dp" android:color="#0000ff"/>

显示虚线与虚线框

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="line" >
    <!--显示一条虚线，破折线的宽度为dashWith，破折线之间的空隙的宽度为dashGap，当dashGap=0dp时，为实线 -->
    <stroke
        android:dashGap="3dp"
        android:dashWidth="6dp"
        android:width="1dp"
        android:color="#63a219" />
</shape>

 使用：

<!-- 虚线1
        android:layerType="software"  这样才能显示出来-->
       <View
        android:layout_width="fill_parent"
        android:layout_height="20dp"
        android:background="@drawable/dotted_line"
        android:layerType="software"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"/>

虚线框：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="rectangle">
    <!-- 填充颜色 -->
    <solid android:color="#FFFFFF"></solid>
   
    <!-- 线的宽度，颜色灰色
        width：折现的高度
        折线的宽度为dashWith，折线之间的空隙的宽度为dashGap，当dashGap=0dp时，为实线 -->
    <stroke android:width="1dp" android:color="#63a219" android:dashGap="3dp" android:dashWidth="6dp"></stroke>
   
    <!-- 矩形的圆角半径 -->
    <corners android:radius="10dp" />       
            
</shape>

使用：

<!-- 虚线圆角框 -->
       <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="45dp"
        android:background="@drawable/rect_gray_2"
        android:gravity="center"
        android:layout_marginTop="50dp"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp">
        <TextView
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:textSize="17sp"
             android:textColor="#333"
             android:text="虚线圆角框"/>
    </LinearLayout>

效果：

自定义图形

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"> 
   <!-- 定义图形的形状 为长方形-->
   <!-- 定义图形的长宽 -->
     <size android:width="100dp"  android:height="50dp"/>
   <!-- 填充颜色 -->
     <solid android:color="#ff0000"/>  
   <!-- 圆角 -->
     <corners android:radius="20dp"/> 
</shape>

画圆形,作为消息条数的背景图片:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="oval"  //代表圆形
    android:useLevel="false" >
   
    <stroke android:width="1dp" android:color="#ff0000"/>
    <!-- 填充内部颜色 -->
    <solid android:color="#ff0000"/>
    <size android:width="20dp" android:height="20dp"/>    //控制这个宽度比高度长就能显示椭圆了
</shape>

使用设置padding 和 background引用就行了  效果如下:

自定义View实现的竖向虚线与横向虚线：

/**
 * 虚线
 */
public class DashView extends View {
    private static final String TAG = "DashView";
    public static final int DEFAULT_DASH_WIDTH = 100;
    public static final int DEFAULT_LINE_WIDTH = 100;
    public static final int DEFAULT_LINE_HEIGHT = 10;
    public static final int DEFAULT_LINE_COLOR = 0x9E9E9E;
 
    /**虚线的方向*/
    public static final int ORIENTATION_HORIZONTAL = 0;
    public static final int ORIENTATION_VERTICAL = 1;
    /**默认为水平方向*/
    public static final int DEFAULT_DASH_ORIENTATION = ORIENTATION_HORIZONTAL;
    /**间距宽度*/
    private float dashWidth;
    /**线段高度*/
    private float lineHeight;
    /**线段宽度*/
    private float lineWidth;
    /**线段颜色*/
    private int lineColor;
    private int dashOrientation;
 
    private Paint mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    private int widthSize;
    private int heightSize;
 
    public DashView(Context context) {
        this(context,null);
    }
 
    public DashView(Context context, AttributeSet attrs) {
        super(context, attrs);
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.DashView);
        dashWidth = typedArray.getDimension(R.styleable.DashView_dashWidth,DEFAULT_DASH_WIDTH);
        lineHeight = typedArray.getDimension(R.styleable.DashView_lineHeight, DEFAULT_LINE_HEIGHT);
        lineWidth = typedArray.getDimension(R.styleable.DashView_lineWidth, DEFAULT_LINE_WIDTH);
        lineColor = typedArray.getColor(R.styleable.DashView_lineColor, DEFAULT_LINE_COLOR);
        dashOrientation = typedArray.getInteger(R.styleable.DashView_dashOrientation,DEFAULT_DASH_ORIENTATION);
        mPaint.setColor(lineColor);
        mPaint.setStrokeWidth(lineHeight);
        typedArray.recycle();
    }
 
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        widthSize = MeasureSpec.getSize(widthMeasureSpec)-getPaddingLeft()-getPaddingRight();
        heightSize = MeasureSpec.getSize(heightMeasureSpec - getPaddingTop() - getPaddingBottom());
        if(dashOrientation == ORIENTATION_HORIZONTAL){
            不管在布局文件中虚线高度设置为多少，控件的高度统一设置为线段的高度
            setMeasuredDimension(widthSize, (int) lineHeight);
        }else{
            //当为竖直方向时，控件宽度设置为虚线的高度
            setMeasuredDimension((int) lineHeight, heightSize);
        }
 
    }
 
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        switch (dashOrientation){
            case ORIENTATION_VERTICAL:
                drawVerticalLine(canvas);
                break;
            default:
                drawHorizontalLine(canvas);
        }
    }
 
    /**
     * 画水平方向虚线
     * @param canvas
     */
    public void drawHorizontalLine(Canvas canvas){
        float totalWidth = 0;
        canvas.save();
        float[] pts = {0,0,lineWidth,0};
        //在画线之前需要先把画布向下平移办个线段高度的位置，目的就是为了防止线段只画出一半的高度
        //因为画线段的起点位置在线段左下角
        canvas.translate(0,lineHeight/2);
        while(totalWidth<=widthSize){
            canvas.drawLines(pts,mPaint);
            canvas.translate(lineWidth + dashWidth,0);
            totalWidth += lineWidth + dashWidth;
        }
        canvas.restore();
    }
 
    /**
     * 画竖直方向虚线
     * @param canvas
     */
    public void drawVerticalLine(Canvas canvas){
        float totalWidth = 0;
        canvas.save();
        float[] pts = {0,0,0,lineWidth};
        //在画线之前需要先把画布向右平移半个线段高度的位置，目的就是为了防止线段只画出一半的高度
        //因为画线段的起点位置在线段左下角
        canvas.translate(lineHeight/2,0);
        while(totalWidth<=heightSize){
            canvas.drawLines(pts,mPaint);
            canvas.translate(0,lineWidth + dashWidth);
            totalWidth += lineWidth + dashWidth;
        }
        canvas.restore();
    }
}

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!--虚线
            dashWidth:两段线段之间的间距
            lineWidth:每条线段宽度
            lineColor:线段颜色
            dashOrientation:虚线方向 0，水平，1，竖直
            lineHeight:线段高度-->
    <declare-styleable name="DashView">
        <attr name="dashWidth" format="dimension"/>
        <attr name="lineWidth" format="dimension"/>
        <attr name="lineHeight" format="dimension"/>
        <attr name="lineColor" format="color"/>
        <attr name="dashOrientation" format="integer"/>
    </declare-styleable>
 
</resources>

<DashView
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_marginLeft="20dp"
            android:layout_marginRight="20dp"
            app:dashWidth="5dp"
            app:lineWidth="8dp"
            app:lineColor="@color/divider_bfbfbf"
            app:dashOrientation="1"
            app:lineHeight="1dp"/>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.ts.work.MainActivity" >
    <!-- 只有图片 三者对比 -->
      <ImageView 
          android:layout_width="150dp"
          android:layout_height="150dp"
          android:src="@drawable/a"/>
      <!-- 只有背景 -->
      <ImageView 
          android:layout_marginTop="5dp"
          android:layout_width="150dp"
          android:layout_height="150dp"
          android:background="@drawable/shape"/>
      <!-- 给图片添加了一个背景 形状 -->
      <ImageView 
           android:layout_marginTop="5dp"
          android:layout_width="150dp"
          android:layout_height="150dp"
          android:background="@drawable/shape"
          android:src="@drawable/a"/>
   
</LinearLayout>

效果图：