Idea:
Use PopWindow, the inside layout is listview, click to display PopWindow, click other areas or close PopWindow when you complete the selection~
Key points:
1. Realize the head view (the name of this article is: pop_out_top_view)
2. Implement the drop-down view at the bottom, use popWindow, and use listview for the layout of pop (named in this article: pop_list_view)
3. Realize the layout of the listView, use the adapter, combine the item of the listview (named in this article: pop_list_view_item), realize clicking the item to backfill the data and close the PopWindow.
Explanation:
The data display in this Demo uses String~~~, the actual development backfills the text, and the id should be passed to the backend. Generally, if you use the object~
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>When using:
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)
//Get the selected text
sex_ddl.selectText~