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中定义可以重复使用