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指该控件内部内容，如文本距离该控件的边距。

评论

3 楼 dingran 2013-08-30  

学会.9.png的制作，打点什么的，这个也很重要，你从apk中解压出来的图片都已经没有边界点了，需要你自己重新打上。

这个一定要搞懂，会弄，美工是不会弄的。

2 楼 dingran 2013-08-30  

1.试试层布局，view的消失和隐藏什么的，这些也常用。

2.将baseAdapter的实现子类放到外面，原本就应该在外面的，这个也要搞出来。内部类虽然用着方便，但是让你不明白对象间如何交互数据和相互调用了。

3.不要纠结在小问题上，一定要开阔思路，发散思维，不懂就及时问，少走弯路。

1 楼 dingran 2013-08-30  

恩，这东西一定要多搞搞才能熟练的记住一些基本的，否则很快就忘了，以后有空了就把剩余的页面都模仿了吧，都是人做的，你一定行的。将来这也是你简历里重要的一笔。