自訂Android組件之組合方式建立密碼框組件

標籤：android自訂群組件   view類層次圖   

 

   Android中所有控制項（也稱組件）都繼承自adnroid.view.View類，android.view.ViewGroup是View類的重要子類，絕大多書的布局類就繼承自ViewGroup類。

   附上一張基於Android Api21的View和Widget類圖

 

   自訂Android組件基本可以從2個入口著手，一是繼承Viewe類拿起畫筆和畫布繪製組件，而是通過繼承View的子類和組合已有的組件的方式構造自訂的組件。

   本文通過自訂一個PassWordView組件來實現密碼能夠通過點擊點選框來決定是否顯示。PassWordView組件類通過繼承LinearLayout類和組合EditText，CheckBox組件實現。

   效果如：

 

650) this.width=650;" src="http://s2.51cto.com/wyfs02/M01/76/87/wKioL1ZVesqT79yLAAA9P5BWnqg110.png" style="width:380px;height:221px;" title="pwd-1.png" width="380" height="221" border="0" hspace="0" vspace="0" alt="wKioL1ZVesqT79yLAAA9P5BWnqg110.png" />650) this.width=650;" src="http://s1.51cto.com/wyfs02/M02/76/87/wKioL1ZVesrxyNfZAAA870XRJQA969.png" style="width:380px;height:184px;float:left;" title="pwd-2.png" width="380" height="184" border="0" hspace="0" vspace="0" alt="wKioL1ZVesrxyNfZAAA870XRJQA969.png" />

一： 實現上述密碼框組件需要以下步驟：

   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)：

    

<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類

  

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

  

<?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

 

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組件，一般情況通過組合已有的的組件來實現複雜組件相對更容易一些，也能夠得到組件重用的福利；現有組件不能滿足的情況下可以考慮繪製組件，該方式最為原始和靈活。

本文出自 “野馬紅塵” 部落格，請務必保留此出處http://aiilive.blog.51cto.com/1925756/1716830

自訂Android組件之組合方式建立密碼框組件