Create a password box component by combining custom Android Components

Create a password box component by combining custom Android Components
All controls (also called components) in Android inherit from adnroid. view. view class, android. view. viewGroup is an important subclass of the View class. layout classes of most books inherit from the ViewGroup class. For more information, see: for Android Api21-based views and Widget class diagrams, you can customize Android components from two portals. One is to inherit the Viewe class and pick up the paint brush and canvas painting components, instead, the custom components are constructed by inheriting the subclass of the View and combining existing components. In this article, you can customize a PassWordView component to enable the password to be displayed by clicking the click box. The PassWordView component class is implemented by inheriting the LinearLayout class and combining EditText and CheckBox components. The effect is as follows: 1. The following steps are required to implement the above Password box component:. design PassWordView component B. custom style attributes, res/value/attrs. xml c. create PassWordView c. implement PassWordView functions, such as event and attribute settings. Combine component 2: Use the Password box component:. use the PassWordView component to set attribute B. perform operation 3 on the Activity: Case: 1. the password box component mainly combines the EditText and CheckBox components to determine whether the password is displayed as a plain text based on the CheckBox selected status. The EditText and CheckBox components must be placed in a row. Therefore, the LinearLayout layout is used. 2. Custom style attributes of the password box component are usually defined as needed. In the PassWordView custom Component, EditText is left Component and CheckBox is right Component ). Define style attributes (location file: res/value/attrs. xml ):

<Declare-styleable name = "PassWordView"> <! -- Directly use the defined Semantic Attributes in the system. Do not set format --> <attr name = "android: inputType"/> <! -- Custom Attributes --> <attr name = "left_component_weight" format = "float"/> <attr name = "right_component_weight" format = "float"/> </declare-styleable>

 

InputType uses the attributes defined by the android system. Pay attention to the writing format. 3. Implement the PassWordView class

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 is an EditText * RightComponent and a 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 blocks; 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) {// gets the set value. The default value TypedArray typedArray = context is not set. 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); // The property inputType = typedArray defined by the Android system. 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); // determine the ratio of EditText and CheckBox to the space occupied by the parent view by weight mPassWordParams = new LinearLayout. layoutParams (0, ViewGroup. layoutParams. WRAP_CONTENT, leftComponentWeight); mShowParams = new LinearLayout. layoutParams (0, ViewGroup. layoutParams. WRAP_CONTENT, rightComponentWeight); // The parent view is a container view that specifies the HORIZONTAL arrangement of sub-views setOrientation (HORIZONTAL); addView (inflow, mPassWordParams); addView (mShowCheckBox, mShowParams ); addCheckBoxListener ();}/*** get PassWord ** @ return */public String getPassWord () {return mPassWordEditText. getText (). toString ();}/*** get PassWord component ** @ return */public EditText getPassWordEditText () {return mPassWordEditText;} private final void addCheckBoxListener () {/*** CheckBox Click Event Processing ** if the password in the selected EditText is displayed in plaintext ** if the password black dot in the unselected EditText is displayed **/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. Use the PassWordView component File 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 = "get password"/> <TextView android: id = "@ + id/password_text_view" android: layout_width = "match_parent" android: layout_height = "wrap_content" android: hint = "display password"/> </LinearLayout>

 

File: 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; @ Overr Ide 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. add C in xml OmbinePassWordViewActivity.

 

5. the result is as follows: 6. summary This article mainly demonstrates how to implement custom Android components through combination. Generally, it is easier to combine existing components to implement complex components and get the benefits of Component reuse; if the existing components cannot meet the requirements, you can consider drawing components. This method is most primitive and flexible.