滑块验证码seekbar与alertdialog自定义布局

用Android studio第一次尝试滑块验证,一开始单纯的做了使用seekbar控件的xml,后来因为发现是属于点击弹出对话框的模式,于是又去查阅alertdialog自定义,各种博主的写的都不错,但是在实践的过程中我也出现了不少报错,最后修修补补总算实现了

点击主要页面的TextView弹出滑块验证对话框,滑动钥匙滑块到进度条尾部终止(这里并没有实现验证方面的功能,只是监听控制滑动)


要用自定义的对话框可以自己先写Layout布局文件,这里是我写的seekbar.xml(就是如上图的对话框样子)

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <RelativeLayout
        android:layout_width="310dp"
        android:layout_height="180dp"
        android:background="@drawable/list_item_bg">
        <TextView
            android:id="@+id/cross"
            android:layout_width="15dp"
            android:layout_height="15dp"
            android:layout_alignParentRight="true"
            android:layout_alignParentTop="true"
            android:layout_marginTop="8dp"
            android:layout_marginRight="8dp"
            android:background="@drawable/crossgray" />

        <TextView
            android:id="@+id/pleaser"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="请向右滑动滑块验证"
            android:layout_below="@id/cross"
            android:layout_marginTop="15dp"
            android:textColor="@color/black"
            android:layout_centerHorizontal="true"
            android:textSize="20dp" />
        <SeekBar
            android:id="@+id/sbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:max="100"
            android:progress="0"
            android:layout_below="@id/pleaser"
            android:layout_marginTop="30dp"
            android:progressDrawable="@drawable/seekbar_bg"
            android:thumb="@drawable/slidekey"
            android:thumbOffset="0dp" />
        <TextView
            android:id="@+id/tv"
            android:layout_width="wrap_content"
            android:layout_height="30dp"
            android:layout_below="@id/pleaser"
            android:layout_marginTop="37dp"
            android:textColor="#ffffff"
            android:text=""
            android:textSize="18dp"
            android:layout_centerInParent="true"/>
        <ImageView
            android:id="@+id/slidejiantou"
            android:layout_width="50dp"
            android:layout_height="30dp"
            android:src="@drawable/slidejiantou"
            android:layout_alignParentLeft="true"
            android:layout_marginLeft="70dp"
            android:layout_below="@id/pleaser"
            android:layout_marginTop="35dp"/>
        <ImageView
            android:id="@+id/unlock"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/unlock"
            android:layout_alignParentRight="true"
            android:layout_marginRight="20dp"
            android:layout_below="@id/pleaser"
            android:layout_marginTop="35dp"/>
    </RelativeLayout>
</android.support.constraint.ConstraintLayout>

然后重要部分是主页面的java代码,我的主页面acticity名为Get_verifyingcode

它对应的xml文件不重要,只要知道我里面有一个叫recode的TextView被用作弹出对话框的按钮控件即可,我们要用它来连接对话框。
import android.app.Dialog;
import android.content.DialogInterface;
import android.graphics.Color;
import android.support.v7.app.ActionBar;
import android.support.v7.app.AlertDialog;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.Window;
import android.view.WindowManager;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.SeekBar;
import android.widget.TextView;

public class Get_verifyingcode extends AppCompatActivity {
    private TextView recode;
    private Dialog mDialog;
    private Button bt_confirm;
    private Button bt_cancel;
    private TextView tv;
    private TextView cross;
    private SeekBar seekBar;
    private ImageView unlock;
    private ImageView slidejiantou;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_get_verifyingcode);
        ActionBar actionBar = getSupportActionBar();
        if (actionBar != null) {
            actionBar.hide();
        }
        TextView TextView = (TextView) findViewById(R.id.recode);


        TextView.setOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View v) {
                DialogInterface.OnClickListener listener;
                listener = new DialogInterface.OnClickListener() {

                    @Override
                    public void onClick(DialogInterface dialog, int which) {
                        // TODO Auto-generated method stubf
                        finish();
                    }
                };
                final AlertDialog builder = new AlertDialog.Builder(Get_verifyingcode.this)
                        .create();
                builder.show();
                builder.getWindow().setContentView(R.layout.activity_seekbar);//设置弹出框加载的布局

                slidejiantou = (ImageView) builder.findViewById(R.id.slidejiantou);
                unlock = (ImageView) builder.findViewById(R.id.unlock);
                tv = (TextView) builder.findViewById(R.id.tv);
                cross = (TextView) builder.findViewById(R.id.cross);
                seekBar = (SeekBar) builder.findViewById(R.id.sbar);
                builder.getWindow()
                        .findViewById(R.id.cross)
                        .setOnClickListener(new View.OnClickListener() {  //按钮点击事件
                            @Override
                            public void onClick(View v) {
                                builder.dismiss();
                            }
                        });
                seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
                    /**
                     * 拖动条停止拖动的时候调用
                     */
                    @Override
                    public void onStopTrackingTouch(SeekBar seekBar) {
                        unlock.setVisibility(View.INVISIBLE);
                    }
                    /**
                     * 拖动条开始拖动的时候调用
                     */
                    @Override
                    public void onStartTrackingTouch(SeekBar seekBar) {
                        slidejiantou.setVisibility(View.INVISIBLE);
                    }
                    /**
                     * 拖动条进度改变的时候调用
                     */
                    @Override
                    public void onProgressChanged(SeekBar seekBar, int progress,
                                                  boolean fromUser) {
                        if (seekBar.getProgress() == seekBar.getMax()) {
                            tv.setVisibility(View.VISIBLE);
                            tv.setTextColor(Color.WHITE);
                            tv.setText("完成验证");
                            unlock.setVisibility(View.INVISIBLE);

                        }
                        else if(seekBar.getProgress() != 0){
                            slidejiantou.setVisibility(View.INVISIBLE);
                        }
                        else {
                            tv.setVisibility(View.INVISIBLE);
                        }
                    }

                });

            }


        });
    }
}


 
 
 
 

点击获取验证码,弹出如图对话框,滑动滑块最终效果为一开始图一。

如上即是简单的完成自定义布局弹出对话框滑块验证,至于验证方面代码这里并没有此功能。

猜你喜欢

转载自blog.csdn.net/haiyinshushe/article/details/80385613