Android自定义View系列之实战

深渊向深渊呼唤

一、自定义组合控件(通用标题栏)

自定义组合控件就是将多个控件组合成为一个新的控件,主要解决多次重复使用同一类型的布局。如我们顶部的HeaderView以及dailog等,我们都可以把他们组合成一个新的控件。通常是继承一个系统现有的ViewGroup(LinearLayout...)

1.编写通用标题栏的布局文件:左边是返回按钮、中间是文字标题、右边可能是文本可能是图标

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:andro
    android:
    android:layout_
    android:layout_>

    <ImageView
        android:
        android:layout_
        android:layout_
        android:layout_marginStart="10dp"
        android:src="@mipmap/icon_title_back_2" />

    <TextView
        android:
        android:layout_
        android:layout_
        android:layout_centerInParent="true"
        android:text="标题"
        android:textColor="#000000"
        android:textSize="18dp" />

    <TextView
        android:
        android:layout_
        android:layout_
        android:layout_alignParentEnd="true"
        android:layout_centerVertical="true"
        android:layout_marginEnd="10dp"
        android:text="完成"
        android:textColor="#f0000000"
        android:textSize="16dp"
        android:visibility="gone" />

    <ImageView
        android:
        android:layout_
        android:layout_
        android:layout_alignParentEnd="true"
        android:layout_centerVertical="true"
        android:layout_marginEnd="10dp"
        android:src="@mipmap/icon_setting" />

</RelativeLayout>

2.自定义View的java代码:CommonTitleBarLayout.java

public class CommonTitleBarLayout extends LinearLayout {
    private TextView titleTv, rightTv;
    private ImageView backIv, rightIv;
    private RelativeLayout rootLayout;

    public CommonTitleBarLayout(Context context) {
        this(context, null);
    }

    public CommonTitleBarLayout(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

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

    /**
     * @param context 上下文文本
     */
    private void initView(Context context) {
        LayoutInflater.from(context).inflate(R.layout.layout_common_title_bar, this, true);
        titleTv = findViewById(R.id.titleTv);
        rightTv = findViewById(R.id.rightTv);
        backIv = findViewById(R.id.backIv);
        rightIv = findViewById(R.id.rightIv);
        rootLayout = findViewById(R.id.header_root_layout);
    }

    /**
     * @param context 上下文文本
     * @param attrs   如果需要自定义属性,可以从attrs参数获取属性值
     */
    private void initAttrs(Context context, AttributeSet attrs) {
        //获取自定义的各个属性值
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.CommonTitleBarLayout);
        String title = typedArray.getString(R.styleable.CommonTitleBarLayout_titleText);//获取format="string"
        int titleColor = typedArray.getColor(R.styleable.CommonTitleBarLayout_titleTextColor, 0x000000);//获取format="color"
        int titleSize = (int) typedArray.getDimension(R.styleable.CommonTitleBarLayout_titleTextSize, 18f);//获取format="dimension"
        int backgroundColor = typedArray.getColor(R.styleable.CommonTitleBarLayout_backgroundColor, 0xFFFFFF);//获取format="color"
        int type = typedArray.getInt(R.styleable.CommonTitleBarLayout_rightShowImgOrText, 0);//获取枚举类型值
        if (type == 1) {//右边按钮显示图片icon
            rightTv.setVisibility(GONE);
            rightIv.setVisibility(VISIBLE);
            int rightIcon = typedArray.getResourceId(R.styleable.CommonTitleBarLayout_rightIcon, R.drawable.ic_launcher_background);//获取format="reference"
        } else if (type == 2) {//右边按钮显示文本
            rightTv.setVisibility(VISIBLE);
            rightIv.setVisibility(GONE);
            String rightText = typedArray.getString(R.styleable.CommonTitleBarLayout_rightText);//获取format="string"
            int rightColor = typedArray.getColor(R.styleable.CommonTitleBarLayout_rightTextColor, 0x000000);//获取format="color"
            int rightSize = (int) typedArray.getDimension(R.styleable.CommonTitleBarLayout_rightTextSize, 16f);//获取format="dimension"
        } else {//都不显示
            rightTv.setVisibility(GONE);
            rightIv.setVisibility(GONE);
        }

        Log.i("AttributeSet", "title=" + title + "titleColor=" + titleColor + "type=" + type + "titleSize" + titleSize);
    }

    //以下这些方法:对外提供设置的接口,可以看自己需求补充
    public void setLeftListener(OnClickListener onClickListener) {
        if (onClickListener != null) {
            backIv.setOnClickListener(onClickListener);
        }
    }

    public void setRightListener(OnClickListener onClickListener) {
        if (onClickListener != null) {
            rightTv.setOnClickListener(onClickListener);
        }
    }

    public void setTitle(String title) {
        titleTv.setText(title);
    }

    public void setTitleColor(@ColorInt int color) {
        titleTv.setTextColor(color);
    }

    public void setRightBtnText(String text) {
        rightTv.setText(text);
    }

    public void setRightBtnColor(@ColorInt int color) {
        rightTv.setTextColor(color);
    }

    public void setBackgroundColor(int color) {
        rootLayout.setBackgroundColor(color);
    }
}

3.自定义属性

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="CommonTitleBarLayout">
        <!--中间标题文本-->
        <attr name="titleText" format="string"/>
        <!--中间标题文本颜色-->
        <attr name="titleTextColor" format="color"/>
        <!--中间标题文本大小-->
        <attr name="titleTextSize" format="dimension"/>
        <!--右边文本-->
        <attr name="rightText" format="string"/>
        <!--右边文本颜色-->
        <attr name="rightTextColor" format="color"/>
        <!--右边文本大小-->
        <attr name="rightTextSize" format="dimension"/>
        <!--标题栏背景色-->
        <attr name="backgroundColor" format="color"/>
        <!--右边按钮是显示TextView还是ImageView-->
        <attr name="rightShowImgOrText">
            <enum name="showImageView" value="1"/>
            <enum name="showTextView" value="2"/>
            <enum name="allNotShow" value="0"/>
        </attr>
        <!--右边图片icon-->
        <attr name="rightIcon" format="reference"/>
    </declare-styleable>
</resources>

4.使用

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:andro
    xmlns:custom="http://schemas.android.com/apk/res-auto"
    android:layout_
    android:layout_
    android:orientation="vertical">

    <com.example.testproject.CommonTitleBarLayout
        android:
        android:layout_
        android:layout_
        custom:backgroundColor="#FFFFFF"
        custom:rightShowImgOrText="showTextView"
        custom:rightText="设置"
        custom:rightTextColor="#000000"
        custom:rightTextSize="16dp"
        custom:titleText="今日新闻"
        custom:titleTextColor="#000000"
        custom:titleTextSize="18dp" />
</LinearLayout>
public class TestActivity extends AppCompatActivity {
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        CommonTitleBarLayout titleBarLayout = findViewById(R.id.title_bar);
        titleBarLayout.setTitle("2121212");
        titleBarLayout.setLeftListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                finish();
            }
        });
    }
}

以上就是实现一个自定义组合控件的代码:可以发现我们通过了两种方式来控制标题栏的内容和样式:1、自定义属性;2、对外提供相关设置接口(二者选其一或者都选,因为xml是布局的时候配置的,比较固定;提供java接口可以灵活进行设置)

二、继承系统控件(如:拓展TextView功能)

继承系统的控件可以分为继承View子类(如TextVIew等)和继承ViewGroup子类(如LinearLayout等),根据业务需求的不同,实现的方式也会有比较大的差异。这里介绍一个比较简单的,继承自View的实现方式。

业务需求:为文字中间添加一条横线。

因为这种实现方式会复用系统的逻辑,大多数情况下我们希望复用系统的onMeaseuronLayout流程,所以我们只需要重写onDraw方法 ,实现非常简单

/**
 * Created by BinKang on 2021/1/12.
 * Des :文本中间划横线
 */
public class LineTextView extends TextView {

    private Paint mPaint;
    public LineTextView(Context context) {
        super(context);
        init();
    }

    public LineTextView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init();
    }

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

    //构造方法中初始化工作
    private void init() {
        mPaint = new Paint();
        mPaint.setColor(Color.RED);
    }

    //重写draw方法,绘制我们需要的中间线
    //这里我们只需要重写onDraw方法就行,一些onMeasure方法已经在父类TextView做好了,不需要我们去管,和平常使用TextView正常使用就行
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        int width = getWidth();
        int height = getHeight();
        //绘制中心曲线,起点坐标(0,height/2),终点坐标(width,height/2)
        canvas.drawLine(0, height / 2, width, height / 2, mPaint);
    }
}

使用:

<com.example.testproject.LineTextView
        android:layout_
        android:layout_
        android:text="这段话没用了" />

效果:

三、直接继承View

直接继承View会比上一种实现方复杂一些,这种方法的使用情景下,完全没有复用系统控件的逻辑,除了要重写onDraw外还需要对onMeasure方法进行重写。

我们用自定义View来绘制一个圆形。

public class RoundView extends View {

    private Paint mPaint;

    public RoundView(Context context) {
        super(context);
        init();
    }

    public RoundView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init();
    }

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

    private void init() {
        mPaint = new Paint();
        mPaint.setColor(Color.RED);
        mPaint.setAntiAlias(true);//去掉边缘锯齿状
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);//View的内部有实现默认的onMeasure方法,但在View的源码当中并没有对AT_MOST和EXACTLY两个模式做出区分,也就是说View在wrap_content和match_parent两个模式下是完全相同的,都会是match_parent,显然这与我们平时用的View不同,所以我们要重写onMeasure方法

        int widthSize = MeasureSpec.getSize(widthMeasureSpec);
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int heightSize = MeasureSpec.getSize(heightMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);

        //处理wrap_contentde情况
        if (widthMode == MeasureSpec.AT_MOST && heightMode == MeasureSpec.AT_MOST) {
            setMeasuredDimension(300, 300);
        } else if (widthMode == MeasureSpec.AT_MOST) {
            setMeasuredDimension(300, heightSize);
        } else if (heightMode == MeasureSpec.AT_MOST) {
            setMeasuredDimension(widthSize, 300);
        }
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //获取各个边距的padding值
        int paddingLeft = getPaddingLeft();
        int paddingRight = getPaddingRight();
        int paddingTop = getPaddingTop();
        int paddingBottom = getPaddingBottom();
        //获取绘制的View的宽度
        int width = getWidth() - paddingLeft - paddingRight;
        //获取绘制的View的高度
        int height = getHeight() - paddingTop - paddingBottom;
        //绘制View,左上角坐标(0+paddingLeft,0+paddingTop),右下角坐标(width+paddingLeft,height+paddingTop)
        canvas.drawRoundRect(0 + paddingLeft, 0 + paddingTop, width + paddingLeft, height + paddingTop, width / 2, width / 2, mPaint);
    }
}

注意:

1、我们实现的onMeasure()方法:super.onMeasure(widthMeasureSpec, heightMeasureSpec);是使用了系统View的测量算法,我们下面复习了setMeasureDimension()方法,所以这个super是没有的,可以注释掉;为什么不用系统的呢?下面跟进去看看系统的实现:

可以看到:在View的源码当中并没有对AT_MOSTEXACTLY两个模式做出区分,也就是说View在wrap_contentmatch_parent两个模式下是完全相同的,都会是match_parent。所以要重写onMeasure()。

四、继承ViewGroup

自定义ViewGroup的过程相对最复杂一些,因为除了要对自身的大小和位置进行测量之外,还需要对子View的测量参数负责。相关实例在上一篇文章详细讲解了,实战FlowLayout简易的流式布局。

Android自定义View系列之详解绘制流程

 

 

栏目