28.2用户登录（手机号，密码框的样式）

实现步骤：

效果图：

1.首先编写layout代码：

<LinearLayout    android:layout_width="match_parent"    android:layout_height="wrap_content"    android:orientation="vertical"    android:layout_marginTop="40dp"    style="@style/editText_base">    <zuo.com.ui.widget.ClearEditText        android:id="@+id/etxt_phone"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:drawableLeft="@mipmap/icon_telphone_32"        android:drawablePadding="20dp"        android:hint="请输入手机号码"        android:inputType="phone"        style="@style/editText_base"        />    <View        style="@style/line_vertical"/>    <zuo.com.ui.widget.ClearEditText        android:id="@+id/etxt_pwd"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:drawablePadding="20dp"        android:hint="请输入登录密码"        android:drawableLeft="@mipmap/icon_lock"        android:inputType="textPassword"        style="@style/editText_base"        /></LinearLayout><Button    android:id="@+id/btn_login"    android:layout_width="match_parent"    android:layout_height="wrap_content"    android:text="登 录"    android:layout_marginTop="30dp"    android:layout_margin="20dp"    style="@style/bigRedButton"    />

2.首先你会发现LinearLayout的style="@style/editText_base"，没有定义，所以我们需要定义

<!--editText的样式-->  <style name="search_view">      <item name="android:textSize">18sp</item>      <item name="android:textColor">@color/white</item>      <item name="android:textColorHint">@color/white</item>      <item name="android:background">@drawable/selector_search_view</item>      <item name="android:paddingTop">6dp</item>      <item name="android:paddingBottom">6dp</item>      <item name="android:paddingLeft">4dp</item>      <item name="android:singleLine">true</item>  </style>

3.后面就是<zuo.com.ui.widget.ClearEditText/>这个控件没定义，这个控件需要我们自定义编写class,在weight中定义这个类

package zuo.com.ui.widget;import android.content.Context;import android.graphics.drawable.Drawable;import android.support.v4.content.ContextCompat;import android.support.v4.graphics.drawable.DrawableCompat;import android.support.v7.widget.AppCompatEditText;import android.text.Editable;import android.text.TextWatcher;import android.util.AttributeSet;import android.view.MotionEvent;import android.view.View;import zuo.com.ui.R;/** * Created by <a href="http://www.cniao5.com">菜鸟窝</a> * 一个专业的Android开发在线教育平台 */public class ClearEditText extends AppCompatEditText implements View.OnTouchListener, View.OnFocusChangeListener, TextWatcher {    private Drawable mClearTextIcon;    private OnFocusChangeListener mOnFocusChangeListener;    private OnTouchListener mOnTouchListener;    public ClearEditText(final Context context) {        super(context);        init(context);    }    public ClearEditText(final Context context, final AttributeSet attrs) {        super(context, attrs);        init(context);    }    public ClearEditText(final Context context, final AttributeSet attrs, final int defStyleAttr) {        super(context, attrs, defStyleAttr);        init(context);    }    private void init(final Context context) {        final Drawable drawable = ContextCompat.getDrawable(context, R.mipmap.icon_delete_32);        final Drawable wrappedDrawable = DrawableCompat.wrap(drawable); //Wrap the drawable so that it can be tinted pre Lollipop        DrawableCompat.setTint(wrappedDrawable, getCurrentHintTextColor());        mClearTextIcon = wrappedDrawable;        mClearTextIcon.setBounds(0, 0, mClearTextIcon.getIntrinsicHeight(), mClearTextIcon.getIntrinsicHeight());        setClearIconVisible(false);        super.setOnTouchListener(this);        super.setOnFocusChangeListener(this);        addTextChangedListener(this);    }    @Override    public void setOnFocusChangeListener(OnFocusChangeListener l) {        mOnFocusChangeListener = l;    }    @Override    public void setOnTouchListener(OnTouchListener l) {        mOnTouchListener = l;    }    @Override    public void onFocusChange(View v, boolean hasFocus) {        if (hasFocus) {            setClearIconVisible(getText().length() > 0);        } else {            setClearIconVisible(false);        }        if (mOnFocusChangeListener != null) {            mOnFocusChangeListener.onFocusChange(v, hasFocus);        }    }    @Override    public boolean onTouch(View view, MotionEvent motionEvent) {        final int x = (int) motionEvent.getX();        if (mClearTextIcon.isVisible() && x > getWidth() - getPaddingRight() - mClearTextIcon.getIntrinsicWidth()) {            if (motionEvent.getAction() == MotionEvent.ACTION_UP) {                setError(null);                setText("");            }            return true;        }        return mOnTouchListener != null && mOnTouchListener.onTouch(view, motionEvent);    }    @Override    public final void onTextChanged(CharSequence text, int start, int lengthBefore, int lengthAfter) {        if (isFocused()) {            setClearIconVisible(text.length() > 0);        }    }    @Override    public void beforeTextChanged(CharSequence s, int start, int count, int after) {    }    @Override    public void afterTextChanged(Editable s) {    }    private void setClearIconVisible(final boolean visible) {        mClearTextIcon.setVisible(visible, false);        final Drawable[] compoundDrawables = getCompoundDrawables();        setCompoundDrawables(                compoundDrawables[0],                compoundDrawables[1],                visible ? mClearTextIcon : null,                compoundDrawables[3]);    }}

4.最后发现style="@style/editText_base"，这个没有定义

<!--edittext的样式-->
    <style name="editText_base">
    <item name="android:textSize">16sp</item>
    <item name="android:padding">8dp</item>
    <item name="android:minHeight">20dp</item>
    <item name="android:textColor">@color/black</item>
    <item name="android:textColorHint">@color/border_color</item>
    <item name="android:gravity">center_vertical</item>
    <item name="android:background">@null</item>
    </style>

总结：

上面的所有styles实际上就是设置空间的属性，在layout中也可以这样设置控件的属性，只是在style中定义可以重复使用