自定义Android组件基本可以从2个入口着手，一是继承Viewe类拿起画笔和画布绘制组件，而是通过继承View的子类和组合已有的组件的方式构造自定义的组件。
本文通过自定义一个PassWordView组件来实现密码能够通过点击点选框来决定是否显示。PassWordView组件类通过继承LinearLayout类和组合EditText，CheckBox组件实现。
效果如下图：
一： 实现上述密码框组件需要以下步骤：
a. 设计PassWordView组件
b. 自定义样式属性，res/value/attrs.xml
c. 创建PassWordView
c. 实现PassWordView的功能，如：事件，属性设置，组合组件
二： 使用密码框组件：
a. 使用PassWordView组件，设置属性
b. 在Activity中对其进行操作
三： 案例：
1. 密码框组件主要是组合EditText和CheckBox组件，通过CheckBox的选中状态来决定密码是否显示为明文，EditText和CheckBox组件要求并列一行。故采用LinearLayout布局。
2. 密码框组件的自定义样式属性，通常根据具体需要来定义。
PassWordView自定义组件中称EditText为left Component（左组件），CheckBox为right Component(右组件)。
定义样式属性(位置文件：res/value/attrs.xml)：
|
1
2
3
4
5
6
7
8
9
10
|
<
declare-styleable
name
=
"PassWordView"
>
<!--直接使用系统中已定义的语意明确的属性，不用设置format-->
<
attr
name
=
"android:inputType"
/>
<!--自定义属性-->
<
attr
name
=
"left_component_weight"
format
=
"float"
/>
<
attr
name
=
"right_component_weight"
format
=
"float"
/>
</
declare-styleable
>
|
其中inputType使用了android系统已经定义的属性，注意书写格式。
3. 实现PassWordView类
|
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
|
package
secondriver.viewlibrary;
import
android.content.Context;
import
android.content.res.TypedArray;
import
android.text.InputType;
import
android.text.method.HideReturnsTransformationMethod;
import
android.text.method.PasswordTransformationMethod;
import
android.util.AttributeSet;
import
android.view.ViewGroup;
import
android.widget.CheckBox;
import
android.widget.CompoundButton;
import
android.widget.EditText;
import
android.widget.LinearLayout;
/**
* PassWordView
* <p/>
* leftComponent是一个EditText
* RightComponent是一个CheckBox
* <p/>
* Author : secondriver
* Created : 2015/11/25
*/
public
class
PassWordView
extends
LinearLayout {
private
EditText mPassWordEditText;
private
CheckBox mShowCheckBox;
private
LinearLayout.LayoutParams mPassWordParams;
private
LinearLayout.LayoutParams mShowParams;
private
float
leftComponentWeight;
private
float
rightComponentWeight;
private
int
inputType;
public
PassWordView(Context context, AttributeSet attrs) {
super
(context, attrs);
initProperty(context, attrs);
initComponent(context);
}
private
final
void
initProperty(Context context, AttributeSet attrs) {
//获取设置的值,未设置使用默认值
TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.PassWordView);
leftComponentWeight = typedArray.getFloat(R.styleable.PassWordView_left_component_weight,
5
.0f);
rightComponentWeight = typedArray.getFloat(R.styleable.PassWordView_right_component_weight,
1
.0f);
//来自Android系统已定义的属性
inputType = typedArray.getInt(R.styleable.PassWordView_android_inputType, InputType.TYPE_TEXT_VARIATION_PASSWORD);
typedArray.recycle();
}
private
void
initComponent(Context context) {
mPassWordEditText =
new
EditText(context);
mPassWordEditText.setInputType(inputType);
mPassWordEditText.setTransformationMethod(PasswordTransformationMethod.getInstance());
mShowCheckBox =
new
CheckBox(context);
//通过权重来决定EditText和CheckBox占据父视图的空间的比例
mPassWordParams =
new
LinearLayout.LayoutParams(
0
, ViewGroup.LayoutParams.WRAP_CONTENT, leftComponentWeight);
mShowParams =
new
LinearLayout.LayoutParams(
0
, ViewGroup.LayoutParams.WRAP_CONTENT, rightComponentWeight);
//父视图是一个容器视图，指定水平排列子视图
setOrientation(HORIZONTAL);
addView(mPassWordEditText, mPassWordParams);
addView(mShowCheckBox, mShowParams);
addCheckBoxListener();
}
/**
* 获取PassWord
*
* @return
*/
public
String getPassWord() {
return
mPassWordEditText.getText().toString();
}
/**
* 获取PassWord组件
*
* @return
*/
public
EditText getPassWordEditText() {
return
mPassWordEditText;
}
private
final
void
addCheckBoxListener() {
/**
* CheckBox点击事件处理
*
* 如果选中EditText中的密码明文显示
*
* 如果未选中EditText中的密码黑点显示
*
*/
mShowCheckBox.setOnCheckedChangeListener(
new
CompoundButton.OnCheckedChangeListener() {
@Override
public
void
onCheckedChanged(CompoundButton buttonView,
boolean
isChecked) {
if
(isChecked) {
mPassWordEditText.setTransformationMethod(HideReturnsTransformationMethod.getInstance());
}
else
{
mPassWordEditText.setTransformationMethod(PasswordTransformationMethod.getInstance());
}
}
});
}
}
|
4. 使用PassWordView组件
文件：activity_combine_view.xml
|
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
|
<?
xml
version
=
"1.0"
encoding
=
"utf-8"
?>
<
LinearLayout
xmlns:android
=
"http://schemas.android.com/apk/res/android"
xmlns:passwordview
=
"http://schemas.android.com/apk/res-auto"
android:layout_width
=
"match_parent"
android:layout_height
=
"match_parent"
android:orientation
=
"vertical"
>
<
secondriver.viewlibrary.PassWordView
android:id
=
"@+id/password_view"
android:layout_width
=
"300dp"
android:layout_height
=
"wrap_content"
android:layout_margin
=
"10dp"
android:background
=
"#565354"
android:inputType
=
"textPassword"
android:padding
=
"10dp"
passwordview:left_component_weight
=
"5.0"
passwordview:right_component_weight
=
"1.0"
/>
<
Button
android:layout_width
=
"match_parent"
android:layout_height
=
"wrap_content"
android:onClick
=
"onShowPassWord"
android:text
=
"获取密码"
/>
<
TextView
android:id
=
"@+id/password_text_view"
android:layout_width
=
"match_parent"
android:layout_height
=
"wrap_content"
android:hint
=
"显示password"
/>
</
LinearLayout
>
|
文件：CombinePassWordViewActivity.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
|
package
secondriver.sdk.activity;
import
android.app.Activity;
import
android.os.Bundle;
import
android.view.View;
import
android.widget.TextView;
import
secondriver.sdk.R;
import
secondriver.viewlibrary.PassWordView;
/**
* Author : secondriver
* Created : 2015/11/25
*/
public
class
CombinePassWordViewActivity
extends
Activity {
private
PassWordView mPassWordView;
private
TextView mPassWordTextView;
@Override
protected
void
onCreate(Bundle savedInstanceState) {
super
.onCreate(savedInstanceState);
setContentView(R.layout.activity_combine_view);
mPassWordView = (PassWordView) findViewById(R.id.password_view);
mPassWordTextView = (TextView) findViewById(R.id.password_text_view);
}
public
void
onShowPassWord(View view) {
mPassWordTextView.setText(mPassWordView.getPassWord());
}
}
|
AndroidManifest.xml中添加CombinePassWordViewActivity即可。
5.结果
如文中一开始展示的效果图
6. 总结
本文主要演示的通过组合的方式实现自定义Android组件，一般情况通过组合已有的的组件来实现复杂组件相对更容易一些，也能够得到组件重用的福利；现有组件不能满足的情况下可以考虑绘制组件，该方式最为原始和灵活。
本文转自 secondriver 51CTO博客，原文链接：http://blog.51cto.com/aiilive/1716830，如需转载请自行联系原作者
