Android之模仿微信登陆界面（一）

本次做的xml是登录和注册界面，用的是button的自定义图标

 

      <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#ffffff"
    android:orientation="vertical" >

 <LinearLayout
        android:id="@+id/linearLayout1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_marginTop="60dp"
        android:gravity="center"
        android:orientation="horizontal" >

        <ImageView
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:src="@drawable/copyright" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:text="微信"
            android:textColor="#000000"
            android:textSize="35sp" />
    </LinearLayout>
    
 <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_below="@+id/linearLayout1"
        android:layout_marginTop="70dp"
        android:gravity="center"
        android:orientation="vertical" >

        <Button
            android:id="@+id/main_login_btn"
            android:layout_width="wrap_content"
            android:layout_height="45dp"
            android:background="@drawable/main_login_selector"
            android:gravity="center"
            android:paddingLeft="130dp"
            android:paddingRight="130dp"
            android:text="登录"
            android:textColor="#ffffff"
            android:textSize="15sp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="使用QQ号或微信号登录"
            android:textSize="14sp" />

        <Button
            android:id="@+id/main_regist_btn"
            android:layout_width="wrap_content"
            android:layout_height="45dp"
            android:layout_marginTop="20dp"
            android:background="@drawable/main_regist_selector"
            android:gravity="center"
            android:paddingLeft="130dp"
            android:paddingRight="130dp"
            android:text="注册"
            android:textColor="#000000"
            android:textSize="15sp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="如果你没有QQ号，可以使用手机注册"
            android:textSize="14sp" />
    </LinearLayout>
</RelativeLayout>

    

 通过在RelativeLayout中放入LinearLayou方便放置插件，更加熟悉了布局的嵌套

      <?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:state_pressed="true" android:drawable="@drawable/main_login_pressed"/><!-- 当按下时 -->
<item android:state_pressed="false" android:drawable="@drawable/main_login_normal"/>
</selector>
    

 通过设置这个文件将按钮的按下和保持换成微信图片

下面研究下代码的用途

android:gravity是对元素本身说的，元素本身的文本显示在什么地方靠着换个属性设置，不过不设置默认是在左侧的。

android:orientation="horizontal" 水平布局这样就能同时放下微信图标和文字了（android:orientation="vertical" 垂直布局）

android:layout_marginLeft指该控件距离边父控件的边距，

android:paddingLeft指该控件内部内容，如文本距离该控件的边距。