Android studio 如何設計一個較為好看的使用者名稱,密碼輸入框

chengxunzun發表於2018-09-14

Android studio 如何設計一個較為好看的使用者名稱,密碼輸入框

大家好,今天是我第一次寫部落格,寫部落格的各種功能還用的不熟,請大家多多見諒,請大家多多批評

相當於一個註冊頁面
----------<?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:background="@drawable/register_bg"
    android:orientation="vertical" >
    <include layout="@layout/main_title_bar" />
    <ImageView
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="25dp"
        android:src="@drawable/default_icon" />
    <EditText
        android:id="@+id/et_user_name"
        android:layout_width="fill_parent"
        android:layout_height="48dp"
        android:layout_gravity="center_horizontal"
        android:layout_marginLeft="35dp"
        android:layout_marginRight="35dp"
        android:layout_marginTop="35dp"
        android:background="@drawable/bg"
        android:drawableLeft="@drawable/user_name_icon"
        android:drawablePadding="10dp"
        android:gravity="center_vertical"
        android:hint="請輸入使用者名稱"
        android:paddingLeft="8dp"
        android:singleLine="true"
        android:textColor="#000000"
        android:textColorHint="#a3a3a3"
        android:textSize="14sp" />
    <EditText
        android:id="@+id/et_psw"
        android:layout_width="fill_parent"
        android:layout_height="48dp"
        android:layout_gravity="center_horizontal"
        android:layout_marginLeft="35dp"
        android:layout_marginRight="35dp"
        android:background="@drawable/bg"
        android:drawableLeft="@drawable/psw_icon"
        android:drawablePadding="10dp"
        android:hint="請輸入密碼"
        android:inputType="textPassword"
        android:paddingLeft="8dp"
        android:singleLine="true"
        android:textColor="#000000"
        android:textColorHint="#a3a3a3"
        android:textSize="14sp" />
    <EditText
        android:id="@+id/et_psw_again"
        android:layout_width="fill_parent"
        android:layout_height="48dp"
        android:layout_gravity="center_horizontal"
        android:layout_marginLeft="35dp"
        android:layout_marginRight="35dp"
        android:background="@drawable/bg"
        android:drawableLeft="@drawable/psw_icon"
        android:drawablePadding="10dp"
        android:hint="請再次輸入密碼"
        android:inputType="textPassword"
        android:paddingLeft="8dp"
        android:singleLine="true"
        android:textColor="#000000"
        android:textColorHint="#a3a3a3"
        android:textSize="14sp" />
    <Button
        android:id="@+id/btn_register"
        android:layout_width="fill_parent"
        android:layout_height="40dp"
        android:layout_gravity="center_horizontal"
        android:layout_marginLeft="35dp"
        android:layout_marginRight="35dp"
        android:layout_marginTop="15dp"
        android:text="注 冊"
        android:textColor="@android:color/white"
        android:textSize="18sp" />
</LinearLayout>---------
main_title_bar的佈局檔案(其實是標題欄上面帶返回箭頭的佈局頁面的實現,也可以不用寫)
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/title_bar"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:background="@android:color/transparent" >
    <TextView
        android:id="@+id/tv_back"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true"
        android:background="@drawable/go_back_selector" />
    <TextView
        android:id="@+id/tv_main_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@android:color/white"
        android:textSize="20sp"
        android:layout_centerInParent="true"
        />
    <TextView
        android:id="@+id/tv_save"
        android:layout_width="wrap_content"
        android:layout_height="30dp"
        android:layout_alignParentRight="true"
        android:layout_marginTop="10dp"
        android:layout_marginRight="20dp"
        android:layout_centerVertical="true"
        android:gravity="center"
        android:textSize="16sp"
        android:textColor="@android:color/white"
        android:text="儲存"
        android:visibility="gone"
        />
</RelativeLayout>

註冊頁面需要的圖片
default_icon:這裡寫圖片描述
user_name_icon:這裡寫圖片描述
psw_icon:這裡寫圖片描述
bg:這裡寫圖片描述

執行的介面 這裡寫圖片描述
其實對於文字框設計有一些建議,是首先給文字框加一個背景,其次可以用drawableLeft給文字框左設定圖,調整顏色,大小 ,可以用drawablePadding
調整圖片的位置,讓他們看起來好看點。
第一次寫部落格還是有點緊張的,希望各位哥 姐 大佬們提出不足,讓我看到自己的缺點,下次改正,讓我們共同進步。謝謝大家了

相關文章