Android studio写一个简单又看得过去的登录和注册ui

Android studio写一个简单又看得过去的登录和注册ui,第1张

概述第一步:创建一个空白的项目第二步:我们去xml文件添加控件1.这里我们先添加一个帧布局来存放背景<FrameLayout android:layout_width="match_parent" android:layout_height="match_parent" android:background="#FF0097A7"></FrameLayout>2.我们在帧布局里

第一步:创建一个空白的项目

第二步:我们去xml文件添加控件

1.这里我们先添加一个帧布局来存放背景

<FrameLayout		androID:layout_wIDth="match_parent"		androID:layout_height="match_parent"		androID:background="#FF0097A7"></FrameLayout>

2.我们在帧布局里面添加一个linearlayout来放子控件

<FrameLayout		androID:layout_wIDth="match_parent"		androID:layout_height="match_parent"		androID:background="#FF0097A7">		<linearLayout			androID:orIEntation="vertical"			androID:layout_wIDth="match_parent"			androID:layout_height="match_parent"			androID:gravity="center">	    </linearLayout></FrameLayout>

3.我们在linearlayout里面放2个布局,按比例平分它的父控件

<FrameLayout		androID:layout_wIDth="match_parent"		androID:layout_height="match_parent"		androID:background="#FF0097A7">		<linearLayout			androID:orIEntation="vertical"			androID:layout_wIDth="match_parent"			androID:layout_height="match_parent"			androID:gravity="center">			<linearLayout				androID:orIEntation="vertical"				androID:layout_wIDth="match_parent"				androID:layout_height="0dp"				androID:layout_weight="2"/>			<linearLayout				androID:orIEntation="vertical"				androID:background="@drawable/Shape"				androID:layout_wIDth="match_parent"				androID:layout_height="0dp"				androID:layout_weight="7"/>		</linearLayout>	</FrameLayout>

4.第二个linearlayout背景需要加上圆角,需要去drawable文件下创建Shape.xml

<?xml version="1.0" enCoding="utf-8"?><shape    xmlns:androID="http://schemas.androID.com/apk/res/androID"    androID:shape="rectangle">    <!-- 填充的颜色 -->    <solID androID:color="#FFFFFF" />    <corners		androID:topLefTradius="40dp"		//左边顶上圆角40dp-----删除		androID:topRighTradius="40dp"		//右边顶上圆角40dp-----删除		/></shape>

5.我们在第一个linearlayout里面添加2个文本框控件

<FrameLayout		androID:layout_wIDth="match_parent"		androID:layout_height="match_parent"		androID:background="#FF0097A7">		<linearLayout			androID:orIEntation="vertical"			androID:layout_wIDth="match_parent"			androID:layout_height="match_parent"			androID:gravity="center">			<linearLayout				androID:orIEntation="vertical"				androID:layout_wIDth="match_parent"				androID:layout_height="0dp"				androID:layout_weight="2"				androID:gravity="center_vertical">				<TextVIEw					androID:layout_wIDth="wrap_content"					androID:layout_height="wrap_content"					androID:text="Welcome"					androID:textAppearance="?androID:attr/textAppearanceSmall"					androID:layout_marginleft="25dp"/>				<TextVIEw					androID:layout_wIDth="wrap_content"					androID:layout_height="wrap_content"					androID:text="sgin up"					androID:layout_marginleft="25dp"					androID:textSize="35sp"					androID:textStyle="bold"					androID:layout_margintop="5dp"/>			</linearLayout>			<linearLayout				androID:orIEntation="vertical"				androID:layout_wIDth="match_parent"				androID:layout_height="0dp"				androID:layout_weight="7"				androID:background="@drawable/Shape"				androID:gravity="center_horizontal">				<EditText					androID:layout_wIDth="match_parent"					androID:ems="10"					androID:layout_height="wrap_content"					androID:layout_marginleft="25dp"					androID:layout_marginRight="25dp"					androID:layout_margintop="30dp"/>			</linearLayout>		</linearLayout>	</FrameLayout>

6.我们在第二个linearlayout里面添加2个编辑框一个按钮 一个文本框 一个隐藏的文本框

				<linearLayout					androID:orIEntation="vertical"					androID:layout_wIDth="match_parent"					androID:layout_height="wrap_content"					androID:gravity="center"					androID:visibility="invisible"					androID:ID="@+ID/activitymainlinearLayout1">					<TextVIEw						androID:layout_wIDth="wrap_content"						androID:layout_height="wrap_content"						androID:text="账号或密码错误"						androID:ID="@+ID/activitymainTextVIEw_0"/>				</linearLayout>				<button					androID:layout_wIDth="match_parent"					androID:layout_height="wrap_content"					androID:text="登录"					androID:layout_marginleft="25dp"					androID:layout_marginRight="25dp"					androID:layout_margintop="5dp"					androID:layout_marginBottom="5dp"					androID:background="@drawable/Shape_button"					androID:ID="@+ID/activitymainbutton1"/>				<linearLayout					androID:orIEntation="horizontal"					androID:layout_wIDth="match_parent"					androID:layout_height="wrap_content"					androID:gravity="center"					androID:ID="@+ID/activitymainlinearLayout2">					<TextVIEw						androID:layout_wIDth="wrap_content"						androID:layout_height="wrap_content"						androID:text="没有账号?"/>					<TextVIEw						androID:layout_wIDth="wrap_content"						androID:layout_height="wrap_content"						androID:text="去注册"						androID:textcolor="#FFAB40"						androID:ID="@+ID/activitymainTextVIEw9"/>				</linearLayout>

跑起来了,编辑框有点不好看,我们给它来个外包装,先去buID里面添加一个库

compile 'com.wrapp.floatlabelededittext:library:0.0.6'	

例如这样:

apply plugin: 'com.androID.application'androID {    compileSdkVersion 21    buildToolsversion "21.1.0"    defaultConfig {        applicationID "com.uigo.myui"        minSdkVersion 14        targetSdkVersion 21        versionCode 1        versionname "1.0"    }    buildTypes {        release {            MinifyEnabled false            proguardfiles getDefaultProguardfile('proguard-androID.txt'), 'proguard-rules.pro'        }    }}dependencIEs {    compile filetree(dir: 'libs', include: ['*.jar'])		//编辑框第三方库	compile 'com.wrapp.floatlabelededittext:library:0.0.6'}

接下来我们把编辑框包起来

	<com.wrapp.floatlabelededittext.floatLabeledEditText					androID:layout_wIDth="match_parent"					androID:layout_marginleft="25dp"					androID:layout_marginRight="25dp"					androID:layout_margintop="30dp"					androID:layout_height="wrap_content">					<EditText						androID:lines="1"						androID:digits="1234567890"						androID:maxLength="17"						androID:hint="请输入账号"						androID:layout_wIDth="match_parent"						androID:ems="10"						androID:layout_height="wrap_content"						androID:ID="@+ID/et_account"/>				</com.wrapp.floatlabelededittext.floatLabeledEditText>				<com.wrapp.floatlabelededittext.floatLabeledEditText					androID:layout_wIDth="match_parent"					androID:layout_margintop="4dp"					androID:layout_marginleft="25dp"					androID:layout_marginRight="25dp"					androID:layout_height="wrap_content">					<EditText						androID:lines="1"						androID:maxLength="17"						androID:hint="请输入密码"						androID:digits="1234567890qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM"						androID:layout_wIDth="match_parent"						androID:inputType="textPassword"						androID:layout_height="wrap_content"						androID:ems="10"						androID:ID="@+ID/et_password"/>				</com.wrapp.floatlabelededittext.floatLabeledEditText>

这个button样式不太好看,我们给它创建一个背景把去drawable,创建shape_button.xml

<?xml version="1.0" enCoding="utf-8"?><shape    xmlns:androID="http://schemas.androID.com/apk/res/androID"    androID:shape="rectangle">    <!-- 填充的颜色 -->    <solID androID:color="#FF0097A7" />    <!-- androID:radius 弧形的半径 -->    <!-- 设置按钮的四个角为弧形 -->    <corners 		androID:radius="30dp" />  </shape>

让我们康康整体代码吧

<?xml version="1.0" enCoding="utf-8"?><linearLayout	xmlns:androID="http://schemas.androID.com/apk/res/androID"	androID:layout_wIDth="match_parent"	androID:layout_height="match_parent"	androID:orIEntation="vertical"	androID:gravity="center">	<FrameLayout		androID:layout_wIDth="match_parent"		androID:layout_height="match_parent"		androID:background="#FF0097A7">		<linearLayout			androID:orIEntation="vertical"			androID:layout_wIDth="match_parent"			androID:layout_height="match_parent"			androID:gravity="center">			<linearLayout				androID:orIEntation="vertical"				androID:layout_wIDth="match_parent"				androID:layout_height="0dp"				androID:layout_weight="2"				androID:gravity="center_vertical">				<TextVIEw					androID:layout_wIDth="wrap_content"					androID:layout_height="wrap_content"					androID:text="Welcome"					androID:textAppearance="?androID:attr/textAppearanceSmall"					androID:layout_marginleft="25dp"/>				<TextVIEw					androID:layout_wIDth="wrap_content"					androID:layout_height="wrap_content"					androID:text="sgin up"					androID:layout_marginleft="25dp"					androID:textSize="35sp"					androID:textStyle="bold"					androID:layout_margintop="5dp"/>			</linearLayout>			<linearLayout				androID:orIEntation="vertical"				androID:layout_wIDth="match_parent"				androID:layout_height="0dp"				androID:layout_weight="7"				androID:background="@drawable/Shape"				androID:gravity="center_horizontal">				<com.wrapp.floatlabelededittext.floatLabeledEditText					androID:layout_wIDth="match_parent"					androID:layout_marginleft="25dp"					androID:layout_marginRight="25dp"					androID:layout_margintop="30dp"					androID:layout_height="wrap_content">					<EditText						androID:lines="1"						androID:digits="1234567890"						androID:maxLength="17"						androID:hint="请输入账号"						androID:layout_wIDth="match_parent"						androID:ems="10"						androID:layout_height="wrap_content"						androID:ID="@+ID/et_account"/>				</com.wrapp.floatlabelededittext.floatLabeledEditText>				<com.wrapp.floatlabelededittext.floatLabeledEditText					androID:layout_wIDth="match_parent"					androID:layout_margintop="4dp"					androID:layout_marginleft="25dp"					androID:layout_marginRight="25dp"					androID:layout_height="wrap_content">					<EditText						androID:lines="1"						androID:maxLength="17"						androID:hint="请输入密码"						androID:digits="1234567890qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM"						androID:layout_wIDth="match_parent"						androID:inputType="textPassword"						androID:layout_height="wrap_content"						androID:ems="10"						androID:ID="@+ID/et_password"/>				</com.wrapp.floatlabelededittext.floatLabeledEditText>				<linearLayout					androID:orIEntation="vertical"					androID:layout_wIDth="match_parent"					androID:layout_height="wrap_content"					androID:gravity="center"					androID:visibility="invisible"					androID:ID="@+ID/activitymainlinearLayout1">					<TextVIEw						androID:layout_wIDth="wrap_content"						androID:layout_height="wrap_content"						androID:text="账号或密码错误"						androID:ID="@+ID/activitymainTextVIEw_0"/>				</linearLayout>				<button					androID:layout_wIDth="match_parent"					androID:layout_height="wrap_content"					androID:text="登录"					androID:layout_marginleft="25dp"					androID:layout_marginRight="25dp"					androID:layout_margintop="5dp"					androID:layout_marginBottom="5dp"					androID:background="@drawable/Shape_button"					androID:ID="@+ID/activitymainbutton1"/>				<linearLayout					androID:orIEntation="horizontal"					androID:layout_wIDth="match_parent"					androID:layout_height="wrap_content"					androID:gravity="center"					androID:ID="@+ID/activitymainlinearLayout2">					<TextVIEw						androID:layout_wIDth="wrap_content"						androID:layout_height="wrap_content"						androID:text="没有账号?"/>					<TextVIEw						androID:layout_wIDth="wrap_content"						androID:layout_height="wrap_content"						androID:text="去注册"						androID:textcolor="#FFAB40"						androID:ID="@+ID/activitymainTextVIEw9"/>				</linearLayout>			</linearLayout>		</linearLayout>	</FrameLayout></linearLayout>

在康康效果图:


给控件加上ID

ID可以随便设,但是不能重复

给文字加上下划线

去javaj绑定控件

package com.uigo.myui; import androID.app.Activity;import androID.graphics.Paint;import androID.os.Bundle;import androID.Widget.button;import androID.Widget.EditText;import androID.Widget.TextVIEw;public class MainActivity extends Activity { private TextVIEw t2;//这里有一个隐藏的提示控件    @OverrIDe    protected voID onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentVIEw(R.layout.activity_main);					t2=findVIEwByID(R.ID.activitymainTextVIEw9);//前往注册账号绑定						//我们要把前往注册给加条下划线		t2.getPaint().setFlags(Paint.UNDERliNE_TEXT_FLAG);//加上下划线---paint是画笔		t2.getPaint().setAntiAlias(true);//为这条线加上下划线								    }						} 

跑起来试试效果吧

总结

以上是内存溢出为你收集整理的Android studio写一个简单又看得过去的登录注册ui全部内容,希望文章能够帮你解决Android studio写一个简单又看得过去的登录和注册ui所遇到的程序开发问题。

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

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1058168.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-25
下一篇 2022-05-25

发表评论

登录后才能评论

评论列表(0条)

保存