Android實現(xiàn)登錄注冊頁面(上)
簡單的Android開發(fā)登錄注冊,這個是沒有連數(shù)據(jù)庫的。
首先,新建項目,新建一個登錄頁面LoginActivity和注冊頁面RegisterActivity。
下面是登錄頁面的代碼:activity_login.xml
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" ? ? xmlns:app="http://schemas.android.com/apk/res-auto" ? ? xmlns:tools="http://schemas.android.com/tools" ? ? android:layout_width="match_parent" ? ? android:layout_height="match_parent" ? ? android:orientation="vertical" ? ? tools:context=".LoginActivity"> ? ? <LinearLayout ? ? ? ? android:layout_width="match_parent" ? ? ? ? android:layout_height="wrap_content" ? ? ? ? android:orientation="horizontal" ? ? ? ? android:layout_marginLeft="20dp" ? ? ? ? android:layout_marginRight="20dp" ? ? ? ? android:layout_marginTop="20dp" ? ? ? ? android:gravity="center_vertical"> ? ? ? ? ? <TextView ? ? ? ? ? ? android:layout_width="wrap_content" ? ? ? ? ? ? android:layout_height="wrap_content" ? ? ? ? ? ? android:text="賬號:" ? ? ? ? ? ? android:textSize="25sp" /> ? ? ? ? ? <EditText ? ? ? ? ? ? android:id="@+id/et_account" ? ? ? ? ? ? android:layout_width="match_parent" ? ? ? ? ? ? android:hint="請輸入用戶名或手機號" ? ? ? ? ? ? style="@style/MyEditStyle" ? ? ? ? ? ? android:layout_marginLeft="10dp" ? ? ? ? ? ? android:inputType="text"></EditText> ? ? </LinearLayout> ? ? ? <LinearLayout ? ? ? ? android:layout_width="match_parent" ? ? ? ? android:layout_height="wrap_content" ? ? ? ? android:orientation="horizontal" ? ? ? ? android:layout_marginLeft="20dp" ? ? ? ? android:layout_marginRight="20dp" ? ? ? ? android:layout_marginTop="20dp" ? ? ? ? android:gravity="center_vertical"> ? ? ? ? ? <TextView ? ? ? ? ? ? android:layout_width="wrap_content" ? ? ? ? ? ? android:layout_height="wrap_content" ? ? ? ? ? ? android:text="密碼:" ? ? ? ? ? ? android:textSize="25sp" /> ? ? ? ? ? <EditText ? ? ? ? ? ? android:id="@+id/et_password" ? ? ? ? ? ? android:layout_width="match_parent" ? ? ? ? ? ? android:hint="請輸入密碼" ? ? ? ? ? ? style="@style/MyEditStyle" ? ? ? ? ? ? android:layout_marginLeft="10dp" ? ? ? ? ? ? android:inputType="numberPassword"></EditText> ? ? </LinearLayout> ? ? <LinearLayout ? ? ? ? android:layout_width="match_parent" ? ? ? ? android:layout_height="wrap_content" ? ? ? ? android:orientation="horizontal" ? ? ? ? android:gravity="center" ? ? ? ? android:layout_marginTop="20dp" ? ? ? ? android:layout_marginLeft="20dp" ? ? ? ? android:layout_marginRight="20dp" ? ? ? ? > ? ? ? ? <CheckBox ? ? ? ? ? ? android:id="@+id/cb_remember" ? ? ? ? ? ? android:layout_width="wrap_content" ? ? ? ? ? ? android:layout_height="wrap_content" ? ? ? ? ? ? android:text="記住密碼"></CheckBox> ? ? </LinearLayout> ? ? <Button ? ? ? ? android:id="@+id/btn_login" ? ? ? ? android:layout_width="match_parent" ? ? ? ? android:layout_height="wrap_content" ? ? ? ? android:text="登錄" ? ? ? ? style="@style/MyBtnStyle" ? ? ? ? android:layout_marginTop="20dp" ? ? ? ? android:layout_marginLeft="20dp" ? ? ? ? android:layout_marginRight="20dp"></Button> ? ? <TextView ? ? ? ? android:layout_width="wrap_content" ? ? ? ? android:layout_height="wrap_content" ? ? ? ? android:textColor="@color/colorPrimary" ? ? ? ? android:text="還沒有賬號?" ? ? ? ? android:layout_gravity="right" ? ? ? ? android:layout_marginRight="20dp" ? ? ? ? android:layout_marginTop="10dp" ? ? ? ? android:onClick="toRegister" ? ? ? ? ></TextView> ? </LinearLayout>
效果如圖:
下面是注冊頁面的代碼:activity_register.xml
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" ? ? xmlns:app="http://schemas.android.com/apk/res-auto" ? ? xmlns:tools="http://schemas.android.com/tools" ? ? android:layout_width="match_parent" ? ? android:layout_height="match_parent" ? ? tools:context=".RegisterActivity" ? ? android:orientation="vertical"> ? ? ? ? <LinearLayout ? ? ? ? android:layout_width="match_parent" ? ? ? ? android:layout_height="wrap_content" ? ? ? ? android:orientation="horizontal" ? ? ? ? android:layout_marginLeft="20dp" ? ? ? ? android:layout_marginRight="20dp" ? ? ? ? android:layout_marginTop="20dp" ? ? ? ? android:gravity="center_vertical"> ? ? ? ? ? <TextView ? ? ? ? ? ? android:layout_width="wrap_content" ? ? ? ? ? ? android:layout_height="wrap_content" ? ? ? ? ? ? android:text="賬  號:" ? ? ? ? ? ? android:textSize="25sp" /> ? ? ? ? ? <EditText ? ? ? ? ? ? android:id="@+id/et_account" ? ? ? ? ? ? android:layout_width="match_parent" ? ? ? ? ? ? android:hint="請輸入用戶名或手機號" ? ? ? ? ? ? style="@style/MyEditStyle" ? ? ? ? ? ? android:layout_marginLeft="10dp" ? ? ? ? ? ? android:inputType="text"></EditText> ? ? </LinearLayout> ? ? ? <LinearLayout ? ? ? ? android:layout_width="match_parent" ? ? ? ? android:layout_height="wrap_content" ? ? ? ? android:orientation="horizontal" ? ? ? ? android:layout_marginLeft="20dp" ? ? ? ? android:layout_marginRight="20dp" ? ? ? ? android:layout_marginTop="20dp" ? ? ? ? android:gravity="center_vertical"> ? ? ? ? ? <TextView ? ? ? ? ? ? android:layout_width="wrap_content" ? ? ? ? ? ? android:layout_height="wrap_content" ? ? ? ? ? ? android:text="密  碼:" ? ? ? ? ? ? android:textSize="25sp" /> ? ? ? ? ? <EditText ? ? ? ? ? ? android:id="@+id/et_password" ? ? ? ? ? ? android:layout_width="match_parent" ? ? ? ? ? ? android:hint="請輸入密碼" ? ? ? ? ? ? style="@style/MyEditStyle" ? ? ? ? ? ? android:layout_marginLeft="10dp" ? ? ? ? ? ? android:inputType="numberPassword"></EditText> ? ? </LinearLayout> ? ? ? <LinearLayout ? ? ? ? android:layout_width="match_parent" ? ? ? ? android:layout_height="wrap_content" ? ? ? ? android:orientation="horizontal" ? ? ? ? android:layout_marginLeft="20dp" ? ? ? ? android:layout_marginRight="20dp" ? ? ? ? android:layout_marginTop="20dp" ? ? ? ? android:gravity="center_vertical"> ? ? ? ? ? <TextView ? ? ? ? ? ? android:layout_width="wrap_content" ? ? ? ? ? ? android:layout_height="wrap_content" ? ? ? ? ? ? android:text="確認密碼:" ? ? ? ? ? ? android:textSize="25sp" /> ? ? ? ? ? <EditText ? ? ? ? ? ? android:id="@+id/et_password_Confirm" ? ? ? ? ? ? android:layout_width="match_parent" ? ? ? ? ? ? android:hint="請再次輸入密碼" ? ? ? ? ? ? style="@style/MyEditStyle" ? ? ? ? ? ? android:layout_marginLeft="10dp" ? ? ? ? ? ? android:inputType="numberPassword"></EditText> ? ? </LinearLayout> ? ? ? <Button ? ? ? ? android:id="@+id/btn_register" ? ? ? ? android:layout_width="match_parent" ? ? ? ? android:layout_height="wrap_content" ? ? ? ? android:text="注冊" ? ? ? ? style="@style/MyBtnStyle" ? ? ? ? android:layout_marginTop="20dp" ? ? ? ? android:layout_marginLeft="20dp" ? ? ? ? android:layout_marginRight="20dp"></Button> ? ? ? <CheckBox ? ? ? ? android:id="@+id/cb_agree" ? ? ? ? android:layout_width="wrap_content" ? ? ? ? android:layout_height="wrap_content" ? ? ? ? android:textColor="@color/colorPrimary" ? ? ? ? android:text="還沒有賬號?" ? ? ? ? android:layout_marginRight="20dp" ? ? ? ? android:layout_marginTop="10dp"></CheckBox> ? </LinearLayout>
效果如圖:
最后,在LoginActivity.java中,加入一串代碼:getSupportActionBar().setTitle("登錄");
在RegisterActivity.java中,加入一串代碼:getSupportActionBar().setTitle("注冊");
public class LoginActivity extends AppCompatActivity { ? ? ? public static final int REQUEST_CODE_REGISTER = 1; ? ? private static final String TAG="tag"; ? ? private Button btnLogin; ? ? private EditText etAccount,etPassword; ? ? private CheckBox cbRemember; ? ? private String userName="a"; ? ? private String pass="123"; ? ? ? @Override ? ? protected void onCreate(Bundle savedInstanceState) { ? ? ? ? super.onCreate(savedInstanceState); ? ? ? ? setContentView(R.layout.activity_login); ? ? ? ? getSupportActionBar().setTitle("登錄"); ? ? ?} }
上面的代碼是LoginActivity.java中的代碼,其實要添加的只有一句,其他都寫出來是為了讓讀者能看懂,具體寫在哪里。這段代碼的作用是: 使標題欄那邊顯示的文字是登錄/注冊,而不是一串默認的英文
下面兩張圖片,左邊是未添加代碼的效果,右邊是添加代碼后的效果
寫到這里,頁面整體布局大致完成了,下面,你們需要添加部分細節(jié),來使得顏色和樣式跟我一致。我在上面的xml文件代碼中,有下面這個代碼:
style="@style/MyEditStyle"和style="@style/MyBtnStyle"
你們在前面寫的時候,可能會報錯,很正常,因為這是引用控件樣式的代碼,你們需要設(shè)置一下這個樣式,然后引用,就不會報錯啦。
這是設(shè)置EditText和Button控件的樣式,首先新建style.xml文件。在values中右鍵,New--Values Resource File,文件名為style。在style.xml文件中,寫如下代碼:
<?xml version="1.0" encoding="utf-8"?> <resources> ? ? ? <style name="MyBtnStyle"> ? ? ? ? <item name="android:textColor">@color/white</item> ? ? ? ? <item name="android:textSize">25sp</item> ? ? ? ? <item name="android:background">@drawable/btn_bg_selector</item> ? ? ? ? <item name="android:layout_marginTop">20dp</item> ? ? ? ? <item name="android:layout_marginRight">20dp</item> ? ? ? ? <item name="android:layout_marginLeft">20dp</item> ? ? </style> ? ? ? <style name="MyEditStyle"> ? ? ? ? <item name="android:textSize">18sp</item> ? ? ? ? <item name="android:background">@drawable/edit_text_bg</item> ? ? ? ? <item name="android:paddingLeft">10dp</item> ? ? ? ? <item name="android:layout_height">50dp</item> ? ? </style> ? </resources>
這里面又引用了樣式,是設(shè)置輸入框的邊框和按鈕的背景顏色。繼續(xù)下面的步驟:drawable右鍵--New--Drawable Resource File,文件名為:btn_bg_selector,代碼如下:
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> ? ? <item android:state_pressed="true" android:drawable="@color/colorPrimary"></item> ? ? <item android:state_pressed="false" android:drawable="@color/colorPrimaryDark"></item> ? </selector>
drawable右鍵--New--Drawable Resource File,文件名為:edit_text_bg,代碼如下:
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" ? ? android:shape="rectangle" ? ? > ? ? ? <stroke android:width="2dp" android:color="@color/colorPrimary"></stroke> ? ? <corners android:radius="10dp"></corners> ? </shape>
最后,再調(diào)整一下導(dǎo)航欄和標題欄的顏色,就OK啦
colors.xml文件中,添加綠色這個顏色,如下代碼,
<color name="colorPrimary">@color/green_500</color> ? ? <color name="colorPrimaryDark">@color/green_700</color> ? ? <color name="colorAccent">#E64A19</color> ? ? ? <color name="green_200">#A5D6A7</color> ? ? <color name="green_500">#4CAF50</color> <color name="green_700">#4CAF50</color>
themes.xml文件中,只需要修改前兩個item的內(nèi)容,其他代碼是為了你們參照一下位置,別改錯了。代碼如下:
<resources xmlns:tools="http://schemas.android.com/tools"> ? ? <!-- Base application theme. --> ? ? <style name="Theme.TraditionalCulture" parent="Theme.MaterialComponents.DayNight.DarkActionBar.Bridge"> ? ? ? ? <!-- Primary brand color. --> ? ? ? ? <item name="colorPrimary">@color/colorPrimary</item> ? ? ? ? <item name="colorPrimaryVariant">@color/colorPrimaryDark</item> ? ? ? ? <item name="colorOnPrimary">@color/white</item> ? ? ? ? <item name="colorAccent">@color/colorAccent</item> ? ? ? ? <!-- Secondary brand color. --> ? ? ? ? <item name="colorSecondary">@color/teal_200</item> ? ? ? ? <item name="colorSecondaryVariant">@color/teal_700</item> ? ? ? ? <item name="colorOnSecondary">@color/black</item> ? ? ? ? <!-- Status bar color. --> ? ? ? ? <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item> ? ? ? ? <!-- Customize your theme here. --> ? ? </style> </resources>
到這里,你的登錄注冊頁面就完成啦!
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Flutter?webview與網(wǎng)頁通訊交互實現(xiàn)
最近要在Flutter項目的基礎(chǔ)上加一個實時定位的功能,下面這篇文章主要給大家介紹了關(guān)于Flutter?webview與網(wǎng)頁通訊交互實現(xiàn)的相關(guān)資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2022-04-04Android使用ViewDragHelper實現(xiàn)QQ聊天氣泡拖動效果
這篇文章主要為大家詳細介紹了Android使用ViewDragHelper實現(xiàn)QQ聊天氣泡拖動效果,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2019-01-01在當前Activity之上創(chuàng)建懸浮view之WindowManager懸浮窗效果
這篇文章主要介紹了在當前Activity之上創(chuàng)建懸浮view之WindowManager懸浮窗效果的相關(guān)資料,需要的朋友可以參考下2016-01-01android Socket實現(xiàn)簡單聊天功能以及文件傳輸
這篇文章主要介紹了android Socket實現(xiàn)簡單聊天功能以及文件傳輸,非常具有實用價值,有需要的朋友可以參考下。2017-02-02Ubantu16.04進行Android 8.0源碼編譯的流程
這篇文章主要介紹了Ubantu16.04進行Android 8.0源碼編譯的相關(guān)資料,需要的朋友可以參考下2018-02-02Android手機衛(wèi)士之獲取聯(lián)系人信息顯示與回顯
這篇文章主要介紹了Android手機衛(wèi)士之獲取聯(lián)系人信息顯示與回顯的相關(guān)資料,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-10-10Android實現(xiàn)自定義的衛(wèi)星式菜單(弧形菜單)詳解
相信大家經(jīng)常在應(yīng)用中會看到衛(wèi)星菜單,那么這篇文章就來介紹在Android中如何實現(xiàn)自定義的衛(wèi)星式菜單(弧形菜單),有需要的可以參考學習。2016-08-08