原文:https://www.jianshu.com/p/e4f18c9c421f
一、参考
1、android Spinner控件详解
2、最新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>