前面说过了，自定义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);
}
}
