Android 好用的下拉控件Spinner
一、参考
二、实例
1、普通的spinner用法及在string-array中的数据加载，此UI是在MD风格下，在不同Theme下其实是有不同UI展示，也可选择下拉模式是：dropdown或者dialog，默认是dropdown的
1-2.png
布局：
<!--最简单的加载下拉数组：entries，内容定义在string-array中-->
<Spinner
android:id="@+id/spinner_simple"
android:layout_marginTop="10dp"
android:layout_width="200dp"
android:layout_height="50dp"
android:entries="@array/study_view_spinner_values" />
2、接下来变化下样式：1、数据变化 2、选中后填充文字居中变红 3、下拉文字居中变绿 4、各种宽度高度控制等
注意：在ArrayAdapter中加载的自定义布局必须是textview，否则会报异常：ArrayAdapter requires the resource ID to be a TextView
1-3.png
1-4.png
代码：
/**
* Spinner自定义样式
* 1、Spinner内的TextView样式：item_select
* 2、Spinner下拉中每个item的TextView样式：item_drop
* 3、Spinner下拉框样式，属性设置
* */
public void ChangeSpinner(View v){
mSpinnerSimple.setDropDownWidth(400); //下拉宽度
mSpinnerSimple.setDropDownHorizontalOffset(100); //下拉的横向偏移
mSpinnerSimple.setDropDownVerticalOffset(100); //下拉的纵向偏移
//mSpinnerSimple.setBackgroundColor(AppUtil.getColor(instance,R.color.wx_bg_gray)); //下拉的背景色
//spinner mode ： dropdown or dialog , just edit in layout xml
//mSpinnerSimple.setPrompt("Spinner Title"); //弹出框标题，在dialog下有效
String[] spinnerItems = {"10","200","400"};
//自定义选择填充后的字体样式
//只能是textview样式，否则报错：ArrayAdapter requires the resource ID to be a TextView
ArrayAdapter<String> spinnerAdapter = new ArrayAdapter<>(instance,
R.layout.item_select, spinnerItems);
//自定义下拉的字体样式
spinnerAdapter.setDropDownViewResource(R.layout.item_drop);
//这个在不同的Theme下，显示的效果是不同的
//spinnerAdapter.setDropDownViewTheme(Theme.LIGHT);
mSpinnerSimple.setAdapter(spinnerAdapter);
}
布局：item_select.xml
<?xml version="1.0" encoding="utf-8"?>
<TextView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:textColor="@color/red"
android:textSize="@dimen/normal_text_size"/>
布局：item_drop.xml
<?xml version="1.0" encoding="utf-8"?>
<TextView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dp"
android:gravity="center"
android:textColor="@color/green"
android:textSize="@dimen/normal_text_size"/>
3、spinner布局中设置各种属性，实现效果，并增加监听，监听注意是AdapterView.OnItemSelectedListener是这个哦，监听里面的回调返回值各个意义在代码注释中，默认来说简单的加载布局就两个：android.R.layout.simple_spinner_item----android.R.layout.simple_spinner_dropdown_item
2-2.png
布局：
<!--
代码加载下拉数组，各种属性，及其监听
1、是下拉还是弹出框
spinnerMode="dropdown"
spinnerMode="dialog"
2、下拉宽度：默认宽度和spinner差不多，去掉左边的下拉按钮宽度
dropDownWidth="xxdp"
3、下拉背景色
popupBackground="resColor/resMipmap"
4、背景色：会遮住默认右侧的下拉按钮
background="resColor/resMipmap"
-->
<Spinner
android:id="@+id/spinner_1"
android:layout_marginTop="10dp"
android:layout_width="160dp"
android:layout_height="160dp"
android:gravity="center"
android:spinnerMode="dropdown"
android:dropDownWidth="80dp"
android:popupBackground="@color/wx_blue"
android:background="@color/white"
/>
代码：这里会有选择监听
/**
* 测试：加载数据列，监听选择
* */
private void testSpinner1(){
//原始string数组
final String[] spinnerItems = {"张三","李四","王二麻子"};
//简单的string数组适配器：样式res，数组
ArrayAdapter<String> spinnerAdapter = new ArrayAdapter<>(instance,
android.R.layout.simple_spinner_item, spinnerItems);
//下拉的样式res
spinnerAdapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
//绑定 Adapter到控件
mSpinner1.setAdapter(spinnerAdapter);
//选择监听
mSpinner1.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
//parent就是父控件spinner
//view就是spinner内填充的textview,id=@android:id/text1
//position是值所在数组的位置
//id是值所在行的位置，一般来说与positin一致
@Override
public void onItemSelected(AdapterView<?> parent, View view,
int pos, long id) {
LogUtil.i("onItemSelected : parent.id="+parent.getId()+
",isSpinnerId="+(parent.getId() == R.id.spinner_1)+
",viewid="+view.getId()+ ",pos="+pos+",id="+id);
ToastUtil.showShort(instance,"选择了["+spinnerItems[pos]+"]");
//设置spinner内的填充文字居中
//((TextView)view).setGravity(Gravity.CENTER);
}
@Override
public void onNothingSelected(AdapterView<?> parent) {
// Another interface callback
}
});
}
4、完全自定义的spinner：基本上全是代码实现了，自定义adapter绑定List<T>和dropdown布局文件，然后spinner加载adapter适配器
3-1.png
3-2.png
代码：
//CarBean就不贴出来了
/**
* Spinner完全自定义UI和绑定数据
* */
private void testSpinnerSelf(){
ArrayList<CarBean> cars = new ArrayList<>();
CarBean car = new CarBean();
car.setBrand("玛莎拉蒂");
car.setOwner("张三");
car.setCost("100万");
cars.add(car);
car = new CarBean();
car.setBrand("宝马");
car.setOwner("李四");
car.setCost("53万");
cars.add(car);
final CarAdapter adapter = new CarAdapter(instance,cars);
mSpinnerSelf.setAdapter(adapter);
mSpinnerSelf.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
@Override
public void onItemSelected(AdapterView<?> parent, View view, int pos, long id) {
ToastUtil.showShort(instance,((CarBean)adapter.getItem(pos)).toString());
}
@Override
public void onNothingSelected(AdapterView<?> parent) {
}
});
}
代码：CarAdapter
public class CarAdapter extends BaseAdapter {
private Context ctx;
private LayoutInflater li;
private ArrayList<CarBean> dataList;
public CarAdapter(Context ctx,ArrayList<CarBean> dataList) {
this.ctx = ctx;
this.li = LayoutInflater.from(ctx);
this.dataList = dataList;
}
@Override
public int getCount() {
return dataList.size();
}
@Override
public CarBean getItem(int position) {
return dataList.get(position);
}
@Override
public long getItemId(int position) {
return position;
}
@Override
public View getView(final int position, View convertView, ViewGroup parent) {
if (convertView == null) {
convertView = View.inflate(ctx, R.layout.item_car, null);
new ViewHolder(convertView);
}
ViewHolder holder = (ViewHolder) convertView.getTag();// get convertView's holder
holder.car_brand.setText(getItem(position).getBrand());
holder.car_owner.setText(getItem(position).getOwner());
holder.car_cost.setText(getItem(position).getCost());
return convertView;
}
class ViewHolder {
TextView car_brand;
TextView car_owner;
TextView car_cost;
public ViewHolder(View convertView){
car_brand = (TextView) convertView.findViewById(R.id.tv_car_brand);
car_owner = (TextView) convertView.findViewById(R.id.tv_car_owner);
car_cost = (TextView) convertView.findViewById(R.id.tv_car_cost);
convertView.setTag(this);//set a viewholder
}
}
}
布局文件：item_car.xml，会发现，在spinner选中结果填充控件和dropdown下拉控件上都用的是此布局
<?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="horizontal"
android:background="?android:attr/selectableItemBackground"
android:padding="10dp">
<ImageView
android:id="@+id/iv_car"
android:layout_width="30dp"
android:layout_height="30dp"
android:src="@mipmap/car"/>
<TextView
android:id="@+id/tv_car_brand"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:textSize="@dimen/normal_text_size"/>
<TextView
android:id="@+id/tv_car_owner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:textSize="@dimen/normal_text_size"/>
<TextView
android:id="@+id/tv_car_cost"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:textSize="@dimen/normal_text_size"/>
</LinearLayout>
2018年第一篇，感觉写的简单，希望各位看官喜欢。
