先看效果:
功能:后台webview访问andorid某个js函数时,弹出AlertDialog弹出框。
一、创建Layout
1.右键 Android studio 项目的layout,在弹出框中选择 Layout Resource File,如图
输入文件名,默认LinnerLayout。
2. 打开此文件,选择design模式。
3. 选择构件中的Widgets-TextView,拖拽至Component Tree中的LinnerLayout下。同时,右侧的Properties可以设置该组件的一些属性,例如文字、字体大小,加粗、对齐方式等。
4. 依次逐渐增加子LinnerLayout布局、EditText构件等。
5. 最终结构如下图
生成的 cert_apply.xml 文件
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="1"
android:orientation="vertical">
<TextView
android:id="@+id/textView2"
android:layout_width="348dp"
android:layout_height="wrap_content"
android:layout_weight="0.09"
android:text="\r\n 请设置证书密码"
android:textSize="21sp"
android:textStyle="bold" />
<TextView
android:id="@+id/textView"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<View
android:layout_width="match_parent"
android:layout_height="2dp"
android:background="#e6444a"
/>
<TextView
android:id="@+id/请设置密码"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.03"
android:lineSpacingExtra="8sp"
android:textAlignment="textStart"
android:textSize="20sp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="53dp"
android:orientation="horizontal">
<TextView
android:id="@+id/密码"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="密码:"
android:textAlignment="center"
android:textSize="19sp" />
<EditText
android:id="@+id/certPin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.46"
android:hint="6~20为数字字母"
android:ems="10"
android:maxLength="20"
android:theme="@style/MyEditText"
android:inputType="textPassword" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="54dp"
android:orientation="horizontal">
<TextView
android:id="@+id/确认密码"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="确认密码:"
android:textAlignment="center"
android:textSize="19sp" />
<EditText
android:id="@+id/certPinConfirm"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:ems="10"
android:hint="6~20为数字字母"
android:maxLength="20"
android:theme="@style/MyEditText"
android:inputType="textPassword" />
</LinearLayout>
</LinearLayout>
二、java类的写法
//设置证书密码
public static void certApplyWithPinInput(final String userid){
LayoutInflater layoutInflater = LayoutInflater.from(mainActivity.getApplicationContext());
final View longinDialogView = layoutInflater.inflate(R.layout.cert_apply, null);//找到定义的布局
AlertDialog.Builder builder = new AlertDialog.Builder(mainActivity);
builder.setView(longinDialogView);//设置布局
builder.setPositiveButton("确认", new DialogInterface.OnClickListener() {//设置监听内部类
@Override
public void onClick(DialogInterface dialog, int which) {
EditText edit = (EditText)longinDialogView.findViewById(R.id.certPin);//取到布局中的构件
EditText editConfirm = (EditText)longinDialogView.findViewById(R.id.certPinConfirm);
String pin = edit.getText().toString();
String pinConfirm = editConfirm.getText().toString();
if(StringUtils.isBlank(pin)||StringUtils.isBlank(pinConfirm)){
showMsgBox("错误", "密码不能为空");
return;
}else if(!pin.equals(pinConfirm)){
showMsgBox("错误", "两次密码输入不一致");
return;
}
CertApply(userid,pin);
}
});
builder.setNegativeButton("取消", new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
Toast.makeText(mainActivity.getApplicationContext(), "你点了取消", Toast.LENGTH_SHORT).show();
}
});
builder.setCancelable(true); //设置按钮是否可以按返回键取消,false则不可以取消
AlertDialog dialog = builder.create(); //创建对话框
dialog.setCanceledOnTouchOutside(true); //设置弹出框失去焦点是否隐藏,即点击屏蔽其它地方是否隐藏
dialog.show();//展示Alert
}
此外,还需要定义JS。
@JavascriptInterface
public static void CertApply(String userId){
CertUtils.certApplyWithPinInput(userId);
}
在主Activity中,初始化一下。
JsInterface ji = new JsInterface(this);
mWebview.addJavascriptInterface(ji, "AndroidWebView");
简单分享一下,欢迎留言讨论。