自定义View（二）

作者: Jackson杰 | 来源:发表于2017-04-21 14:48 被阅读0次

Android自定义View分类
自定义View-第二步:绘制基础图形
Android自定义View(三) -- drawText()
Android自定义View高级(一)-分类与流程
Android自定义View(七) -- 属性动画(下)
Android自定义View(六) -- 属性动画(上)
Android自定义View(五) -- 绘制顺序
Android自定义View(四) -- Canvas
Android自定义View的基础知识
自定义系统控件TextView 、ImageView

前面说过了，自定义View主要有下面三种：
1.对现有控件进行扩展
2.通过组合实现新的控件
3.重写View实现全新控件

对现有控件进行扩展

扩展了一个TextView，有内外两个矩形组成。代码如下：

public class MyTextView extends TextView{

    private Paint mPaint1,mPaint2;

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

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

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

    /**
     * 初始化
     */
    private void init(){
        mPaint1=new Paint();
        mPaint1.setColor(Color.RED);
        mPaint1.setStyle(Paint.Style.FILL);
        mPaint2=new Paint();
        mPaint2.setColor(Color.YELLOW);
        mPaint2.setStyle(Paint.Style.FILL);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        //在实现原生控件之间，实现我们的逻辑
        //绘制外层矩形
        canvas.drawRect(0,0,getMeasuredWidth(),getMeasuredHeight(),mPaint1);
        //绘制内层矩形
        canvas.drawRect(10,10,getMeasuredWidth()-10,getMeasuredHeight()-10,mPaint2);
        //保存画布状态
        canvas.save();
        // 绘制文字前各平移100像素
        canvas.translate(100, 100);
        //父类完成的方法，绘制文字
        super.onDraw(canvas);
        canvas.restore();
    }
}

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">
        <com.example.ahuang.viewandgroup.View.MyTextView
            android:layout_width="200dp"
            android:layout_height="100dp"
            android:layout_marginTop="20dp"
            android:layout_marginLeft="20dp"
            android:gravity="center"
            android:text="扩展的TextView"/>
    </LinearLayout>

在onDraw()方法里，有个 super.onDraw(canvas);调用父类的方法，但是在调用之前，我们可以实现自己的逻辑。这里这要是画了两个矩形，保存画布，并对画布进行了平移，平移之后调用了父类的onDraw()方法。可以看到，即便是我们在布局文件里用到了android:gravity="center"属性，android:text="扩展的TextView"属性还是平移了。

通过组合实现新的控件

创建组合控件，通常需要继承一个合适的ViewGroup，我们一般要给它指定一些可配置的属性，让它变得更具扩展性。例如，很多app都有跟下图类似的TopBar控件，我们完全可以自己定义一个类似的TopBar控件。

1.定义属性,在res的Values目录下创建一个attrs.xml的属性定义文件。主要是为TopBar提供可自定义的属性。

<resources>
    <declare-styleable name="TopBar">
        <!--中间title的自定义属性-->
        <attr name="mTitle" format="string"></attr>
        <attr name="mTitleSize" format="dimension"></attr>
        <attr name="mTitleColor" format="color"></attr>
        <!--左边图片的自发定义属性-->
        <attr name="mLeftBackGround" format="reference"></attr>
        <!--右边TextView的自定义属性-->
        <attr name="rightTitle" format="string"></attr>
        <attr name="rightTitleSize" format="dimension"></attr>
        <attr name="rightTextColor" format="color"></attr>
    </declare-styleable>
</resources>

我们定义了控件名字，字体颜色，背景3个属性，format是值该属性的取值类型:
一共有：string,color,demension,integer,enum,reference,float,boolean,fraction,flag;
reference：参考某一资源ID，color：颜色值，boolean：布尔值，dimension：尺寸值，float：浮点值
integer：整型值，string：字符串，fraction：百分数， enum：枚举值， flag：位或运算

2.自定义TopBar，获取自定义的属性。

public class TopBar extends RelativeLayout {
    //控件
    private ImageView img_left;
    private TextView tv_title;
    private TextView tv_right;
    // 布局属性，用来控制组件元素在ViewGroup中的位置
    private LayoutParams mLeftParams, mTitlepParams, mRightParams;

    // 左控件的属性值，即我们在atts.xml文件中定义的属性
    private Drawable mBackGround; //左侧图片的背景图
    //中间title的属性值
    private float mTitleTextSize;
    private int mTitleTextColor;
    private String mTitle;
    //右边TextView的属性值
    private int mRightTextColor;
    private float mRightTextSize;
    private String mRightText;


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

    public TopBar(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public TopBar(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        //设置背景色
        setBackgroundColor(0xFF190D31);
        //获得atts.xml定义的属性值，存储在TypedArray中
        TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.TopBar);
        //左侧图片
        mBackGround = ta.getDrawable(R.styleable.TopBar_mLeftBackGround);
        //中间title
        mTitleTextSize = ta.getDimension(R.styleable.TopBar_mTitleSize, 10);
        mTitleTextColor = ta.getColor(R.styleable.TopBar_mTitleColor, 0);
        mTitle = ta.getString(R.styleable.TopBar_mTitle);
        //右边Title
        mRightTextColor = ta.getColor(R.styleable.TopBar_rightTextColor, 0);
        mRightTextSize = ta.getDimension(R.styleable.TopBar_rightTitleSize, 1);
        mRightText = ta.getString(R.styleable.TopBar_rightTitle);
        // 获取完TypedArray的值后，一般要调用
        // recyle方法来避免重新创建的时候的错误
        ta.recycle();

        //创建控件
        img_left=new ImageView(context);
        tv_title=new TextView(context);
        tv_right=new TextView(context);

        // 为创建的组件元素赋值
        img_left.setBackground(mBackGround);

        tv_title.setText(mTitle);
        tv_title.setTextColor(mTitleTextColor);
        tv_title.setTextSize(mTitleTextSize);

        tv_right.setText(mRightText);
        tv_right.setTextColor(mRightTextColor);
        tv_right.setTextSize(mRightTextSize);

        //设置组件的位置
        mLeftParams=new LayoutParams(60, 60);
        mLeftParams.addRule(ALIGN_PARENT_LEFT,TRUE);
        mLeftParams.addRule(CENTER_VERTICAL,TRUE);
        addView(img_left,mLeftParams);
        mTitlepParams=new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
        mTitlepParams.addRule(CENTER_IN_PARENT,TRUE);
        addView(tv_title,mTitlepParams);
        mRightParams = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
        mRightParams.addRule(RelativeLayout.ALIGN_PARENT_RIGHT, TRUE);
        mRightParams.addRule(RelativeLayout.CENTER_VERTICAL, TRUE);
        addView(tv_right, mRightParams);
    }

3.在布局文件里引用我们自定义的TopBar
需要注意的是，在Android Studio中，第三方控件都使用如下代码来引入名字空间
xmlns:custom="http://schemas.android.com/apk/res-auto" 将引入的第三方控件的名字空间取为custom，之后在xml文件中使用自定义的属性时，就可以通过这个名字空间来引用。

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">
        <com.example.ahuang.viewandgroup.View.TopBar
            android:layout_width="match_parent"
            android:layout_height="45dp"
            custom:mLeftBackGround="@mipmap/back_icon"
            custom:mTitle="购物车"
            custom:mTitleColor="@android:color/white"
            custom:mTitleSize="5sp"
            custom:rightTextColor="@android:color/white"
            custom:rightTitle="编辑"
            custom:rightTitleSize="5sp"/>
    </LinearLayout>

4.虽然我们定义了需要的TopBar，但是它是还不能响应点击事件的，现在，我们让自定义的TopBar响应点击事件。修改代码如下：
在TopBar里加入回调接口，分别定义了左右控件的点击回调时间

 //定义接口，响应点击事件
    public interface topbarClickListener {
        //左按钮点击事件
        void leftClick();

        //右按钮点击事件
        void rightClick();
    }

定义回调接口，并暴露给调用者。

 // 映射传入的接口对象
    private topbarClickListener mListener;

 // 暴露一个方法给调用者来注册接口回调
    public void setOnTopbarClickListener(topbarClickListener mListener) {
        this.mListener = mListener;
    }

对控件设置回调事件

 img_left.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                mListener.leftClick();
            }
        });

        tv_right.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                mListener.rightClick();
            }
        });

在Activity里实现回调，实现控件的点击监听。

 mTopBar.setOnTopbarClickListener(new TopBar.topbarClickListener() {
            @Override
            public void leftClick() {
                Toast.makeText(CustomViewActivity.this, "click left", Toast.LENGTH_SHORT)
                        .show();
            }

            @Override
            public void rightClick() {
                Toast.makeText(CustomViewActivity.this, "click right", Toast.LENGTH_SHORT)
                        .show();
            }
        });

最后，要说明一点的是，TopBar一般在很多页面顶部引用，为了方便，我们可以放在一个头布局里面，然后再用到的地方通过include引用。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              xmlns:custom="http://schemas.android.com/apk/res-auto"
              android:layout_width="match_parent"
              android:layout_height="45dp">
    <com.example.ahuang.viewandgroup.View.TopBar
        android:id="@+id/topBar"
        android:layout_width="match_parent"
        android:layout_height="45dp"
        custom:mLeftBackGround="@mipmap/back_icon"
        custom:mTitle="购物车"
        custom:mTitleColor="@android:color/white"
        custom:mTitleSize="5sp"
        custom:rightTextColor="@android:color/white"
        custom:rightTitle="编辑"
        custom:rightTitleSize="5sp"/>

</LinearLayout>

在用到的地方，通过

<include layout="@layout/head_layout"></include> 添加控件。

重写View实现全新控件

如下图所示的图片，在很多音乐播放器上会有，但是android里没有现成的控件，所以可以自定义一个类似的控件。相信大家可以很快找到思路，也就是绘制一个个矩形，每个矩形之间稍微偏移一点距离即可。

1.初始化操作

 private void init() {
        mPaint = new Paint();
        mPaint.setColor(Color.GREEN);
        mPaint.setStyle(Paint.Style.FILL);
        mRectCount = 12;
    }

2.主绘制方法

@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        for (int i = 0; i < mRectCount; i++) {
            mRandom = Math.random();
            canvas.drawRect(mRectWidth * i + offset, (float) (mRectHeight * mRandom), mRectWidth * (i+1),
                   mRectHeight, mPaint);
        }
        postInvalidateDelayed(300);
    }

3.为了达到一个更好的效果，增加一个LinearGradient渐变效果

 @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        mWidth = getWidth();
        mRectWidth = mWidth / mRectCount; //音频条的宽度
        mRectHeight = getHeight();  //音频条的高度，要乘上一个随机数
        mLinearGradient=new LinearGradient(0,0,mRectWidth,mRectHeight,
                Color.BLUE,Color.GREEN, Shader.TileMode.CLAMP);
        mPaint.setShader(mLinearGradient);
    }

所有代码如下：

public class AudioBar extends View {

    private Paint mPaint;  //定义画笔
    private int mWidth; //屏幕的宽度
    private int mRectWidth;  //音频条的宽度
    private int mRectHeight;  //音频条的高度
    private int mRectCount; //音频条的个数
    private int offset = 5; //音频条的偏移量
    private double mRandom;  //随机数
    private LinearGradient mLinearGradient;


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

    public AudioBar(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

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

    private void init() {
        mPaint = new Paint();
        mPaint.setColor(Color.GREEN);
        mPaint.setStyle(Paint.Style.FILL);
        mRectCount = 12;
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        mWidth = getWidth();
        mRectWidth = mWidth / mRectCount; //音频条的宽度
        mRectHeight = getHeight();  //音频条的高度，要乘上一个随机数
        mLinearGradient=new LinearGradient(0,0,mRectWidth,mRectHeight,
                Color.BLUE,Color.GREEN, Shader.TileMode.CLAMP);
        mPaint.setShader(mLinearGradient);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        for (int i = 0; i < mRectCount; i++) {
            mRandom = Math.random();
            canvas.drawRect(mRectWidth * i + offset, (float) (mRectHeight * mRandom), mRectWidth * (i+1),
                   mRectHeight, mPaint);
        }
        postInvalidateDelayed(300);
    }
}

代码下载 https://github.com/baojie0327/ViewAndGroup

Android自定义View分类
Android自定义View主要分为二大类：一、单个控件自定View二、ViewGroup自定义View 一、单...
自定义View-第二步:绘制基础图形
前言根据Gcssloop所学习的自定义View整理与笔记。一、自定义View流程二、自定义View的代码超级...
Android自定义View(三) -- drawText()
前面学习了Android自定义View(一) -- 初识Android自定义View(二) -- Paint详解 ...
Android自定义View高级(一)-分类与流程
一.自定义View绘制流程二.自定义View分类自定义ViewGroup自定义ViewGroup一般是利用现有...
Android自定义View(七) -- 属性动画(下)
前面学习的内容:Android自定义View(一) -- 初识Android自定义View(二) -- Paint...
Android自定义View(六) -- 属性动画(上)
前面学习的内容:Android自定义View(一) -- 初识Android自定义View(二) -- Paint...
Android自定义View(五) -- 绘制顺序
前面学习的内容:Android自定义View(一) -- 初识Android自定义View(二) -- Paint...
Android自定义View(四) -- Canvas
前面学习的内容:Android自定义View(一) -- 初识Android自定义View(二) -- Paint...
Android自定义View的基础知识
一、自定义View的套路二、自定义属性的步骤三、自定义View的测量模式小结：如果子View的大小是固定的...
自定义系统控件TextView 、ImageView
一、自定义TextView 二、自定义ImageView 自定义View的属性，在View的构造方法中获得我们自定...