自定义控件之组合式控件 下拉选择框
文章目录
零 组合控件下载
一 自定义控件思路
- 点击下拉按钮,弹出下拉列表(PopupWindow + ListView)
- 点击列表选项,在编辑框中显示内容
- 点击删除按钮,删除列表选项
二 MainActivity核心代码
public class MainActivity extends AppCompatActivity {
private SpinnerView mSpinnerView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mSpinnerView = findViewById(R.id.spinnerView);
List<String> mDataList = new ArrayList<String>();
for (int i = 0; i < 30; i++) {
mDataList.add("传入数据"+String.valueOf(i));
}
mSpinnerView.setData(mDataList);
}
}
三 activity_main.xml核心代码
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.vistatecah.myspinnerview.MainActivity">
<com.vistatecah.myspinnerview.SpinnerView
android:id="@+id/spinnerView"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</LinearLayout>
四 SpinnerView核心代码
package com.vistatecah.myspinnerview;
import android.content.Context;
import android.graphics.drawable.ColorDrawable;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.BaseAdapter;
import android.widget.EditText;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.PopupWindow;
import android.widget.RelativeLayout;
import android.widget.TextView;
import android.widget.Toast;
import java.util.List;
/*
* 创建者: KX
* 创建时间: 2018/12/8 17:16
* 描述: TODO
*/
public class SpinnerView extends RelativeLayout {
/** 右侧三角箭头 */
private ImageView mArrow;
/** 输入框 */
private EditText mEdit;
/** 点击三角箭头后弹出的PopupWindow */
private PopupWindow mPopupWindow;
/** 存放下拉选择框数据的集合 */
private List<String> mDataList;
public SpinnerView(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
private void init() {
//填充布局
LayoutInflater.from(getContext()).inflate(R.layout.view_spinner, this);
//初始化集合,向集合里添加数据
//找出布局里的控件
initView();
//初始化事件
initEvent();
}
/**向集合里添加0~29共30个数据*/
protected void setData(List dataList) {
mDataList = dataList;
/* mDataList = new ArrayList<String>();
for (int i = 0; i < 30; i++) {
mDataList.add("测试数据"+String.valueOf(i));
}*/
}
/**初始化控件*/
private void initView() {
mArrow = (ImageView) findViewById(R.id.arrow);
mEdit = (EditText) findViewById(R.id.edit);
}
/**对三角按钮做点击监听,点击后调用showPopupWindow()方法*/
private void initEvent() {
mArrow.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View arg0) {
showPopupWindow();
}
});
}
/**显示下拉选择框的PopupWindow*/
protected void showPopupWindow() {
//只创建一次popupwindow
if (mPopupWindow == null) {
int width = mEdit.getWidth();
int height = 800;
mPopupWindow = new PopupWindow(width, height);
//构造popupWindow的内容控件:一个ListView
ListView listView = new ListView(getContext());
listView.setAdapter(mAdapter);
listView.setBackgroundResource(R.drawable.listview_background);
listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> parent, View view,
int position, long id) {
//2. 点击列表选项,在编辑框中显示内容
String data = mDataList.get(position);
mEdit.setText(data);
//设置光标到末尾
mEdit.setSelection(data.length());
mPopupWindow.dismiss();
}
});
//把ListView设置成为popupWindow的内容控件
mPopupWindow.setContentView(listView);
//以下三行是固定写法,为了实现点击popupWindow外部关闭popupWindow的功能
mPopupWindow.setOutsideTouchable(true);
mPopupWindow.setBackgroundDrawable(new ColorDrawable());
mPopupWindow.setFocusable(true);
}
//弹出PopupWindow并且显示在mEdit下方
mPopupWindow.showAsDropDown(mEdit);
}
/**ListView的Adapter*/
private BaseAdapter mAdapter = new BaseAdapter() {
@Override
public View getView(final int position, View convertView, ViewGroup parent) {
ViewHolder vh = null;
if (convertView == null) {
convertView = LayoutInflater.from(getContext())
.inflate(R.layout.list_item, null);
vh = new ViewHolder(convertView);
convertView.setTag(vh);
} else {
vh = (ViewHolder) convertView.getTag();
}
final String data = mDataList.get(position);
vh.mId.setText(data);
vh.mDelete.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
//将点击位置的数据移除,并且刷新列表
mDataList.remove(data);
notifyDataSetChanged();
Toast.makeText(getContext(),"删除数据"+position,Toast.LENGTH_SHORT).show();
}
});
return convertView;
}
@Override
public long getItemId(int position) {
return 0;
}
@Override
public Object getItem(int position) {
return null;
}
@Override
public int getCount() {
return mDataList.size();
}
};
public class ViewHolder {
TextView mId;
ImageView mDelete;
public ViewHolder(View root) {
mId = (TextView) root.findViewById(R.id.user_id);
mDelete = (ImageView) root.findViewById(R.id.delete);
}
}
}
五 view_spinner.xml核心代码
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity" >
<EditText
android:id="@+id/edit"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/edit_bg" />
<ImageView
android:id="@+id/arrow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/down_arrow"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"/>
</RelativeLayout>
六 list_item.xml核心代码
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="8dp" >
<ImageView
android:id="@+id/icon_user"
android:layout_width="30dp"
android:layout_height="30dp"
android:src="@mipmap/ic_launcher_round"/>
<TextView
android:id="@+id/user_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="@id/icon_user"
android:layout_centerVertical="true"
android:paddingLeft="8dp"
android:text="110"/>
<ImageView
android:id="@+id/delete"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/delete"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:paddingRight="8dp"/>
</RelativeLayout>
七 控件背景edit_bg.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="8dp"/>
<stroke android:color="@color/colorAccent"
android:width="1dp"/>
<padding android:left="8dp"
android:top="8dp"
android:right="8dp"
android:bottom="8dp"/>
</shape>
八 组合式自定义控件优点:
- 继承layout
- 实现布局和功能
- 自定义控件优点:模块化思想,提高代码的复用率(M处调用)
九 本文源码下载
十 尾言
本文如有错误或不当之处,欢迎读者留言斧正,互相交流学习,博主不胜感激.联系邮箱593584960@qq.com