Android 自訂 SpinnerButton(轉)

標籤：android   style   blog   http   color   io   os   使用   ar   

 Android 自訂 SpinnerButton

模仿Android4.0的Spinner Button寫的一個MySpinnerButton。這樣在1.6~4.0.4版本都可以實現這種下拉框的效果了。

實現效果：點擊螢幕上的Spinner Button，在按鈕的下方會滑出一個下拉式清單，滑動選擇下拉式清單中其中一個選項，則下拉式清單收回，按鈕上的文字顯示為選項的內容。點擊返回鍵或下拉式清單外部地區，下拉式清單收回。反覆點擊按鈕，下拉式清單反覆執行滑出和收回動作。

運行圖：

    

 

實現原理：使用PopupWindow和Button相關聯（showAsDropDown）。在PopupWindow上放ListView。於是就有了下拉框的效果。

以下是代碼：

入口_04MySpinnerDemo2Activity:

 

public class _04MySpinnerDemo2Activity extends Activity {

private MySpinnerButton mSpinnerBtn;

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);

this.mSpinnerBtn = (MySpinnerButton) this.findViewById(R.id.spinner_btn);
}
}

布局檔案main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="top|center_horizontal"
android:orientation="vertical" >

<com.haozi.demo.myspinner2.wiget.MySpinnerButton
android:id="@+id/spinner_btn"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:text="spinner button"
/>

</LinearLayout>

封裝好的MySpinnerButton:

/**
* 我的SpinnerButton
* @author haozi
*
*/
public class MySpinnerButton extends Button {

private Context context;

public MySpinnerButton(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
this.context = context;
// 設定監聽事件
setOnClickListener(new MySpinnerButtonOnClickListener());
}

public MySpinnerButton(Context context, AttributeSet attrs) {
super(context, attrs);
this.context = context;
// 設定監聽事件
setOnClickListener(new MySpinnerButtonOnClickListener());
}

public MySpinnerButton(Context context) {
super(context);
this.context = context;
// 設定監聽事件
setOnClickListener(new MySpinnerButtonOnClickListener());
}

/**
* MySpinnerButton的點擊事件
* @author haozi
*
*/
class MySpinnerButtonOnClickListener implements View.OnClickListener{

@Override
public void onClick(View v) {

final MySpinnerDropDownItems mSpinnerDropDrownItems = new MySpinnerDropDownItems(context);
if (!mSpinnerDropDrownItems.isShowing()) {
mSpinnerDropDrownItems.showAsDropDown(MySpinnerButton.this);
}
}
}

/**
* MySpinnerButton的下拉式清單
* @author haozi
*
*/
class MySpinnerDropDownItems extends PopupWindow{

private Context context;
private LinearLayout mLayout; // 下拉式清單的布局
private ListView mListView; // 下拉式清單控制項
private ArrayList<HashMap<String, String>> mData;

public MySpinnerDropDownItems(Context context){
super(context);

this.context = context;
// 下拉式清單的布局
mLayout = new LinearLayout(context);
mLayout.setOrientation(LinearLayout.VERTICAL);
// 下拉式清單控制項
mListView = new ListView(context);
mListView.setLayoutParams(new LayoutParams(MySpinnerButton.this.getLayoutParams().width, LayoutParams.WRAP_CONTENT));
mListView.setCacheColorHint(Color.TRANSPARENT);
mData = new ArrayList<HashMap<String,String>>();
for(int i=0; i<50; i++){
HashMap<String, String> mHashmap = new HashMap<String, String>();
mHashmap.put("spinner_dropdown_item_textview", "textView " + i);
mData.add(mHashmap);
}
// 為listView設定適配器
mListView.setAdapter(new MyAdapter(context,
mData, R.layout.spinner_dropdown_item,
new String[]{"spinner_dropdown_item_textview"}, new int[]{R.id.spinner_dropdown_item_textview}));
// 設定listView的點擊事件
mListView.setOnItemClickListener(new MyListViewOnItemClickedListener());
// 把下拉式清單添加到layout中。
mLayout.addView(mListView);

setWidth(LayoutParams.WRAP_CONTENT);
setHeight(LayoutParams.WRAP_CONTENT);
setContentView(mLayout);
setFocusable(true);

mLayout.setFocusableInTouchMode(true);
}

/**
* 我的適配器
* @author haozi
*
*/
public class MyAdapter extends BaseAdapter {

private Context context;
private List<? extends Map<String, ?>> mData;
private int mResource;
private String[] mFrom;
private int[] mTo;
private LayoutInflater mLayoutInflater;

/**
* 我的適配器的構造方法
* @param context 調用方的上下文
* @param data 資料
* @param resource
* @param from
* @param to
*/
public MyAdapter(Context context, List<? extends Map<String, ?>> data, int resource, String[] from, int[] to){

this.context = context;
this.mData = data;
this.mResource = resource;
this.mFrom = from;
this.mTo = to;
this.mLayoutInflater = (LayoutInflater) context.getSystemService(context.LAYOUT_INFLATER_SERVICE);
}

/**
* 系統在繪製ListView之前，將會先調用getCount方法來擷取Item的個數
*/
public int getCount() {

return this.mData.size();
}

public Object getItem(int position) {

return this.mData.get(position);
}

public long getItemId(int position) {

return position;
}

/**
* 每繪製一個 Item就會調用一次getView方法，
* 在此方法內就可以引用事先定義好的xml來確定顯示的效果並返回一個View對象作為一個Item顯示出來。
* 也 正是在這個過程中完成了適配器的主要轉換功能，把資料和資源以開發人員想要的效果顯示出來。
* 也正是getView的重複調用，使得ListView的使用更 為簡單和靈活。
* 這兩個方法是自定ListView顯示效果中最為重要的，同時只要重寫好了就兩個方法，ListView就能完全按開發人員的要求顯示。
* 而 getItem和getItemId方法將會在調用ListView的回應程式法的時候被調用到。
* 所以要保證ListView的各個方法有效話，這兩個方法也得重寫。
*/
public View getView(int position, View contentView, ViewGroup parent) {

contentView = this.mLayoutInflater.inflate(this.mResource, parent, false);

// 設定contentView的內容和樣式，這裡重點是設定contentView中文字的大小
for(int index=0; index<this.mTo.length; index++){
TextView textView = (TextView) contentView.findViewById(this.mTo[index]);
textView.setText(this.mData.get(position).get(this.mFrom[index]).toString());
}

return contentView;
}
}

/**
* listView的點擊事件
* @author haozi
*
*/
class MyListViewOnItemClickedListener implements AdapterView.OnItemClickListener{

@Override
public void onItemClick(AdapterView<?> parent, View view, int position,
long id) {

TextView mTextView = (TextView) view.findViewById(R.id.spinner_dropdown_item_textview);
String content = mTextView.getText().toString();
MySpinnerButton.this.setText(content);
MySpinnerDropDownItems.this.dismiss();
}
}
}
}

 

下拉式清單item的布局檔案spinner_dropdown_item.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="@android:drawable/list_selector_background"
android:orientation="vertical" >

<TextView android:id="@+id/spinner_dropdown_item_textview"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="left|bottom"
android:paddingTop="11dip"
android:paddingBottom="11dip"
android:paddingLeft="5dip"
/>
</LinearLayout>

Android 自訂 SpinnerButton(轉)