安卓AS:简简单单就实现了一个qq登录界面
注意:需要一点点的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登录界面相关推荐
- JAVA编写QQ登录界面
在开始学习JAVA图形界面编程中,老师留的第一个作业就是编写一个QQ登录界面,本来我的JAVA就不怎么会写,所以就在网上找啊找,结果就翻到了某位大佬的博客,参考了许多,附上大佬链接http://wz9 ...
- 【React Native开发】React Native控件之TextInput组件讲解与QQ登录界面实现(11)
转载请标明出处: http://blog.csdn.net/developer_jiangqq/article/details/50589570 本文出自:[江清清的博客] (一)前言 [好消息]个人 ...
- Android 模仿QQ登录界面解决软键盘遮挡问题
Android 软件盘弹出可能会遮挡住界面上的某些控件.当 windowSoftInputMode 为 adjustPan 时,一般不会挡住 EditText,但是假如 EditText 下面是一个登 ...
- java swing qq_使用java swing实现qq登录界面示例分享
用Java Swing做的一个QQ登录界面 import java.awt.Container; import java.awt.Image; import java.awt.event.Action ...
- 用combobox扩展控件(dsCtrlComboBox)做出类似QQ登录界面的效果
原文地址:http://www.uieasy.cn/blog/?p=513 传统的combobox 在使用方面有很多限制,很难满足我们combobox类型控件的需求.主要表现中combobox内置的l ...
- qq登录界面句柄_别小看QQ邮箱测试,80%的测试新手都不能写出完整的测试用例~...
对于很多刚进入测试行业的新手来说,由于自身的工作经验不足,虽有测试基础知识傍身,但仍然很难将测试用例写的尽善尽美.因此,学习别人的测试经验,将是你成为测试达人的必经之路. 今天,我们就以QQ邮箱为例, ...
- Qt5学习笔记之QQ登录界面一:制作界面
目录 概述 步骤 概述 B站发现这个QT教程视频,看了两集感觉讲的不错,上手挺简单.之前也接触过QT,一来是工作中用不到,没有动力.二来看到一堆的函数就头大记不住,什么设置起始坐标.居中.标题等等.没 ...
- Unity Shader(一) Lowpoly动态低多边形 (QQ登录界面低边动画)
前言 在逛论坛的时候偶然发现有人在问动态低多边形(Lowpoly)是如何实现的,因为经常编写UGUI拓展对顶点操作较为熟悉的我立马就想到利用继承UnityEngine.Graphic,重写OnPopu ...
- java gui界面设计qq_Java swing界面开发(仿QQ登录界面)
首先引入包的概念,包:给代码分类,提高的了代码的可读性,封装后方便管理.在包中类的引入:import 包名.类名;包名需小写,多单词用"."隔开.类名的命名规范:首字母大写其后的每 ...
最新文章
- java升序问题_JAVA并发理解之重排序问题
- 命令行程序增加 GUI 外壳
- 神经网络为大脑如何运作提供新见解
- JMeter场景设置叙述
- vue用公共组件页面传值_微信小程序页面传值、组件间通信总结
- Ant Design入门之开始使用
- WebAPi的可视化输出模式(RabbitMQ、消息补偿相关)——所有webapi似乎都缺失的一个功能
- 看完就会明白windows RT推出的原因、它和window 8到底有些什么区别、微软有什么战略企图--有关于微软Windows RT 你不知道的那些事
- bootstrap媒体查询类型的值_Redis系列-数据类型sorted_set
- linux删除多余日志,linux 删除日志
- 基于SSM的图书商城
- 小米摄像头卡刷固件包官方下载_三星GalaxyA90澳洲版刷机包(官方线刷固件原厂系统包下载A908BXXU1ASJ4-OPS)...
- php中编码转换,php程序中的编码转换
- 「LSTM 之父」亲笔万字长文,只为向世人证明:深度学习不是在母语为英语的地方被发明的...
- uni-app使用HBuilder X编辑器本地打包app(apk)详情步骤
- MQTT keepalive和reconnect
- Gif录制神器GifCam
- python开源编译器,python开发编译器
- 工业虚拟现实解决方案
- 环信im Flutter sdk使用帮助