登录界面、AutoUtils 屏幕适配、自定义Edittext（显示密码可见和一键清空）和 TextInputLayout的使用。...

最新推荐文章于 2021-09-03 14:31:27 发布

anbai9034

最新推荐文章于 2021-09-03 14:31:27 发布

阅读量289

点赞数

文章标签：移动开发 ui

原文链接：http://www.cnblogs.com/caoy/p/6896496.html

版权

登录界面:

AutoUtils自动屏幕适配:

AutoUtils屏幕适配使用的方法 :
- 1、将AutoUtils类复制到要适配的项目中；
  
  2、在程序的入口(清单文件filter)：
  super.onCreate(savedInstanceState);
  //屏幕适配，这里是以720*1280分辨率为基准的适配
  AutoUtils.setSize(this, false, 720, 1280);
  
  * 这里我们UI是以1920*1280分辨率做图的,并且是横屏显示:
  AutoUtils.setSize(this, false, 1920, 1280);
  
  View view=View.inflate(this,R.layout.activity_splash,null);
  AutoUtils.auto(view);
  setContentView(view);
  
  3、在activity中
  View view=View.inflater(this,R.layout.activity_splash,null);
  AutoUtils.auto(view);//放在加载布局的前面
  setContentView(view);
  
  4、在碎片中
  View view=View.inflate(context,R.layout.view_layout,null);
  AutoUtils.auto(view);

AutoUtils代码:
　　　　

  1 package com.cfuas.utils;
  2 
  3 import android.app.Activity;
  4 import android.content.Context;
  5 import android.content.res.Resources;
  6 import android.util.TypedValue;
  7 import android.view.Display;
  8 import android.view.View;
  9 import android.view.ViewGroup;
 10 import android.widget.TextView;
 11 
 12 /**
 13  * 
 14  * @author  这是一个进行屏幕适配的类
 15  *
 16  */
 17 
 18 public class AutoUtils {
 19 
 20     private static int displayWidth;
 21     private static int displayHeight;
 22     
 23     private static int designWidth;
 24     private static int designHeight;
 25     
 26     private static double textPixelsRate;
 27     
 28     public static void setSize(Activity act, boolean hasStatusBar, int designWidth, int designHeight){
 29         if(act==null || designWidth<1 || designHeight<1)return;
 30         
 31         Display display = act.getWindowManager().getDefaultDisplay();
 32         int width = display.getWidth();
 33         int height = display.getHeight();
 34         
 35         if (hasStatusBar) {
 36             height -= getStatusBarHeight(act);
 37         }
 38         
 39         AutoUtils.displayWidth=width;
 40         AutoUtils.displayHeight=height;
 41         
 42         AutoUtils.designWidth=designWidth;
 43         AutoUtils.designHeight=designHeight;
 44         
 45         double displayDiagonal= Math.sqrt(Math.pow(AutoUtils.displayWidth, 2)+ Math.pow(AutoUtils.displayHeight, 2));
 46         double designDiagonal= Math.sqrt(Math.pow(AutoUtils.designWidth, 2)+ Math.pow(AutoUtils.designHeight, 2));
 47         AutoUtils.textPixelsRate=displayDiagonal/designDiagonal;    
 48     }
 49     
 50     public static int getStatusBarHeight(Context context)
 51     {
 52         int result = 0;
 53         try {
 54             int resourceId = context.getResources().getIdentifier(
 55                     "status_bar_height", "dimen", "android");
 56             if (resourceId > 0) {
 57                 result = context.getResources().getDimensionPixelSize(
 58                         resourceId);
 59             }
 60         } catch (Resources.NotFoundException e) {
 61             e.printStackTrace();
 62         }
 63         return result;
 64     }
 65     
 66     public static void auto(Activity act){
 67         if(act==null || displayWidth<1 || displayHeight<1)return;
 68         
 69         View view=act.getWindow().getDecorView();
 70         auto(view);
 71     }
 72     
 73     public static void auto(View view){
 74         if(view==null || displayWidth<1 || displayHeight<1)return;
 75         
 76         AutoUtils.autoTextSize(view);
 77         AutoUtils.autoSize(view);
 78         AutoUtils.autoPadding(view);
 79         AutoUtils.autoMargin(view);
 80         
 81         if(view instanceof ViewGroup){
 82             auto((ViewGroup)view);
 83         }
 84         
 85     }
 86     
 87     private static void auto(ViewGroup viewGroup){
 88         int count = viewGroup.getChildCount();
 89         
 90         for (int i = 0; i < count; i++) {
 91 
 92             View child = viewGroup.getChildAt(i);
 93             
 94             if(child!=null){
 95                 auto(child);
 96             }
 97         }
 98     }
 99     
100     public static void autoMargin(View view){
101         if (!(view.getLayoutParams() instanceof ViewGroup.MarginLayoutParams))
102             return;
103 
104         ViewGroup.MarginLayoutParams lp = (ViewGroup.MarginLayoutParams) view.getLayoutParams();
105         if(lp == null)return ;
106 
107         lp.leftMargin = getDisplayWidthValue(lp.leftMargin);
108         lp.topMargin = getDisplayHeightValue(lp.topMargin);
109         lp.rightMargin = getDisplayWidthValue(lp.rightMargin);
110         lp.bottomMargin = getDisplayHeightValue(lp.bottomMargin);
111         
112     }
113 
114     public static void autoPadding(View view){
115         int l = view.getPaddingLeft();
116         int t = view.getPaddingTop();
117         int r = view.getPaddingRight();
118         int b = view.getPaddingBottom();
119 
120         l = getDisplayWidthValue(l);
121         t = getDisplayHeightValue(t);
122         r = getDisplayWidthValue(r);
123         b = getDisplayHeightValue(b);
124 
125         view.setPadding(l, t, r, b);
126     }
127 
128     public static void autoSize(View view){
129         ViewGroup.LayoutParams lp = view.getLayoutParams();
130 
131         if (lp == null) return;
132         
133         if(lp.width>0){
134             lp.width = getDisplayWidthValue(lp.width);
135         }
136 
137         if(lp.height>0){
138             lp.height = getDisplayHeightValue(lp.height);
139         }
140         
141     }
142     
143     public static void autoTextSize(View view){
144         if(view instanceof TextView){
145             double designPixels=((TextView) view).getTextSize();
146             double displayPixels=textPixelsRate*designPixels;
147             ((TextView) view).setIncludeFontPadding(false);
148             ((TextView) view).setTextSize(TypedValue.COMPLEX_UNIT_PX, (float) displayPixels);
149         }
150     }
151 
152     public static int getDisplayWidthValue(int designWidthValue){
153         if(designWidthValue<2){
154             return designWidthValue;
155         }
156         return designWidthValue * displayWidth / designWidth;
157     }
158 
159     public static int getDisplayHeightValue(int designHeightValue){
160         if(designHeightValue<2){
161             return designHeightValue;
162         }
163         return designHeightValue * displayHeight / designHeight;
164     }
165 }

自定义Edittext输入显示密码和清空内容:

自定义Edittext步骤:

初始化

创建InputEdittext类继承Edittext;
重写两个构造方法,可以使用attrs;在构造中初始化init();

在res/values创建Attrs定义属性:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="inputAttrs">
        <attr name="closeTogDrawable" format="reference|color"/>
        <attr name="passwordTogDrawableOpen" format="reference|color"/>
        <attr name="passwordTogDrawableClose" format="reference|color"/>
        <attr name="closeTogEnabled" format="boolean"/>
        <attr name="passwordTogEnabled" format="boolean"/>
    </declare-styleable>
</resources>

context.obtainSytledAttribute()得到TypedArray对象ta,ta.getDrawble获得对应的属性对象,不要忘记了ta.recycle()方法循环.
Drawble需要判断是否为null并且setBounds设置值边距;

onDraw:
初始化完成现在需要将图片画到画布上；

我们有三个drawble图片所以需要画三个draw创建三个绘制方法（列：本地保存矩阵，结束修复矩阵）：

1     private void closeDraw(Canvas canvas) {
2         canvas.save();
3         canvas.translate(getWidth() - mCloseDrawable.getIntrinsicWidth(), getHeight() / 2 - mCloseDrawable.getIntrinsicHeight() / 2);
4         if (mCloseDrawable != null) {
5             mCloseDrawable.draw(canvas);
6  } 7  canvas.restore(); 8 }

在onDraw（）方法里，判断是否激活是否length＞0，满足条件调用对于的绘制方法；

onTouchEvent：
根据判断MotionEvents的up事件点击的范围做逻辑处理;

1    if (mCloseEnabled&& event.getX() > getWidth() - mCloseDrawable.getIntrinsicWidth()) {
3                     setText("");
4                     return true;
5                 }

自定义EditText代码：

  1 public class InputEditext extends EditText {
  2     private static final String TAG = "INputEdittext";
  3     private AttributeSet mAttrs;
  4     private Drawable mCloseDrawable;
  5     private Drawable mPasswordTogDrawableOpen;
  6     private Drawable passwordTogDrawableClose; 7 private boolean mCloseEnabled; 8 private boolean mPasswordEnabled = false; 9 private boolean mPasswordVisible = false; 10 11  Paint mPaint; 12  Paint mPaint2; 13 // Bitmap clearBtm; 14 // Bitmap passwrodBtm1; 15 // Bitmap passwrodBtm2; 16 // private Drawable mPasswordDrawable2; 17 18 19 public InputEditext(Context context, AttributeSet attrs) { 20 super(context, attrs); 21  init(context, attrs); 22 Log.d(TAG, "InputEditext: " + 2); 23  } 24 25 private void init(Context context, AttributeSet attrs) { 26 mPaint = getPaint(); 27 mPaint2 = getPaint(); 28 BitmapFactory.Options op = new BitmapFactory.Options(); 29 op.inJustDecodeBounds = true; 30 31 if (attrs != null) { 32 TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.inputAttrs); 33 mPasswordTogDrawableOpen = ta.getDrawable(R.styleable.inputAttrs_passwordTogDrawableOpen); 34 passwordTogDrawableClose = ta.getDrawable(R.styleable.inputAttrs_passwordTogDrawableClose); 35 mCloseDrawable = ta.getDrawable(R.styleable.inputAttrs_closeTogDrawable); 36 37 if (mCloseDrawable != null) { 38 mCloseDrawable.setBounds(0, 0, mCloseDrawable.getIntrinsicWidth(), mCloseDrawable.getIntrinsicHeight()); 39  } 40 41 if (mPasswordTogDrawableOpen != null) { 42 mPasswordTogDrawableOpen.setBounds(0, 0, mPasswordTogDrawableOpen.getIntrinsicWidth(), mPasswordTogDrawableOpen.getIntrinsicHeight()); 43  } 44 if (passwordTogDrawableClose != null) { 45 passwordTogDrawableClose.setBounds(0, 0, passwordTogDrawableClose.getIntrinsicWidth(), passwordTogDrawableClose.getIntrinsicHeight()); 46  } 47 48 mCloseEnabled = ta.getBoolean(R.styleable.inputAttrs_closeTogEnabled, false); 49 mPasswordEnabled = ta.getBoolean(R.styleable.inputAttrs_passwordTogEnabled, false); 50 51  ta.recycle(); 52  } 53 54 // clearBtm = BitmapFactory.decodeResource(getContext().getResources(), R.mipmap.btn_close); 55 // passwrodBtm1 = BitmapFactory.decodeResource(getContext().getResources(), R.mipmap.btn_attention1); 56 // passwrodBtm2 = BitmapFactory.decodeResource(getContext().getResources(), R.mipmap.btn_attention2); 57 58  } 59 60  @Override 61 protected void onDraw(Canvas canvas) { 62 super.onDraw(canvas); 63 if (mCloseEnabled) { 64 if (getText().toString().length() > 0) 65  closeDraw(canvas); 66 // canvas.drawBitmap(clearBtm, getWidth() - clearBtm.getWidth(), getHeight() / 2 - clearBtm.getHeight() / 2, mPaint); 67  } 68 69 if (mPasswordEnabled && getText().toString().length() > 0) { 70 if (mPasswordVisible) { 71 // canvas.drawBitmap(passwrodBtm2, getWidth() - passwrodBtm2.getWidth() * 2 - 12, getHeight() / 2 - passwrodBtm2.getHeight() / 2, mPaint2); 72  passwrodDrawOpen(canvas); 73 } else { 74 // canvas.drawBitmap(passwrodBtm1, getWidth() - passwrodBtm1.getWidth() * 2 - 12, getHeight() / 2 - passwrodBtm1.getHeight() / 2, mPaint2); 75  passwrodDrawClose(canvas); 76  } 77  } 78  } 79 80 private void closeDraw(Canvas canvas) { 81  canvas.save(); 82 canvas.translate(getWidth() - mCloseDrawable.getIntrinsicWidth(), getHeight() / 2 - mCloseDrawable.getIntrinsicHeight() / 2); 83 if (mCloseDrawable != null) { 84  mCloseDrawable.draw(canvas); 85  } 86  canvas.restore(); 87  } 88 89 private void passwrodDrawOpen(Canvas canvas) { 90  canvas.save(); 91 canvas.translate(getWidth() - mPasswordTogDrawableOpen.getIntrinsicWidth() * 2 - 15, getHeight() / 2 - mPasswordTogDrawableOpen.getIntrinsicHeight() / 2); 92 if (mPasswordTogDrawableOpen != null) { 93  mPasswordTogDrawableOpen.draw(canvas); 94  } 95  canvas.restore(); 96  } 97 98 private void passwrodDrawClose(Canvas canvas) { 99  canvas.save(); 100 canvas.translate(getWidth() - passwordTogDrawableClose.getIntrinsicWidth() * 2 - 15, getHeight() / 2 - passwordTogDrawableClose.getIntrinsicHeight() / 2); 101 if (passwordTogDrawableClose != null) { 102  passwordTogDrawableClose.draw(canvas); 103  } 104  canvas.restore(); 105  } 106 107  @Override 108 public boolean onTouchEvent(MotionEvent event) { 109 switch (event.getAction()) { 110 case MotionEvent.ACTION_UP: 111 if (mCloseEnabled 112 && event.getX() > getWidth() - mCloseDrawable.getIntrinsicWidth()) { 113 setText(""); 114 return true; 115  } 116 117 if (mPasswordEnabled 118 && event.getX() > getWidth() - mCloseDrawable.getIntrinsicWidth() * 2 - 15 119 && event.getY() > 0 120 && event.getY() < getHeight() 121  ) { 122 if (mPasswordVisible) { 123  setTransformationMethod(PasswordTransformationMethod.getInstance()); 124 mPasswordVisible = false; 125 } else { 126  setTransformationMethod(HideReturnsTransformationMethod.getInstance()); 127 mPasswordVisible = true; 128  } 129 return true; 130  } 131 break; 132 133  } 134 135 return super.onTouchEvent(event); 136  } 137 }

TextInputLayout的使用:

　　使用EditText的hint属性,用户在输入的时候hint会消失,用户的体验效果是十分不好的.TextInputLayout的出现就是为了解决这个问题.输入时可以将hint升上去。使用也十分简单：

TextInputLayout是MaterialDesign材料设计需要在build文件里依赖：
```
compile 'com.android.support:design:25.3.1'
```
在editext布局外包一层TextInputLayout就可以了，属性也很简单。

使用注意：

mNameUser = usernameWrapper.getEditText().getText().toString();
mPassword = passwordWrapper.getEditText().getText().toString();
便可以得到String对象。
usernameWrapper.setError(getString(R.string.error_username_verify))：可是设置错误提示

usernameWrapper.setErrorEnabled(false)：错误是否启动一个错误的布局，是否重新布局。

usernameWrapper.setHint(getString(R.string.hint_username))：设置提示；

主界面使用：

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3                 xmlns:app="http://schemas.android.com/apk/res-auto"
 4                 xmlns:tools="http://schemas.android.com/tools"
 5                 android:layout_width="match_parent"
 6                 android:layout_height="match_parent"
 7                 android:background="@mipmap/login_bg"
 8                 android:padding="@dimen/activity_horizontal_margin"
 9                 tools:context="com.cfuas.ui.LoginActivity">
10 
11 
12     <LinearLayout
13         android:layout_width="1200px"
14         android:layout_height="624px"
15         android:layout_centerInParent="true"
16         android:background="@mipmap/loginbox_bg"
17         android:gravity="center"
18         android:orientation="vertical">
19 
20 
21         <android.support.design.widget.TextInputLayout
22             android:id="@+id/usernameWrapper"
23             android:layout_width="576px"
24             android:layout_height="wrap_content"
25             android:layout_marginBottom="12px"
26             android:orientation="horizontal"
27             android:textColorHint="@color/login_hint_color"
28             >
29 
30             <com.cfuas.view.InputEditext
31                 android:id="@+id/username"
32                 android:layout_width="match_parent"
33                 android:layout_height="wrap_content"
34                 android:background="@drawable/bg_edittext_focused"
35                 android:drawableLeft="@mipmap/icon_user"
36                 android:drawablePadding="30px"
37                 android:hint="@string/hint_username"
38                 android:imeOptions="actionNext"
39                 android:inputType="none"
40                 android:lines="1"
41                 android:maxLength="18"
42                 android:singleLine="true"
43                 android:textColor="@color/login_text_white"
44                 android:textColorHint="@color/login_hint_color"
45                 android:textSize="36px"
46                 app:closeTogDrawable="@mipmap/btn_close"
47                 app:closeTogEnabled="true"
48                 />
49 
50 
51         </android.support.design.widget.TextInputLayout>
52 
53 
54         <android.support.design.widget.TextInputLayout
55             android:id="@+id/passwordWrapper"
56             android:layout_width="576px"
57             android:layout_height="wrap_content"
58             android:textColorHint="@color/login_hint_color"
59             >
60 
61             <com.cfuas.view.InputEditext
62                 android:id="@+id/password"
63                 android:layout_width="match_parent"
64                 android:layout_height="wrap_content"
65                 android:background="@drawable/bg_edittext_focused"
66                 android:drawableLeft="@mipmap/icon_password"
67                 android:drawablePadding="30px"
68                 android:hint="@string/hint_password"
69                 android:imeOptions="actionDone"
70                 android:inputType="textPassword"
71                 android:lines="1"
72                 android:maxLength="18"
73                 android:singleLine="true"
74                 android:textColor="@color/login_text_white"
75                 android:textColorHint="@color/login_hint_color"
76                 android:textSize="36px"
77                 app:passwordTogEnabled="true"
78                 app:passwordTogDrawableOpen="@mipmap/btn_attention1"
79                 app:passwordTogDrawableClose="@mipmap/btn_attention2"
80                 app:closeTogEnabled="true"
81                 app:closeTogDrawable="@mipmap/btn_close"
82                 />
83         </android.support.design.widget.TextInputLayout>
84 
85         <Button 86 android:id="@+id/btn" 87 android:layout_width="576px" 88 android:layout_height="84px" 89 android:layout_marginTop="30px" 90 android:background="@drawable/btn_login_selector" 91 android:text="@string/btn_logint" 92 android:textColor="@color/login_text_white" 93 /> 94 95 </LinearLayout> 96 97 </RelativeLayout>

 1 public class LoginActivity extends Activity {
 2     private String session_id;
 3     Button mButton;
 4     TextInputLayout usernameWrapper;
 5     TextInputLayout passwordWrapper;
 6     private String mNameUser; 7 private String mPassword; 8 private SharePreUser mSharePreUser; 9 10  @Override 11 protected void onCreate(Bundle savedInstanceState) { 12 super.onCreate(savedInstanceState); 13 AutoUtils.setSize(this, false, 1920, 1080); 14 View view = View.inflate(this, R.layout.activity_login, null); 15  AutoUtils.auto(view); 16  setContentView(view); 17 18 mSharePreUser = new SharePreUser(this); 19 String userSessionId = SharePreUser.getUserSessionId(this); 20 // if (!StringUtil.isEmpty(userSessionId)) { 21 // startActivity(new Intent(LoginActivity.this, MainActivity.class)); 22 // } 23  initView(); 24  initData(); 25  initEvent(); 26  } 27 28 private void initEvent() { 29 mButton.setOnClickListener(new View.OnClickListener() { 30 31  @Override 32 public void onClick(View v) { 33 //关闭输入框 34 ShowUtils.hideKeyboard(LoginActivity.this); 35 36 mNameUser = usernameWrapper.getEditText().getText().toString(); 37 mPassword = passwordWrapper.getEditText().getText().toString(); 38 39 if (!VerifyDataUtils.verifyUserName(mNameUser)) { //校验账号 !VerifyDataUtils.verifyUserName(nameUser) 40  usernameWrapper.setError(getString(R.string.error_username_verify)); 41 } else if (!VerifyDataUtils.validatePassword(mPassword)) { //校验密码 42  passwordWrapper.setError(getString(R.string.error_password_verify)); 43 } else { 44 //错误是否启动一个错误的布局(true:错误了重新输入错误提示还在,false错误后重新输入提示不在) 45 usernameWrapper.setErrorEnabled(false); 46 passwordWrapper.setErrorEnabled(false); 47  doLogin(); 48  } 49  } 50  }); 51  } 52 53 private void doLogin() { 54 55 Commander.logon(mNameUser, mPassword, new HttpCmdCallback<LogonInfo>() { 56 57  @Override 58 public void onSuccess(LogonInfo logonInfo) { 59  passwordWrapper.setError(logonInfo.getMsg()); 60 if (logonInfo.getCode() == ConstantDef.ReturnCode.ReturnCode_1000) { 61  mSharePreUser.actionLoginUser(logonInfo); 62 startActivity(new Intent(LoginActivity.this, MainActivity.class)); 63  finish(); 64  } 65  } 66  }); 67 68  } 69 70 private void initData() { 71  } 72 73 private void initView() { 74 usernameWrapper = (TextInputLayout) findViewById(R.id.usernameWrapper); 75 passwordWrapper = (TextInputLayout) findViewById(R.id.passwordWrapper); 76  usernameWrapper.setHint(getString(R.string.hint_username)); 77  passwordWrapper.setHint(getString(R.string.hint_password)); 78 mButton = (Button) findViewById(R.id.btn); 79  } 80 81 }

转载于:https://www.cnblogs.com/caoy/p/6896496.html

anbai9034

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
登录界面、AutoUtils 屏幕适配、自定义Edittext（显示密码可见和一键清空）和 TextInputLayout的使用。...

登录界面:AutoUtils自动屏幕适配:AutoUtils屏幕适配使用的方法 :1、将AutoUtils类复制到要适配的项目中；2、在程序的入口(清单文件filter)：super.onCreate(savedInstanceState);//屏幕适配，这里是以720*1280分辨率为基准的适配AutoUtils.setSize(...
复制链接

扫一扫