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

现在的位置: 首页 > 综合 > 正文

RSS

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

2013年12月03日 ⁄ 综合 ⁄ 共 7502字 ⁄ 字号小中大 ⁄ 评论关闭

下拉列表在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消失的时候，背景变回没有弹出下拉菜单的背景样式。

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

【上篇】C++内存管理（一）
【下篇】排序算法-二叉树排序

作者: narcotic

该日志由 narcotic 于10年前发表在综合分类下，最后更新于 2013年12月03日.
转载请注明: spinner自定义，效果如腾讯QQ账号选择时候的下拉列表 | 学步园 +复制链接

抱歉!评论已关闭.

学步园

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

作者: narcotic

书签

最新文章New

本站推荐

返回首页