先看看支付寶登錄頁面長什么模樣
首先 看見圖 先分析 登錄頁面所需要的元素——需要一個ImageView 存放用戶頭像
接下來就是賬號密碼輸入框了 （里面的細節在於 當開始輸入的 在編輯框后面會出現一個小叉，用於刪除文本，該選中的框 下面的那條線會變藍色）
再往下面 就是button了
接下來我們就開始考慮方案——1.頭像 （我們可以使用fresco庫來加載圖片，具體用法這里不提了）
2.兩個輸入框（這里面的輸入框的功能都差不多，可以考慮封裝成一個控件，達到復用的效果）
3.剩下的Button隨意就好
接下來 主要說的就是 自定義這個輸入框的方法了
step1:
新建attrs.xml
<resources>
<declare-styleable name="AccountInputView">
<attr name="accountText" format="string"/> 這個屬性代表賬號還是密碼的說明 對比原圖應該就能懂了
<attr name="delSrc" format="reference"/> 刪除按鈕的圖標的地址
<attr name="moreSrc" format="reference"/>更多圖標的地址（一開始密碼，賬號沒想過合在一起，后面為了省事，這里也代表密碼框開始可視圖標的地址）
<attr name="lineColor" format="color"/> 原支付寶 輸入框獲得焦點時，下面那條線會變藍 so
<attr name="lineColorSelect" format="color"/>這兩個屬性就是為了這個
<attr name="etHint" format="string"/>代表輸入框沒有輸入的提示
<attr name="delShow" format="boolean"/>
<attr name="mode" > 表示這個空間是普通控件 還是密碼框
<enum name="normal" value="0"/>
<enum name="password" value="1"/>
</attr>
</declare-styleable>
</resources>
step2:
新建布局文件
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="55dp"
android:gravity="center_vertical"
android:focusable="true"
android:focusableInTouchMode="true"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:paddingBottom="5dp"
android:paddingTop="5dp">
<TextView
android:layout_marginLeft="15dp"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="賬號"
android:textColor="@android:color/black"
android:id="@+id/tv_account"
/>
<EditText
android:gravity="left|center_vertical"
android:layout_width="150dp"
android:layout_height="match_parent"
android:background="@null"
android:singleLine="true"
android:id="@+id/et_account"
android:hint="請輸入賬號"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:password="false" />
<ImageView
android:padding="5dp"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
android:src="@drawable/eye"
android:id="@+id/iv_more"
android:layout_above="@+id/v_line"
/>
<ImageView
android:padding="5dp"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="@drawable/arrowdown"
android:layout_above="@+id/v_line"
android:visibility="visible"
android:layout_toLeftOf="@id/iv_more"
android:id="@+id/iv_del" />
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#4000"
android:layout_alignParentBottom="true"
android:id="@+id/v_line" />
</RelativeLayout>
step3:
新建類：
/**
* Created by wangjie on 15/8/11.
*/
public class AccountInputView extends RelativeLayout {
private EditText etAccount;
private View vLine;
private ImageView ivDel;
private ImageView ivMore;
private TextView tvAccount;
private CharSequence accountText;
private int lineColor;
private Drawable delDrawable;
private Drawable moreDrawable;
private boolean delShow;
private CharSequence etHint;
private int lineColorSelect;
private int mode;
private final static int MODE_NORMAL=0;
private final static int MODE_PASSWORD=1;
private int currentMode=0;
public EditText getEtAccount(){
return etAccount;
}
public AccountInputView(Context context) {
super(context);
}
private void initView(final Context context) {
LayoutInflater
inflater = (LayoutInflater) context
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
inflater.inflate(R.layout.view_account_input,
this);
tvAccount= (TextView) findViewById(R.id.tv_account);
vLine=findViewById(R.id.v_line);
ivDel= (ImageView) findViewById(R.id.iv_del);
ivMore= (ImageView) findViewById(R.id.iv_more);
etAccount= (EditText) findViewById(R.id.et_account);
if(mode== MODE_PASSWORD){
currentMode=MODE_PASSWORD;
etAccount.setTransformationMethod(PasswordTransformationMethod.getInstance());
}
if(!TextUtils.isEmpty(accountText)){
tvAccount.setText(accountText);
}
if (lineColor !=0){
vLine.setBackgroundColor(lineColor);
}
ivDel.setImageDrawable(delDrawable);
ivMore.setImageDrawable(moreDrawable);
if(delShow)
{
ivDel.setVisibility(View.VISIBLE);
}else {
ivDel.setVisibility(View.INVISIBLE);
}
if(!TextUtils.isEmpty(etHint)){
etAccount.setHint(etHint);
}
etAccount.setOnFocusChangeListener(new OnFocusChangeListener() {
@Override
public void onFocusChange(View v, boolean hasFocus) {
if (hasFocus)
vLine.setBackgroundColor(lineColorSelect);
else
vLine.setBackgroundColor(lineColor);
}
});
etAccount.addTextChangedListener(new TextWatcher() {
@Override
public void beforeTextChanged(CharSequence s, int start, int count, int after) {
}
@Override
public void onTextChanged(CharSequence s, int start, int before, int count) {
}
@Override
public void afterTextChanged(Editable s) {
if (!TextUtils.isEmpty(s))
ivDel.setVisibility(VISIBLE);
else
ivDel.setVisibility(INVISIBLE);
}
});
ivDel.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
etAccount.setText("");
}
});
ivMore.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
if (mode == MODE_PASSWORD) {
if (currentMode == MODE_PASSWORD) {
etAccount.setTransformationMethod(HideReturnsTransformationMethod.getInstance());
ivMore.setImageResource(R.drawable.eye);
currentMode = MODE_NORMAL;
} else if (currentMode == MODE_NORMAL) {
etAccount.setTransformationMethod(PasswordTransformationMethod.getInstance());
ivMore.setImageResource(R.drawable.eyenormal);
currentMode = MODE_PASSWORD;
}
Editable editable = etAccount.getText();
Selection.setSelection(editable, editable.length());
} else if (mode == MODE_NORMAL) {
Toast.makeText(context, "這里將展示一些紀錄", Toast.LENGTH_LONG).show();
}
}
});
}
public AccountInputView(Context context, AttributeSet attrs) {
super(context, attrs);
TypedArray array=context.obtainStyledAttributes(attrs,R.styleable.AccountInputView);
accountText = array.getText(R.styleable.AccountInputView_accountText);
lineColor = array.getColor(R.styleable.AccountInputView_lineColor, getResources().getColor(R.color.lineColorDefault));
delDrawable = array.getDrawable(R.styleable.AccountInputView_delSrc);
moreDrawable = array.getDrawable(R.styleable.AccountInputView_moreSrc);
delShow = array.getBoolean(R.styleable.AccountInputView_delShow, false);
etHint = array.getText(R.styleable.AccountInputView_etHint);
lineColorSelect = array.getColor(R.styleable.AccountInputView_lineColorSelect, getResources().getColor(R.color.lineColorBule));
mode = array.getInt(R.styleable.AccountInputView_mode, 0);
initView(context);
array.recycle();
}
}
到此 支付寶登陸界面所使用的輸入框就基本完了，還有下拉選擇賬號的功能后面再說吧