注意：需要一点点的java基础，对布局属性和控件属性有一定的了解 可以看看这两篇文章： https://blog.csdn.net/qq_42023080/article/details/105622818 各个布局主要属性 https://blog.csdn.net/qq_42023080/article/details/105627681 各个控件的常用属性 目录 首先奉上全部代码，之后再详细讲解。 所在位置 在网上搜的，来源不知。很帅的一个小哥哥，然后就拿来做事例啦。哈哈哈，打住。 所在位置 通过运行效果图可以知道发现，这里可分成这几部分：头像部分、账号及输入部分、密码及其输入部分、登录按钮部分和显示输入信息部分。 从其中可以发现，我们需要用到的控件有：显示图片的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 各个控件的常用属性 看图就好 本文完
运行效果：
完整代码
主布局文件代码
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android" xmlns:app="https://schemas.android.com/apk/res-auto" xmlns:tools="https://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#E6E6E6" android:orientation="vertical" tools:context=".MainActivity"> <ImageView android:id="@+id/iv" android:layout_width="70dp" android:layout_height="70dp" android:background="@drawable/tou1" android:layout_centerHorizontal="true" android:layout_marginTop="50dp"/> <LinearLayout android: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"> <TextView android: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"/> <EditText android: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> <LinearLayout android: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" > <TextView android: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"/> <EditText android: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> <Button android: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"/> <TextView android: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; @Override protected 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() { @Override public void onClick(View v) { textView.setText("账号："+et_number.getText().toString()+"密码："+et_password.getText().toString()); } }); } } 
讲解部分
主布局代码讲解
总览主布局
一、整体
二、头像部分
三、账号及输入部分
四、密码及其输入部分
五、登录按钮部分
六、显示输入信息部分
MainActivity部分
本网页所有视频内容由 imoviebox边看边下-网页视频下载, iurlBox网页地址收藏管理器 下载并得到。
ImovieBox网页视频下载器 下载地址: ImovieBox网页视频下载器-最新版本下载
本文章由: imapbox邮箱云存储,邮箱网盘,ImageBox 图片批量下载器,网页图片批量下载专家,网页图片批量下载器,获取到文章图片,imoviebox网页视频批量下载器,下载视频内容,为您提供.
阅读和此文章类似的: 全球云计算
官方软件产品操作指南 (170)
