Android 实现最新QQ登陆页面

Android 实现最新QQ登陆页面

前言

    最近看Android书的时候看到了制作QQ登录界面的实战，不太好看，所以来自己做一个最新的QQ登录界面。

准备工作

    线性布局（LinearLayout），主要是以水平和垂直的方式来显示界面中的控件，在实际开发中较为常见。使用也非常简单，其中有一个重要的属性orientation，用于控制控件的排列方向，该属性有vertical和horizonal(默认)两个值，前者是垂直线性布局，后者是水平线性布局。通过观察最新QQ登录界面，所见布局控件都比较简单，所以还是采用线性布局。
最新QQ登录界面：
    其中圆形按钮的实现可以参考Android 实现圆形按钮

用代码实现效果如下：

    可以看到效果还是比较不错的哈哈，下面上代码

代码实现

.xml代码如下

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <ImageView
        android:id="@+id/qq"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="50dp"
        android:src="@drawable/logo" />
    <EditText
        android:id="@+id/et_name"
        android:layout_width="match_parent"
        android:layout_height="70dp"
        android:layout_marginTop="60dp"
        android:layout_marginLeft="30dp"
        android:layout_marginRight="30dp"
        android:gravity="center"
        android:background="@drawable/bg_username"
        android:hint="输入账号"
        android:inputType="number"
        android:layout_gravity="center" />
    <EditText
        android:id="@+id/et_password"
        android:layout_width="match_parent"
        android:layout_height="70dp"
        android:layout_marginTop="10dp"
        android:layout_marginLeft="30dp"
        android:layout_marginRight="30dp"
        android:gravity="center"
        android:background="@drawable/bg_username"
        android:hint="输入密码"
        android:inputType="textPassword"
        android:layout_gravity="center" />
    <ImageButton
        android:id="@+id/btn_login"
        android:layout_width="90dp"
        android:layout_height="90dp"
        android:layout_gravity="center"
        android:layout_marginTop="50dp"
        android:background="@drawable/bg_go"
        android:src="@drawable/arrow"/>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_marginTop="100dp"
        android:gravity="center_horizontal">
        <Button
            android:id="@+id/btn_phone"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="手机号登陆"
            android:textColor="@color/black"
            android:textStyle="bold"
            android:background="@drawable/bottom_btn"/>
        <View
            android:layout_width="2dip"
            android:layout_height="40dp"
            android:layout_gravity="center_horizontal"
            android:background="#E8E8F2" />
        <Button
            android:id="@+id/btn_retrieve"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="找回密码"
            android:textColor="@color/black"
            android:textStyle="bold"
            android:background="@drawable/bottom_btn"/>
        <View
            android:layout_width="2dip"
            android:layout_height="40dp"
            android:layout_gravity="center_horizontal"
            android:background="#E8E8F2" />
        <Button
            android:id="@+id/btn_register"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="新用户注册"
            android:textColor="@color/black"
            android:textStyle="bold"
            android:background="@drawable/bottom_btn"/>
    </LinearLayout>

</LinearLayout>