最近公司在做一个商城的项目,业务中需要选取保险公司。逻辑大概就是点击选择保险公司,弹出一个悬浮框,悬浮框展示几个保险公司供选择,选中后点确认弹框消失,功能很简单,一般都自定义一个Dialog或者自定义一个PopupWindow。但是网上实现的基本都是listview等以列表形式展示的,所以很有正义感的我有必要把表格布局的实现方式展示给大家。
先上图。
主要实现的逻辑是自定义一个布局实现Dialog,重写相关方法,构造方法提供给外界(这里是MainActivity)设置数据,重写相关点击事件,实现一个回调的接口供外界处理点击事件。
下面主要是贴出主要的实现逻辑代码,懒得看的话,具体的Demo可以点击 这里 直达GitHub。记得小手点星星哦~
这里是关键代码 自定义保险选取类 SelectInsurDialog :
package com.xdx.doall.griddialog;
import android.app.Dialog;
import android.content.Context;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.WindowManager;
import android.widget.AdapterView;
import android.widget.Button;
import android.widget.GridView;
import java.util.ArrayList;
import java.util.List;
/**
* Created by xdx on 2018/7/30.
*/
public class SelectInsurDialog extends Dialog {
DialogCallback callback;
String name ;
Button sure;
InsurGridViewAdapt mAdapter;
List<InsurEntity> listData;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setCustomeDialog();
}
// 提供构造方法让外界设置数据
public void setList(List<InsurEntity> listData){
this.listData = listData;
}
public SelectInsurDialog(Context context) {
super(context, R.style.mall_Dialog);
}
public SelectInsurDialog(Context context, int themeResId) {
super(context, themeResId);
}
protected SelectInsurDialog(Context context, boolean cancelable, OnCancelListener cancelListener) {
super(context, cancelable, cancelListener);
setCustomeDialog();
}
public void setDialogCallback(DialogCallback callback) {
this.callback = callback;
}
private void setCustomeDialog() {
final List<InsurEntity> list = new ArrayList<InsurEntity>();
for (int i = 0 ;i<listData.size(); i++){
InsurEntity insurEntity = new InsurEntity();
insurEntity.setName(listData.get(i).getName());
list.add(insurEntity);
}
View mView = LayoutInflater.from(getContext()).inflate(R.layout.mall_dialog_selectinsur, null);
GridView gridView= mView.findViewById(R.id.gridView);
mAdapter = new InsurGridViewAdapt(getContext(),list);
gridView.setAdapter(mAdapter);
gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> adapterView, View view, int position, long l) {
for(int i = 0;i<list.size();i++){
if(position == i){
name = list.get(position).getName();
list.get(i).setSelect(true);
}else{
list.get(i).setSelect(false);
}
}
mAdapter.notifyDataSetChanged();
}
});
Button cancle = (Button) mView.findViewById(R.id.btn_cancel);
sure = (Button) mView.findViewById(R.id.btn_sure);
setContentView(mView);
//这里设置弹框的具体大小
WindowManager.LayoutParams lp = getWindow().getAttributes();
lp.width = (int) (DisplayUtil.getScreenWidth(getContext()) * 0.8);
getWindow().setAttributes(lp);
cancle.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
SelectInsurDialog.this.dismiss();
}
});
sure.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
callback.onClickRadioButton(name);
}
});
}
/**
* 提供一个接口,供外界处理点击事件,也可以单独写个接口
*/
public interface DialogCallback {
void onClickRadioButton(String name);
}
}
然后是处理弹框的GridView 布局文件 :all_dialog_selectinsur.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/rootView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ffffff"
android:descendantFocusability="blocksDescendants"
android:orientation="vertical">
<TextView
android:id="@+id/groupnameet"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_marginLeft="20dp"
android:text="请选择保险公司"
android:textColor="@color/mall_selector_order_paytype"
android:textSize="12sp" />
<GridView
android:id="@+id/gridView"
android:clickable="true"
android:focusable="true"
android:listSelector="#00000000"
android:verticalSpacing="10dp"
android:layout_marginTop="10dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="visible"
android:numColumns="2">
</GridView>
<LinearLayout
android:layout_width="match_parent"
android:orientation="horizontal"
android:layout_marginTop="40dp"
android:layout_marginBottom="20dp"
android:layout_height="wrap_content">
<Button
android:id="@+id/btn_cancel"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="30dp"
android:background="@drawable/me_shape_eclass"
android:button="@null"
android:gravity="center"
android:text="取消"
android:layout_marginLeft="20dp"
android:textColor="@color/mall_bg_1DC97C"
android:textSize="12sp">
</Button>
<Button
android:id="@+id/btn_sure"
android:layout_width="0dp"
android:layout_weight="1"
android:gravity="center"
android:layout_marginRight="20dp"
android:layout_marginLeft="20dp"
android:layout_height="30dp"
android:background="@drawable/mall_shape_sure"
android:button="@null"
android:text="确认"
android:textColor="#ffffff"
android:textSize="12sp">
</Button>
</LinearLayout>
</LinearLayout>
再是处理布局逻辑的 adapter
package com.xdx.doall.griddialog;
import android.content.Context;
import android.graphics.Color;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.TextView;
import java.util.List;
/**
* Created by xdx on 2018/7/30.
*/
public class InsurGridViewAdapt extends BaseAdapter {
private Context mContext;
private List<InsurEntity> List;
public InsurGridViewAdapt(Context mContext, List<InsurEntity> List) {
this.mContext = mContext;
this.List = List;
}
@Override
public int getCount() {
return List.size();
}
@Override
public Object getItem(int i) {
return List.get(i);
}
@Override
public long getItemId(int i) {
return i;
}
@Override
public View getView(int position, View view, ViewGroup viewGroup) {
final InsurEntity insurBean = (InsurEntity) getItem(position);
ViewHolder viewHolder;
if(view == null){
view = View.inflate(mContext, R.layout.mall_item_insur,null);
viewHolder = new ViewHolder();
viewHolder.name = view.findViewById(R.id.rb03);
view.setTag(viewHolder);
}else {
viewHolder = (ViewHolder) view.getTag();
}
if(insurBean.isSelect()){
viewHolder.name.setBackgroundResource(R.drawable.me_shape_eclass);
viewHolder.name.setTextColor(Color.parseColor("#28cc82"));
}else {
viewHolder.name.setBackgroundResource(R.drawable.me_shape_eclass_u);
viewHolder.name.setTextColor(Color.parseColor("#8F8F8F"));
}
viewHolder.name.setText(List.get(position).getName());
return view;
}
class ViewHolder{
TextView name;
}
}
基本上主要的代码就这些,然后是在具体的页面里面调用即可。其他的一些详细代码可以看我 GitHub上的Demo,都在上面了。如果有帮到你,请给我一个布灵布灵的 star 哦~