Android中shape通常用法

前言

线条的设置在APP中用的地方是很多的，比如很多小模块之间的分割，而这些绝大多数用shape都是可以实现的，但是在实际的使用中也会有小坑，比如如果是虚线呢 ？如果那条虚线要是垂直的呢？所以这里简单的实现以下让我们来趟一趟这浑水。

shape实线

如果要实现肯定会有人说这个简单用view也可以啊我把它的height设置成1dp在给个背景颜色不就可以了吗，说的确实很有道理我也这样做过要是用shape呢？

shape其实就是在drawable下面新建xml文件并且可以实现一些形状的图形，或者是颜色减半的效果，它相比PNG图片占用的空间更小也比 自定义View实现的更简单。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <!--shape：表示是线条-->
    <!--width：表示是线段的高度-->
    <!--dashGap：表示线段与线段之间间隔-->
    <!--dashWidth：表示线段的宽度-->
    <stroke
        android:width="1dp"
        android:dashGap="5dp"
        android:dashWidth="5dp" />
    <!--angle 渐变角度,0:左到右;90:下到上;180:右到左;270:上到下-->
    <gradient
        android:startColor="#ff6677"
        android:endColor="@android:color/white"
        android:angle="0"></gradient>


</shape>

可以看见注解也比较详细有几个属性重点说一下：

• shape 这个属性来设置你要设置的边框形状：rectangle 矩形（默认）

• line：线条

• ring： 环形

• oval：椭圆
  corners标签

    <!--corners标签: 圆角-->  
    <!--bottomLeftRadius 左下角-->  
    <!--bottomRightRadius 右下角-->  
    <!--topLeftRadius 左上角-->  
    <!--topRightRadius 右上角-->  
    <!--radius 是四个角, 设置了这个就不需要设置上面的四个了, PS:它的优先级比较低, 会被其他参数覆盖-->  

gradient标签

 <!--gradient标签: 简单的说: 让图形变成一个有颜色梯度的-->  
    <!--angle 是颜色变换的角度, 默认是0, 取值必须是45的 倍数. 0: 是颜色从左边到右边, 90: 是颜色从底部到顶部, -->  
    <!--startColor centerColor endColor 一起使用: 开始的颜色, 中间的颜色, 结束的颜色-->  
    <!--centerX centerY是指定位置坐标, 取值是0.0f ~ 1.0f 之间, 例如: android:centerX="0.5f"  表示X方向的中间位置-->  
    <!--type 颜色渐变的类型, 取值类型有三种: linear/radial/sweep  -->  
    <!--linear 线性变化, 就是颜色从左往右, 从下往上-->  
    <!--radial 放射变化, 例如: 从一个圆中心到圆的边缘变化-->  
    <!--sweep 扫描式渐变, 类似雷达扫描的那种图形-->  
    <!--gradientRadius 和android:type="radial"一起连用, 半径-->  

padding标签

    <!--padding标签: 这里的padding是控件中间内容与shape图形图片的距离-->  

常用的标签就会有这些其实这些都有总结比较全面的像超级详细的shape使用

shape虚线：

如果是用shape来实现虚线的话也比较简单：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="line">
    <!--shape：表示是线条-->
    <!--width：表示是线段的高度-->
    <!--dashGap：表示线段与线段之间间隔-->
    <!--dashWidth：表示线段的宽度-->
    <stroke
        android:width="1dp"
        android:color="#ff6677"
        android:dashGap="5dp"
        android:dashWidth="5dp" />

</shape>

但是有几个地方我们得搞清楚像：width其实表示的是虚线的宽度 dashGap 表示的是线段与线段之间的间隔 而dashwidth表示的是线段之间的宽度，当然重中之重就是 android:layerType=”software”一定要在你使用虚线的地方加上。

竖直的虚线

如果谁前两个用shape很好设置的话这个如果是shape就会有问题了由于宽和高的不确定性导致你 用shape来设置的时候就会对它边上的布局有影响这里就必须得自定义View来实现了：

public class JDottedLine extends View {

    private Paint mDotPaint;

    public JDottedLine(Context context) {
        super(context);
        initView();
    }

    public JDottedLine(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        initView();
    }

    public JDottedLine(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initView();
    }

    private void initView() {
        mDotPaint = new Paint();
        mDotPaint.setColor(Color.parseColor("#FF6677")); //画笔颜色
        mDotPaint.setStrokeWidth(2); //画笔宽度
        // 1、STROKE 描边
        // 2、FILL_AND_STROKE 填充内部和描边
        // 3、FILL：填充内部
        mDotPaint.setStyle(Paint.Style.STROKE);
        //1、Cap.BUTT 这条路径结束，而不是超越它。
        //2、Cap.ROUND 结束是个半圆
        //3、Cap.SQUARE 结束是个方形
        mDotPaint.setStrokeCap(Paint.Cap.ROUND);//
        //设置抗锯齿
        mDotPaint.setAntiAlias(true);
        //设置是否抖动
        mDotPaint.setDither(true);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        float startY = getHeight();
        float startX = getWidth() / 2;
        DashPathEffect dashPathEffect =
                new DashPathEffect(new float[]{8, 10, 8, 10}, 0);
        mDotPaint.setPathEffect(dashPathEffect);
        Path path = new Path();
        path.moveTo(startX,0);
        path.lineTo(startX,startY);
        canvas.drawPath(path,mDotPaint);
    }
}

到这 基本上我们想要的几种效果就实现了我们只需要加一下background

<?xml version="1.0" encoding="utf-8"?>
<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=".MainActivity">
    <!--当画一个高度为1dp的虚线实际上他占的高度是大于1dp-->
    <View
        android:layout_width="match_parent"
        android:layout_height="2dp"
        android:layout_marginTop="20dp"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:layerType="software"
        android:background="@drawable/one" />
    <!--如果现在要去画一条颜色渐变的虚线-->

    <View
        android:layout_width="match_parent"
        android:layout_height="2dp"
        android:layout_marginTop="20dp"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:layerType="software"
        android:background="@drawable/two" />

    <!--画竖直线-->
    <testview.bawei.com.ceshi.JDottedLine
        android:layout_marginLeft="100dp"
        android:layout_marginTop="20dp"
        android:layout_width="2dp"
        android:layout_height="60dp" />


</LinearLayout>