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>