您的位置:首页 > 产品设计 > UI/UE

安卓UI练习(一)--登陆界面和逻辑代码

2018-03-11 20:30 906 查看

登陆界面和逻辑代码

最近感觉自己安卓方面真的的差的好多,,,但是我觉得自己只有好好每天学习敲代码练习,会有收获的,这周就是重新看了下安卓UI方面的东西,下面是登陆界面的xml和逻辑处理方面的代码//参考了好多别人的博客

效果图



图标都是在网上找的,推荐阿里巴巴矢量图标库这个网站网站

界面虽然简单,但是考虑了好多的问题

密码的暗文输入

控件的隐藏

文本监听器TextWatcher的用法

各种逻辑,,,,

xml的代码

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:filterTouchesWhenObscured="true">

<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="@+id/login_layout"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:gravity="center">

<FrameLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="@+id/usename_layout"
android:layout_marginTop="55dp"
android:gravity="center">
<EditText
android:layout_width="fill_parent"
android:layout_height="40dp"
android:id="@+id/usename"
android:layout_marginTop="5dp"
android:inputType="number"
android:paddingRight="60dp"
android:maxLength="20"
android:paddingLeft="55dp"/>
<ImageView
android:layout_width="31dp"
android:layout_height="35dp"
android:layout_marginStart="8dp"
android:layout_gravity="left|center_horizontal"
android:src="@drawable/usename"
android:layout_marginLeft="8dp"
android:visibility="visible"/>
<TextView
android:layout_width="40dp"
android:layout_height="50dp"
android:layout_gravity="left|center_vertical"
android:layout_marginTop="4dp"
android:gravity="center"
android:text="+62"
android:textSize="18sp"
android:visibility="invisible"/>
<Button
android:layout_width="31dp"
android:layout_height="35dp"
android:id="@+id/bt_usename_clear"
android:layout_gravity="right|center_horizontal"
android:layout_marginRight="10dp"
android:background="@drawable/sw"
android:visibility="invisible"/>

</FrameLayout>
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="@+id/usecode_layout"
android:layout_below="@id/usename_layout"
android:layout_marginTop="6dp"
android:gravity="center" >

<EditText
android:id="@+id/password"
android:layout_width="fill_parent"
android:layout_height="55dp"
android:inputType="textPassword"
android:maxLength="20"
android:paddingLeft="55dp"
android:paddingRight="60dp" />

<ImageView
android:layout_width="31dp"
android:layout_height="35dp"
android:layout_marginStart="8dp"
android:layout_gravity="left|center_vertical"
android:src="@drawable/ss"
android:layout_marginLeft="8dp" />
<Button
android:layout_width="23dp"
android:layout_height="23dp"
android:id="@+id/bt_pwd_eyes"
android:background="@drawable/noeye"
android:layout_gravity="right|center_vertical"
android:layout_marginRight="10dp"
/>
<Button
android:layout_width="23dp"
android:layout_height="23dp"
android:id="@+id/bt_pwd_clear"
android:background="@drawable/sw"
android:visibility="invisible"
android:layout_gravity="right|center_vertical"
android:layout_marginRight="33dp"/>

</FrameLayout>

<Button
android:id="@+id/login"
android:layout_width="fill_parent"
android:layout_height="44dp"
android:layout_below="@id/usecode_layout"
android:layout_marginTop="30dp"
android:background="#ff336699"
android:textColor="@android:color/white"
android:gravity="center"
android:text="登录" />
<Button
android:id="@+id/login_error"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignRight="@id/login"
android:layout_below="@id/login"
android:background="#00000000"
android:text="忘记密码"
android:textSize="16sp" />
<Button
android:id="@+id/register"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@id/login"
android:layout_below="@id/login"
android:background="#00000000"
android:gravity="left|center_vertical"
android:text="注册"
android:textSize="16sp"
android:visibility="visible" />

</RelativeLayout>
</RelativeLayout>


在布局方面总的是一个大的相对布局,然后先是一个帧布局布置用户账号输入那行,然后再是一个帧布局布置密码输入那行的布局,然后登陆,注册,忘记密码放好就行

逻辑activity的代码

因为在登陆的过程中我们的控件的隐藏和出现是UI变化,,,然后不能放在主线程里面进行UI的变化,然后我们就异步处理这个UI 先定义一群常量作为标注,然后new一个Handler的对象,重写handleMassage()方法 对具体的Message处理逻辑

package com.example.hasee.uidome;

import android.annotation.SuppressLint;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.support.v7.app.AppCompatActivity;
import android.text.Editable;
import android.text.TextWatcher;
import android.view.KeyEvent;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.RelativeLayout;
import android.widget.TextView;

/**
* 这个就是登陆界面的activity
* 注册  登陆   忘记密码    要考虑这几种情况 转其他activity
*/
public class Main2Activity extends AppCompatActivity implements View.OnClickListener,View.OnLongClickListener{
//声明控件对象
private EditText et_name,et_pass;
private Button mLoginButton,mLoginError,mRegister,ONLYTEST;
int slectIndx = 1;
int tempSelect = slectIndx;
private boolean flase;
boolean isReLogin = flase;
private int SERVER_FLAG = 0;
private RelativeLayout countryselsct;
private TextView county_phone_sn,countryName;

private final static int LOGIN_ENABLE = 0x01;
private final static int LOGIN_UNABLF = 0x02;
private final static int PASS_ERROR =  0x03;
private final static int NAME_ERROR = 0x04;  //上面是消息的常量值

final Handler UiMangerHandler = new Handler(){        //处理UI的操作的
@Override
public void handleMessage(Message msg) {
switch (msg.what){
case LOGIN_ENABLE:
mLoginButton.setClickable(true);
break;
case LOGIN_UNABLF:
mLoginButton.setClickable(false);
break;
case PASS_ERROR:

break;
case NAME_ERROR:
break;

}
super.handleMessage(msg);
}
};

private Button bt_username_clear;
private Button bt_pwd_clear;
private Button bt_pwd_eye;
private TextWatcher username_watcher;
private TextWatcher password_watcher;  //文本监视器

@SuppressLint("WrongViewCast")
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main2);

et_name = (EditText) findViewById(R.id.bt_usename_clear);
et_pass = (EditText) findViewById(R.id.bt_pwd_clear);
bt_pwd_clear = (Button)findViewById(R.id.bt_usename_clear);
bt_pwd_clear = (Button)findViewById(R.id.bt_pwd_clear);
bt_pwd_eye = (Button)findViewById(R.id.bt_pwd_eyes);

bt_username_clear.setOnClickListener(this);
bt_pwd_eye.setOnClickListener(this);
bt_pwd_clear.setOnClickListener(this);
initWatcher();
et_name.addTextChangedListener(username_watcher);
et_pass.addTextChangedListener(password_watcher);

mLoginButton = (Button) findViewById(R.id.login);
mLoginError  = (Button) findViewById(R.id.login_error);
mRegister    = (Button) findViewById(R.id.register);
//ONLYTEST     = (Button) findViewById(R.id.registfer);
ONLYTEST.setOnClickListener(this);
ONLYTEST.setOnLongClickListener((View.OnLongClickListener) this);
mLoginButton.setOnClickListener(this);
mLoginError.setOnClickListener(this);
mRegister.setOnClickListener(this);

}
private void initWatcher(){
username_watcher = new TextWatcher() {
@Override
public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {

}

@Override
public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {

}

@Override
public void afterTextChanged(Editable editable) {
et_pass.setText("");
if (editable.toString().length()>0){
bt_username_clear.setVisibility(View.VISIBLE);
}else{
bt_username_clear.setVisibility(View.INVISIBLE);
}

}
};
password_watcher = new TextWatcher() {
@Override
public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {

}

@Override
public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {

}

@Override
public void afterTextChanged(Editable editable) {

if (editable.toString().length()>0){
bt_pwd_clear.setVisibility(View.VISIBLE);
}else{
bt_pwd_clear.setVisibility(View.INVISIBLE);
}

}
};
}

@Override
public void onClick(View view) {
switch (view.getId()){
//登陆activity
case R.id.login:
//login();
break;
//忘记密码
case R.id.login_error:
break;
//注册
case R.id.register:
break;

}

}
private void login(){

}

@Override
public boolean onLongClick(View view) {
switch (view.getId()){
case R.id.register:
if(SERVER_FLAG > 9){

break;
}
}
return true;
}

/**
* 监听back的那块
* @param keyCode
* @param event
* @return
*/
@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
if(keyCode==KeyEvent.KEYCODE_BACK){
if (isReLogin){

}
}
return super.onKeyDown(keyCode, event);
}
}


TextWatcher的用法

就三个方法,先用绑定 et_name.addTextChangedListener(username_watcher);

et_pass.addTextChangedListener(password_watcher);

然后进行逻辑处理

TextWatcher fieldValidatorTextWatcher = new TextWatcher() {
@Override
public void afterTextChanged(Editable s) {//表示最终内容
Log.d("afterTextChanged", s.toString());
}

@Override
public void beforeTextChanged(CharSequence s, int start/*开始的位置*/, int count/*被改变的旧内容数*/, int after/*改变后的内容数量*/) {
//这里的s表示改变之前的内容,通常start和count组合,可以在s中读取本次改变字段中被改变的内容。而after表示改变后新的内容的数量。
}

@Override
public void onTextChanged(CharSequence s, int start/*开始位置*/, int before/*改变前的内容数量*/, int count/*新增数*/) {
//这里的s表示改变之后的内容,通常start和count组合,可以在s中读取本次改变字段中新的内容。而before表示被改变的内容的数量。
}
};


注意

这个只是我练习的Dome,,,不保证能用,好多都没写玩,,就是个壳子
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: