Android Studio实现简单的QQ登录界面

编程之家收集整理的这篇文章主要介绍了Android Studio实现简单的QQ登录界面编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

一、项目概述

QQ是我们日常生活使用最多的软件之一,包含登录界面和进入后的聊天界面、好友列表界面和空间动态界面等。登录界面的制作比较简单,主要考验布局的使用,是实现QQ项目的第一步。现在APP开发的首要工作都是实现登录页面,所以学会了QQ登录界面对以后的软件开发有着很重要的作用。

二、开发环境

在这里插入图片描述

三、详细设计

1、头像设计

首先在layout文件里面选择了RelativeLayout(相对布局)作为整个页面的布局。

在顶端放置了一个ImageView控件,宽度和高度设置的都是70dp,水平居中设置为true。

然后使头像在整个页面下调一点,不要紧贴着顶端,所以layout_marginTop设置为40dp。

最后选择drawable文件夹中的head文件作为头像。代码如下:

	<ImageView
        android:id='@+id/iv'
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="40dp"
        android:background="@drawable/head"/>

2、账号输入框

利用LinearLayout(线性布局)作为账号输入框的外层布局,orientation设置的为水平排列。

放置了一个TextView控件,宽度和高度设置的wrap_content,即适应内容大小,显示文本“账号”。

紧接着放置一个EditText控件,用于输入账号内容,使用layout_toRightOf属性定位于账号的右侧。

	<LinearLayout
        android:id="@+id/number_11"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/iv"
        android:layout_centerVertical="true"
        android:layout_marginBottom="5dp"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:layout_marginTop="15dp"
        android:background="#ffffff"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/tv_number"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="10dp"
            android:text="账号:"
            android:textColor="#000"
            android:textSize="20sp" />

        <EditText
            android:id="@+id/et_number"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@id/tv_number"
            android:layout_marginLeft="5dp"
            android:background="@null"
            android:inputType="text"
            android:padding="10dp" />
    </LinearLayout>

3、密码输入框

最外层依旧是LinearLayout(线性布局),整体放置在上一个LinearLayout的下面,控件排列依然为horizontal(水平)。

放置一个TextView文本显示框,文本内容是“密码”,文本颜色为黑色,文本大小为20sp。

再放置一个EditText文本输入框,inputType设置为textPassword,输入时候会隐藏输入内容,使用*** 代替。

 	<LinearLayout
        android:id="@+id/password_11"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/number_11"
        android:layout_centerVertical="true"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:background="#ffffff"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/tv_password"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="10dp"
            android:text="密码:"
            android:textColor="#000"
            android:textSize="20sp" />
        <EditText
            android:id="@+id/et_password"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="5dp"
            android:layout_toRightOf="@id/tv_password"
            android:background="@null"
            android:inputType="textPassword"
            android:padding="10dp"/>
    </LinearLayout>

4、登录按钮

在账号密码框下方放置一个Button控件,文本内容为“登录”,文本颜色为蓝色。

 <Button
        android:id="@+id/btn_login"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="38dp"
        android:background="#3C8DC4"
        android:text="登录"
        android:textColor="#ffffff"
        android:textSize="20sp"
        android:layout_below="@+id/password_11"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"/>

5、按钮点击事件

在MainActivity里面先声明了btn这个变量,并与刚刚设置的登录按钮进行绑定。

然后使用了setOnClickListener按钮点击事件监听器,在监听器里面声明了onClick方法,在里面声明了dialog变量,即显示对话框。

setTitle( )设置了对话框的标题为“账号或密码不能为空”,setIcon( )设置了对话框标题图标,setMessage( )设置对话框的提示信息为"请输入账号和密码" 。

最后添加了"确定"按钮和“取消”按钮,点击按钮都会调用dialog.dismiss()方法关闭对话框。

public class MainActivity extends AppCompatActivity {
    public Button btn;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        btn = (Button) findViewById(R.id.btn_login);//绑定登录按钮
        btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                android.app.AlertDialog dialog;
                android.app.AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this)
                        .setTitle("账号或密码不能为空")                 //设置对话框的标题
                        .setIcon(R.mipmap.ic_launcher)               //设置对话框标题图标
                        .setMessage("请输入账号和密码")                //设置对话框的提示信息
                        //添加"确定"按钮
                        .setPositiveButton("确定", new DialogInterface.OnClickListener() {
                            @Override
                            public void onClick(DialogInterface dialog, int which) {
                                dialog.dismiss();                             //关闭对话框
                                MainActivity.this.finish();                   //关闭MainActivity
                            }
                        })
                        //添加“取消”按钮
                        .setNegativeButton("取消", int which) {
                                dialog.dismiss();                             //关闭对话框
                            }
                        });
                dialog = builder.create();
                dialog.show();
            }
        });
    }
}

四、项目效果

1、用模拟器运行。

在这里插入图片描述


2、输入账号不输入密码,点击登录按钮会显示提醒对话框。

在这里插入图片描述


3、输入账号和密码。

在这里插入图片描述

五、项目总结

本次项目属于比较基础的内容,希望初学者通过这次项目熟练掌握界面布局和控件的使用,为以后的项目开发打下坚实的基础。

六、源码下载

需要源码学习的同学可以关注我的微信公众号,回复:QQ登录界面,即可获取源码,还有很多Android项目等你来学习。博客讲的很具体,代码里面也有详细的注释,如果对你有帮助的话,记得点个赞哦。

在这里插入图片描述

抛弃时间的人,时间也抛弃他。————莎士比亚

总结

以上是编程之家为你收集整理的Android Studio实现简单的QQ登录界面全部内容,希望文章能够帮你解决Android Studio实现简单的QQ登录界面所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您喜欢寻找一群志同道合、互帮互助的学习伙伴,可以点击下方链接加入:
编程之家官方1群
编程之家官方2群
编程之家官方3群
编程之家官方4群

相关文章

猜你在找的Android相关文章

*由于工作需要,需要利用MediaCodec实现Playback及Transcode等功能,故在学习过程中翻译了Google官方的MediaCodec API文档,由于作者水平限制,文中难免有错误和不
基本概念: I frame :帧内编码帧 又称intra picture,I 帧通常是每个 GOP(MPEG 所使用的一种视频压缩技术)的第一个帧,经过适度地压缩,做为随机访问的参考点,可以当成图象。
*由于工作需要,需要利用MediaCodec实现Playback及Transcode等功能,故在学习过程中翻译了Google官方的MediaCodec API文档,由于作者水平限制,文中难免有错误和不
*由于工作需要,需要利用MediaCodec实现Playback及Transcode等功能,故在学习过程中翻译了Google官方的MediaCodec API文档,由于作者水平限制,文中难免有错误和不
本文系作者自己学习之所用,文章内容仅出自作者拙劣之思考,问题之处烦请不吝指教。 在frameworksavmedialibmediamediaplayer.cpp中会有语句:const sp&
前言 最近Android对于文件的许多方法进行了修改,网络上又没有对Android4到Android11关于系统相机、系统相册和系统裁剪的适配方案,我花了几天事件总结了一下,先上源码 DEMO源码 先
1.使用内部存储 Android系统能够直接把文件存在设备的内部存储内。 默认情况下,保存在内部存储内的文件是应用程序私有的,其他应用程序(或用户)是无法访问的。 当用户卸载此应用程序时,内部存储的数
Android开发过程中,发现一个小问题,当我们点击屏幕下面的输入框时,我们的RadioGroup会跑到输入法的上面去,如下图 两种解决方法 1、Manifest.xml文件activity标签中添加
微信公众号搜索 “ 程序精选 ” ,选择关注!
微信公众号搜 "程序精选"关注