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(); } }