用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);
}
}
});
}
});
}
}
点击获取验证码,弹出如图对话框,滑动滑块最终效果为一开始图一。
如上即是简单的完成自定义布局弹出对话框滑块验证,至于验证方面代码这里并没有此功能。