Android开发 自定义控件 边框TextView

最近在看《Android群英传》里看到的一个自定义效果

亲手把它实现了

在此记录

package csu.lzw.reviewandroid;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.widget.TextView;

/**
 * Created by Allen_Binan on 2016/4/1.
 */
public class BlockTextView extends TextView {

    private Paint mInnerPaint;
    private Paint mOuterPaint;

    public BlockTextView(Context context) {
        super(context);
    }

    public BlockTextView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public BlockTextView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }



    @Override
    protected void onDraw(Canvas canvas) {

        //外层画笔
        mOuterPaint=new Paint();
        mOuterPaint.setColor(Color.BLACK);
        mOuterPaint.setStyle(Paint.Style.FILL);

        //内层画笔
        mInnerPaint=new Paint();
        mInnerPaint.setColor(Color.WHITE);
        mInnerPaint.setStyle(Paint.Style.FILL);

        //绘制外层
        canvas.drawRect(0,0,getMeasuredWidth(),getMeasuredHeight(),mOuterPaint);

        //绘制内层
        canvas.drawRect(10,10,getMeasuredWidth()-10,getMeasuredHeight()-10,mInnerPaint);
        canvas.save();
        canvas.translate(10, 0);

        super.onDraw(canvas);
        canvas.restore();
    }
}

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:orientation="vertical"
    android:layout_height="match_parent">


<csu.lzw.reviewandroid.BlockTextView
    android:layout_width="match_parent"
    android:layout_height="80dp"
    android:layout_margin="20dp"
    android:gravity="center"
    android:text="Hello World!"/>
</LinearLayout>

运行效果

接着又通过自定义属性，将其边框和背景的颜色改为可以在XML布局中自行配制的。

自定义属性

<declare-styleable name="BlockTextView">
        <attr name="outBlockColor" format="color"/>
        <attr name="InBlockColor" format="color"/>
    </declare-styleable>

界面布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:orientation="vertical"
    android:layout_height="match_parent">


<csu.lzw.reviewandroid.BlockTextView
    android:layout_width="match_parent"
    android:layout_height="80dp"
    android:layout_margin="20dp"
    app:outBlockColor="@android:color/holo_red_light"
    app:InBlockColor="@android:color/holo_blue_bright"
    android:gravity="center"
    android:text="Hello World!"/>
</LinearLayout>

package csu.lzw.reviewandroid;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.widget.TextView;

/**
 * Created by Allen_Binan on 2016/4/1.
 */
public class BlockTextView extends TextView {

    private Paint mInnerPaint;
    private Paint mOuterPaint;

    private int mInnerColor;
    private int mOuterColor;
    public BlockTextView(Context context) {
        super(context);
    }

    public BlockTextView(Context context, AttributeSet attrs) {
        super(context, attrs);
        TypedArray ta=context.obtainStyledAttributes(attrs,R.styleable.BlockTextView);
        mInnerColor=ta.getColor(R.styleable.BlockTextView_InBlockColor,0);
        mOuterColor=ta.getColor(R.styleable.BlockTextView_outBlockColor,0);
        ta.recycle();
    }

    public BlockTextView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }



    @Override
    protected void onDraw(Canvas canvas) {

        //外层画笔
        mOuterPaint=new Paint();
        mOuterPaint.setColor(mOuterColor);
        mOuterPaint.setStyle(Paint.Style.FILL);

        //内层画笔
        mInnerPaint=new Paint();
        mInnerPaint.setColor(mInnerColor);
        mInnerPaint.setStyle(Paint.Style.FILL);

        //绘制外层
        canvas.drawRect(0,0,getMeasuredWidth(),getMeasuredHeight(),mOuterPaint);

        //绘制内层
        canvas.drawRect(10,10,getMeasuredWidth()-10,getMeasuredHeight()-10,mInnerPaint);
        canvas.save();
        canvas.translate(10, 0);

        super.onDraw(canvas);
        canvas.restore();
    }
}

然后的运行效果