如图:自定义Dialog实现图片滑块验证:
2,如图:自定义LodingView实现加载过程
首先,创建DialogView继承Dialog(我是在Framework 模块里新建了View包来建的)
package View;
import android.app.Dialog;
import android.content.Context;
import android.view.Window;
import android.view.WindowManager;
/**
* Created By LicaiWen
* To DO:
*/
public class DialogView extends Dialog {
//构造方法,layout是弹出框的布局,themeResId是设置弹出框背景透明度,无标题的样式文件,gravity是控制弹出框的位置。
public DialogView( Context context,int layout, int themeResId,int gravity) {
super(context, themeResId);
setContentView(layout);
Window window=getWindow();
WindowManager.LayoutParams layoutParams=window.getAttributes();
layoutParams.width=WindowManager.LayoutParams.MATCH_PARENT;
layoutParams.height=WindowManager.LayoutParams.WRAP_CONTENT;
layoutParams.gravity=gravity;
window.setAttributes(layoutParams);
}
}
2,在Framework模块新建Manager包新建一个DialogManger类来管理DialogView;
package Manager;
import android.content.Context;
import android.view.Gravity;
import com.example.framework.R;
import View.DialogView;
/**
* Created By LicaiWen
* To DO:
*/
public class DialogManager {
private volatile static DialogManager dialogManager=null;
private DialogManager(){
}
public static DialogManager getDialogManagerInstance(){
if(dialogManager==null){
synchronized (DialogManager.class){
if (dialogManager==null){
dialogManager=new DialogManager();
}
}
}
return dialogManager;
}
//initView方法返回DiaogView实例
public DialogView initView(Context context,int layout,int gravity){
return new DialogView(context,layout, R.style.Theme_Dialog,gravity);
}
//重写initView方法,因为大多是dialog的位置是在中间的,而且背景是透明无标题的,所以这个initView方法默认背景透明,无标题,且弹出位置在中间。
public DialogView initView(Context context,int layout){
return new DialogView(context,layout, R.style.Theme_Dialog, Gravity.CENTER);
}
//显示DialogView
public void show(DialogView view){
if(view!=null){
if(!view.isShowing()){
view.show();
}
}
}
//隐藏DialogView
public void hide(DialogView view){
if(view !=null){
if(view.isShowing()){
view.dismiss();
}
}
}
}
3,背景透明,无标题的样式文件 R.style.Theme_Dialog
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- dialog theme -->
<style name="Theme_Dialog" parent="Theme.AppCompat.Dialog">
<item name="android:windowBackground">@android:color/transparent</item>
<item name="windowNoTitle">true</item>
</style>
</resources>
4,在登陆页的逻辑:点击获取验证码-》弹出验证图来验证,拖动滑块与白方块重叠,验证成功->发送验证码。
应该在登陆页的onCreate()方法初始化弹出框。(这里写了initDialogView
方法在onCreate中调用,mDialogView是全局是DialogView实例,R.layout.dialog_code_view是含有验证图组件的布局文件,TouchPictureVerifyView是自定义View的实例,代表一个验证图组件,详看上一篇博文)
private void initDialogView() {
mDialogView=DialogManager.getDialogManagerInstance().initView(this,R.layout.dialog_code_view);
mTouchPic=(TouchPictureVerifyView)mDialogView.findViewById(R.id.mPictureV);
mTouchPic.setOnViewResultListener(new TouchPictureVerifyView.OnViewResultListener() {
@Override
public void onResult() {
//验证成功就发送验证码
sendSMS();
}
});
}
R.layout.dialog_code_view是含有验证图组件的布局文件:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
android:gravity="center
"
android:layout_height="match_parent">
<View.TouchPictureVerifyView
android:id="@+id/mPictureV"
android:layout_width="300dp"
android:layout_height="180dp"></View.TouchPictureVerifyView>
</LinearLayout>
在点击获取验证码的时候弹出验证图的dialog;
public void onClick(View v) {
switch (v.getId()){
//点击获取验证码
case R.id.btn_sendVerify:
String phone=etNumber.getText().toString().trim();
if(TextUtils.isEmpty(phone)){
Toast.makeText(this,"手机号不能为空",Toast.LENGTH_SHORT).show();
}else {
DialogManager.getDialogManagerInstance().show(mDialogView);
}
break;
在发送验证码成功之前隐藏验证图的dialog;
private void sendSMS() {
//发送验证码
BmobManager.getBmobManagerInstance().sendVerifyNumber(etNumber.getText().toString().trim(), new QueryListener<Integer>() {
@Override
public void done(Integer integer, BmobException e) {
if (e == null) {
DialogManager.getDialogManagerInstance().hide(mDialogView);
Toast.makeText(LoginActivity.this, "发送验证码成功", Toast.LENGTH_SHORT).show();
handler.sendEmptyMessage(H_TIME);
btnSendVerify.setClickable(false);
}else {
DialogManager.getDialogManagerInstance().hide(mDialogView);
Toast.makeText(LoginActivity.this, "发送验证码失败:"+e.toString(), Toast.LENGTH_SHORT).show();
}
}
});
以上是自定义Dialog实现弹出验证图进行验证。
以下进行自定义LodingView实现加载等待
逻辑:在点击登陆的时候弹出LodingView,在开启另一个页面之前隐藏;
先创建一个LodingView,因为已经有了一个DialogView是实现了Dialog的,那么我们在创建LodingView的时候就不必继承Dialog了。在LoadingView的构造方法中返回一个DialoView的实例。
package View;
import android.animation.ObjectAnimator;
import android.content.Context;
import android.os.Build;
import android.widget.ImageView;
import android.widget.TextView;
import com.example.framework.R;
import Manager.DialogManager;
import utils.AnimUtils;
/**
* Created By LicaiWen
* To DO:
*/
public class LodingView {
private DialogView mLodingView;
private ImageView iv_loding;
private TextView tv_loding;
private ObjectAnimator anim;
public LodingView(Context context){
mLodingView= DialogManager.getDialogManagerInstance().initView(context,R.layout.loding_view);
iv_loding=(ImageView)mLodingView.findViewById(R.id.iv_loding);
tv_loding=(TextView)mLodingView.findViewById(R.id.tv_loding);
anim= AnimUtils.animRotation(iv_loding);
}
public void setLoadingText(String text){
tv_loding.setText(text);
}
public void show(){
anim.start();
DialogManager.getDialogManagerInstance().show(mLodingView);
}
public void hide(){
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
anim.pause();
}
DialogManager.getDialogManagerInstance().hide(mLodingView);
}
public void show(String text){
setLoadingText(text);
anim.start();
DialogManager.getDialogManagerInstance().show(mLodingView);
}
}
,R.layout.loding_view是弹出框的布局
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
android:orientation="vertical"
android:gravity="center"
android:layout_height="match_parent">
<LinearLayout
android:background="@drawable/shape_loding_bg"
android:layout_width="150dp"
android:gravity="center"
android:orientation="vertical"
android:layout_height="150dp">
<ImageView
android:id="@+id/iv_loding"
android:src="@drawable/img_loding"
android:layout_width="50dp"
android:layout_height="50dp"></ImageView>
<TextView
android:layout_marginLeft="10dp"
android:id="@+id/tv_loding"
android:layout_marginTop="10dp"
android:text="@string/loding"
android:layout_width="wrap_content"
android:layout_height="wrap_content"></TextView>
</LinearLayout>
</LinearLayout>
AnimUtils是动画旋转工具类
package utils;
import android.animation.ObjectAnimator;
import android.animation.ValueAnimator;
import android.view.View;
import android.view.animation.LinearInterpolator;
/**
* Created By LicaiWen
* To DO:
*/
public class AnimUtils {
public static ObjectAnimator animRotation(View view){
ObjectAnimator objectAnimator=ObjectAnimator.ofFloat(view,"rotation",0f,360f);
objectAnimator.setDuration(2000);
objectAnimator.setRepeatMode(ValueAnimator.RESTART);
objectAnimator.setRepeatCount(ValueAnimator.INFINITE);
objectAnimator.setInterpolator(new LinearInterpolator());
return objectAnimator;
}
}
之后的代码便是创建LodingView的实例,在点击登陆按钮的时候调用show()方法,在开启另一个页面的时候就调用hide()方法。这里省略。。。