思路:
使用PopWindow ,里面布局为listview,点击展示PopWindow,点击其他区域或者选择完成时 关闭PopWindow~
关键点:
1,实现头部视图(本文名为:pop_out_top_view)
2,实现底部下拉视图,使用popWindow,pop的布局使用listview(本文名为:pop_list_view)
3,实现listView的布局,使用adapter,结合listview的item(本文名为:pop_list_view_item),实现点击item回填数据与关闭PopWindow。
说明:
本Demo里数据展示是使用String~~~,实际开发回填的是文本,给后端需要传的应该是id,一般要是用对象~
public class DropDownListView extends LinearLayout {
private TextView textView;
private ImageView imageView;
private PopupWindow popupWindow = null;
private ArrayList<String> dataList = new ArrayList<String>();
private View mView;
public DropDownListView(Context context) {
this(context, null);
}
public DropDownListView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public DropDownListView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
initView();
}
public void initView() {
String infServie = Context.LAYOUT_INFLATER_SERVICE;
LayoutInflater layoutInflater;
layoutInflater = (LayoutInflater) getContext().getSystemService(infServie);
//头部View视图
mView = layoutInflater.inflate(R.layout.pop_out_top_view, this, true);
//显示选择文本
textView = (TextView) findViewById(R.id.text);
textView.setTextColor(CFApplication.Companion.getMContext().getResources().getColor(R.color.se_aab9));
imageView = (ImageView) findViewById(R.id.btn);
//给整个头部设置点击事件
this.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
//※非必要。隐藏输入法,为了保证在输入法展示时,显示popwindow不会出问题
InputMethodManager inputManager = (InputMethodManager) textView.getContext().getSystemService(Context.INPUT_METHOD_SERVICE);
inputManager.hideSoftInputFromWindow(textView.getWindowToken(), 0);
if (popupWindow == null) {
showPopWindow();
} else {
closePopWindow();
}
}
});
}
/**
* 下拉展示的pop
* 打开下拉列表弹窗
*/
private void showPopWindow() {
// 加载popupWindow的布局文件
String inflaterServie = Context.LAYOUT_INFLATER_SERVICE;
LayoutInflater layoutInflater;
layoutInflater = (LayoutInflater) getContext().getSystemService(inflaterServie);
//popWindow里面的布局Listview视图
View view = layoutInflater.inflate(R.layout.pop_list_view, null, false);
ListView listView = (ListView) view.findViewById(R.id.pop_listView);
listView.setAdapter(new DropDownListAdapter(getContext(), dataList));
/**
* 在new PopupWindow(view, LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT)
* 如果默认传入LayoutParams.WRAP_CONTENT,可能会显示的下拉view的宽度比头部要窄,
* 为了保持一样宽度,使用this.getMeasuredWidth()
*/
int widthPop = LayoutParams.WRAP_CONTENT;
if(this.getMeasuredWidth() >0){
widthPop = this.getMeasuredWidth();
}
popupWindow = new PopupWindow(view, widthPop, LayoutParams.WRAP_CONTENT);
// popupWindow = new PopupWindow(view, LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
popupWindow.setBackgroundDrawable(getResources().getDrawable(R.drawable.bg_circle_info_bacacf_10));
popupWindow.setOutsideTouchable(true);
popupWindow.showAsDropDown(this);
}
/**
* 关闭下拉列表弹窗
*/
private void closePopWindow() {
popupWindow.dismiss();
popupWindow = null;
}
/**
* 设置数据
*
* @param list
*/
public void setItemsData(ArrayList<String> list) {
dataList = list;
}
/**
* 设置默认文案(例如:请选择~)
*
* @param text
*/
public void setDefaultText(String text) {
textView.setText(text);
//默认文案一般要与已选回填的文案颜色区分,所以在设置时设为相对暗色值
textView.setTextColor(CFApplication.Companion.getMContext().getResources().getColor(R.color.se_aab9));
}
/**
* 获取pop_out_top_view里 textview 的内容
* @return
*/
public String getSelectText() {
String selectText = textView.getText().toString();
return selectText;
}
/**
* 数据适配器
*
* @author caizhiming
*/
class DropDownListAdapter extends BaseAdapter {
Context mContext;
ArrayList<String> mData;
LayoutInflater inflater;
public DropDownListAdapter(Context ctx, ArrayList<String> data) {
mContext = ctx;
mData = data;
inflater = LayoutInflater.from(mContext);
}
@Override
public int getCount() {
return mData.size();
}
@Override
public Object getItem(int position) {
return null;
}
@Override
public long getItemId(int position) {
return position;
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
// 自定义视图
ListItemView listItemView = null;
if (convertView == null) {
// 获取list_item布局文件的视图
convertView = inflater.inflate(R.layout.pop_list_view_item, null);
listItemView = new ListItemView();
// 获取控件对象
listItemView.tv = (TextView) convertView.findViewById(R.id.item_tv);
listItemView.layout = (LinearLayout) convertView.findViewById(R.id.layout_container);
// 设置控件集到convertView
convertView.setTag(listItemView);
} else {
listItemView = (ListItemView) convertView.getTag();
}
// 设置数据
listItemView.tv.setText(mData.get(position));
final String text = mData.get(position);
listItemView.layout.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
textView.setText(text);
textView.setTextColor(CFApplication.Companion.getMContext().getResources().getColor(R.color.se_0000));
//关闭popWindow
closePopWindow();
}
});
return convertView;
}
}
private static class ListItemView {
TextView tv;
LinearLayout layout;
}
}
pop_out_top_view:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/bg_circle_login_e8eff2_10"
android:orientation="horizontal"
android:padding="15dp">
<TextView
android:id="@+id/text"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_vertical"
android:singleLine="true"
android:textColor="@color/se_0000"
android:textSize="12sp" />
<ImageView
android:id="@+id/btn"
android:layout_width="11dp"
android:layout_height="7dp"
android:layout_gravity="center_vertical"
android:layout_marginLeft="15dp"
android:layout_toRightOf="@+id/text"
android:src="@drawable/icon_down" />
</LinearLayout>
pop_list_view:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ListView
android:id="@+id/pop_listView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:divider="#BACACF"
android:dividerHeight="0.5dp"
></ListView>
</LinearLayout>
pop_list_view_item:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/layout_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="@+id/item_tv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:padding="15dp"
android:textColor="@color/se_0000"
android:textSize="12sp" />
</LinearLayout>
使用时:
private val mSexList = arrayListOf<String>()
mSexList.add(resources.getString(R.string.man)) mSexList.add(resources.getString(R.string.woman))
sex_ddl.setDefaultText(resources.getString(R.string.unknow))
sex_ddl.setItemsData(mSexList)
//获取选中文案
sex_ddl.selectText~