Android 好用的下拉控件Spinner

一、參考

1、android Spinner控件詳解
2、最新Spinner用法詳解

二、實(shí)例

1、普通的spinner用法及在string-array中的數(shù)據(jù)加載，此UI是在MD風(fēng)格下，在不同Theme下其實(shí)是有不同UI展示，也可選擇下拉模式是：dropdown或者dialog，默認(rèn)是dropdown的
1-2.png

布局：

        <!--最簡單的加載下拉數(shù)組：entries，內(nèi)容定義在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、數(shù)據(jù)變化 2、選中后填充文字居中變紅 3、下拉文字居中變綠 4、各種寬度高度控制等
注意：在ArrayAdapter中加載的自定義布局必須是textview，否則會報(bào)異常：ArrayAdapter requires the resource ID to be a TextView
1-3.png

1-4.png

代碼：

/**
     * Spinner自定義樣式
     * 1、Spinner內(nèi)的TextView樣式：item_select
     * 2、Spinner下拉中每個item的TextView樣式：item_drop
     * 3、Spinner下拉框樣式，屬性設(shè)置
     * */
    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"); //彈出框標(biāo)題，在dialog下有效


        String[] spinnerItems = {"10","200","400"};
        //自定義選擇填充后的字體樣式
        //只能是textview樣式，否則報(bào)錯：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布局中設(shè)置各種屬性，實(shí)現(xiàn)效果，并增加監(jiān)聽，監(jiān)聽注意是AdapterView.OnItemSelectedListener是這個哦，監(jiān)聽里面的回調(diào)返回值各個意義在代碼注釋中，默認(rèn)來說簡單的加載布局就兩個：android.R.layout.simple_spinner_item----android.R.layout.simple_spinner_dropdown_item
2-2.png

布局：

<!--
            代碼加載下拉數(shù)組，各種屬性，及其監(jiān)聽
            1、是下拉還是彈出框
            spinnerMode="dropdown"
            spinnerMode="dialog"
            2、下拉寬度：默認(rèn)寬度和spinner差不多，去掉左邊的下拉按鈕寬度
            dropDownWidth="xxdp"
            3、下拉背景色
            popupBackground="resColor/resMipmap"
            4、背景色：會遮住默認(rèn)右側(cè)的下拉按鈕
            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"
            />

代碼：這里會有選擇監(jiān)聽

/**
     * 測試：加載數(shù)據(jù)列，監(jiān)聽選擇
     * */
    private void testSpinner1(){
        //原始string數(shù)組
        final String[] spinnerItems = {"張三","李四","王二麻子"};
        //簡單的string數(shù)組適配器：樣式res，數(shù)組
        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);
        //選擇監(jiān)聽
        mSpinner1.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
            //parent就是父控件spinner
            //view就是spinner內(nèi)填充的textview,id=@android:id/text1
            //position是值所在數(shù)組的位置
            //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]+"]");
                //設(shè)置spinner內(nèi)的填充文字居中
                //((TextView)view).setGravity(Gravity.CENTER);
            }
            @Override
            public void onNothingSelected(AdapterView<?> parent) {
                // Another interface callback
            }
        });
    }
4、完全自定義的spinner：基本上全是代碼實(shí)現(xiàn)了，自定義adapter綁定List<T>和dropdown布局文件，然后spinner加載adapter適配器
3-1.png

3-2.png

代碼：

//CarBean就不貼出來了
/**
     * Spinner完全自定義UI和綁定數(shù)據(jù)
     * */
    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，會發(fā)現(xiàn)，在spinner選中結(jié)果填充控件和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年第一篇，感覺寫的簡單，希望各位看官喜歡。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容