基本功:完整版登录界面
所谓完整版登录界面是带验证的登录界面
也是是包含注册登录
注册:包含输入用户手机或者信息,发起请求,等待服务器发来验证码或者怎样的注册,同时注册信息保存在本地数据库,等待下一次打开app,自动登录
登录:将用户请求输入的内容与后台保存的数据做对比验证,例如:密码一致则获得通过
===================================================================================
最基本的:
首先完成登录界面,希望大家做正规的登录界面,这些重用性非常高,一次做好,多个项目收益,所以这次我们不做最简单的demo,而是往一个基本的产品去靠方向。
首先:
两个界面
登录界面+注册界面:
学会定义:一些参数,背景之类的的设置最好不要设置在布局文件中,为了重复利用以及规范化一律定义在
styles dimen drawable color 等里面:
例如:
<ImageView
android:id="@+id/back"
android:padding="12dp"
android:layout_width="@dimen/title_bar_height"
android:layout_height="@dimen/title_bar_height"
android:src="@drawable/jiantou" />
这里面:布局高度,宽度都是定义在dimen里面。现在放上登录注册的效果图来看一下:
简单的登录+注册界面,这里需要注意的,不仅是布局参数设置,还有对密码的监控,这里我们需要判断密码输入是不是符合规范,在安卓里面一般布局函数还是在xml里面设置的,但是有的时候需要动态监控控件状态在xml里面肯定是不好配置的,所以我们需要代码监控,做好完整版的登录注册,这一步也是需要做的,现在看一下我们负责监控的.java函数:
首先看一下这个px dp互转的概念:
在xml布局文件中,我们既可以设置px,也可以设置dp(或者dip)。一般情况下,我们都会选择使用dp,这样可以保证不同屏幕分辨率的机器上布局一致。但是在代码中,如何处理呢?很多控件的方法中都只提供了设置px的方法,例如setPadding,并没有提供设置dp的方法。这个时候,如果需要设置dp的话,就要将dp转换成px了。
下面是显示了px 与dp互转的概念例子:
public class dp_to_px {
/**
* 根据手机的分辨率从 dp 的单位 转成为 px(像素)
*/
public static int dip2px(Context context, float dpValue) {
final float scale = context.getResources().getDisplayMetrics().density;
return (int) (dpValue * scale + 0.5f);
}
/**
* 根据手机的分辨率从 px(像素) 的单位 转成为 dp
*/
public static int px2dip(Context context, float pxValue) {
final float scale = context.getResources().getDisplayMetrics().density;
return (int) (pxValue / scale + 0.5f);
}
}
这是一个公式,宝宝自己也不是很懂公式转换原理,反正需要的时候网上一搜就有很多例子,拿来直接用就行了。
现在正式贴上ClearEditText的监控代码:
public class ClearEditText extends EditText implements OnFocusChangeListener,
TextWatcher {
/**
* 带删除按钮的editText
*/
private Drawable mClearDrawable; // 删除图标
private boolean hasFoucs;
private int imgdp = 0;
public ClearEditText(Context context) {
this(context, null);
}
public ClearEditText(Context context, AttributeSet attrs) {
this(context, attrs, android.R.attr.editTextStyle);
}
public ClearEditText(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
init();
}
private void init() {
// 获取EditText的DrawableRight,假如没有设置就使用默认的图片,2是获得右边的图片 顺序是左上右下(0,1,2,3)
/*
* 主要是为了处理监听输入密码后的一键删除的图标
*/
mClearDrawable = getCompoundDrawables()[2];
if (mClearDrawable == null) {
mClearDrawable = getResources().getDrawable(R.drawable.dian);
}
imgdp = dip2px(getContext(), 30); // 转换dp
// rightDrawable.setBounds(0, 0, imgdp, imgdp);
mClearDrawable.setBounds(0, 0, imgdp, imgdp);
// 默认设置隐藏图标
setClearIconVisible(false);
// 设置焦点改变的监听
setOnFocusChangeListener(this);
// 设置输入框里面内容发生改变的监听
addTextChangedListener(this);
}
@Override
//这里判断输入时,自动设置edit清空。目的为删除“输入密码”这一句的提示语
public boolean onTouchEvent(MotionEvent event) {
if (event.getAction() == MotionEvent.ACTION_UP) {
if (getCompoundDrawables()[2] != null) {
boolean touchable = event.getX() > (getWidth() - getTotalPaddingRight())
&& (event.getX() < ((getWidth() - getPaddingRight())));
if (touchable) {
this.setText("");
}
}
}
return super.onTouchEvent(event);
}
/**
* 当ClearEditText焦点发生变化的时候,判断里面字符串长度设置清除图标的显示与隐藏?
*/
@Override
public void onFocusChange(View v, boolean hasFocus) {
this.hasFoucs = hasFocus;
//有焦点,字符大于0显示删除图标
if (hasFocus) {
setClearIconVisible(getText().length() > 0);
} else {
setClearIconVisible(false);
}
}
/**
* 设置清除图标的显示与隐藏,调用setCompoundDrawables为EditText绘制上去
*
* @param visible
*/
protected void setClearIconVisible(boolean visible) {
Drawable right = visible ? mClearDrawable : null;
setCompoundDrawables(getCompoundDrawables()[0],
getCompoundDrawables()[1], right, getCompoundDrawables()[3]);
}
/**
* 当输入框里面内容发生变化的时候回调的方法
*/
@Override
public void onTextChanged(CharSequence s, int start, int count, int after) {
if (hasFoucs) {
setClearIconVisible(s.length() > 0);
}
}
@Override
public void beforeTextChanged(CharSequence s, int start, int count,
int after) {
}
@Override
public void afterTextChanged(Editable s) {
}
// dp转px
public static int dip2px(Context context, float dpValue) {
final float scale = context.getResources().getDisplayMetrics().density;
return (int) (dpValue * scale + 0.5f);
}
}
登录的布局:
下面几节课,会涉及到数据库,及动态读取用户信息,用户信息保存到本地,以及向后台的服务请求