【Android Demo】QQ登陆界面（一）

作者: 感同身受_ | 来源:发表于2019-07-04 16:56 被阅读0次

【Android Demo】QQ登陆界面（一）
【Android Demo】QQ登陆界面（三）
【Android Demo】QQ登陆界面（二）
扣丁学堂UI设计教程之PS怎么设计QQ登录界面方法
2.2登录界面设计
第三方登录入口(QQ)
QQ和TIM的产品对比分析
QQ界面登入的制作
ReactiveCocoa+MVVM实践篇
Android开发_1、QQ登陆界面

之前以及实现了QQV.0.8.4115的登陆界面，现在来总结一下，并且回顾一下用到过的东西。

<————最终的代码在文章最后贴出来————>

先上图：
【原图】

QQLogin_0.jpg

【图一】

QQLogin_1.PNG

【图二】

QQLogin_2.PNG

现在开始敲

一、首先设计QQ登陆界面的布局：

1、我们采用RelativeLayout相对布局进行整体布局的规划

2、然后是QQ图标：

<LinearLayout
        android:id="@+id/head"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:layout_marginTop="130dp">

        <ImageView
            android:layout_width="57dp"
            android:layout_height="81dp"
            android:src="@drawable/qq" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="50sp"
            android:textStyle="bold"
            android:text="QQ"/>
    </LinearLayout>

id的设置，方便代码中的引用，也方便其他控件的定位
其他都根据自己的喜欢慢慢调

3、QQ图标的下面是账号栏：

<RelativeLayout
        android:id="@+id/body"
        android:layout_width="320dp"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_centerHorizontal="true"
        android:background="@drawable/editview"
        android:layout_below="@+id/head">

        <ImageView
            android:id="@+id/image"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toLeftOf="@+id/number"
            android:layout_marginRight="27dp"
            android:background="@drawable/touxiang"
            android:layout_centerVertical="true" />

        <EditText
            android:id="@+id/number"
            android:layout_width="150dp"
            android:layout_height="60dp"
            android:layout_centerHorizontal="true"
            android:background="@null"
            android:inputType="number" />

        <Spinner
            android:id="@+id/spinner"
            android:layout_width="40dp"
            android:layout_height="60dp"
            android:layout_marginLeft="20dp"
            android:layout_centerVertical="true"
            android:layout_toRightOf="@+id/number" />
   
</RelativeLayout>

ImageView是用来显示QQ头像
EditText文本框用显示QQ帐号的
Spinner（下拉列表）是存放的QQ帐号的，便于QQ账号的替换
【注】以上控件的信息，目前是用的数组实现，打算之后用链表敲一下
android:background="@drawable/editview"这个是我写的椭圆边框+灰色背景，代码如下：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/colorGray"/>
    <corners android:radius="100dp"/>
    <size android:height="30dp"
        android:width="130dp"/>
    <stroke android:color="@color/colorWhite"
        android:width="1dp"/>
</shape>

【注】代码中的android:color="@color/colorGray"是在value下colors的代码中改变的，贴一下代码：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#008577</color>
    <color name="colorPrimaryDark">#00574B</color>
    <color name="colorAccent">#D81B60</color>
    <color name="colorGray2">#FC6F6E6E</color>
    <color name="colorWhite">#FBFCFB</color>
    <color name="colorBlack">#010E01</color>
    <color name="colorGray">#72C7CAC7</color>
    <color name="colorBlue">#F21F62F0</color>
    <color name="colorStatBar">#BDBBBB</color>
</resources>

4、接下来是密码框


    <RelativeLayout
        android:id="@+id/body2"
        android:layout_width="320dp"
        android:layout_height="60dp"
        android:layout_below="@+id/body"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="16dp"
        android:background="@drawable/editview">

        <ImageButton
            android:id="@+id/visible"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toLeftOf="@+id/password"
            android:layout_marginRight="27dp"
            android:background="@drawable/touxiang"
            android:layout_centerVertical="true"/>

        <EditText
            android:id="@+id/password"
            android:layout_width="150dp"
            android:layout_height="60dp"
            android:background="@null"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true"
            android:layout_marginTop="14dp"
            android:inputType="textPassword" />

    </RelativeLayout>

ImageButton用来改变密码的状态（显示密文/隐藏密文），也用了一个边框android:background="@drawable/touxiang"（但作用不明显）
EditText用于用户输入密码，也同样是用的上面的椭圆边框

5、这个版本的QQ登陆按钮比较特别，一个圆形的按钮，之前试过写圆形框来实现，后来发现巨丑，无赖之下只有扣图了

<ImageButton
        android:id="@+id/load"
        android:layout_width="70dp"
        android:layout_height="63dp"
        android:layout_below="@+id/body2"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="113dp"
        android:background="@drawable/button"
        android:src="@drawable/circle2" />

1、android:background="@drawable/button"是我写的圆形边框,以下是代码

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="@color/colorWhite"/>
<corners android:radius="200dp"/>
<size android:height="10dp"
    android:width="10dp"/>
<stroke android:color="@color/colorBlack"
    android:width="0dp"/>
</shape>

6、最后是忘记密码和用户注册栏：

      <RelativeLayout
            android:id="@+id/text_top"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textStyle="bold"
                android:autoLink="web"
                android:textColor="#090000"
                android:layout_marginLeft="100dp"
                android:text="忘记密码"/>



            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textStyle="bold"
                android:autoLink="web"
                android:textColor="#090000"
                android:layout_marginLeft="240dp"
                android:text="用户注册"/>
        </RelativeLayout>


        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/text_top"
            android:orientation="horizontal">

            <TextView
                android:id="@+id/agree"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="100dp"
                android:text="登陆后代表阅读并同意"/>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textStyle="bold"
                android:autoLink="web"
                android:textColor="#090000"
                android:layout_toRightOf="@+id/agree"
                android:text="服务条款"/>

        </RelativeLayout>

里面的加粗文字，本来是用超链接实现，之前试过，没成功，所以目前的还没学会

好，这就是QQ登陆界面的简单实现！！！

贴一下全部代码：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#FCFCFC"
    tools:context=".MainActivity">

    <LinearLayout
        android:id="@+id/head"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:layout_marginTop="130dp">

        <ImageView
            android:layout_width="57dp"
            android:layout_height="81dp"
            android:src="@drawable/qq" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="50sp"
            android:textStyle="bold"
            android:text="QQ"/>
    </LinearLayout>


    <RelativeLayout
        android:id="@+id/body"
        android:layout_width="320dp"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_centerHorizontal="true"
        android:background="@drawable/editview"
        android:layout_below="@+id/head">

        <ImageView
            android:id="@+id/image"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toLeftOf="@+id/number"
            android:layout_marginRight="27dp"
            android:background="@drawable/touxiang"
            android:layout_centerVertical="true" />

        <EditText
            android:id="@+id/number"
            android:layout_width="150dp"
            android:layout_height="60dp"
            android:layout_centerHorizontal="true"
            android:background="@null"
            android:inputType="number" />

        <Spinner
            android:id="@+id/spinner"
            android:layout_width="40dp"
            android:layout_height="60dp"
            android:layout_marginLeft="20dp"
            android:layout_centerVertical="true"
            android:layout_toRightOf="@+id/number" />



    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/body2"
        android:layout_width="320dp"
        android:layout_height="60dp"
        android:layout_below="@+id/body"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="16dp"
        android:background="@drawable/editview">

        <ImageButton
            android:id="@+id/visible"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toLeftOf="@+id/password"
            android:layout_marginRight="27dp"
            android:background="@drawable/touxiang"
            android:layout_centerVertical="true"/>

        <EditText
            android:id="@+id/password"
            android:layout_width="150dp"
            android:layout_height="60dp"
            android:background="@null"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true"
            android:layout_marginTop="14dp"
            android:inputType="textPassword" />

    </RelativeLayout>

    <ImageButton
        android:id="@+id/load"
        android:layout_width="70dp"
        android:layout_height="63dp"
        android:layout_below="@+id/body2"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="113dp"
        android:background="@drawable/button"
        android:src="@drawable/circle2" />


    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="40dp">


        <RelativeLayout
            android:id="@+id/text_top"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textStyle="bold"
                android:autoLink="web"
                android:textColor="#090000"
                android:layout_marginLeft="100dp"
                android:text="忘记密码"/>



            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textStyle="bold"
                android:autoLink="web"
                android:textColor="#090000"
                android:layout_marginLeft="240dp"
                android:text="用户注册"/>
        </RelativeLayout>


        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/text_top"
            android:orientation="horizontal">

            <TextView
                android:id="@+id/agree"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="100dp"
                android:text="登陆后代表阅读并同意"/>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textStyle="bold"
                android:autoLink="web"
                android:textColor="#090000"
                android:layout_toRightOf="@+id/agree"
                android:text="服务条款"/>

        </RelativeLayout>
    </RelativeLayout>

</RelativeLayout>

【Android Demo】QQ登陆界面（一）
之前以及实现了QQV.0.8.4115的登陆界面，现在来总结一下，并且回顾一下用到过的东西。 <————最终的代码...
【Android Demo】QQ登陆界面（三）
当你登陆后，第一眼看到的当然是QQ消息列表啦，那么，我们继QQ登陆界面之后，再写一下QQ列表的相关代码一、布局：...
【Android Demo】QQ登陆界面（二）
上篇文章介绍了QQ界面的布局，这里写一下这个界面的相关代码（主要是账号栏和密码栏的小细节，还有下拉列表的实现） <...
扣丁学堂UI设计教程之PS怎么设计QQ登录界面方法
ps怎么设计QQ的登录界面？ps中想要设计一款登陆界面，该怎么设计呢？今天我们就以qq登陆界面为例，下面我们就来看...
2.2登录界面设计
登录界面的制作一.登陆界面、（1）.开始界面QQ图片20181014172144.png （2）.输入界面密码...
第三方登录入口(QQ)
步骤：浏览器点击QQ登陆按钮，服务器返回QQ登陆网址（手机扫码界面）。用户进行QQ登陆，登陆成功重定向服务器c...
QQ和TIM的产品对比分析
1. 登陆界面：QQ的登录更加丰富多彩，有多种动画效果；而TIM的登录界面更加简单。 2. 界面：QQ的界面列表功...
QQ界面登入的制作
// // ViewController.m // QQ登陆界面 // // Created by lanou o...
ReactiveCocoa+MVVM实践篇
实现一个完整的登陆界面本文Demo地址：https://github.com/iOSaFei/ReactiveC...
Android开发_1、QQ登陆界面
1.相对布局(RelativeLayout)和线性布局(LinearLayout) RelativeLayout详...