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

时间：2023-03-10 07:18:53
spinner自定义，效果如腾讯QQ账号选择时候的下拉列表

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

spinner自定义，效果如腾讯QQ账号选择时候的下拉列表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消失的时候，背景变回没有弹出下拉菜单的背景样式。

可能大家没有图片资源，今天我传不上去，可以留下邮箱！