Android 好用的下拉控件Spinner

作者: Kandy_JS | 来源:发表于2018-03-07 21:11 被阅读7207次

    一、参考

    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>
    

    2018年第一篇,感觉写的简单,希望各位看官喜欢。

    相关文章

      网友评论

        本文标题:Android 好用的下拉控件Spinner

        本文链接:https://www.haomeiwen.com/subject/vbysfftx.html