みなさん、こんにちは。今日は前のブログのUIデザインを持ってきました。今日は、テキストボックスをより美しくし、ユーザーとの良好な対話を追求するためのテキストボックスのデザインです。
今日は2つのステップがあります：1。2つのインターフェースのレイアウトを取得します
2.テキストボックスを美しくし、クリック効果を持たせる
最初にレンダリングを示します。2つのインターフェイスのテーマが同じであることがわかります。
特徴：1。EditTextの境界線は色付きです
2.丸められます
3.携帯電話番号を入力するための2つのテキストボックスとパスワードを入力するための2つのテキストボックスの境界線の色が異なることがわかります
（これは、テキストボックスをクリックすると、現在のテキストボックスの色が暗くなり、フォーカスのないテキストボックスの色が変わらないためです）
最初のステップは、レイアウト上のコードを取得することです
1.ログインインターフェイスのレイアウトコード
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/userlogin_logo" />
</RelativeLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical" >
<EditText
android:id="@+id/signup_phone_num_Edta"
android:layout_width="match_parent"
android:layout_height="45dip"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:layout_marginTop="15dp"
android:background="@drawable/bg_edittext"
android:hint="请输入11位手机号"
android:inputType="number"
android:paddingLeft="10dip"
android:singleLine="true"
android:textColorHint="#AAAAAA" />
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<EditText
android:id="@+id/signup_pswd_Edta"
android:layout_width="match_parent"
android:layout_height="45dip"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:layout_marginTop="15dp"
android:background="@drawable/bg_edittext"
android:hint="请输入密码"
android:inputType="textPassword"
android:paddingLeft="10dip"
android:singleLine="true"
android:textColorHint="#AAAAAA" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:orientation="horizontal" >
<ImageView
android:id="@+id/iv_hide"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginRight="15dp"
android:layout_marginTop="13dp"
android:padding="14dp"
android:src="@drawable/agt" />
<ImageView
android:id="@+id/iv_show"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginRight="15dp"
android:layout_marginTop="13dp"
android:padding="14dp"
android:src="@drawable/agu"
android:visibility="gone" />
</LinearLayout>
</RelativeLayout>
<Button
android:id="@+id/signup_Btna"
android:layout_width="match_parent"
android:layout_height="45dip"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:layout_marginTop="15dp"
android:background="@drawable/shape_button"
android:gravity="center"
android:paddingLeft="10dip"
android:text="登陆"
android:textColor="#ffffff" />
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="15dp"
android:layout_marginTop="5dp" >
<CheckBox
android:id="@+id/cb_passworda"
android:layout_width="wrap_content"
android:layout_height="25dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="25dp"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="40dp"
android:gravity="center"
android:text="记住密码"
android:textColor="#00868B" />
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="15dp"
android:layout_marginTop="5dp" >
<CheckBox
android:id="@+id/cb_logina"
android:layout_width="wrap_content"
android:layout_height="25dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="25dp"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="40dp"
android:gravity="center"
android:text="自动登录"
android:textColor="#00868B" />
</RelativeLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="bottom" >
<TextView
android:id="@+id/goto_reg_texta"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="15dp"
android:layout_marginLeft="25dp"
android:background="@drawable/main_bt_pressed"
android:text="账户注册"
android:textColor="#00868B" />
</LinearLayout>
</LinearLayout>
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
>
<ImageView
android:id="@+id/backImgb"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="10dp"
android:scaleType="centerInside"
android:src="@drawable/back_normal" />
<TextView
android:id="@+id/registerTextb"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:gravity="center_vertical"
android:text="注册"
android:textColor="#00868B"
android:textSize="20sp" />
</RelativeLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="8"
android:orientation="vertical" >
<EditText
android:id="@+id/phone_num_Edtb"
android:layout_width="match_parent"
android:layout_height="45dip"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:layout_marginTop="15dp"
android:background="@drawable/bg_edittext"
android:hint="手机号"
android:inputType="number"
android:padding="10dip"
android:singleLine="true"
android:textColorHint="#AAAAAA" />
<EditText
android:id="@+id/pswd_Edtb"
android:layout_width="match_parent"
android:layout_height="45dip"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:layout_marginTop="15dp"
android:background="@drawable/bg_edittext"
android:hint="6-10位密码"
android:inputType="textPassword"
android:padding="10dip"
android:singleLine="true"
android:textColorHint="#AAAAAA" />
<EditText
android:id="@+id/confirm_pswd_Edtb"
android:layout_width="match_parent"
android:layout_height="45dip"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:layout_marginTop="15dp"
android:background="@drawable/bg_edittext"
android:hint="确认密码"
android:inputType="textPassword"
android:padding="10dip"
android:singleLine="true"
android:textColorHint="#AAAAAA" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<EditText
android:id="@+id/verify_Edtb"
android:layout_width="match_parent"
android:layout_height="45dip"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:layout_marginTop="10dp"
android:layout_weight="1"
android:background="@drawable/bg_edittext"
android:hint="验证码"
android:inputType="number"
android:padding="5dip"
android:singleLine="true"
android:textColorHint="#AAAAAA" />
<Button
android:id="@+id/verify_Btnb"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginRight="15dp"
android:layout_marginTop="10dp"
android:layout_weight="2"
android:text="验证码"
android:textColor="#00868B" />
</LinearLayout>
<Button
android:id="@+id/reg_Btnb"
android:layout_width="fill_parent"
android:layout_height="45dip"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:layout_marginTop="15dp"
android:background="@drawable/shape_button"
android:text="注册"
android:textColor="#fff" />
</LinearLayout>
</LinearLayout>2番目のステップは、丸みを帯びた角を修正し、焦点を合わせるときに境界線の色を変更することです
1.（開発経験のある人なら誰でも、表示効果のデザインが1つのファイル（bg_edittext.xml）に含まれていることがわかります）
2. bg_edittext.xmlには、bg_edittext_normal（フォーカスされていない状態の効果）とbg_edittext_focused（フォーカスされた状態の効果）の2つのファイルがあります。
コードを見てください
1. bg_edittext.xml
<?xml version="1.0" encoding="UTF-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/bg_edittext_normal" android:state_window_focused="false"/>
<item android:drawable="@drawable/bg_edittext_focused" android:state_focused="true"/>
</selector>
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#FFFFFF" />
<corners android:radius="3dip"/>
<stroke
android:width="1dip"
android:color="#BDC7D8" />
</shape> 3. bg_edittext_focused
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#FFFFFF" />
<corners android:radius="3dip"/>
<stroke
android:width="1dip"
android:color="#728ea3" />
</shape> 前のセクションでは、角の丸みを非常に明確にしました。前のブログにアクセスして確認する方法がわからない場合は、
今日はここにいます。ご不明な点がございましたら、メッセージを残してご返送ください。
スプレーが嫌い