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

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

一、简介:

登录的时候我们一般需要输入用户名和密码,以及电话号码等,需要切换不同的软键盘,否则会不那么方便。本篇文章将使用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="请输入姓名" >

 

            <requestFocus />

        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绑定到numberEditText组件

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

// 根据ID绑定到nameEditText组件

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

// 根据ID绑定到passwordEditText组件

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.跑马灯那个文本框要点击一下获取焦点后才能跑起来

 

 

 

你可能感兴趣的:(Android入门实例)