Android 好用的下拉控件Spinner

一、参考

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年第一篇,感觉写的简单,希望各位看官喜欢。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,293评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,604评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,958评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,729评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,719评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,630评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,000评论 3 397
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,665评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,909评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,646评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,726评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,400评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,986评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,959评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,197评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,996评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,481评论 2 342

推荐阅读更多精彩内容