Android studio设计app登录界面
Android studio设计app登录界面
UI界面设计
在设计登录界面时,可以使用不同布局方式来实现该功能,通常情况下使用的是LinearLayout(线性布局)和TableLayout(表格布局),在本文中使用线性布局。登陆界面需要几项必不可少的控件,如下所示:
- TextView:用于显示标题和“用户名"和"密码"的提示;
标题设置
<TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="登录页面"android:textSize="30dp"android:textColor="@android:color/black"android:layout_gravity="center_horizontal"/>
"用户名"提示
<TextViewandroid:layout_width="65dp"android:layout_height="wrap_content"android:text="用户名:"android:textSize="16dp"android:textColor="@android:color/black"/>
"密码"提示:
<TextViewandroid:layout_width="65dp"android:layout_height="wrap_content"android:text="密码:"android:textSize="16dp"android:textColor="@android:color/black"/>
- EditView:用于输入"用户名"和"密码";
"用户名"输入框:
<EditTextandroid:layout_width="264dp"android:layout_height="wrap_content"android:id="@+id/ed1"android:hint="请输入用户名" android:textColor="@android:color/black"/>
"密码"输入框:
<EditTextandroid:layout_width="264dp"android:layout_height="wrap_content"android:id="@+id/ed2"android:hint="请输入密码"android:textColor="@android:color/black"/>
- Button:用于控制登录。
Button登录按钮:
<Buttonandroid:layout_width="285dp"android:layout_height="wrap_content"android:text="登录"android:textSize="20dp"android:id="@+id/bt"android:layout_gravity="center_horizontal" />/>
本文使用三层LinearLayout互相嵌套,第一层LinearLayout中包括标题(TextView)和第二层LinearLayout以及登录按钮(Button)。第一层LinearLayout使用垂直分布,即android:orientation=“vertical”。
第二层LinearLayout中嵌套两个第三层LinearLayout,且第二层LinearLayout为垂直分布,即android:orientation=“vertical”。
第三层的两个LinearLayout中各包含一个TextView和一个EditView,第三层LinearLayout为水平分布,即android:orientation=“horizontal”。
总的UI设计如下所示。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:id="@+id/activity_main"android:layout_width="match_parent"android:layout_height="match_parent"android:paddingBottom="@dimen/activity_vertical_margin"android:paddingLeft="@dimen/activity_horizontal_margin"android:paddingRight="@dimen/activity_horizontal_margin"android:paddingTop="@dimen/activity_vertical_margin"tools:context="com.example.activities.MainActivity"android:orientation="vertical"android:weightSum="1"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="登录页面"android:textSize="30dp"android:textColor="@android:color/black"android:layout_gravity="center_horizontal"/><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="vertical"android:gravity="center"android:layout_weight="0.55"><LinearLayoutandroid:layout_width="300dp"android:layout_height="wrap_content"android:orientation="horizontal"><TextViewandroid:layout_width="65dp"android:layout_height="wrap_content"android:text="用户名:"android:textSize="16dp"android:textColor="@android:color/black"/><EditTextandroid:layout_width="264dp"android:layout_height="wrap_content"android:id="@+id/ed1"android:hint="请输入用户名"android:textColor="@android:color/black"/></LinearLayout><LinearLayoutandroid:layout_width="300dp"android:layout_height="wrap_content"android:orientation="horizontal"><TextViewandroid:layout_width="65dp"android:layout_height="wrap_content"android:text="密码:"android:textSize="16dp"android:textColor="@android:color/black"/><EditTextandroid:layout_width="264dp"android:layout_height="wrap_content"android:id="@+id/ed2"android:hint="请输入密码"android:textColor="@android:color/black"/></LinearLayout></LinearLayout><Buttonandroid:layout_width="285dp"android:layout_height="wrap_content"android:text="登录"android:textSize="20dp"android:id="@+id/bt"android:layout_gravity="center_horizontal" />/>
</LinearLayout>
效果如图所示。
Java代码编写
若用户输入用户名或密码有误时,弹窗提示“用户名或密码输入有误,请更正后重新输入!”。
若用户没有输入用户名或密码,弹窗提示“用户名与密码不能为空!”。
当用户名与密码同时输入正确是,方可进入系统。
package com.example.activities;import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.Toast;public class MainActivity extends AppCompatActivity {private EditText usertext;private EditText passtext;private Button loginbutton;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);usertext=(EditText)this.findViewById(R.id.ed1);passtext=(EditText)this.findViewById(R.id.ed2);loginbutton=(Button)this.findViewById(R.id.bt);loginbutton.setOnClickListener(new ButtonListener());}private class ButtonListener implements View.OnClickListener{@Overridepublic void onClick(View v){String user=usertext.getText().toString();String pass=passtext.getText().toString();if (user.equals("")||pass.equals("")){Toast.makeText(MainActivity.this,"用户名与密码不能为空!",Toast.LENGTH_SHORT).show();}else if (user.equals("denglu")&&pass.equals("0000")){Toast.makeText(MainActivity.this,"登陆成功",Toast.LENGTH_SHORT).show();Intent intent=new Intent(MainActivity.this,TwoActivity.class);startActivity(intent);}else{Toast.makeText(MainActivity.this,"用户名或密码输入有误,请更正后重新输入!",Toast.LENGTH_SHORT).show();}}}
}
点击登录按钮之后,进入下一个界面,这时需在Manifest中添加第二个Activity的名称
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"package="com.example.activities"><application<activity android:name=".MainActivity"><intent-filter><action android:name="android.intent.action.MAIN" /><category android:name="android.intent.category.LAUNCHER" /></intent-filter></activity><activity android:name=".TwoActivity"></activity></application></manifest>
第二个界面的Activity需调用第二个xlm的layout,如下所示
package com.example.myapplication;import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;public class TwoActivity extends AppCompatActivity {@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.twoactivity);}
}
Android studio设计app登录界面相关推荐
- android studio 微信登录界面,如何使用Android Studio开发用户登录界面
满意答案 zhou9081 2016.05.21 采纳率:51% 等级:7 已帮助:411人 如何使用Android Studio开发用户登录界面,具体解决方案如下: 解决方案1: <:t ...
- Android Studio设计APP实现与51单片机通过WIFI模块(ESP8266-01S)通讯控制LED灯亮灭的设计源码【详解】
目录 一.前言 二.效果展示 1.APP界面展示 2.C51硬件展示 三.Android Studio APP源代码 1.AndroidManifest.xml 1.请求联网: 2.开放明文传输: 2 ...
- Android studio设计两个界面间的切换
Android studio设计两个界面间的切换 实现两个界面间的切换有两种方式,第一种是xml间的相互切换,另外一种是两个Activity间的切换. 范例:用两种不同方法实现如图功能,点击butto ...
- Android Studio 制作APP启动界面(Splash)
最近又开始学习Android studio 了,在制作APP时,都有一个启动的界面,看上去美观且实用(也可以作为以后的广告位← 那怎样制作呢? 第一步:新建Splash 如图,新建一个Empty Ac ...
- Android studio制作QQ登录界面
(1)需要一张图片作为QQ头像,因此先找一张图片(png格式)放到drawable文件夹中. (2)分析界面组成部分,整体来看界面分三个部分 第一部分:放置一个lmageView控件用于 显示头像: ...
- Android APP登录界面设计
为平板设计的登录界面,可以实现的功能有登录,忘记密码,记住密码,用户注册.(只设计界面,为了练习界面布局) 其中包括了EditText.TextView.CheckBox.Button控件. < ...
- Android studio诗词app古诗词中国风记事本ui设计中国古诗词
Android studio诗词app古诗词中国风记事本ui设计中国古诗词 界面设计: 视频介绍: Android 中国风诗词记录诗词记事本Android studio编译Android笔记本记事本 ...
- 怎么用Android做登录界面,利用Android怎么制作一个APP登录界面
利用Android怎么制作一个APP登录界面 发布时间:2020-12-02 17:09:10 来源:亿速云 阅读:79 作者:Leah 这期内容当中小编将会给大家带来有关利用Android怎么制作一 ...
- android 矢量图形文件,Android Studio进行APP设计开发之矢量图及XML文件转换
Android Studio进行APP设计开发之矢量图及XML文件转换 当我们使用Android studio进行APP设计开发时,会用到矢量图,那么要将矢量图运用到安卓工程drawable中去,就需 ...
最新文章
- cocoahttpserver 载入本地html,利用CocoaHttpServer搭建手机本地服务器
- 全球首部AI交响变奏曲问世,AI技术应用再拓边界
- 如何通俗地理解 Gradle?
- IntelliJ IDEA使用说明
- 【linux】Shell脚本中调用另外一个脚本的方法
- autocopy2u_借助AutoCopy简化Firefox中的文本复制和粘贴
- 数学家看到就把持不住,高斯被它迷得神魂颠倒,2600年的数学史里的一个奇迹……...
- linux火狐浏览器49.0安装教程,火狐浏览器Linux最新版下载
- SAP License:OAYZ中的使用年限无法更改
- sqlserver 事务日志过大 收缩方法解决方案
- 拓端tecdat|Python随机波动率(SV)模型对标普500指数时间序列波动性预测
- 常用m脚本控制simulink模块方法
- mysql qps 索引查询_mysql QPS 抓取和分析
- oracle数据库技术_创建 pdb数据库
- saas模式的外贸建站比较
- python-pptx 操作PPTx幻灯片文件删除并替换图片
- 共模电压和差模电压两种理解方式
- MQTT协议(四) 【PUBLISH】发布消息
- 如何将bmp转化为jpg?
- 服务器外链图片不显示,新浪图床已限制图片外链使用(附解决方法)
热门文章
- httpc:request post 请求
- java对opengl绑定_你好,JOGL - Java与OpenGl的绑定-Java频道-中国IT实验室
- 本地FTP服务器快速搭建(windows)
- 【sdx62】PBL阶段修改GPIO操作
- 微型计算机m3500q,爆发“小”宇宙 创新与实用完美结合 ——联想ThinkCentre M3500q超小商用台式机新品发布...
- 仅需简单的文字描述,即可把文字转图片
- doris 动态分区
- 【uniapp】微信小程序国际化详细版
- win7系统问题:——桌面壁纸变黑解决方案
- ArcGIS学习教程(一)