注意:需要一点点的java基础,对布局属性和控件属性有一定的了解

可以看看这两篇文章:

https://blog.csdn.net/qq_42023080/article/details/105622818   各个布局主要属性

https://blog.csdn.net/qq_42023080/article/details/105627681  各个控件的常用属性

目录

运行效果:

完整代码

主布局文件代码

用到的图片

MainActivity的代码

讲解部分

主布局代码讲解

总览主布局

一、整体

二、头像部分

三、账号及输入部分

四、密码及其输入部分

五、登录按钮部分

六、显示输入信息部分

MainActivity部分


运行效果:

完整代码

首先奉上全部代码,之后再详细讲解。

主布局文件代码

<?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="#E6E6E6"android:orientation="vertical"tools:context=".MainActivity"><ImageViewandroid:id="@+id/iv"android:layout_width="70dp"android:layout_height="70dp"android:background="@drawable/tou1"android:layout_centerHorizontal="true"android:layout_marginTop="50dp"/><LinearLayoutandroid:id="@+id/ll_number"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginLeft="10dp"android:layout_marginRight="10dp"android:layout_centerHorizontal="true"android:layout_below="@+id/iv"android:layout_marginTop="20dp"android:layout_marginBottom="5dp"android:background="#ffffff"android:orientation="horizontal"><TextViewandroid:id="@+id/tv_number"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="账号:"android:textSize="20sp"android:textColor="#000"android:padding="10dp"/><EditTextandroid:id="@+id/et_number"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginLeft="5dp"android:background="@null"android:padding="10dp"/></LinearLayout><LinearLayoutandroid:id="@+id/ll_password"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_centerHorizontal="true"android:background="#ffffff"android:layout_marginLeft="10dp"android:layout_marginRight="10dp"android:layout_below="@+id/ll_number"android:orientation="horizontal" ><TextViewandroid:id="@+id/tv_password"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="密码:"android:textSize="20dp"android:textColor="#000"android:padding="10dp"/><EditTextandroid:id="@+id/et_password"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginLeft="5dp"android:background="@null"android:inputType="textPassword"android:padding="10dp"/></LinearLayout><Buttonandroid:id="@+id/bt"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_centerHorizontal="true"android:layout_marginRight="10dp"android:layout_marginLeft="10dp"android:text="登录"android:background="#3C8DC4"android:textColor="#ffffff"android:textSize="20sp"android:layout_below="@+id/ll_password"android:layout_marginTop="50dp"/><TextViewandroid:id="@+id/tv"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginTop="25dp"android:textColor="#000"android:textSize="20sp"android:text=""android:layout_below="@+id/bt"android:layout_alignLeft="@+id/bt"android:layout_alignStart="@+id/bt"/></RelativeLayout>

所在位置

用到的图片

在网上搜的,来源不知。很帅的一个小哥哥,然后就拿来做事例啦。哈哈哈,打住。

MainActivity的代码

package dell.example.qqlogin;import androidx.appcompat.app.AppCompatActivity;import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;public class MainActivity extends AppCompatActivity {private TextView textView;private EditText et_number;private EditText et_password;private Button bt;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);textView = (TextView) findViewById(R.id.tv);et_number = (EditText) findViewById(R.id.et_number);et_password = (EditText) findViewById(R.id.et_password);bt = (Button) findViewById(R.id.bt);bt.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {textView.setText("账号:"+et_number.getText().toString()+"密码:"+et_password.getText().toString());}});}}

所在位置

讲解部分

主布局代码讲解

总览主布局

通过运行效果图可以知道发现,这里可分成这几部分:头像部分、账号及输入部分、密码及其输入部分、登录按钮部分和显示输入信息部分。

从其中可以发现,我们需要用到的控件有:显示图片的ImageView、显示文字的TextView、可以输入内容的EditText、按钮控件Button和最下面用来显示输入信息的TextView(和上面的TextView相同,只是用途不一)。

由于显示文字 "账号:" 的TextView和其右边的控件与显示文字"密码:"的TextView和其右面的控件在同一水平线上,为了方便设计,便对这两组控件使用LinearLayout约束。具体看结构蓝图:

一、整体

看图说话,

1、这里将原来的主布局文件的布局格式,改为相对布局,也就是修改为图中的1处。

2、除开设置宽高为match_parent(遍布全部父界面),背景颜色background设置为灰色阴影#E6E6E6,最重要的就是设置其排列方式,

android:orientation="vertical"     意思是控件垂直排序,从上到下依次放置下来。

二、头像部分

看图吧,太简单了。

三、账号及输入部分

三和四都用到了线性布局,这里先讲下线性布局的属性。

看图看图,贼简单。

id不用说了,必须的

布局的宽高设置。宽为什么是match_parent,高为什么是wrap_content?这个问题很简单,我要让其实现运行效果图那样的效果,就得让宽占满屏幕,高根据设置的文字来确定,这样后面好修整。对了,match_parent意思让该属性与父控件一样,wrap_content意思是让该属性由内容确定。

左右边距设置为10dp。就是离两边的距离是10dp,为了效果,不解释。

设置控件水平居中

设置该控件的在显示图片的、id为iv控件的下方

上外边距为20dp。与iv的上下距离

下外边距为5dp,看图

背景为白色

最后一个属性,线性布局必须设置的属性,默认为水平排列。这里是水平摆放。

看图说话,各个属性作用

TextView

id、宽和高我就不说了,必须的,每个控件必须设置的

显示的文字内容为"账号:"

显示的字体大小为20sp

显示的字体颜色为#000

内边距为10dp

EditText

这里没啥说的,上面都说过了

主要一个,设置背景为@null,作用是去除该控件的下划线

四、密码及其输入部分

三和四很像,绝大部分都相同,属性都很简单,也都说过。

除开图中红箭头处,设置输入的内容为文本密码格式

五、登录按钮部分

略。略略略。如果到这里还看不懂,先看看各个属性吧,推荐这两篇文章:

https://blog.csdn.net/qq_42023080/article/details/105622818   各个布局主要属性

https://blog.csdn.net/qq_42023080/article/details/105627681  各个控件的常用属性

六、显示输入信息部分

看图就好

MainActivity部分

本文完

安卓AS:简简单单就实现了一个qq登录界面相关推荐

  1. JAVA编写QQ登录界面

    在开始学习JAVA图形界面编程中,老师留的第一个作业就是编写一个QQ登录界面,本来我的JAVA就不怎么会写,所以就在网上找啊找,结果就翻到了某位大佬的博客,参考了许多,附上大佬链接http://wz9 ...

  2. 【React Native开发】React Native控件之TextInput组件讲解与QQ登录界面实现(11)

    转载请标明出处: http://blog.csdn.net/developer_jiangqq/article/details/50589570 本文出自:[江清清的博客] (一)前言 [好消息]个人 ...

  3. Android 模仿QQ登录界面解决软键盘遮挡问题

    Android 软件盘弹出可能会遮挡住界面上的某些控件.当 windowSoftInputMode 为 adjustPan 时,一般不会挡住 EditText,但是假如 EditText 下面是一个登 ...

  4. java swing qq_使用java swing实现qq登录界面示例分享

    用Java Swing做的一个QQ登录界面 import java.awt.Container; import java.awt.Image; import java.awt.event.Action ...

  5. 用combobox扩展控件(dsCtrlComboBox)做出类似QQ登录界面的效果

    原文地址:http://www.uieasy.cn/blog/?p=513 传统的combobox 在使用方面有很多限制,很难满足我们combobox类型控件的需求.主要表现中combobox内置的l ...

  6. qq登录界面句柄_别小看QQ邮箱测试,80%的测试新手都不能写出完整的测试用例~...

    对于很多刚进入测试行业的新手来说,由于自身的工作经验不足,虽有测试基础知识傍身,但仍然很难将测试用例写的尽善尽美.因此,学习别人的测试经验,将是你成为测试达人的必经之路. 今天,我们就以QQ邮箱为例, ...

  7. Qt5学习笔记之QQ登录界面一:制作界面

    目录 概述 步骤 概述 B站发现这个QT教程视频,看了两集感觉讲的不错,上手挺简单.之前也接触过QT,一来是工作中用不到,没有动力.二来看到一堆的函数就头大记不住,什么设置起始坐标.居中.标题等等.没 ...

  8. Unity Shader(一) Lowpoly动态低多边形 (QQ登录界面低边动画)

    前言 在逛论坛的时候偶然发现有人在问动态低多边形(Lowpoly)是如何实现的,因为经常编写UGUI拓展对顶点操作较为熟悉的我立马就想到利用继承UnityEngine.Graphic,重写OnPopu ...

  9. java gui界面设计qq_Java swing界面开发(仿QQ登录界面)

    首先引入包的概念,包:给代码分类,提高的了代码的可读性,封装后方便管理.在包中类的引入:import 包名.类名;包名需小写,多单词用"."隔开.类名的命名规范:首字母大写其后的每 ...

最新文章

  1. java升序问题_JAVA并发理解之重排序问题
  2. 命令行程序增加 GUI 外壳
  3. 神经网络为大脑如何运作提供新见解
  4. JMeter场景设置叙述
  5. vue用公共组件页面传值_微信小程序页面传值、组件间通信总结
  6. Ant Design入门之开始使用
  7. WebAPi的可视化输出模式(RabbitMQ、消息补偿相关)——所有webapi似乎都缺失的一个功能
  8. 看完就会明白windows RT推出的原因、它和window 8到底有些什么区别、微软有什么战略企图--有关于微软Windows RT 你不知道的那些事
  9. bootstrap媒体查询类型的值_Redis系列-数据类型sorted_set
  10. linux删除多余日志,linux 删除日志
  11. 基于SSM的图书商城
  12. 小米摄像头卡刷固件包官方下载_三星GalaxyA90澳洲版刷机包(官方线刷固件原厂系统包下载A908BXXU1ASJ4-OPS)...
  13. php中编码转换,php程序中的编码转换
  14. 「LSTM 之父」亲笔万字长文,只为向世人证明:深度学习不是在母语为英语的地方被发明的...
  15. uni-app使用HBuilder X编辑器本地打包app(apk)详情步骤
  16. MQTT keepalive和reconnect
  17. Gif录制神器GifCam
  18. python开源编译器,python开发编译器
  19. 工业虚拟现实解决方案
  20. 环信im Flutter sdk使用帮助

热门文章

  1. 加油!!!A-ZAZA,fighting!!!
  2. java getcolor_如何使用新版本的getresources() . getColor?
  3. 我想做东哥的兄弟!北京-京东-Java中级【面试真题】
  4. 计算机无法进入桌面,开机无法进入桌面的问题有哪些原因导致
  5. 项目实习(一)高校设备管理器
  6. 研发leader成长
  7. java联调生成测试数据工具类
  8. 软文撰写有哪些技巧?
  9. Q2输入法日活达4.84亿,搜狗能讲好下一个增长故事么?
  10. 普里姆(Prim)算法(P算法):修路问题