基本登錄頁面的實現


                                    基本登錄頁面的實現

1.簡單的自我介紹

   我是一名計算機系的大二學生,這個學期剛剛接觸Adriod,我們的老師希望我們用寫博客的方式記錄下自己的學習過程及成果,我也覺得這是個很好的方式讓我們理解的更加深入。在這裏,我將按照我自己的理解將老師所教的編程知識記錄下來。如有學術不精的地方,敬請指教。

2.Andriod基本登錄頁面的介紹

            大家看上面這張圖片,登錄頁面基本由兩部分組成,一部分爲有點發白的登錄框,一部分淡藍色的背景。這其實是一個佈局包裹一個佈局所呈現出來的效果。即一個activity_login.xml文件包裹一個login_top.xml文件所呈現出來的(使用<include/>標籤)。

3.login_top.xml文件




          

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin" 
    android:background="@drawable/logintopbg_roundcorner"
    >

    <EditText
        android:id="@+id/etName"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:background="@android:drawable/edit_text"
        android:drawableLeft="@drawable/etname"
        android:drawablePadding="10dp"
        android:ems="10"
        android:hint="@string/etName" >
    </EditText>

    <EditText
        android:id="@+id/etPassword"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
         android:layout_alignLeft="@+id/etName"
        android:layout_below="@+id/etName"
        android:background="@android:drawable/edit_text"
        android:drawableLeft="@drawable/etpassword"
        android:drawablePadding="10dp"
        android:layout_marginTop="20dp"
        android:ems="10"
        android:hint="@string/etPassword"
        android:inputType="textPassword"
        />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/etPassword"
        android:layout_below="@+id/etPassword"
        android:layout_marginTop="5dp"
        >

        <Button
            android:id="@+id/btnLogin"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/btnLogin"
            android:background="@drawable/btn_select"
            android:layout_weight="1" />

        <Button
            android:id="@+id/btnRegist"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/btnRegist2" 
            android:background="@drawable/btn_select"
            android:layout_weight="1"
            android:layout_marginLeft="5dp"
            />
        
    </LinearLayout>

<p style="font-size: 18px;"></RelativeLayout></p>



(1)基本是一些易懂的代碼,其中

android:background="@android:drawable/edit_text"

用的是系統定義好的背景。

(2)兩個Button按鈕使用的是線性佈局。

4.activity_login.xml文件(呈現出來則爲第一張圖片) 

<span style="font-size:24px;"><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/lightblue"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".LoginActivity" >
    <include android:id="@+id/ic1"
        layout="@layout/login_top1"/>

   

    <TextView
        android:id="@+id/tvForgetPass"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignRight="@id/ic1"
        android:layout_below="@+id/ic1"
        android:layout_marginTop="32dp"
        android:layout_marginRight="16dp"
        android:text="@string/tvForgetPass"
         android:textAppearance="?android:attr/textAppearanceButton"
        />
</span><span style="font-size:18px;">
    </span><span style="font-size: 18px;"><ImageView
        android:id="@+id/iv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_below="@+id/tvForgetPass"
        android:layout_alignRight="@+id/ic1"
        android:layout_marginBottom="20dp"
        android:src="@drawable/monkey" />

</RelativeLayout></span>

5.Ending Talk

       謝謝閱讀,請多多指教。



         
      


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章