‘壹’ android自定义控件，一般遵循什么样的原则
开发自定义控件的步骤:
1、了解View的工作原理
2、 编写继承自View的子类
3、 为自定义View类增加属性
4、 绘制控件
5、 响应用户消息
6 、自定义回调函数
一、View结构原理
Android系统的视图结构的设计也采用了组合模式，即View作为所有图形的基类，Viewgroup对View继承扩展为视图容器类。
View定义了绘图的基本操作
基本操作由三个函数完成：measure()、layout()、draw()，其内部又分别包含了onMeasure()、onLayout()、onDraw()三个子方法。具体操作如下：
1、measure操作
measure操作主要用于计算视图的大小，即视图的宽度和长度。在view中定义为final类型，要求子类不能修改。measure()函数中又会调用下面的函数：
（1）onMeasure()，视图大小的将在这里最终确定，也就是说measure只是对onMeasure的一个包装，子类可以覆写onMeasure()方法实现自己的计算视图大小的方式，并通过setMeasuredDimension(width, height)保存计算结果。
2、layout操作
layout操作用于设置视图在屏幕中显示的位置。在view中定义为final类型，要求子类不能修改。layout()函数中有两个基本操作：
（1）setFrame（l,t,r,b），l,t,r,b即子视图在父视图中的具体位置，该函数用于将这些参数保存起来；
（2）onLayout()，在View中这个函数什么都不会做，提供该函数主要是为viewGroup类型布局子视图用的；
3、draw操作
draw操作利用前两部得到的参数，将视图显示在屏幕上，到这里也就完成了整个的视图绘制工作。子类也不应该修改该方法，因为其内部定义了绘图的基本操作：
（1）绘制背景；
（2）如果要视图显示渐变框，这里会做一些准备工作；
（3）绘制视图本身，即调用onDraw()函数。在view中onDraw()是个空函数，也就是说具体的视图都要覆写该函数来实现自己的显示（比如TextView在这里实现了绘制文字的过程）。而对于ViewGroup则不需要实现该函数，因为作为容器是“没有内容“的，其包含了多个子view，而子View已经实现了自己的绘制方法，因此只需要告诉子view绘制自己就可以了，也就是下面的dispatchDraw()方法;
（4）绘制子视图，即dispatchDraw()函数。在view中这是个空函数，具体的视图不需要实现该方法，它是专门为容器类准备的，也就是容器类必须实现该方法；
（5）如果需要（应用程序调用了setVerticalFadingEdge或者setHorizontalFadingEdge），开始绘制渐变框；
（6）绘制滚动条；
从上面可以看出自定义View需要最少覆写onMeasure()和onDraw()两个方法。
二、View类的构造方法
创建自定义控件的3种主要实现方式:
1）继承已有的控件来实现自定义控件: 主要是当要实现的控件和已有的控件在很多方面比较类似, 通过对已有控件的扩展来满足要求。
2）通过继承一个布局文件实现自定义控件，一般来说做组合控件时可以通过这个方式来实现。
注意此时不用onDraw方法，在构造广告中通过inflater加载自定义控件的布局文件，再addView(view)，自定义控件的图形界面就加载进来了。
3）通过继承view类来实现自定义控件，使用GDI绘制出组件界面，一般无法通过上述两种方式来实现时用该方式。
View(Context context)
Simple constructor to use when creating a view from code.
View(Context context, AttributeSet attrs)
Constructor that is called when inflating a view from XML.
View(Context context, AttributeSet attrs, int defStyle)
Perform inflation from XML and apply a class-specific base style.
三、自定义View增加属性的两种方法：
1）在View类中定义。通过构造函数中引入的AttributeSet 去查找XML布局的属性名称，然后找到它对应引用的资源ID去找值。
案例：实现一个带文字的图片（图片、文字是onDraw方法重绘实现）
public class MyView extends View {
private String mtext;
private int msrc;
public MyView(Context context) {
super(context);
// TODO Auto-generated constructor stub
}
public MyView(Context context, AttributeSet attrs) {
super(context, attrs);
// TODO Auto-generated constructor stub
int resourceId = 0;
int textId = attrs.getAttributeResourceValue(null, "Text",0);
int srcId = attrs.getAttributeResourceValue(null, "Src", 0);
mtext = context.getResources().getText(textId).toString();
msrc = srcId;
}
@Override
protected void onDraw(Canvas canvas) {
// TODO Auto-generated method stub
Paint paint = new Paint();
paint.setColor(Color.RED);
InputStream is = getResources().openRawResource(msrc);
Bitmap mBitmap = BitmapFactory.decodeStream(is);
int bh = mBitmap.getHeight();
int bw = mBitmap.getWidth();
canvas.drawBitmap(mBitmap, 0,0, paint);
//canvas.drawCircle(40, 90, 15, paint);
canvas.drawText(mtext, bw/2, 30, paint);
}
}
布局文件：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<com.example.myimageview2.MyView
android:id="@+id/myView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
Text="@string/hello_world"
Src="@drawable/xh"/>
</LinearLayout>
属性Text, Src在自定义View类的构造方法中读取。
2）通过XML为View注册属性。与Android提供的标准属性写法一样。
案例: 实现一个带文字说明的ImageView (ImageView+TextView组合，文字说明，可在布局文件中设置位置)
public class MyImageView extends LinearLayout {
public MyImageView(Context context) {
super(context);
// TODO Auto-generated constructor stub
}
public MyImageView(Context context, AttributeSet attrs) {
super(context, attrs);
// TODO Auto-generated constructor stub
int resourceId = -1;
TypedArray typedArray = context.obtainStyledAttributes(attrs,
R.styleable.MyImageView);
ImageView iv = new ImageView(context);
TextView tv = new TextView(context);
int N = typedArray.getIndexCount();
for (int i = 0; i < N; i++) {
int attr = typedArray.getIndex(i);
switch (attr) {
case R.styleable.MyImageView_Oriental:
resourceId = typedArray.getInt(
R.styleable.MyImageView_Oriental, 0);
this.setOrientation(resourceId == 1 ? LinearLayout.HORIZONTAL
: LinearLayout.VERTICAL);
break;
case R.styleable.MyImageView_Text:
resourceId = typedArray.getResourceId(
R.styleable.MyImageView_Text, 0);
tv.setText(resourceId > 0 ? typedArray.getResources().getText(
resourceId) : typedArray
.getString(R.styleable.MyImageView_Text));
break;
case R.styleable.MyImageView_Src:
resourceId = typedArray.getResourceId(
R.styleable.MyImageView_Src, 0);
iv.setImageResource(resourceId > 0 ?resourceId:R.drawable.ic_launcher);
break;
}
}
addView(iv);
addView(tv);
typedArray.recycle();
}
}
attrs.xml进行属性声明， 文件放在values目录下
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="MyImageView">
<attr name="Text" format="reference|string"></attr>
<attr name="Oriental" >
<enum name="Horizontal" value="1"></enum>
<enum name="Vertical" value="0"></enum>
</attr>
<attr name="Src" format="reference|integer"></attr>
</declare-styleable>
</resources>
MainActivity的布局文件：先定义命名空间 xmlns:uview="http://schemas.android.com/apk/res/com.example.myimageview2"
然后可以像使用系统的属性一样使用：uview:Oriental="Vertical"
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:uview="http://schemas.android.com/apk/res/com.example.myimageview2"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/hello_world" />
<com.example.myimageview2.MyImageView
android:id="@+id/myImageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
uview:Text="这是一个图片说明"
uview:Src="@drawable/tw"
uview:Oriental="Vertical">
</com.example.myimageview2.MyImageView>
</LinearLayout>
四、控件绘制 onDraw()
五、
六、自定义View的方法
onFinishInflate() 回调方法，当应用从XML加载该组件并用它构建界面之后调用的方法
onMeasure() 检测View组件及其子组件的大小
onLayout() 当该组件需要分配其子组件的位置、大小时
onSizeChange() 当该组件的大小被改变时
onDraw() 当组件将要绘制它的内容时
onKeyDown 当按下某个键盘时
onKeyUp 当松开某个键盘时
onTrackballEvent 当发生轨迹球事件时
onTouchEvent 当发生触屏事件时
onWindowFocusChanged(boolean) 当该组件得到、失去焦点时
onAtrrachedToWindow() 当把该组件放入到某个窗口时
onDetachedFromWindow() 当把该组件从某个窗口上分离时触发的方法
onWindowVisibilityChanged(int): 当包含该组件的窗口的可见性发生改变时触发的方法
‘贰’ Android轮盘控件-自定义
背景：产品需要对游戏的按键做成圆形，且可以下发，点击效果相当于操作按键
初期参照过市面上的开源，没有完全匹配要求的，最终还是自己动手做了一个，整理下了总体实现的思路和关键点
先上视频
1.绘制扇形区域和中心圆形区域
2.手指触摸位置判断（中心，扇形区域），选中区域重新绘制背景色
3.绘制中心圆弧和扇形之间白色线条
4.扇形区域文字绘制
5.为了特效，设计给的一些背景图的绘制
1.Android中扇形绘制起始点默认是水平方向顺时针方向，开始绘制
2.为了方便计算,canvas最好先移动中心位置（ canvas.translate(mWRadius, mWRadius)），原点坐标才会为（0，0）
1.扇形绘制（无中心部分）： 1- 扇形 2-中心圆形 使用 Path.Op.DIFFERENCE 属性就是代表
绘制图 = 图1--图1和图2的交集
* 获取绘制弧度所需要的path
2.扇形区域的保存，由于扇形的path已经保存在 mRegionList,后面直接根据手指的(x,y)判断所在扇形区域根据扇形的path设置
3.扇形中的文字绘制 (为了文字居中，首先获取角度的一半，获取中心圆形到圆弧2点的中间坐标，然后在中间坐标绘制文字)
4.圆形中心和弧形间线条的绘制(思路：根据角度找到内部圆形的坐标（x1,y2），在找到圆弧上的点(x2,y2)，path连起来，然后绘制线条)
5.中间文字的绘制和中心圆形位置选中和未选中用的是图片绘制，这个就没啥可说的了
6.其实该控件还支持合并，拆解，缩放，拖拽 ，但是为了简洁点，都已经被我干掉了
‘叁’ android设计界面时控件有多种排列方法，其中常用布局方式有
在android中我们常用的布局方式有这么几种：LinearLayout (线性布局),RelativeLayout (相对布局),TableLayout (表格布局),AbsoluteLayout (绝对布局),FrameLayout (帧布局)。LinearLayout 和 RelativeLayout 应该又是其中用的较多的两种。AbsoluteLayout 比较少用(我自己还没用过)，因为它是按屏幕的绝对位置来布局的如果屏幕大小发生改变的话控件的位置也发生了改变。这个就相当于HTML中的绝对布局一样，一般不推荐使用。LinearLayout 顾名思义就是一条条的将控件布置下去，线性布局分为水平线性和垂直线性二者的属性分别为
android:orientation="horizontal" android:orientation="vertical" 。xmlns:android="http://schemas.android.com/apk/res/android" 很多人对这个感到困惑，其实它就是一个命名空间。RelativeLayout 相对布局。里面的每个控件之间的关系都是相对的。如果不设置相对关系的话默认摆放在屏幕左上角。重要属性如下：
android:layout_toRightOf="@id/city" ：与id为city的控件的右边对齐。
android:layout_alignTop="@id/city" : 与id为city的控件的顶部对齐。
给出示意图如下所示：
android:layout_width="fill_parent" android:layout_height="wrap_content" 我一般在线性布局里面套相对布局，这时候需要注意上面两个属性相对布局的宽度可以设置为填充父控件，但是高度一般不要设置为填充父控件因为这样的话我想在相对布局外面在放控件就没有效果了因为屏幕已经被相对布局全部占据。
不管是用什么布局，宽度与高度这两个属性一定要弄清楚刚开始的时候我经常会发现有些控件没显示在界面上或者占据了整个屏幕，一检查原来是这里设置错了。还有不要忘记这两个属性在一般控件中都是不可或缺的，忘记设置的话就会报错。
‘肆’ 如何系统的学习android自定义各种酷炫控件
首先，为什么需要自定义View？
1. 现有的View满足不了你的需求，也没有办法从已有控件派生一个出来；界面元素需要自己绘制。
2. 现有View可以满足要求，把它做成自定义View只是为了抽象：为这个自定义View提供若干方法，方便调用着操纵View。通常做法是派生一个已有View，或者结合xml文件直接inflate。
目前常用的基本上是第二种方式，这种方式非常简单，与通常的View使用方法基本相同，但是作用却异常强大，拥有了这一层抽象，代码更加整洁也更容易维护，通过抽取自定义View的公共操作方法也减少了冗余代码，虽然简单，但不可忽视。
大多数人感觉神秘的应该是第一种，自绘控件，完全自定义；但其实这两种方式归根结底全部都是自绘；不信你去看看TextView的源码。只不过通常情况下系统帮我们绘制好了一些控件给开发者使用；OK，接下来就是一个问题。
在讲述之前我还是啰嗦地重申一下，复用已有View是最最常用也最有效的自定义View方式，必须熟练使用。
其次，如何自定义View？
想一下，一个View给用户最直观的感知是什么？静止的形态和动态的操作。静止的形态意思就是一个View呈现到用户眼里长成啥样子？动态操作指的是，用户与View之间可以有哪些交互？点击滑动View的不同地方会有什么反应？
1. 静态
如果一个自定义View的样式都没有办法绘制出来，那么后续的交互就是空谈了；我们一步步分解这个问题。
1.1 你的自定义View分为哪几个部分？是所有的部分都需要手动绘制还是只有一部分——找出需要完全自定义的部分，其他的部分用已有View实现。
1.2 你的自定义View的每个部分长成什么样，占用多大空间——结合理论知识View的measure过程，比如match_parent, wrap_content结合父View的laout_params参数最终测量大小是多少？
1.3 你的自定义View每个部分摆放在哪？相对位置如何？——View的layout过程。
1.4 你的自定义View那些完全需要手动绘制的部分是什么样，如何绘制？
你得学会操纵Canvas，学会2D绘图，什么？你跟我说3D，OpenGL？学会这些再说。
‘伍’ android设置控件样式（边框颜色，圆角）和图片样式（圆角）
本文链接：https://blog.csdn.net/weixin_37577039/article/details/79090433
```
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="@color/colorAccent" />
<!-- 这里是设置为四周 也可以单独设置某个位置为圆角-->
<corners android:topLeftRadius="5dp"
android:topRightRadius="5dp"
android:bottomRightRadius="5dp"
android:bottomLeftRadius="5dp"/>
<stroke android:width="1dp" android:color="#000000" />
</shape
```
```
<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- 边框颜色值 -->
<item>
<shape>
<solid android:color="#3bbaff" />
</shape>
</item>
<!--这个是按钮边框设置为四周 并且宽度为1-->
<item
android:right="1dp"
android:left="1dp"
android:top="1dp"
android:bottom="1dp">
<shape>
<!--这个是背景颜色-->
<solid android:color="#ffffff" />
<!--这个是按钮中的字体与按钮内的四周边距-->
<padding android:bottom="10dp"
android:left="10dp"
android:right="10dp"
android:top="10dp" />
</shape>
</item>
</layer-list>
```
使用：
```android:background="@drawable/button_edge"```
```
<?xml version="1.0" encoding="UTF-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<!-- 填充的颜色 -->
<solid android:color="#FFFFFF" />
<!-- android:radius 弧形的半径 -->
<!-- 设置按钮的四个角为弧形 -->
<corners
android:radius="5dip" />
<!--也可单独设置-->
<!-- <corners -->
<!-- android:topLeftRadius="10dp"-->
<!-- android:topRightRadius="10dp"-->
<!-- android:bottomRightRadius="10dp"-->
<!-- android:bottomLeftRadius="10dp"-->
<!-- /> -->
**设置文字padding**
<!-- padding：Button里面的文字与Button边界的间隔 -->
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp"
/>
</shape>
```
```
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#FFFFFF" />
<corners android:topLeftRadius="10dp"
android:topRightRadius="10dp"
android:bottomRightRadius="10dp"
android:bottomLeftRadius="10dp"/>
</shape>
```
使用：
```
android:background="@drawable/image_circle"
```
```
Glide.with(MainActivity.this).load(croppedUri)
.transform(new GlideRectRound(MainActivity.this,6)).into(headIcon);
```
```
import android.content.Context;
import android.content.res.Resources;
import android.graphics.Bitmap;
import android.graphics.BitmapShader;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.RectF;
import android.util.Log;
import com.bumptech.glide.load.engine.bitmap_recycle.BitmapPool;
import com.bumptech.glide.load.resource.bitmap.BitmapTransformation;
/**
* Created by SiHao on 2018/3/3.
* Glide 的 圆角 图片 工具类
*/
public class GlideRectRound extends BitmapTransformation {
private static float radius = 0f;
// 构造方法1 无传入圆角度数 设置默认值为5
public GlideRectRound(Context context) {
this(context, 5);
}
// 构造方法2 传入圆角度数
public GlideRectRound(Context context, int dp) {
super(context);
// 设置圆角度数
radius = Resources.getSystem().getDisplayMetrics().density * dp;
}
// 重写该方法 返回修改后的Bitmap
@Override
protected Bitmap transform(BitmapPool pool, Bitmap toTransform, int outWidth, int outHeight) {
return rectRoundCrop(pool,toTransform);
}
@Override
public String getId() {
Log.e("getID",getClass().getName() + Math.round(radius));
return getClass().getName() + Math.round(radius); // 四舍五入
}
private Bitmap rectRoundCrop(BitmapPool pool, Bitmap source){
if (source == null) return null;
Bitmap result = pool.get(source.getWidth(), source.getHeight(), Bitmap.Config.ARGB_8888); // ARGB_4444——代表4x4位ARGB位图,ARGB_8888——代表4x8位ARGB位图
if (result == null) {
result = Bitmap.createBitmap(source.getWidth(), source.getHeight(), Bitmap.Config.ARGB_8888);
}
Canvas canvas = new Canvas(result);
Paint paint = new Paint();
// setShader 对图像进行渲染
// 子类之一 BitmapShader设置Bitmap的变换 TileMode 有CLAMP （取bitmap边缘的最后一个像素进行扩展），REPEAT（水平地重复整张bitmap）
//MIRROR(和REPEAT类似，但是每次重复的时候，将bitmap进行翻转)
paint.setShader(new BitmapShader(source, BitmapShader.TileMode.CLAMP, BitmapShader.TileMode.CLAMP));
paint.setAntiAlias(true); // 抗锯齿
RectF rectF = new RectF(0f, 0f, source.getWidth(), source.getHeight());
canvas.drawRoundRect(rectF, radius, radius, paint);
return result;
}
}
```
圆角：
```
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapShader;
import android.graphics.Canvas;
import android.graphics.Paint;
import com.bumptech.glide.load.engine.bitmap_recycle.BitmapPool;
import com.bumptech.glide.load.resource.bitmap.BitmapTransformation;
/**
* Created by SiHao on 2018/3/3.
* Glide圆形图片工具类
*/
public class GlideCircleBitmap extends BitmapTransformation{
public GlideCircleBitmap(Context context) {
super(context);
}
// 重写该方法 返回修改后的Bitmap
@Override
protected Bitmap transform(BitmapPool pool, Bitmap toTransform, int outWidth, int outHeight) {
return circleCrop(pool, toTransform);
}
@Override
public String getId() {
return getClass().getName();
}
private static Bitmap circleCrop(BitmapPool pool, Bitmap source) {
if (source == null) return null;
// 边长取长宽最小值
int size = Math.min(source.getWidth(), source.getHeight());
int x = (source.getWidth() - size) / 2;
int y = (source.getHeight() - size) / 2;
// TODO this could be acquired from the pool too
Bitmap squared = Bitmap.createBitmap(source, x, y, size, size);
Bitmap result = pool.get(size, size, Bitmap.Config.ARGB_8888);// ARGB_4444——代表4x4位ARGB位图,ARGB_8888——代表4x8位ARGB位图
if (result == null) {
result = Bitmap.createBitmap(size, size, Bitmap.Config.ARGB_8888);
}
Canvas canvas = new Canvas(result);
Paint paint = new Paint();
// setShader 对图像进行渲染
// 子类之一 BitmapShader设置Bitmap的变换 TileMode 有CLAMP （取bitmap边缘的最后一个像素进行扩展），REPEAT（水平地重复整张bitmap）
//MIRROR(和REPEAT类似，但是每次重复的时候，将bitmap进行翻转)
paint.setShader(new BitmapShader(squared, BitmapShader.TileMode.CLAMP, BitmapShader.TileMode.CLAMP));
paint.setAntiAlias(true);// 抗锯齿
// 半径取 size的一半
float r = size / 2f;
canvas.drawCircle(r, r, r, paint);
return result;
}
}
```
```
URL url = new URL(String类型的字符串); //将String类型的字符串转换为URL格式
holder.UserImage.setImageBitmap(BitmapFactory.decodeStream(url.openStream()));
```
```
//得到资源文件的BitMap
Bitmap image= BitmapFactory.decodeResource(getResources(),R.drawable.dog);
//创建RoundedBitmapDrawable对象
RoundedBitmapDrawable roundImg =RoundedBitmapDrawableFactory.create(getResources(),image);
//抗锯齿
roundImg.setAntiAlias(true);
//设置圆角半径
roundImg.setCornerRadius(30);
//设置显示图片
imageView.setImageDrawable(roundImg);
```
```
//如果是圆的时候，我们应该把bitmap图片进行剪切成正方形， 然后再设置圆角半径为正方形边长的一半即可
Bitmap image = BitmapFactory.decodeResource(getResources(), R.drawable.dog);
Bitmap bitmap = null;
//将长方形图片裁剪成正方形图片
if (image.getWidth() == image.getHeight()) {
bitmap = Bitmap.createBitmap(image, image.getWidth() / 2 - image.getHeight() / 2, 0, image.getHeight(), image.getHeight());
} else {
bitmap = Bitmap.createBitmap(image, 0, image.getHeight() / 2 - image.getWidth() / 2, image.getWidth(), image.getWidth());
}
RoundedBitmapDrawable roundedBitmapDrawable = RoundedBitmapDrawableFactory.create(getResources(), bitmap);
//圆角半径为正方形边长的一半
roundedBitmapDrawable.setCornerRadius(bitmap.getWidth() / 2);
//抗锯齿
roundedBitmapDrawable.setAntiAlias(true);
imageView.setImageDrawable(roundedBitmapDrawable);
```
‘陆’ android中怎样实现自定义控件中的组合控件
public
class
MyView
extends
View{
//
此处省略
构造方法
private
void
onDraw(Canvas
canvas){
//重写view的onDraw方法，绘制控件的样式
//这里你使用canvas来绘制，你布局中使用这个控件就是你绘制的样子
}
//然后你可以定义很多自己的一些方法，用来修改控件的样式
//假如你自定义的一个
进度条
的话，就要修改进度条值，你就可以自定义方法，让实现对象来改变进度值，记得修改后调用validate方法更新显示。（具体函数记不太清了）
}
大概就是这样实现的自定义控件，自定义控件的话优化是很重要的哦，不然性能会很差。
然后你要使用这个控件的话，在布局中就需要这样定义，假如这个自定义控件类是这样的：
xxx.xxx.MyView。
则使用时：