自定义Dialogview实现滑块验证和LodingView实现加载等待

如图:自定义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()方法。这里省略。。。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值