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">
      
      <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"
        />
      
      <ImageView android:id="@+id/b" 
          android:layout_width="125px" 
          android:layout_height="27px"
          android:layout_centerInParent="true" 
           android:src="@drawable/logo"
          />
        
            <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"
      >
       
<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帐号"
      />

       <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"
           />
       
<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"
      />

       <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"
    >
         
       <ImageView 
           android:id="@+id/tipsimg"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:src="@drawable/tips"
           android:layout_alignParentLeft="true"
           />
       
       <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"
           />
       
       <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"
           />
       
       <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文件如下