目錄

前言

（1）改變初始布局

（2）改變列表item布局

（3）改變彈窗背景及位置

（4）添加選中效果

源碼

---

前言

spinner就是下拉選擇組件，系統自帶的spinner使用起來非常方便，首先定義一個array（strings.xml），如下： <array name="grade"><item>一年級</item><item>二年級</item><item>三年級</item><item>四年級</item><item>五年級</item><item>六年級</item> </array>

代碼如下： Spinner spinner = (Spinner) findViewById(R.id.spinner); ArrayAdapter adapter = ArrayAdapter.createFromResource(this, R.array.grade, android.R.layout.simple_spinner_item); spinner.setAdapter(adapter);

這樣就實現了一個簡單的spinner，顯示如下： 但這并不是我想要的樣式和效果，下面我們就一點點的來改造它。

（1）改變初始布局

即彈窗前的樣式，先自定義一個布局，如下： spinner_layout.xml <?xml version="1.0" encoding="utf-8"?> <TextView xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="wrap_content"android:layout_height="wrap_content"xmlns:tools="http://schemas.android.com/tools"android:textColor="#6d6d6d"android:textSize="15sp"android:drawableRight="@drawable/arrow"android:drawablePadding="5dp"tools:text="一年級"></TextView>

然后替換createFromResource中的即可，如下： ArrayAdapter adapter = ArrayAdapter.createFromResource(this, R.array.grade, R.layout.spinner_layout);

這樣還不夠，因為還有一個帶箭頭的背景，將背景設置為透明即可，如下： spinner.setBackgroundColor(0x0);

這樣初始布局的展示就與spinner_layout一樣了。

（2）改變列表item布局

經過上面的修改后，發現彈窗中列表item的布局也變成了spinner_layout，查看ArrayAdapter的構造函數可知有mResource和mDropDownResource兩個變量，其中mResource就是初始布局，而mDropDownResource則是列表item的布局。 而createFromResource函數中，mResource和mDropDownResource賦值相同。但是ArrayAdapter還有一個setDropDownViewResource函數。 首先定義一個布局，如下： spinner_item.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"xmlns:tools="http://schemas.android.com/tools"android:textColor="#6d6d6d"android:textSize="15sp"android:padding="8dp"android:gravity="center_horizontal"tools:text="一年級"></TextView>

然后使用setDropDownViewResource函數即可，如下： adapter.setDropDownViewResource(R.layout.spinner_item);

（3）改變彈窗背景及位置

在開始的動畫中可以看到彈窗會遮擋住，我們想讓彈窗處于下方，同時彈窗是圓角帶箭頭的。 這就需要使用spinner的兩個函數setPopupBackgroundResource和setDropDownVerticalOffset。 但是注意這兩個函數都需要在android4.1版本及以上，鑒于目前4.1以下版本已經很少了，所以我們只考慮4.1以上即可，代碼如下： if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {spinner.setPopupBackgroundResource(R.drawable.bg_spinner);spinner.setDropDownVerticalOffset(dip2px(20)); }

（4）添加選中效果

經過上面的處理，我們已經得到想要的樣式。但是還差一點，彈窗列表中缺少選中的樣式。比如說我當前選擇“二年級”，在彈窗中，對應的item字體應該加深加粗。在spinner源碼中搜尋了一遍，發現并沒有對應的函數和解決方法，那么我們自己動手吧。 其實spinner是使用adapter來加載列表的，而我們使用createFromResource函數會自動創建了adapter，我們可以自定義一個adapter，如下： public class SpinnerAdapter<T> extends ArrayAdapter<T> {private int selectedPostion;public void setSelectedPostion(int selectedPostion) {this.selectedPostion = selectedPostion;}public SpinnerAdapter(@NonNull Context context, int resource, @NonNull T[] objects) {super(context, resource, objects);}@Overridepublic View getDropDownView(int position, @Nullable View convertView, @NonNull ViewGroup parent) {View view = super.getDropDownView(position, convertView, parent);TextView textView = (TextView)view;if(selectedPostion == position){textView.setTextColor(0xff373741);textView.getPaint().setFakeBoldText(true);}else{textView.setTextColor(0xff6d6d6d);textView.getPaint().setFakeBoldText(false);}return view;}public static @NonNull SpinnerAdapter<CharSequence> createFromResource(@NonNull Context context,@ArrayRes int textArrayResId, @LayoutRes int textViewResId) {final CharSequence[] strings = context.getResources().getTextArray(textArrayResId);return new SpinnerAdapter<>(context, textViewResId, strings);} }

注意ArrayAdapter中的getDropDownView函數是獲取彈窗item使用的view的，而不是getView函數。 同時我們要重新寫一個createFromResource函數。 將之前使用的adapter替換成自定義這個，同時為spinner設置監聽即可，更改后的完整代碼如下： Spinner spinner = (Spinner) findViewById(R.id.spinner); adapter = SpinnerAdapter.createFromResource(this, R.array.grade, R.layout.spinner_layout); adapter.setDropDownViewResource(R.layout.spinner_item); spinner.setBackgroundColor(0x0); if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {spinner.setPopupBackgroundResource(R.drawable.bg_spinner);spinner.setDropDownVerticalOffset(dip2px(20)); } spinner.setAdapter(adapter); spinner.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {@Overridepublic void onItemSelected(AdapterView<?> parent, View view, int position, long id) {adapter.setSelectedPostion(position);}@Overridepublic void onNothingSelected(AdapterView<?> parent) {} });

最終效果如下：

?

通過我們自己定義adapter可以實現更多復雜的效果和樣式，有時間我們再來探討。
?

源碼

關注公眾號：BennuCTech，發送“FastWidget”獲取完整源碼。

?

總結

以上是生活随笔為你收集整理的一步一步自定义spinner的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。