android 支付宝登录界面,模仿支付宝登录页的实现（android）

╰半夏微凉° 2022-10-17 11:19 431阅读 0赞

先看看支付宝登录页面长什么模样

![e96433c34412f8d627231c0d9bdd46ec.png][]

首先 看见图  先分析  登录页面所需要的元素——需要一个ImageView 存放用户头像

接下来就是账号密码输入框了 (里面的细节在于  当开始输入的 在编辑框后面会出现一个小叉，用于删除文本，该选中的框 下面的那条线会变蓝色)

再往下面 就是button了

接下来我们就开始考虑方案——1.头像  (我们可以使用fresco库来加载图片，具体用法这里不提了)

2.两个输入框(这里面的输入框的功能都差不多，可以考虑封装成一个控件，达到复用的效果)

3.剩下的Button随意就好

接下来 主要说的就是 自定义这个输入框的方法了

step1:

新建attrs.xml

这个属性代表账号还是密码的说明  对比原图应该就能懂了

删除按钮的图标的地址

更多图标的地址(一开始密码，账号没想过合在一起，后面为了省事，这里也代表密码框开始可视图标的地址)

原支付宝 输入框获得焦点时，下面那条线会变蓝  so

这两个属性就是为了这个

代表输入框没有输入的提示

表示这个空间是普通控件  还是密码框

step2:

新建布局文件

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">

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"

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" />

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"

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" />

android:layout\_width="match\_parent"

android:layout\_height="1dp"

android:background="\#4000"

android:layout\_alignParentBottom="true"

android:id="@+id/v\_line" />

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();

到此 支付宝登陆界面所使用的输入框就基本完了，还有下拉选择账号的功能后面再说吧

[e96433c34412f8d627231c0d9bdd46ec.png]: /images/20221014/1d56b8c207a84600994125f31d9cc1eb.png

android 支付宝登录界面,模仿支付宝登录页的实现（android）

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 Android 支付宝支付

相关 Android 微信支付&支付宝支付

相关 android 支付宝登录界面,模仿支付宝登录页的实现（android）

相关 Android支付接入（一）：支付宝

相关 Android封装支付宝支付

相关 Android支付宝支付步骤简述

相关 Android接入支付宝实现支付功能

相关支付宝 app,网站支付宝登录

相关 Android支付之接入支付宝

相关 Android 集成支付宝支付