下拉列表在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; } }
这里前段和我们常用的没什么区别,只是监听imageView,关键的是showWindows做出了点击更多按钮弹出已存信息。在popupWindow消失的时候,背景变回没有弹出下拉菜单的背景样式。
可能大家没有图片资源,今天我传不上去,可以留下邮箱!