Basic skills: full version login interface
The so-called full version of the login interface is the login interface with verification
It also includes registration and login
Registration : Including entering the user's mobile phone or information, initiating a request, waiting for the server to send a verification code or any kind of registration, and saving the registration information in the local database, waiting for the next time to open the app, and automatically log in
Login : Compare and verify the content requested by the user with the data saved in the background, for example, if the password is the same, it will be passed
===================================================================================
the basic:
First, complete the login interface. I hope everyone can make a formal login interface. These are very reusable. If you do it once, you will benefit from multiple projects. So this time, we will not do the simplest demo, but rely on a basic product.
first:
two interfaces
Login interface + registration interface:
Learn to define: some parameters, background and other settings are best not to be set in the layout file. For reuse and normalization, they should be defined in
Inside styles dimen drawable color etc:
E.g:
<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" />
Here: the layout height and width are defined in dimen. Now put the rendering of login and registration to see:
Simple login + registration interface, here we need to pay attention, not only the layout parameter setting, but also the monitoring of the password, here we need to judge whether the password input conforms to the specification, the general layout function in Android is still set in xml, but Sometimes it is necessary to dynamically monitor the control status in xml, which is definitely not easy to configure, so we need code monitoring to complete the login and registration of the full version. This step is also required. Now let's take a look at the .java function we are responsible for monitoring:
First look at the concept of this px dp conversion:
In the xml layout file, we can set both px and dp (or dip). Under normal circumstances, we will choose to use dp, which can ensure the same layout on machines with different screen resolutions. But in code, how to deal with it? Many control methods only provide a method for setting px, such as setPadding, and do not provide a method for setting dp. At this time, if you need to set dp, it is necessary to convert dp to px.
The following is a conceptual example showing the conversion between px and dp:
public class dp_to_px {
/**
* Convert from dp unit to px (pixel) according to the resolution of the phone
*/
public static int dip2px(Context context, float dpValue) {
final float scale = context.getResources().getDisplayMetrics().density;
return (int) (dpValue * scale + 0.5f);
}
/**
* Convert from px (pixel) unit to dp according to the resolution of the phone
*/
public static int px2dip(Context context, float pxValue) {
final float scale = context.getResources().getDisplayMetrics().density;
return (int) (pxValue / scale + 0.5f);
}
}
This is a formula, and the baby himself does not understand the principle of formula conversion very well. Anyway, when you need it, there are many examples on the Internet, just use it directly.
Now officially paste the monitoring code of ClearEditText:
public class ClearEditText extends EditText implements OnFocusChangeListener,
TextWatcher {
/**
* editText with delete button
*/
private Drawable mClearDrawable; // delete icon
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() {
// Get the DrawableRight of EditText, if it is not set, use the default picture, 2 is to get the right picture order is top left and bottom right (0,1,2,3)
/*
* Mainly to handle the one-click delete icon after monitoring the password
*/
mClearDrawable = getCompoundDrawables()[2];
if (mClearDrawable == null) {
mClearDrawable = getResources().getDrawable(R.drawable.dian);
}
imgdp = dip2px(getContext(), 30); // convert dp
// rightDrawable.setBounds(0, 0, imgdp, imgdp);
mClearDrawable.setBounds(0, 0, imgdp, imgdp);
// default setting hide icon
setClearIconVisible(false);
// Set the monitor for focus change
setOnFocusChangeListener(this);
// Set the listener for changes in the content of the input box
addTextChangedListener(this);
}
@Override
//When judging the input here, the edit is automatically set to clear. The purpose is to remove the prompt for the phrase "enter password"
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);
}
/**
* When the focus of ClearEditText changes, judge the display and hide of the clear icon by setting the string length in it?
*/
@Override
public void onFocusChange(View v, boolean hasFocus) {
this.hasFoucs = hasFocus;
//With focus, the character is greater than 0 to display the delete icon
if (hasFocus) {
setClearIconVisible(getText().length() > 0);
} else {
setClearIconVisible(false);
}
}
/**
* Set the display and hide of the clear icon, call setCompoundDrawables to draw it for EditText
*
* @param visible
*/
protected void setClearIconVisible(boolean visible) {
Drawable right = visible ? mClearDrawable : null;
setCompoundDrawables(getCompoundDrawables()[0],
getCompoundDrawables()[1], right, getCompoundDrawables()[3]);
}
/**
* Callback method when the content in the input box changes
*/
@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 to px
public static int dip2px(Context context, float dpValue) {
final float scale = context.getResources().getDisplayMetrics().density;
return (int) (dpValue * scale + 0.5f);
}
}
Login layout:
The following lessons will involve databases, dynamic reading of user information, user information saved locally, and service requests to the background