首页 文章 精选 留言 我的

[Android学习笔记四] 自定义Android组件之组合方式创建密码框组件

2017-11-19 634

  自定义Android组件基本可以从2个入口着手，一是继承Viewe类拿起画笔和画布绘制组件，而是通过继承View的子类和组合已有的组件的方式构造自定义的组件。


   本文通过自定义一个PassWordView组件来实现密码能够通过点击点选框来决定是否显示。PassWordView组件类通过继承LinearLayout类和组合EditText，CheckBox组件实现。


   效果如下图：

 

wKioL1ZVesqT79yLAAA9P5BWnqg110.pngwKioL1ZVesrxyNfZAAA870XRJQA969.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)：

    

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，如需转载请自行联系原作者

上一篇 下一篇
优秀的个人博客,低调大师

微信关注我们

原文链接：https://yq.aliyun.com/articles/411940

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

Android Studio创建Android Library发布至本地仓库

本文通过Android Studio创建一个Android Library项目，然后发布到本地的Maven仓库。 1.创建Android Library模块 2.配置build.gradle 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 applyplugin: 'com.android.library' applyplugin: 'maven' android{ compileSdkVersion 21 buildToolsVersion "21.1.2" defaultConfig{ minSdkVersion 16 targetSdkVersion 21 versionCode 1 versionName "1.0" } buildTypes{ release{ ...
2017-11-20
636
上一篇

《从零开始学Swift》学习笔记（Day 63）——Cocoa Touch设计模式及应用之单例模式

什么是设计模式。设计模式是在特定场景下对特定问题的解决方案，这些解决方案是经过反复论证和测试总结出来的。实际上，除了软件设计，设计模式也被广泛应用于其他领域，比如UI设计和建筑设计等。 下面来介绍Cocoa Touch框架中的设计模式中的单例模式。 单例模式 单例模式的作用是解决“应用中只有一个实例”的一类问题。在Cocoa Touch框架中，有UIApplication、NSUserDefaults和NSNotificationCenter等单例类。另外，NSFileManager和NSBundle类虽然属于Cocoa框架的内容，但也可以在Cocoa Touch框架中使用（Cocoa框架中的单例类有NSFileManager、NSWorkspace和NSApplication等）。 问题提出 在一个应用程序的生命周期中，有时候只需要某个类的一个实例。例如：当iOS应用程序启动时，应用的状态由UIApplication类的一个实例维护，这个实例代表了整个“应用程序对象”，它只能是一个实例，其作用是共享应用程序中的一些资源、控制应用程序的访问，以及保持应用程序的状态等。 解决方案 单例模...
2017-11-20
640
下一篇

相关文章

发表评论

资源下载

更多资源
Mario

Mario

马里奥是站在游戏界顶峰的超人气多面角色。马里奥靠吃蘑菇成长，特征是大鼻子、头戴帽子、身穿背带裤，还留着胡子。与他的双胞胎兄弟路易基一起，长年担任任天堂的招牌角色。

时间: 2025-12-12 大小: 211.28KB 下载: 54次
Nacos

Nacos

Nacos /nɑ:kəʊs/ 是 Dynamic Naming and Configuration Service 的首字母简称，一个易于构建 AI Agent 应用的动态服务发现、配置管理和AI智能体管理平台。Nacos 致力于帮助您发现、配置和管理微服务及AI智能体应用。Nacos 提供了一组简单易用的特性集，帮助您快速实现动态服务发现、服务配置、服务元数据、流量管理。Nacos 帮助您更敏捷和容易地构建、交付和管理微服务平台。

时间: 2025-12-21 大小: 189MB 下载: 2次
Spring

Spring

Spring框架（Spring Framework）是由Rod Johnson于2002年提出的开源Java企业级应用框架，旨在通过使用JavaBean替代传统EJB实现方式降低企业级编程开发的复杂性。该框架基于简单性、可测试性和松耦合性设计理念，提供核心容器、应用上下文、数据访问集成等模块，支持整合Hibernate、Struts等第三方框架，其适用范围不仅限于服务器端开发，绝大多数Java应用均可从中受益。

时间: 2025-12-17 大小: 5MB 下载: 1次
Sublime Text

Sublime Text

Sublime Text具有漂亮的用户界面和强大的功能，例如代码缩略图，Python的插件，代码段等。还可自定义键绑定，菜单和工具栏。Sublime Text 的主要功能包括：拼写检查，书签，完整的 Python API ， Goto 功能，即时项目切换，多选择，多窗口等等。Sublime Text 是一个跨平台的编辑器，同时支持Windows、Linux、Mac OS X等操作系统。

时间: 2025-12-03 大小: 9.84MB 下载: 39次
手机查看

扫码在手机上查看文章

扫描二维码，手机阅读更方便

热门标签
Jdk25 Rocky Redis Docker Gemini3 SpringBoot4 Service Mesh Kubernetes SpringCloud HarmonyOS6 Nacos3 OpenAi DeepSeek

欢迎您来访！

登录后，您将获得更多功能！
热门文章
联系我们

有任何问题或合作意向欢迎联系我们

Email: 99873273@qq.com

QQ: 99873273

用户登录
用户注册