Android設計登陸界面

原文鏈接

完成上一個博客的界面設計

效果如下：

 

Main.xml

 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="fill_parent" 
   android:layout_height="fill_parent"
   android:orientation="vertical"
   android:background="#EEEEEE">
<!-- 導航欄開始 -->
   <RelativeLayout android:id="@+id/Relativelayout01"
       android:background="@drawable/repeat_bg"
      android:layout_width="fill_parent" 
      android:layout_height="42px">
      <!-- 返回按鈕  與父控件左邊緣對齊android:layout_toLeftOf=@id/Relativelayout01 -->
      <ImageButton android:id="@+id/a"
        android:layout_width="36px" 
        android:layout_height="27px"
        android:layout_toLeftOf="@id/Relativelayout01" 
        android:src="@drawable/back"
        android:layout_marginTop="10px"
        />
      <!-- 中間的Logo，在父控件中居中  android:layout_centerInParent=true  -->
      <ImageView android:id="@+id/b" 
          android:layout_width="125px" 
          android:layout_height="27px"
          android:layout_centerInParent="true" 
           android:src="@drawable/logo"
          />
        <!-- 登入按鈕  在父控件中居右 android:layout_alignParentRight="true"-->
            <ImageButton android:id="@+id/c"
        android:layout_width="48px" 
        android:layout_height="27px"
        android:layout_alignParentRight="true"
        android:src="@drawable/login"
        android:layout_marginTop="10px"
        />
   </RelativeLayout>
<!-- 導航欄結束 -->

<!-- 立即登入的圖片 -->
 <LinearLayout
   android:layout_width="wrap_content" 
   android:layout_height="wrap_content"
   android:orientation="vertical">
       
       <ImageView android:id="@+id/b" 
          android:layout_width="wrap_content" 
          android:layout_height="wrap_content"
          android:layout_centerInParent="true" 
           android:src="@drawable/logtext"
           android:layout_marginLeft="10px"
           android:layout_marginTop="8px"
          />
</LinearLayout>
<!-- 登陸框主體開始 -->
   <RelativeLayout android:id="@+id/Relativelayout02"
       android:background="@drawable/login_bg"
      android:layout_width="304px" 
      android:layout_height="90px"
      android:layout_marginTop="5px"
      android:layout_marginLeft="8px"
      >
       <!-- 登陸帳號的文本提示，設置的是對齊父控件的左邊緣 ,android:layout_alignParentLeft="true"-->
<TextView android:id="@+id/LoginIDx"
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content"
      android:layout_marginLeft="10px"
      android:layout_marginTop="12px"
      android:layout_alignParentLeft="true"
      android:text="Email帳號"
      />
<!-- 登陸帳號的輸入框，設置的位置是放在 登陸帳號的文本提示這個控件的右邊,android:layout_toRightOf="@id/LoginIDx"-->
       <EditText 
           android:id="@+id/LoginID" 
           android:layout_width="240px"
           android:layout_height="40px" 
           android:background="@null"
           android:layout_marginLeft="10px"
           android:textColor="#b9b9b9"
           android:textSize="14px"
           android:paddingTop="5px"
           android:layout_toRightOf="@id/LoginIDx"
           />
<!-- 登陸密碼的文本提示，設置的是放在登陸帳號文本提示的下面， android:layout_below="@id/LoginIDx"-->       
<TextView android:id="@+id/PassWordx"
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content"
      android:layout_marginLeft="10px"
      android:layout_alignParentLeft="true"
      android:text="密碼"
      android:layout_marginTop="25px"
      android:layout_below="@id/LoginIDx"
      />
<!-- 登陸密碼的輸入框，設置的位置是放在 登陸密碼的文本提示這個控件的右邊,android:layout_toRightOf="@id/PassWordx"-->
       <EditText 
           android:id="@+id/PassWord" 
           android:layout_width="240px"
           android:layout_height="40px"
           android:layout_below="@id/LoginID"
           android:background="@null"
           android:layout_marginLeft="10px"
           android:textColor="#b9b9b9"
           android:textSize="14px"
           android:paddingTop="5px"
            android:layout_toRightOf="@id/PassWordx"
           />
       </RelativeLayout>
  <!-- 登陸框主體結果 -->
  
  <!-- 登陸框下面的貼心小提醒區域開始 -->
  <RelativeLayout
      android:id="@+id/LinearLayout02" 
   android:layout_width="wrap_content" 
   android:layout_height="wrap_content"

      android:layout_marginTop="5px"
      android:layout_marginLeft="8px"
    >
         <!-- 貼心小提醒旁邊的感嘆號圖片，設置的是對齊父控件的左邊緣，android:layout_alignParentLeft="true"-->
       <ImageView 
           android:id="@+id/tipsimg"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:src="@drawable/tips"
           android:layout_alignParentLeft="true"
           />
       <!--貼心小提醒的文字控件 ，設置的是放在感嘆號圖片的右邊 ,android:layout_toRightOf="@id/tipsimg"-->
       <TextView
           android:id="@+id/Tips1"
           android:text="貼心小提醒"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:textColor="#4f4f4f"
           android:textSize="15px"
           android:layout_marginLeft="5dp"
           android:layout_toRightOf="@id/tipsimg"
           />
       <!-- 文本提示內容1,設置的是放在感嘆號圖片的下面，android:layout_below="@id/tipsimg" -->
       <TextView
           android:id="@+id/Tipstxt1"
           android:text="1.若未註冊請與電腦版註冊"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:textColor="#4f4f4f"
           android:textSize="12px"
           android:layout_marginLeft="5dp"
           android:layout_below="@id/tipsimg"
           android:layout_marginTop="5px"
           />
       <!-- 文本提示內容2， 設置的是放在文本提示內容1的下面，android:layout_below="@id/Tipstxt1"-->
       <TextView
           android:id="@+id/Tipstxt2"
           android:text="2.若你登入有問題請來電客戶中心"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:textColor="#4f4f4f"
           android:textSize="12px"
           android:layout_marginLeft="5dp"
           android:layout_below="@id/Tipstxt1"
           android:layout_marginTop="5px"
           />
</RelativeLayout>
  <!-- 登陸框下面的貼心小提醒區域結束 -->
</LinearLayout>

總結：

開始搞Android第二天，勉強把我想要做的界面做出來了。

還有有Html+css的經驗，所以一些layout的東西可以大致看得懂，在做規劃的時候先想把Html+css是怎麼處理，然後再去找對應的方式！

Android的代碼分離做得真徹底，再之界面設計的ide功能太弱了，很多時候都是手寫代碼，還是懷念Vs的IDE啊。

++////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////++

對於按鈕的一些便捷控制可以再圖片中直接添加xml文件如下

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/v5_0_1_guide_blue_default" android:state_focused="true" android:state_pressed="false"/>
    <item android:drawable="@drawable/v5_0_1_guide_blue_press" android:state_pressed="true"/>
    <item android:drawable="@drawable/v5_0_1_guide_blue_default"/>
</selector>