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(揭露)动效
