spinner自定义，效果如腾讯QQ账号选择时候的下拉列表

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

下拉列表在android中自带spinner的有时候不太适合我们的界面，我们希望有自己的一种显示方法，那怎么办？自定义Spinner.效果如QQ账号选择一样。如图所以。

这种效果，如果你喜欢，你可以往下接着看。

这里我们使用listView配合TextView实现的。

1 布局文件

activity_main.xml

<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/main"
android:layout_width="fill_parent"
android:layout_height="fill_parent" > <RelativeLayout
android:layout_width="fill_parent"
android:layout_height="50dp"
android:gravity="clip_vertical" > <LinearLayout
android:id="@+id/spinnerid"
android:layout_width="fill_parent"
android:layout_height="50dp"
android:layout_marginLeft="30dp"
android:layout_marginRight="30dp"
android:layout_marginTop="10dp"
android:background="@drawable/preference_single_item"
android:gravity="right" > <TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center"
android:text="1234"
android:textAppearance="?android:attr/textAppearanceLarge" /> <TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:textAppearance="?android:attr/textAppearanceLarge" /> <ImageView
android:id="@+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="@drawable/mm_submenu_dropdown" /> </LinearLayout>
</RelativeLayout></LinearLayout>

myspinner_dropdown.xml这里面只有一个listView

<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
xmlns:android="http://schemas.android.com/apk/res/android">
<ListView
android:id="@+id/listView"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:divider="@null"
android:dividerHeight="1px"></ListView>
</LinearLayout>

myspinner_dropdown_item.xml这里就是每个item布局

<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<RelativeLayout
android:id="@+id/myspinner_dropdown_layout"
android:layout_width="fill_parent"
android:layout_height="35dp"
android:background="@drawable/preference_item"
android:gravity="left|center" >
<TextView
android:id="@+id/myspinner_dropdown_txt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:text="TextView"
android:textSize="20sp" />
</RelativeLayout>
</LinearLayout>

2程序代码实现

MyspinnerAdapter.java文件是listview的适配文件

package com.example.testspinner2;import java.util.ArrayList;
import java.util.List;import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.RelativeLayout;
import android.widget.TextView;public class MyspinnerAdapter extends BaseAdapter {
LayoutInflater inflater;
Context context;
ArrayList<String> list;public MyspinnerAdapter(Context context, ArrayList<String> list) {
super();
this.context = context;
this.list = list;
inflater = LayoutInflater.from(context);
}@Override
public int getCount() {
// TODO Auto-generated method stub
return list.size();
}@Override
public Object getItem(int position) {
// TODO Auto-generated method stub
return list.get(position);
}@Override
public long getItemId(int position) {
// TODO Auto-generated method stub
return position;
}@Override
public View getView(int position, View convertView, ViewGroup parent) {
ViewHolder viewHolder = null;
if (convertView == null) {
convertView = inflater.inflate(R.layout.myspinner_dropdown_items, null);
viewHolder = new ViewHolder();
viewHolder.layout = (RelativeLayout) convertView.findViewById(R.id.myspinner_dropdown_layout);
viewHolder.textView = (TextView) convertView.findViewById(R.id.myspinner_dropdown_txt);
convertView.setTag(viewHolder);
} else {
viewHolder = (ViewHolder) convertView.getTag();
}
if(list.size() == position+1){
viewHolder.layout.setBackgroundResource(R.drawable.preference_last_item);
}else{
viewHolder.layout.setBackgroundResource(R.drawable.preference_item);
}
viewHolder.textView.setText(list.get(position));
return convertView;
}public class ViewHolder {
RelativeLayout layout;
TextView textView;
}public void refresh(List<String> l) {
this.list.clear();
list.addAll(l);
notifyDataSetChanged();
}public void add(String str) {
list.add(str);
notifyDataSetChanged();
}public void add(ArrayList<String> str) {
list.addAll(str);
notifyDataSetChanged();}
}

这里面比较关键的是判断当前item是否为最后一个item，如果是最后一个背景需要更改，毕竟中间的背景和最后一项item是不同的

MainActivity.java

package com.example.testspinner2;import java.util.ArrayList;import android.app.Activity;
import android.graphics.drawable.BitmapDrawable;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup.LayoutParams;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.ListView;
import android.widget.PopupWindow;
import android.widget.PopupWindow.OnDismissListener;
import android.widget.TextView;public class MainActivity extends Activity {
private ArrayList<String> list;
private ImageView imgView;
private TextView textView;
private LinearLayout layout;
private ListView listView;
private MyspinnerAdapter adapter;
private PopupWindow popupWindow;
private LinearLayout spinnerlayout;
int width;@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
textView = (TextView) findViewById(R.id.textView2);
imgView = (ImageView) findViewById(R.id.imageView1);
// 实例化一个List,添加数据
list = new ArrayList<String>();
list.add("第一展厅");
list.add("4展厅");
list.add("第三展厅");
adapter = new MyspinnerAdapter(this, list);
textView.setText((CharSequence) adapter.getItem(0));
spinnerlayout = (LinearLayout) findViewById(R.id.spinnerid);
// 点击右侧按钮，弹出下拉框
imgView.setOnClickListener(new OnClickListener() {@Override
public void onClick(View v) {if(list.size()>0){
spinnerlayout.setBackgroundResource(R.drawable.preference_first_item);
}
showWindow(spinnerlayout, textView);}
});
}
protected void onResume(){
super.onResume();}
public void showWindow(View position, final TextView txt) {layout = (LinearLayout) LayoutInflater.from(this).inflate(R.layout.mypinner_dropdown, null);
listView = (ListView) layout.findViewById(R.id.listView);
listView.setAdapter(adapter);
popupWindow = new PopupWindow(position);
// 设置弹框的宽度为布局文件的宽
popupWindow.setWidth(spinnerlayout.getWidth());
popupWindow.setHeight(LayoutParams.WRAP_CONTENT);
// 设置一个透明的背景，不然无法实现点击弹框外，弹框消失
popupWindow.setBackgroundDrawable(new BitmapDrawable());
// 设置点击弹框外部，弹框消失
popupWindow.setOutsideTouchable(true);
popupWindow.setFocusable(true);
popupWindow.setContentView(layout);
// 设置弹框出现的位置，在v的正下方横轴偏移textview的宽度，为了对齐~纵轴不偏移
popupWindow.showAsDropDown(position, 0, 0);
popupWindow.setOnDismissListener(new OnDismissListener(){
@Override
public void onDismiss() {
// TODO Auto-generated method stub
spinnerlayout.setBackgroundResource(R.drawable.preference_single_item);
}});
// listView的item点击事件
listView.setOnItemClickListener(new OnItemClickListener() {@Override
public void onItemClick(AdapterView<?> arg0, View arg1, int arg2, long arg3) {
// TODO Auto-generated method stub
txt.setText(list.get(arg2));// 设置所选的item作为下拉框的标题
// 弹框消失
popupWindow.dismiss();
popupWindow = null;
}
});}@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}}