Android中所有控件(也称组件)都继承自adnroid.view.View类,android.view.ViewGroup是View类的重要子类,绝大多书的布局类就继承自ViewGroup类。

   

 

   自定义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):

    

        
        
        
        
        
    

   

    其中inputType使用了android系统已经定义的属性,注意书写格式。

 3. 实现PassWordView类

  

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 * 

 * leftComponent是一个EditText * RightComponent是一个CheckBox * 

 * 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

  

    
    
    

  

   文件:CombinePassWordViewActivity.java

 

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组件,一般情况通过组合已有的的组件来实现复杂组件相对更容易一些,也能够得到组件重用的福利;现有组件不能满足的情况下可以考虑绘制组件,该方式最为原始和灵活。