Android中的自定义控件


Android中的自定义控件很常用,尤其时在哪些布局嵌套里面,使用嵌套将会有大量的代码,可读性差,通过自定义控件后即可提高可维护性和复用性让代码更简洁,明了

自定义View需要知道的:


1.自定义开关,需要的数据为图片的背景和前景
2.在oncreate方法中自定义提供设置背景和前景图片的方法以及相关的业务方法
3.整个绘制过程再onPause方法调用之后执行
4.在view中重写onMeasure方法在计算宽高,宽高即为背景图片的宽和高,通过重写setMeasuredDimension方法
5.在view中重写onDraw绘制内容,通过canvas.drawBitmap方法,先绘制背景,再绘制前景
添加监听的步骤(同创建回调的步骤)
1.定义一个接口
2.定义接口中为实现的业务逻辑方法
3.传递一个实现了此接口的类的对象
4.获取传递进来的对象,再合适的地方调用

自定义控件的属性的步骤如下:


1.再values下创建一个attrs.xml文件
2.在resources下声明declare-styleable节点,在里面添加自己想要的属性以及属性值的类型
1
2
3
4
5
6
7
8
9
10
<?xml version="1.0" encoding="utf-8"?>
<resources>

    <declare-styleable name="ToggleView">
        <attr name="switch_background" format="reference" />
        <attr name="slide_backgaround" format="reference" />
        <attr name="switch_state" format="boolean" />
    </declare-styleable>

</resources>


3.在R文件的attr中会自动生成相应的代码
4.使用时,在使用自定义控件的xml文件中声明一个自己的名空间
xmlns:android=”http://schemas.android.com/apk/res/android"
xmlns:”自己随便写”=”http://schemas.android.com/apk/res/'包名' “
如:
xmlns:niyang=”http://schemas.android.com/apk/res/com.example.mytoggleview"
6.调用时格式为: niyang:switch_state=”false”

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:niyang="http://schemas.android.com/apk/res/com.example.mytoggleview"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.mytoggleview.MainActivity" >

    <com.example.mytoggleview.view.ToggleView
        android:id="@+id/toggle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        niyang:slide_backgaround="@drawable/slide_button"
        niyang:switch_background="@drawable/switch_background"
        niyang:switch_state="false" />

</RelativeLayout>


7.在自定义View的构造方法中调用
attrs.getAttributeResourceValue(namespace, attribute, defaultValue)方法获取属性值
参数1表示自定义的名空间,参数2表示想要获取属性value的属性key,参数3是默认值
8.将获取到的属性值调用set方法设置到相应的控件上

总代码如下


attrs.xml
1
2
3
4
5
6
7
8
9
10
<?xml version="1.0" encoding="utf-8"?>
<resources>

    <declare-styleable name="ToggleView">
        <attr name="switch_background" format="reference" />
        <attr name="slide_backgaround" format="reference" />
        <attr name="switch_state" format="boolean" />
    </declare-styleable>

</resources>


activity_main.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:niyang="http://schemas.android.com/apk/res/com.example.mytoggleview"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.mytoggleview.MainActivity" >

    <com.example.mytoggleview.view.ToggleView
        android:id="@+id/toggle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        niyang:slide_backgaround="@drawable/slide_button"
        niyang:switch_background="@drawable/switch_background"
        niyang:switch_state="false" />

</RelativeLayout>


ToggleView.java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
package com.example.mytoggleview.view;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;

/**
 * @author niyang
 *
 */
public class ToggleView extends View {

	private Bitmap switchBackgroundBitmap;
	private Bitmap SlideButtonBitmap;
	private Paint paint;
	private boolean mSwitchState = false;
	private float currentX;
	private OnSwitchStateUpdateListener onSwitchStateUpdateListener;

	public ToggleView(Context context) {
		super(context);
		init();
	}
	
	
	/**设置属性
	 * @param context
	 * @param attrs
	 */
	public ToggleView(Context context, AttributeSet attrs) {
		super(context, attrs);
		init();
		String namespace = "http://schemas.android.com/apk/res/com.example.mytoggleview";

		int SwitchBackgarounde = attrs.getAttributeResourceValue(namespace, "switch_background", -1);
		int SlideButtonBackgaround = attrs.getAttributeResourceValue(namespace, "slide_backgaround", -1);

		mSwitchState = attrs.getAttributeBooleanValue(namespace, "switch_state", false);

		setSwitchBackgaroundResource(SwitchBackgarounde);
		setSlideButtonBackgaround(SlideButtonBackgaround);

		setState(mSwitchState);
	}

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

	public void init() {
		paint = new Paint();
	}

	boolean isTouch = false;

	@Override
	public boolean onTouchEvent(MotionEvent event) {

		switch (event.getAction()) {

		case MotionEvent.ACTION_DOWN:
			isTouch = true;
			currentX = event.getX();

			break;
		case MotionEvent.ACTION_UP:

			currentX = event.getX();
			isTouch = false;

			float center = switchBackgroundBitmap.getWidth() / 2.0f;
			boolean state = currentX > center;

			if (state != mSwitchState && onSwitchStateUpdateListener != null) {
				// TODO
				onSwitchStateUpdateListener.onStateUpdate(state);
			}
			mSwitchState = state;
			break;
		case MotionEvent.ACTION_MOVE:
			currentX = event.getX();

			break;
		}
		invalidate();// 会引发onDraw被调用,里面的变量会重新生效

		return true;
	}

	@Override
	protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
		setMeasuredDimension(switchBackgroundBitmap.getWidth(), switchBackgroundBitmap.getHeight());
	}

	@Override
	protected void onDraw(Canvas canvas) {

		canvas.drawBitmap(switchBackgroundBitmap, 0, 0, paint);
		System.out.println("isTouch" + isTouch);
		if (isTouch) {
			// 根据用户触摸到的位置划动滑块
			float newLeft = currentX - SlideButtonBitmap.getWidth() / 2.0f;
			float maxLeft = switchBackgroundBitmap.getWidth() - SlideButtonBitmap.getWidth();
			if (newLeft < 0) {
				newLeft = 0;
			} else if (newLeft > maxLeft) {
				newLeft = maxLeft;
			}
			canvas.drawBitmap(SlideButtonBitmap, newLeft, 0, paint);
		} else {

			if (mSwitchState) {
				int left = switchBackgroundBitmap.getWidth() - SlideButtonBitmap.getWidth();
				canvas.drawBitmap(SlideButtonBitmap, left, 0, paint);
			} else {
				canvas.drawBitmap(SlideButtonBitmap, 0, 0, paint);
			}
		}
	}

	/**
	 * 设置背景图片
	 * 
	 * @param switchBackground
	 */
	public void setSwitchBackgaroundResource(int switchBackground) {
		switchBackgroundBitmap = BitmapFactory.decodeResource(getResources(), switchBackground);
	}

	/**
	 * 设置滑块图片资源
	 * 
	 * @param slideButton
	 */
	public void setSlideButtonBackgaround(int slideButton) {
		SlideButtonBitmap = BitmapFactory.decodeResource(getResources(), slideButton);
	}

	/**
	 * 设置滑块当前的状态
	 * 
	 * @param b
	 */
	public void setState(boolean mSwitchState) {
		this.mSwitchState = mSwitchState;
	}

	public interface OnSwitchStateUpdateListener {
		public void onStateUpdate(boolean state);
	}

	public void setOnSwitchStateUpdateListener(OnSwitchStateUpdateListener onSwitchStateUpdateListener) {
		this.onSwitchStateUpdateListener = onSwitchStateUpdateListener;

	}
}


运行截图如下:

赏

谢谢你请我吃糖果

扫一扫，分享到微信

微信分享二维码
本站总访问量40718次