Android 自定义view 实现点击 展示下拉选项效果
思路:
使用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() {@Overridepublic 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);}@Overridepublic int getCount() {return mData.size();}@Overridepublic Object getItem(int position) {return null;}@Overridepublic long getItemId(int position) {return position;}@Overridepublic 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);// 设置控件集到convertViewconvertView.setTag(listItemView);} else {listItemView = (ListItemView) convertView.getTag();}// 设置数据listItemView.tv.setText(mData.get(position));final String text = mData.get(position);listItemView.layout.setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View v) {textView.setText(text);textView.setTextColor(CFApplication.Companion.getMContext().getResources().getColor(R.color.se_0000));//关闭popWindowclosePopWindow();}});return convertView;}}private static class ListItemView {TextView tv;LinearLayout layout;}}
pop_out_top_view:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns: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"><TextViewandroid: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" /><ImageViewandroid: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=""android:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="vertical" ><ListViewandroid: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=""android:id="@+id/layout_container"android:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="vertical"><TextViewandroid: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~
Android 自定义view 实现点击 展示下拉选项效果
思路:
使用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() {@Overridepublic 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);}@Overridepublic int getCount() {return mData.size();}@Overridepublic Object getItem(int position) {return null;}@Overridepublic long getItemId(int position) {return position;}@Overridepublic 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);// 设置控件集到convertViewconvertView.setTag(listItemView);} else {listItemView = (ListItemView) convertView.getTag();}// 设置数据listItemView.tv.setText(mData.get(position));final String text = mData.get(position);listItemView.layout.setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View v) {textView.setText(text);textView.setTextColor(CFApplication.Companion.getMContext().getResources().getColor(R.color.se_0000));//关闭popWindowclosePopWindow();}});return convertView;}}private static class ListItemView {TextView tv;LinearLayout layout;}}
pop_out_top_view:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns: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"><TextViewandroid: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" /><ImageViewandroid: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=""android:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="vertical" ><ListViewandroid: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=""android:id="@+id/layout_container"android:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="vertical"><TextViewandroid: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~