/**
* 目标要求:输入手机号,点击获取验证码,用户把验证码填写完毕,点击登录
* 细节:
* 1、输入手机号时,判断是不是11位手机号,不是11位,当点击获取
* 验证码按钮时则提示-->请输入11位有效手机号码,是11位,则进行点击获取验
* 证码操作,并提示验证码已发送,请尽快使用
* 2、当进行获取验证码操作后,获取验证码按钮变成灰色,且不可点击,并进行
* 倒计时操作,倒计时1分钟后可以重新点击,再次发送验证码
* 3、点击登录按钮时,若手机号和验证码有一个为空,则提示手机号与验证码
* 不能为空,若验证码已填写,则判断用户填写所验证码与系统发送验证码是否一致,
* 一致则提示登录成功,错误则提示验证码输入错误*/
准备工作:首先要在bmob公司注册一个帐号,然后进入bmob网站的下载页面,下载Android短信SDK压缩包到本地,解压之后有一个
BmobSMS_V1.0.1_20150710.jar文件,把这个jar包放到IDE的libs目录下,eclipse直接放到libs目录下即可,android studio导入jar包的操作见我之前的文章有详细的步骤,jar包导入成功之后进行BmobSMS的初始化:
BmobSMS.initialize(MainActivity.this, "336be8699869f10b984f71c0c3cdb91a");第一个参数为上下文,第二个参数为你在bmob所建立的网络应用的application Id,那么怎么在bmob网站建立网络应用呢,用文字也说不清楚,大家去慕课网看一个视频就会了,这是视频地址点击打开链接,初始化完毕之后,第二个应该考虑的就是如何获取短信验证码以及相关判断的问题,这个问题直接用代码说明,第三个应该考虑的就是倒计时的问题,这里倒计时利用的是android自己的api:CountDownTimer(),用这个类的时候要实现两个方法,这个类的用法以及两个方法的说明在代码中会有详细注释,这里不再赘述,同时为了界面美观好看,用到了自定义控件,下面上代码:
MainActivity.java代码:
- <pre name="code" class="java">package com.example.administrator.demo;
-
- import android.app.Activity;
- import android.graphics.Color;
- import android.os.Bundle;
- import android.os.CountDownTimer;
- import android.util.Log;
- import android.view.View;
- import android.widget.Button;
- import android.widget.EditText;
- import android.widget.Toast;
-
- import cn.bmob.sms.BmobSMS;
- import cn.bmob.sms.exception.BmobException;
- import cn.bmob.sms.listener.RequestSMSCodeListener;
- import cn.bmob.sms.listener.VerifySMSCodeListener;
-
- public class MainActivity extends Activity implements View.OnClickListener {
- private EditText userName_et, passWord_et;
- private Button Message_btn, login_btn;
-
- @Override
- protected void onCreate(Bundle savedInstanceState) {
- super.onCreate(savedInstanceState);
- setContentView(R.layout.activity_main);
-
- initBomb();
- initView();
- initEvent();
- }
-
- private void initEvent() {
- login_btn.setOnClickListener(this);
- Message_btn.setOnClickListener(this);
- }
-
-
-
-
-
-
-
-
-
-
-
-
-
- private void initBomb() {
- BmobSMS.initialize(MainActivity.this, "336be8699869f10b984f71c0c3cdb91a");
- }
-
-
- @Override
- public void onClick(View v) {
- Log.e("MESSAGE:", "1");
- String userName = userName_et.getText().toString();
- String passWord = passWord_et.getText().toString();
- switch (v.getId()) {
- case R.id.Message_btn:
- Log.e("MESSAGE:", "2");
- if (userName.length() != 11) {
- Toast.makeText(this, "请输入11位有效手机号码", Toast.LENGTH_SHORT).show();
- }
- else {
- Log.e("MESSAGE:", "3");
-
- BmobSMS.requestSMSCode(this, userName, "短信模板", new RequestSMSCodeListener() {
- @Override
- public void done(Integer integer, BmobException e) {
- if (e == null) {
-
- Message_btn.setClickable(false);
- Message_btn.setBackgroundColor(Color.GRAY);
- Toast.makeText(MainActivity.this, "验证码发送成功,请尽快使用", Toast.LENGTH_SHORT).show();
-
-
-
-
-
-
-
-
-
-
-
-
- new CountDownTimer(60000, 1000) {
- @Override
- public void onTick(long millisUntilFinished) {
- Message_btn.setBackgroundResource(R.drawable.button_shape02);
- Message_btn.setText(millisUntilFinished / 1000 + "秒");
- }
-
- @Override
- public void onFinish() {
- Message_btn.setClickable(true);
- Message_btn.setBackgroundResource(R.drawable.button_shape);
- Message_btn.setText("重新发送");
- }
- }.start();
- Log.e("MESSAGE:", "4");
- }
- else {
- Toast.makeText(MainActivity.this, "验证码发送失败,请检查网络连接", Toast.LENGTH_SHORT).show();
- }
- }
- });
-
- }
- break;
- case R.id.login_btn:
- Log.e("MESSAGE:", "5");
- if (userName.length() == 0 || passWord.length() == 0 || userName.length() != 11) {
- Log.e("MESSAGE:", "6");
- Toast.makeText(this, "手机号或验证码输入不合法", Toast.LENGTH_SHORT).show();
- }
- else {
- BmobSMS.verifySmsCode(this, userName, passWord, new VerifySMSCodeListener() {
- @Override
- public void done(BmobException e) {
- if (e == null) {
- Log.e("MESSAGE:", "7");
- Toast.makeText(MainActivity.this, "登录成功", Toast.LENGTH_SHORT).show();
- }
- else {
- Log.e("MESSAGE:", "8");
- Toast.makeText(MainActivity.this, "验证码错误", Toast.LENGTH_SHORT).show();
- }
- }
- });
- }
- break;
- }
- }
-
- private void initView() {
- userName_et = (EditText) findViewById(R.id.userName_et);
- passWord_et = (EditText) findViewById(R.id.passWord_et);
- Message_btn = (Button) findViewById(R.id.Message_btn);
- login_btn = (Button) findViewById(R.id.login_btn);
- }
-
-
- }
对应的布局文件:
- <LinearLayout
- xmlns:android="http://schemas.android.com/apk/res/android"
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- android:orientation="vertical"
- >
-
- <EditText
- android:id="@+id/userName_et"
- android:layout_width="match_parent"
- android:layout_height="wrap_content"
- android:hint="手机号码"
- android:layout_marginTop="100dp"
- android:layout_marginRight="20dp"
- android:layout_marginLeft="20dp"
- android:inputType="number"
- android:maxLength="11"/>
-
- <LinearLayout
- android:layout_width="match_parent"
- android:layout_height="wrap_content">
-
- <EditText
- android:id="@+id/passWord_et"
- android:layout_width="0dp"
- android:layout_height="wrap_content"
- android:hint="验证码"
- android:layout_marginLeft="20dp"
- android:inputType="number"
- android:layout_weight="1"
- />
-
- <Button
- android:id="@+id/Message_btn"
- android:layout_width="wrap_content"
- android:layout_height="20dp"
- android:layout_alignParentRight="true"
- android:text="获取验证码"
- android:textSize="8sp"
- android:layout_marginRight="20dp"
- android:textColor="@android:color/white"
- android:background="@drawable/button_shape"
- android:layout_gravity="center"
- android:clickable="true"
- />
- </LinearLayout>
-
- <Button
- android:id="@+id/login_btn"
- android:layout_width="match_parent"
- android:layout_height="wrap_content"
- android:text="登录"
- android:layout_marginRight="50dp"
- android:layout_marginLeft="50dp"
- android:background="@drawable/button_style"
- android:textColor="@android:color/white"
- android:layout_marginTop="30dp"/>
- </LinearLayout>
下面是自定义控件的代码:
button_style.xml
- <?xml version="1.0" encoding="UTF-8"?>
- <selector xmlns:android="http://schemas.android.com/apk/res/android">
- <item android:drawable="@drawable/button_shape"
- android:state_pressed="false"
- />
-
- <item android:drawable="@drawable/button_shape01"
- android:state_pressed="true"/>
-
-
- </selector>
button_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="#6495ED"/>
-
-
- <corners android:radius="5dp"/>
- <!--<stroke
- android:width="0.5dp"
- android:color="@android:color/white"
- />-->
-
-
-
- <!-- <padding
- android:bottom="10dp"
- android:left="10dp"
- android:right="10dp"
- android:top="10dp"
- />-->
- </shape>
button_shape01.xml:
- <?xml version="1.0" encoding="utf-8"?>
- <shape
- xmlns:android="http://schemas.android.com/apk/res/android"
- android:shape="rectangle">
-
-
- <solid android:color="@android:color/holo_red_light"/>
-
-
- <corners android:radius="5dp"/>
- <!--<stroke
- android:width="0.5dp"
- android:color="@android:color/white"
- />-->
-
-
-
- <padding
- android:bottom="10dp"
- android:left="10dp"
- android:right="10dp"
- android:top="10dp"
- />
- </shape>
button_shape02.xml
- <?xml version="1.0" encoding="utf-8"?>
- <shape
- xmlns:android="http://schemas.android.com/apk/res/android"
- android:shape="rectangle">
-
-
- <solid android:color="@android:color/darker_gray"/>
-
-
- <corners android:radius="5dp"/>
- <!--<stroke
- android:width="0.5dp"
- android:color="@android:color/white"
- />-->
-
-
-
- <!-- <padding
- android:bottom="10dp"
- android:left="10dp"
- android:right="10dp"
- android:top="10dp"
- />-->
- </shape>
代码部分完毕,下面看看运行效果:
初始界面:
获取验证码界面:
倒计时完毕界面:
输入验证码登录界面: