ImageView中用XML文件對控件的設置-shape形狀的使用與自定義圖形

1.在res文件夾中創建一個drawable文件夾，用來放對圖片進行修飾的xml文件(也可以放drawable-mdpi等等中)

2.在drawable文件夾中創建一個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>

3.顯示虛線與虛線框

<?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>

效果：

自定義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>

效果圖：

例子2:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <!-- 四個角的圓角 -->
    <corners android:radius="5dp" />
    <!-- 邊框距內容的距離  內邊距 -->
    <padding android:left="5dp" android:top="5dp" android:right="5dp" android:bottom="5dp"/>
    <!-- 描邊的寬度 -->
    <stroke android:width="30dp"  android:color="#ff0000"/>
</shape>

引用:

 <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="內容啊"
        android:textSize="30sp"
        android:background="@drawable/shape_drawable" />

效果:

 

3.自定義圖形

<?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>

 4.畫圓形,作為消息條數的背景圖片:

<?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引用就行了  效果如下:

 

屬性說明:

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"/>

按下時為控件設置水波紋效果：

Android 添加點擊效果（5.0之后水波紋效果）

Meterial Design 自帶水波紋顏色修改和reveal(揭露)動效