Android自定义文章段落按钮

效果如图：

效果图

<declare-styleable name="ParaView">
        <attr name="horizontalGravity">
            <flag name="left" value="1" />
            <flag name="center" value="2" />
            <flag name="right" value="3" />
        </attr>
        <attr name="verticalGravity">
            <flag name="top" value="1" />
            <flag name="center" value="2" />
            <flag name="bottom" value="3" />
        </attr>
        <attr name="gravityType">
            <flag name="horizontal" value="1" />
            <flag name="vertical"   value="2" />
        </attr>

        <attr name="checked" format="boolean"/>
    </declare-styleable>

<RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true">

        <com.mutantbox.onlymemo.widget.ParaView
            android:id="@+id/para_hor_left"
            android:layout_width="35dp"
            android:layout_height="35dp"
            ts:gravityType="horizontal"
            ts:horizontalGravity="left"/>

        <com.mutantbox.onlymemo.widget.ParaView
            android:id="@+id/para_hor_center"
            android:layout_width="35dp"
            android:layout_height="35dp"
            android:layout_toRightOf="@+id/para_hor_left"
            android:layout_marginLeft="15dp"
            ts:checked="true"
            ts:gravityType="horizontal"
            ts:horizontalGravity="center"/>

        <com.mutantbox.onlymemo.widget.ParaView
            android:id="@+id/para_hor_right"
            android:layout_width="35dp"
            android:layout_height="35dp"
            ts:gravityType="horizontal"
            android:layout_toRightOf="@+id/para_hor_center"
            android:layout_marginLeft="15dp"
            ts:horizontalGravity="right"/>

        <com.mutantbox.onlymemo.widget.ParaView
            android:id="@+id/para_ver_top"
            android:layout_width="35dp"
            android:layout_height="35dp"
            android:layout_below="@+id/para_hor_left"
            android:layout_marginTop="10dp"
            ts:gravityType="vertical"
            ts:verticalGravity="top"/>

        <com.mutantbox.onlymemo.widget.ParaView
            android:id="@+id/para_ver_center"
            android:layout_width="35dp"
            android:layout_height="35dp"
            android:layout_toRightOf="@+id/para_hor_left"
            android:layout_below="@+id/para_hor_left"
            android:layout_marginTop="10dp"
            android:layout_marginLeft="15sp"
            ts:checked="true"
            ts:gravityType="vertical"
            ts:verticalGravity="center"/>

        <com.mutantbox.onlymemo.widget.ParaView
            android:id="@+id/para_ver_bottom"
            android:layout_width="35dp"
            android:layout_height="35dp"
            android:layout_toRightOf="@+id/para_ver_center"
            android:layout_below="@+id/para_hor_left"
            android:layout_marginTop="10dp"
            android:layout_marginLeft="15dp"
            ts:gravityType="vertical"
            ts:verticalGravity="bottom"/>
    </RelativeLayout>

public class ParaView extends View {
    public static final int HORIZONTAL = 1;
    public static final int VERTICAL = 2;

    public static final int LEFT = 1;
    public static final int CENTER = 2;
    public static final int RIGHT = 3;
    public static final int TOP = 1;
    public static final int BOTTOM = 3;

    private int horizontalGravity = CENTER;
    private int verticalGravity = CENTER;
    private int gravityType = HORIZONTAL;

    private Context context;
    private Paint paint;

    private int width;
    private int height;
    private int topMargen;
    private int leftMargen;
    private int lineHeight;
    private int lineCount = 5;
    private int diverHeight;
    private boolean mChecked;

    private int bgColor = Color.WHITE;
    private int lineColor = Color.BLACK;
    private int lineNormalColor = Color.BLACK;
    private int lineCheckedColor = Color.WHITE;

    private int frameBgColor = Color.parseColor("#bfc0c2");

    private int bgCheckedColor = Color.parseColor("#EE4A21");
    private int bgTouchColor = Color.parseColor("#50000000");
    private int bgNormalColor = Color.WHITE;

    public ParaView(Context context) {
        super(context);
        this.context = context;
        paint = new Paint();
        init();
    }

    public ParaView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        this.context = context;
        obtainAttributes(context, attrs);
        paint = new Paint();
        init();
    }

    private void obtainAttributes(Context context, AttributeSet attrs) {
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.ParaView);
        gravityType = typedArray.getInteger(R.styleable.ParaView_gravityType, 1);
        horizontalGravity = typedArray.getInteger(R.styleable.ParaView_horizontalGravity, 1);
        verticalGravity = typedArray.getInteger(R.styleable.ParaView_verticalGravity, 1);
        mChecked = typedArray.getBoolean(R.styleable.ParaView_checked, false);
        typedArray.recycle();

        bgColor = mChecked ? bgCheckedColor : bgNormalColor;
        lineColor = mChecked ? lineCheckedColor : lineNormalColor;
    }

    public void setGravity(int gravityType, int gravity) {
        this.gravityType = gravityType;
        if (gravityType == HORIZONTAL) {
            horizontalGravity = gravity;
        } else {
            verticalGravity = gravity;
        }
        invalidate();
    }

    public int getGravity(){
        if (gravityType == HORIZONTAL){
            return horizontalGravity;
        }
        return verticalGravity;
    }

    public boolean isChecked() {
        return mChecked;
    }

    public void setChecked(boolean checked) {
        this.mChecked = checked;
        bgColor = mChecked ? bgCheckedColor : bgNormalColor;
        lineColor = mChecked ? lineCheckedColor : lineNormalColor;
        invalidate();
    }

    private void init() {
        setOnTouchListener(new OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {

                switch (event.getAction()) {
                    case MotionEvent.ACTION_DOWN:
                        if (!mChecked){
                            bgColor = bgTouchColor;
                            lineColor = lineNormalColor;
                            invalidate();
                        }
                        break;

                    case MotionEvent.ACTION_UP:
//                        mChecked = !mChecked;
                        setChecked(true);
                        if (l != null) {
                            l.onClick(v);
                        }
                        break;
                }
                return true;
            }
        });
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        setBackgroundColor(bgColor);
        paint.setColor(lineColor);
        paint.setAntiAlias(false);
        paint.setStyle(Paint.Style.FILL);

        width = getWidth();
        height = getHeight();
        topMargen = dp2px(context, 3);
        leftMargen = dp2px(context, 4);
        lineHeight = dp2px(context, 1.8f);
        paint.setStrokeWidth(lineHeight);
        diverHeight = (height - (topMargen * 2) - (lineCount * lineHeight)) / (lineCount + 1);
        //画边框
        if (!mChecked && bgColor != bgTouchColor) {
            int strokeWidth = dp2px(context, 2f);
            Paint paint = new Paint();
            paint.setColor(frameBgColor);
            paint.setStrokeWidth(strokeWidth);
            canvas.drawLine(0, 0, 0, height, paint);
            canvas.drawLine(0, 0, width, 0, paint);
            canvas.drawLine(width, 0, width, height, paint);
            canvas.drawLine(0, height, width, height, paint);
        }
        //画段落
        if (gravityType == HORIZONTAL) {
            switch (horizontalGravity) {
                case LEFT:
                    drawHorLeftPara(canvas);
                    break;
                case CENTER:
                    drawHorCenterPara(canvas);
                    break;
                case RIGHT:
                    drawHorRightPara(canvas);
                    break;
            }
        } else if (gravityType == VERTICAL) {
            switch (verticalGravity) {
                case TOP:
                    drawVerTopPara(canvas);
                    break;
                case CENTER:
                    drawVerCenterPara(canvas);
                    break;
                case BOTTOM:
                    drawVerBottomPara(canvas);
                    break;
            }
        }
    }

    private void drawVerTopPara(Canvas canvas) {
        for (int i = 0; i < lineCount; i++) {
            float startX = leftMargen;
            float startY = topMargen + (diverHeight + lineHeight) * (i + 1);
            float stopX = width - leftMargen;
            float stopY = topMargen + (diverHeight + lineHeight) * (i + 1);
            if (i == 0 || i == 1)
                canvas.drawLine(startX, startY, stopX, stopY, paint);
        }
    }

    private void drawVerCenterPara(Canvas canvas) {
        float startX = leftMargen;
        float startY;
        float stopX = width - leftMargen;
        float stopY;

        startY = height / 2 - diverHeight / 2 - lineHeight / 2;
        stopY = height / 2 - diverHeight / 2 - lineHeight / 2;
        canvas.drawLine(startX, startY, stopX, stopY, paint);
        startY = height / 2 + diverHeight / 2 + lineHeight / 2;
        stopY = height / 2 + diverHeight / 2 + lineHeight / 2;
        canvas.drawLine(startX, startY, stopX, stopY, paint);
    }

    private void drawVerBottomPara(Canvas canvas) {
        for (int i = 0; i < lineCount; i++) {
            float startX = leftMargen;
            float startY = topMargen + (diverHeight + lineHeight) * (i + 1);
            float stopX = width - leftMargen;
            float stopY = topMargen + (diverHeight + lineHeight) * (i + 1);
            if (i == 3 || i == 4)
                canvas.drawLine(startX, startY, stopX, stopY, paint);
        }
    }

    private void drawHorLeftPara(Canvas canvas) {
        float startX;
        float startY;
        float stopX = 0;
        float stopY;

        for (int i = 0; i < lineCount; i++) {
            startX = leftMargen;
            startY = topMargen + (diverHeight + lineHeight) * (i + 1);
            if (i == 0) {
                stopX = width - leftMargen * 2;
            } else if (i == 1) {
                stopX = width - leftMargen * 4;
            } else if (i == 2) {
                stopX = width - leftMargen * 3;
            } else if (i == 3) {
                stopX = width - leftMargen * 2;
            } else if (i == 4) {
                stopX = width - leftMargen * 1;
            }

            stopY = topMargen + (diverHeight + lineHeight) * (i + 1);
            canvas.drawLine(startX, startY, stopX, stopY, paint);
        }
    }

    private void drawHorCenterPara(Canvas canvas) {
        for (int i = 0; i < lineCount; i++) {
            float startX = leftMargen;
            float startY = topMargen + (diverHeight + lineHeight) * (i + 1);
            float stopX = width - leftMargen;
            float stopY = topMargen + (diverHeight + lineHeight) * (i + 1);

            canvas.drawLine(startX, startY, stopX, stopY, paint);
        }
    }

    private void drawHorRightPara(Canvas canvas) {
        float startX = 0;
        float startY;
        float stopX;
        float stopY;

        for (int i = 0; i < lineCount; i++) {
            startY = topMargen + (diverHeight + lineHeight) * (i + 1);
            if (i == 0) {
                startX = leftMargen * 2;
            } else if (i == 1) {
                startX = leftMargen * 4;
            } else if (i == 2) {
                startX = leftMargen * 3;
            } else if (i == 3) {
                startX = leftMargen * 2;
            } else if (i == 4) {
                startX = leftMargen * 1;
            }
            stopX = width - leftMargen;
            stopY = topMargen + (diverHeight + lineHeight) * (i + 1);
            canvas.drawLine(startX, startY, stopX, stopY, paint);
        }
    }

    public static int dp2px(Context context,float dpValue){
        float scale = context.getResources().getDisplayMetrics().density;
        return (int)(dpValue * scale + 0.5f);
    }
    
    OnClickListener l;

    @Override
    public void setOnClickListener(@Nullable OnClickListener l) {
        super.setOnClickListener(l);
        this.l = l;
    }
}