AI 助理
备案控制台
开发者社区 安全 文章 正文

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

2017-11-20 1007
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：

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

文章标签：
Android开发
数据安全/隐私保护
关键词：
Android自定义
Android组件
Android学习笔记
Android方式
Android创建
技术小阿哥
目录
相关文章
计蒙不吃鱼
|
15天前
|
Android开发 UED 计算机视觉
Android自定义view之线条等待动画（灵感来源：金铲铲之战）
本文介绍了一款受游戏“金铲铲之战”启发的Android自定义View——线条等待动画的实现过程。通过将布局分为10份，利用`onSizeChanged`测量最小长度，并借助画笔绘制动态线条，实现渐变伸缩效果。动画逻辑通过四个变量控制线条的增长与回退，最终形成流畅的等待动画。代码中详细展示了画笔初始化、线条绘制及动画更新的核心步骤，并提供完整源码供参考。此动画适用于加载场景，提升用户体验。
计蒙不吃鱼
238 5
Android自定义view之线条等待动画（灵感来源：金铲铲之战）
计蒙不吃鱼
|
15天前
|
Android开发
Android自定义view之利用PathEffect实现动态效果
本文介绍如何在Android自定义View中利用`PathEffect`实现动态效果。通过改变偏移量，结合`PathEffect`的子类（如`CornerPathEffect`、`DashPathEffect`、`PathDashPathEffect`等）实现路径绘制的动态变化。文章详细解析了各子类的功能与参数，并通过案例代码展示了如何使用`ComposePathEffect`组合效果，以及通过修改偏移量实现动画。最终效果为一个菱形图案沿路径运动，源码附于文末供参考。
计蒙不吃鱼
26 0
计蒙不吃鱼
|
15天前
|
Android开发 开发者
Android自定义view之利用drawArc方法实现动态效果
本文介绍了如何通过Android自定义View实现动态效果，重点使用`drawArc`方法完成圆弧动画。首先通过`onSizeChanged`进行测量，初始化画笔属性，设置圆弧相关参数。核心思路是不断改变圆弧扫过角度`sweepAngle`，并调用`invalidate()`刷新View以实现动态旋转效果。最后附上完整代码与效果图，帮助开发者快速理解并实践这一动画实现方式。
计蒙不吃鱼
35 0
计蒙不吃鱼
|
15天前
|
Android开发 数据安全/隐私保护 开发者
Android自定义view之模仿登录界面文本输入框（华为云APP）
本文介绍了一款自定义输入框的实现，包含静态效果、hint值浮动动画及功能扩展。通过组合多个控件完成界面布局，使用TranslateAnimation与AlphaAnimation实现hint文字上下浮动效果，支持密码加密解密显示、去除键盘回车空格输入、光标定位等功能。代码基于Android平台，提供完整源码与attrs配置，方便复用与定制。希望对开发者有所帮助。
计蒙不吃鱼
28 0
计蒙不吃鱼
|
15天前
|
XML Java Android开发
Android自定义view之网易云推荐歌单界面
本文详细介绍了如何通过自定义View实现网易云音乐推荐歌单界面的效果。首先，作者自定义了一个圆角图片控件`MellowImageView`，用于绘制圆角矩形图片。接着，通过将布局放入`HorizontalScrollView`中，实现了左右滑动功能，并使用`ViewFlipper`添加图片切换动画效果。文章提供了完整的代码示例，包括XML布局、动画文件和Java代码，最终展示了实现效果。此教程适合想了解自定义View和动画效果的开发者。
计蒙不吃鱼
130 65
Android自定义view之网易云推荐歌单界面
计蒙不吃鱼
|
15天前
|
XML 前端开发 Android开发
一篇文章带你走近Android自定义view
这是一篇关于Android自定义View的全面教程，涵盖从基础到进阶的知识点。文章首先讲解了自定义View的必要性及简单实现（如通过三个构造函数解决焦点问题），接着深入探讨Canvas绘图、自定义属性设置、动画实现等内容。还提供了具体案例，如跑马灯、折线图、太极图等。此外，文章详细解析了View绘制流程（measure、layout、draw）和事件分发机制。最后延伸至SurfaceView、GLSurfaceView、SVG动画等高级主题，并附带GitHub案例供实践。适合希望深入理解Android自定义View的开发者学习参考。
计蒙不吃鱼
361 84
计蒙不吃鱼
|
15天前
|
Android开发 开发者
Android自定义View之不得不知道的文件attrs.xml（自定义属性）
本文详细介绍了如何通过自定义 `attrs.xml` 文件实现 Android 自定义 View 的属性配置。以一个包含 TextView 和 ImageView 的 DemoView 为例，讲解了如何使用自定义属性动态改变文字内容和控制图片显示隐藏。同时，通过设置布尔值和点击事件，实现了图片状态的切换功能。代码中展示了如何在构造函数中解析自定义属性，并通过方法 `setSetting0n` 和 `setbackeguang` 实现功能逻辑的优化与封装。此示例帮助开发者更好地理解自定义 View 的开发流程与 attrs.xml 的实际应用。
计蒙不吃鱼
35 2
Android自定义View之不得不知道的文件attrs.xml（自定义属性）
计蒙不吃鱼
|
15天前
|
前端开发 Android开发 UED
讲讲Android为自定义view提供的SurfaceView
本文详细介绍了Android中自定义View时使用SurfaceView的必要性和实现方式。首先分析了在复杂绘制逻辑和高频界面更新场景下，传统View可能引发卡顿的问题，进而引出SurfaceView作为解决方案。文章通过Android官方Demo展示了SurfaceView的基本用法，包括实现`SurfaceHolder.Callback2`接口、与Activity生命周期绑定、子线程中使用`lockCanvas()`和`unlockCanvasAndPost()`方法完成绘图操作。
计蒙不吃鱼
47 3
计蒙不吃鱼
|
15天前
|
Android开发 开发者
Android自定义view之围棋动画（化繁为简）
本文介绍了Android自定义View的动画实现，通过两个案例拓展动态效果。第一个案例基于`drawArc`方法实现单次动画，借助布尔值控制动画流程。第二个案例以围棋动画为例，从简单的小球直线运动到双向变速运动，最终实现循环动画效果。代码结构清晰，逻辑简明，展示了如何化繁为简实现复杂动画，帮助读者拓展动态效果设计思路。文末提供完整源码，适合初学者和进阶开发者学习参考。
计蒙不吃鱼
34 0
Android自定义view之围棋动画（化繁为简）
计蒙不吃鱼
|
15天前
|
Java Android开发 开发者
Android自定义view之围棋动画
本文详细介绍了在Android中自定义View实现围棋动画的过程。从测量宽高、绘制棋盘背景，到创建固定棋子及动态棋子，最后通过属性动画实现棋子的移动效果。文章还讲解了如何通过自定义属性调整棋子和棋盘的颜色及动画时长，并优化视觉效果，如添加渐变色让白子更明显。最终效果既可作为围棋动画展示，也可用作加载等待动画。代码完整，适合进阶开发者学习参考。
计蒙不吃鱼
51 0

热门文章

最新文章

  • 1
    一篇文章带你走近Android自定义view
  • 2
    Android自定义view之线条等待动画（灵感来源：金铲铲之战）
  • 3
    Android 文件数据储存之内部储存 + 外部储存
  • 4
    Android使用EditText+Listview实现搜索效果（使用room模糊查询）
  • 5
    Android SVG动画详细例子
  • 6
    Android studio中build.gradle文件简单介绍
  • 7
    Android studio 报错Connect to 127.0.0.1:8888 [/127.0.0.1] failed: Connection refused: connect（已解决）
  • 8
    Android自定义view之网易云推荐歌单界面
  • 9
    ArkUI-X添加到现有Android项目中
  • 10
    Android利用SVG实现动画效果
  • 1
    为什么大厂要求安卓开发者掌握Kotlin和Jetpack？深度解析现代Android开发生态优雅草卓伊凡
    36
  • 2
    ArkUI-X添加到现有Android项目中
    100
  • 3
    Android studio 报错Connect to 127.0.0.1:8888 [/127.0.0.1] failed: Connection refused: connect（已解决）
    165
  • 4
    Android使用EditText+Listview实现搜索效果（使用room模糊查询）
    186
  • 5
    Android SVG动画详细例子
    176
  • 6
    Android自定义view之网易云推荐歌单界面
    130
  • 7
    一篇文章带你走近Android自定义view
    361
  • 8
    Android利用SVG实现动画效果
    97
  • 9
    Android线条等待动画JMWorkProgress（可添加依赖直接使用）
    53
  • 10
    讲讲Android为自定义view提供的SurfaceView
    47

    • 相关课程

    更多
  • 开源Android容器化框架Atlas开发者指南

    • 相关电子书

    更多
  • 58同城Android客户端Walle框架演进与实践之路
  • Android组件化实现
  • 蚂蚁聚宝Android秒级编译——Freeline
    • 下一篇
    一文了解：阿里云对象存储OSS是什么？