Android入门实例一登录界面的设计与实现

来源：互联网发布：网络主播解约协议编辑：程序博客网时间：2024/05/29 10:14

友好登录界面的设计与实现

一、简介：

登录的时候我们一般需要输入用户名和密码，以及电话号码等，需要切换不同的软键盘，否则会不那么方便。本篇文章将使用EditText(编辑文本框)、TextView（文本框），以及Button（命令按钮）组件来模仿设计一个友好的登录界面，当“学号”、“姓名”、“密码”文本框中都输入后，点击登录，如果密码正确则显示“快跑呀，XX同学来了”，否则“xx同学，你的输入有误，请重新输入，错误超过5次报警哦”

二、流程：

2.1首先当然是新建一个Android project啦，【File】--->【New】-->【Other】-->【Android】-->【Android Application Project】,然后给它起个名字，比如“Login”,

3.在(res->layout->)activity_main.xml里面，设置我们的布局，代码如下

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

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.tonghua.login.MainActivity" >

<TextView

android:id="@+id/paoMaDengView"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:layout_gravity="center"

android:text="欢迎光临！"

android:textSize="20sp"

android:textColor="#CD6889"

android:singleLine="true"

android:marqueeRepeatLimit="marquee_forever"

android:scrollHorizontally="true"

android:ellipsize="marquee"

android:clickable="true"

android:focusable="true"

android:focusableInTouchMode="true" />

<LinearLayout

android:id="@+id/linear1"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:layout_alignParentLeft="true"

android:layout_below="@+id/paoMaDengView"

android:layout_marginTop="25dp"

android:orientation="horizontal" >

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="学号："

android:textSize="20sp"

android:textColor="#FF6600"

android:textStyle="bold"/>

<EditText

android:id="@+id/numberET"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:hint="请输入学号"

android:inputType="number" />

</LinearLayout>

<LinearLayout

android:id="@+id/linear2"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:layout_alignParentRight="true"

android:layout_below="@+id/linear1"

android:orientation="horizontal" >

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="姓名："

android:textColor="#003399"

android:textSize="20sp"

android:textStyle="bold" />

<EditText

android:id="@+id/nameET"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:hint="请输入姓名" >

</EditText>

</LinearLayout>

<LinearLayout

android:id="@+id/linear3"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:layout_alignLeft="@+id/linear2"

android:layout_below="@+id/linear2"

android:orientation="horizontal" >

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="密码："

android:textColor="#00bb00"

android:textSize="20sp"

android:textStyle="bold" />

<EditText

android:id="@+id/passwordET"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:ems="10"

android:hint="请输入密码"

android:password="true" />

</LinearLayout>

<Button

android:id="@+id/loginBtn"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:layout_below="@+id/linear3"

android:layout_centerVertical="true"

android:text="登录"

android:textColor="#808000"

android:textSize="20sp" />

</RelativeLayout>

4.设置好界面之后，我们需要在（src->com.tonghua.login->）MainActivity.java里面添加需要的逻辑运算或者一下动作，代码如下

package com.tonghua.login;

import android.support.v7.app.ActionBarActivity;

import android.os.Bundle;

import android.view.Menu;

import android.view.MenuItem;

import android.view.View;

import android.view.View.OnClickListener;

import android.widget.Button;

import android.widget.EditText;

import android.widget.TextView;

public class MainActivity extends ActionBarActivity {

private TextView paoMaDengView;

private EditText numberET, nameET, passwordET;

private Button loginBtn;

private String number, name, password;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

// 通过findViewById(ID)方法，是布局文件所定义的组件（对象）与原组件绑定

paoMaDengView = (TextView) findViewById(R.id.paoMaDengView);

// 根据ID绑定到TextView对象

numberET = (EditText) findViewById(R.id.numberET);

// 根据ID绑定到number的EditText组件

nameET = (EditText) findViewById(R.id.nameET);

// 根据ID绑定到name的EditText组件

passwordET = (EditText) findViewById(R.id.passwordET);

// 根据ID绑定到password的EditText组件

loginBtn = (Button) findViewById(R.id.loginBtn);

loginBtn.setOnClickListener(new OnClickListener() {

@Override

public void onClick(View v) {

// 设置单击Button后要执行的操作

// TODO Auto-generated method stub

// 获取文本框输入的内容并转换为字符串格式

number = numberET.getText().toString();

name = nameET.getText().toString();

password = passwordET.getText().toString();

if (number.equals("20134902") && name.equals("血碧")

&& password.equals("123456")) {

paoMaDengView.setText(name + "同学来啦，快跑呀");

} else {

paoMaDengView.setText(name + "同学的输入有误，请重新输入！！错误五次就报警哟~，~");

}

});

}

@Override

public boolean onCreateOptionsMenu(Menu menu) {

// Inflate the menu; this adds items to the action bar if it is present.

getMenuInflater().inflate(R.menu.main, menu);

return true;

}

@Override

public boolean onOptionsItemSelected(MenuItem item) {

// Handle action bar item clicks here. The action bar will

// automatically handle clicks on the Home/Up button, so long

// as you specify a parent activity in AndroidManifest.xml.

int id = item.getItemId();

if (id == R.id.action_settings) {

return true;

}

return super.onOptionsItemSelected(item);

}

5.现在，感觉都弄好了，其实还差最后也是最重要的一步，调试（Ctrl+F11）或者（Run->Run Configurations）

6.PS:可以使用快捷键【Alt+/】实现代码补全；使用【Ctrl+Shift+F】实现格式化代码；可以连接手机然后在手机里面调试，不过需要【设置】->【其他高级设置】->【开发者选项】->【USB调试】，然后开启它就可以了

7.现在的这个app只能在自己的手机用，不能发布的，还需要给它签名，等下次再介绍吧

8.跑马灯那个文本框要点击一下获取焦点后才能跑起来

0 0

Android入门实例一 登录界面的设计与实现

友好登录界面的设计与实现

一、简介：

二、流程：

Android入门实例一登录界面的设计与实现