Android代码实现Shape，自定义TextView

最新推荐文章于 2023-10-10 09:38:30 发布

猿行天下

最新推荐文章于 2023-10-10 09:38:30 发布

阅读量4.3k

点赞数

本文链接：https://blog.csdn.net/yangyahuiguo/article/details/52230397

版权

我的上一篇博客代码实现shape（GradientDrawable详解）在上一篇博客中已经实现了自定义GradientDrawable，但是 setBackground(Drawable);该方法只有在API16（android 4.1.0）以上版本支持，这篇文字就介绍如何自定义绘制背景图形

1.首先定义属性attrs.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>


    <declare-styleable name="ShapeTextView">
        <!--填充色-->
        <attr name="solidColor" format="color"></attr>
        <!--边框色-->
        <attr name="strokeColor" format="color"></attr>
        <!--按下填充色-->
        <attr name="solidTouchColor" format="color"></attr>
        <!---按下边框色-->
        <attr name="strokeTouchColor" format="color"></attr>
        <!--文字按下颜色 -->
        <attr name="textTouchColor" format="color"></attr>

        <attr name="strokeWith" format="integer"></attr>

        <attr name="radius" format="dimension"></attr>

        <attr name="topLeftRadius" format="dimension"></attr>
        <attr name="topRightRadius" format="dimension"></attr>
        <attr name="bottomLeftRadius" format="dimension"></attr>
        <attr name="bottomRightRadius" format="dimension"></attr>

        <attr name="shapeTpe" format="enum">
            <enum name="rectangle" value="0"></enum>
            <enum name="oval" value="1"></enum>

            
        </attr>

       
    </declare-styleable>


</resources>

2然后代码实现CustumShapeBgTextView.java

package crack.video.com.crackvideo.tools;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.RectF;
import android.graphics.drawable.GradientDrawable;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.widget.TextView;

import crack.video.com.crackvideo.R;

/**
 * Created by guof on 2016/8/5.
 *ShapeTextView 实现：
 * 自定义背景颜色
 * 自定义边框颜色
 * 自定义矩形圆角
 * 自定义按下效果（字体边框颜色）
 *该类为自定义shape的也是GradientDrawable他的代码实现方式
 * 原本可以用 setBackground(GradientDrawable);方式实现
 * 但是setBackground(GradientDrawable);该方法仅在Api16以上支持
 */
public class ShapeTextView extends TextView {


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

    //填充色
    private int solidColor = 0;
    //边框色
    private int strokeColor = 0;
    //按下填充色
    private int solidTouchColor = 0;
    //按下边框色
    private int strokeTouchColor = 0;
    //边框宽度
    private int strokeWith = 0;
    private int shapeTpe = 0;
    //按下字体色
    private int textTouchColor=0;
    //字体色
    private int textColor=0;

   //圆角的半径
    float radius =0;
    float topLeftRadius=0;
    float topRightRadius=0;
    float bottomLeftRadius=0;
    float bottomRightRadius=0;


    public void init(Context context, AttributeSet attrs) {
        TypedArray ta = context.getTheme().obtainStyledAttributes(attrs, R.styleable.ShapeTextView, 0, 0);

        solidColor = ta.getInteger(R.styleable.ShapeTextView_solidColor, 0x00000000);
        strokeColor = ta.getInteger(R.styleable.ShapeTextView_strokeColor, 0x00000000);

        solidTouchColor = ta.getInteger(R.styleable.ShapeTextView_solidTouchColor, 0x00000000);
        strokeTouchColor = ta.getInteger(R.styleable.ShapeTextView_strokeTouchColor, 0x00000000);
        textTouchColor= ta.getInteger(R.styleable.ShapeTextView_textTouchColor, 0x00000000);
        textColor=getCurrentTextColor();
        strokeWith = ta.getInteger(R.styleable.ShapeTextView_strokeWith, 0);

        radius = ta.getDimension(R.styleable.ShapeTextView_radius, 0);
        topLeftRadius = ta.getDimension(R.styleable.ShapeTextView_topLeftRadius, 0);
        topRightRadius = ta.getDimension(R.styleable.ShapeTextView_topRightRadius, 0);
        bottomLeftRadius = ta.getDimension(R.styleable.ShapeTextView_bottomLeftRadius, 0);
        bottomRightRadius = ta.getDimension(R.styleable.ShapeTextView_bottomRightRadius, 0);
        shapeTpe= ta.getInt(R.styleable.ShapeTextView_shapeTpe, GradientDrawable.RECTANGLE);
        ta.recycle();


        if(strokeColor!=0&&strokeWith>0) {
            paintStroke = new Paint();
            paintStroke.setColor(strokeColor);
            paintStroke.setStyle(Paint.Style.STROKE);
            paintStroke.setStrokeWidth(strokeWith);
            paintStroke.setAntiAlias(true);
        }

        paint=new Paint();
        paint.setColor(solidColor);
        paint.setAntiAlias(true);
        paint.setStyle(Paint.Style.FILL);

        if(radius==0 && shapeTpe==GradientDrawable.RECTANGLE){
            path=new Path();
            //顺时针绘制 左上 右上 右下 左下
            radii=new float[]{topLeftRadius,topLeftRadius,topRightRadius,topRightRadius,bottomRightRadius,bottomRightRadius,bottomLeftRadius,bottomLeftRadius};
        }
   }

    private final RectF mRect = new RectF();
    //创建一个画笔
    private Paint paintStroke ;
    private Paint paint ;
    private Path path;
    float[] radii;
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        mRect.set(strokeWith, strokeWith, getWidth() - strokeWith, getHeight() - strokeWith);
        if(path!=null)
        path.addRoundRect(mRect, radii, Path.Direction.CW);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        if(shapeTpe== GradientDrawable.RECTANGLE){
            if(radius==0){
                canvas.drawPath(path, paint);
                if(paintStroke!=null)
                canvas.drawPath(path, paintStroke);
            }else{
                canvas.drawRoundRect(mRect, radius, radius, paint);
                if(paintStroke!=null)
                canvas.drawRoundRect(mRect, radius, radius, paintStroke);
            }
        }else{
            canvas.drawOval(mRect,paint);
            if(paintStroke!=null)
             canvas.drawOval(mRect,paintStroke);
        }
        super.onDraw(canvas);
    }


    @Override
    public boolean onTouchEvent(MotionEvent event) {
        if (solidTouchColor != 0||paintStroke!=null|| textTouchColor!=0){
            if (event.getAction() == MotionEvent.ACTION_DOWN||event.getAction() == MotionEvent.ACTION_MOVE) {
             if(event.getAction() == MotionEvent.ACTION_DOWN)
                drowBackgroud(true);
            } else {
                drowBackgroud(false);
            }
            return true;

        }else{
            return super.onTouchEvent(event);
        }
    }
        /**
         * 设置按下颜色值
         */
    private void drowBackgroud(boolean isTouch) {
        if (isTouch) {
            if(solidTouchColor!=0)
            paint.setColor(solidTouchColor);
            if(paintStroke!=null)
            paintStroke.setColor(strokeTouchColor);
            if(textTouchColor!=0)
                setTextColor(textTouchColor);
        } else {
            if(solidColor!=0)
            paint.setColor(solidColor);

            if(paintStroke!=null)
            paintStroke.setColor(strokeColor);

            if(textTouchColor!=0)
                setTextColor(textColor);
        }


        postInvalidate();
    }

}

3.xml布局总使用

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:apps="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:orientation="vertical"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="crack.video.com.crackvideo.demo.GradientDrawalbeActivity">

    <crack.video.com.crackvideo.tools.ShapeTextView
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:layout_margin="10dp"
        android:gravity="center"
        android:text="有边框"
        apps:textTouchColor="#000"
        apps:radius="10dp"
        apps:strokeWith="3"
        apps:solidColor="#5555ff"
        apps:solidTouchColor="#ffffff"
        apps:strokeTouchColor="#000000"
        apps:strokeColor="#ff0000"
        />

    <crack.video.com.crackvideo.tools.ShapeTextView
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:layout_margin="10dp"
        android:gravity="center"
        android:text="没有边框"
        apps:textTouchColor="#000"
        apps:radius="10dp"
        apps:solidColor="#5555ff"
        apps:solidTouchColor="#555555"
        />

    <crack.video.com.crackvideo.tools.ShapeTextView
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:layout_marginTop="10dp"
        android:text="右上，左下圆角，其它直角"
        android:gravity="center"
        apps:bottomLeftRadius="10dp"
        apps:topRightRadius="10dp"
        apps:strokeWith="5"
        android:textColor="#000000"
        apps:solidColor="#fff"
        apps:strokeColor="#ff0000"
        apps:solidTouchColor="#ff5555"
        apps:strokeTouchColor="#000000"
        apps:textTouchColor="#ffffff"
        apps:shapeTpe="rectangle"
        />
    <crack.video.com.crackvideo.tools.ShapeTextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_marginTop="16dp"
        android:text="椭圆带边框"
        android:textColor="#000000"
        apps:textTouchColor="#ffffff"
        apps:strokeWith="5"
        android:gravity="center"
        apps:strokeColor="#ff0000"
        apps:solidColor="#999"
        apps:solidTouchColor="#00ff00"
        apps:strokeTouchColor="#000000"
        apps:shapeTpe="oval"
        />
    <crack.video.com.crackvideo.tools.ShapeTextView
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:layout_marginTop="10dp"
        android:text="椭圆不带带边框"
        android:textColor="#000000"
        apps:textTouchColor="#ffffff"
        android:gravity="center"
        apps:solidColor="#999"
        apps:solidTouchColor="#00ff00"
        apps:shapeTpe="oval"
        />

    <crack.video.com.crackvideo.tools.ShapeTextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_marginTop="10dp"
        android:text="没有按下效果的椭圆"
        android:textColor="#000000"
        android:gravity="center"
        apps:solidColor="#999"
        apps:shapeTpe="oval"
        />

</LinearLayout>

运行结果，点击按钮都有点击效果