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

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

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

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

<FrameLayoutandroid:layout_width="match_parent"		android:layout_height="match_parent"		android:background="#FF0097A7">
</FrameLayout>

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

<FrameLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:background="#FF0097A7"><LinearLayoutandroid:orientation="vertical"android:layout_width="match_parent"android:layout_height="match_parent"android:gravity="center"></LinearLayout>
</FrameLayout>

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

<FrameLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:background="#FF0097A7"><LinearLayoutandroid:orientation="vertical"android:layout_width="match_parent"android:layout_height="match_parent"android:gravity="center"><LinearLayoutandroid:orientation="vertical"android:layout_width="match_parent"android:layout_height="0dp"android:layout_weight="2"/><LinearLayoutandroid: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"?>
<shapexmlns:android="http://schemas.android.com/apk/res/android"android:shape="rectangle"><!-- 填充的颜色 --><solid android:color="#FFFFFF" /><cornersandroid:topLeftRadius="40dp"//左边顶上圆角40dp-----删除android:topRightRadius="40dp"//右边顶上圆角40dp-----删除/>
</shape>

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

<FrameLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:background="#FF0097A7"><LinearLayoutandroid:orientation="vertical"android:layout_width="match_parent"android:layout_height="match_parent"android:gravity="center"><LinearLayoutandroid:orientation="vertical"android:layout_width="match_parent"android:layout_height="0dp"android:layout_weight="2"android:gravity="center_vertical"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Welcome"android:textAppearance="?android:attr/textAppearanceSmall"android:layout_marginLeft="25dp"/><TextViewandroid: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><LinearLayoutandroid:orientation="vertical"android:layout_width="match_parent"android:layout_height="0dp"android:layout_weight="7"android:background="@drawable/Shape"android:gravity="center_horizontal"><EditTextandroid: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个编辑框一个按钮 一个文本框 一个隐藏的文本框

<LinearLayoutandroid:orientation="vertical"android:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center"android:visibility="invisible"android:id="@+id/activitymainLinearLayout1"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="账号或密码错误"android:id="@+id/activitymainTextView_0"/></LinearLayout><Buttonandroid: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"/><LinearLayoutandroid:orientation="horizontal"android:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center"android:id="@+id/activitymainLinearLayout2"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="没有账号?"/><TextViewandroid: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 21buildToolsVersion "21.1.0"defaultConfig {applicationId "com.uigo.myui"minSdkVersion 14targetSdkVersion 21versionCode 1versionName "1.0"}buildTypes {release {minifyEnabled falseproguardFiles 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.FloatLabeledEditTextandroid:layout_width="match_parent"android:layout_marginLeft="25dp"android:layout_marginRight="25dp"android:layout_marginTop="30dp"android:layout_height="wrap_content"><EditTextandroid: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.FloatLabeledEditTextandroid:layout_width="match_parent"android:layout_marginTop="4dp"android:layout_marginLeft="25dp"android:layout_marginRight="25dp"android:layout_height="wrap_content"><EditTextandroid: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"?>
<shapexmlns: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"?>
<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"android:gravity="center"><FrameLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:background="#FF0097A7"><LinearLayoutandroid:orientation="vertical"android:layout_width="match_parent"android:layout_height="match_parent"android:gravity="center"><LinearLayoutandroid:orientation="vertical"android:layout_width="match_parent"android:layout_height="0dp"android:layout_weight="2"android:gravity="center_vertical"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Welcome"android:textAppearance="?android:attr/textAppearanceSmall"android:layout_marginLeft="25dp"/><TextViewandroid: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><LinearLayoutandroid: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.FloatLabeledEditTextandroid:layout_width="match_parent"android:layout_marginLeft="25dp"android:layout_marginRight="25dp"android:layout_marginTop="30dp"android:layout_height="wrap_content"><EditTextandroid: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.FloatLabeledEditTextandroid:layout_width="match_parent"android:layout_marginTop="4dp"android:layout_marginLeft="25dp"android:layout_marginRight="25dp"android:layout_height="wrap_content"><EditTextandroid: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><LinearLayoutandroid:orientation="vertical"android:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center"android:visibility="invisible"android:id="@+id/activitymainLinearLayout1"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="账号或密码错误"android:id="@+id/activitymainTextView_0"/></LinearLayout><Buttonandroid: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"/><LinearLayoutandroid:orientation="horizontal"android:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center"android:id="@+id/activitymainLinearLayout2"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="没有账号?"/><TextViewandroid: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;//这里有一个隐藏的提示控件@Overrideprotected 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);//为这条线加上下划线}} 

跑起来试试效果吧


本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部