1. ホーム
  2. android

Android カスタムスピナーコントロールのドロップダウン・ボックスの実装

2022-02-17 15:25:44

    私はブログを参照してください:http://blog.csdn.net/jdsjlzx/article/details/41316417 最近、ドロップダウンボックスで、Androidは非常に私の機能を達成するために困難であることがわかったので、私はデモを見つけるために、インターネットに行きましたが、良いのカプセル化は、移植が困難がないことがわかったので、私はの前身で。 だから私はこの前身に基づいて変更し、それがから継承するコントロールになりましたLinearLayoutの スピナーではなく、見栄えを良くして、直接呼び出せるようにしただけです。

<スパン     エフェクトの上


    を生成するのが主な実装で、シンプルなものです。 MySpinner コントロールの下にある MySpinner.javaのコード

public class MySpinner extends LinearLayout {

    private TextView tv_value;  
    private ImageView bt_dropdown;
    private int mNormalColor;  
    private int mSelectedColor;  
    private Context mcontext;
    private List<String> mItems;
    OnItemSelectedListener listener;
    private SpinnerPopWindow mSpinerPopWindow;
    private SpinnerAdapter mAdapter;
    View myView;
  
  
    public MySpinner(Context context) {  
        super(context);  
        mcontext = context;
        init();
    } 
  
    public MySpinner(Context context, AttributeSet attrs) {  
        super(context, attrs); 
        mcontext = context; 
        init();
    }  
  
    private void init(){
    	 LayoutInflater mInflater = LayoutInflater.from(mcontext);  
         myView = mInflater.inflate(R.layout.myspinner_layout, null);
         addView(myView);  
         
         tv_value = (TextView) myView.findViewById(R.id.tv_value);
         bt_dropdown = (ImageView) myView.findViewById(R.id.bt_dropdown);
         tv_value.setOnClickListener(onClickListener);
         bt_dropdown.setOnClickListener(onClickListener);
    }
    
    OnClickListener onClickListener = new OnClickListener() {
        @Override
        public void onClick(View v) {
            bt_dropdown.setBackgroundResource(R.drawable.up_arrow);
        	startPopWindow();	
        }
    }; 
    
    public void setData(List<String> datas){
    	mItems = datas;
    }
    
    public void setOnItemSelectedListener(OnItemSelectedListener listener){
    	this.listener = listener;
    }
    
    
    public void startPopWindow(){
    	mAdapter = new SpinnerAdapter(mcontext);
		mAdapter.refreshData(mItems, 0);

		mSpinerPopWindow = new SpinnerPopWindow(mcontext). mSpinerPopWindow = new SpinnerPopWindow(mcontext);
		mSpinerPopWindow.setAdatper(mAdapter);
		mSpinerPopWindow.setItemListener(new OnItemSelectedListener(){
			@Override
			public void onItemSelected(int pos) {
				// TODO Auto-generated method stub
                bt_dropdown.setBackgroundResource(R.drawable.down_arrow);
				tv_value.setText(mItems.get(pos));
				listener.onItemSelected(pos);
			}			
		});
        showSpinWindow();
    }

    private void showSpinWindow(){
        Log.e("hu", "showSpinWindow");
        mSpinerPopWindow.setWidth(myView.getWidth());
        mSpinerPopWindow.showAsDropDown(myView);
    }

    public interface OnItemSelectedListener {
        void onItemSelected(int pos);
    }
} 

        と見ることができます。 ポップアップの生成はMySpinnerの中で行われ、すべて MySpinnerです。

        マイスピナー コントロールのレイアウト myspinner_layout.xml テキストボックスとドロップダウンアイコンをグループ化するには、以下のようなコードになります。

<?xml version="1.0" encoding="utf-8"? >
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/ll_main_tab_top"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
	android:layout_alignParentTop="true" >

	<RelativeLayout
		android:layout_width="fill_parent"
		android:layout_height="fill_parent"
		android:background="@drawable/edittext1"
		>
		<TextView
		    android:id="@+id/tv_value"
			android:layout_width="fill_parent"
			android:layout_height="wrap_content"
			android:minHeight="40dp"
			android:layout_centerVertical="true"
			android:textSize="20sp"
			android:textColor="#ff000000"
			android:gravity="center_vertical"
			android:layout_toLeftOf="@+id/bt_dropdown"
			android:layout_marginRight="10dp"
			android:singleLine="true"
			android:paddingLeft="10dp">
	  	</TextView>	            
	            
      	<ImageView
          android:id="@+id/bt_dropdown"
          android:layout_width="36px"
          android:layout_height="20px"
          android:layout_alignParentRight="true"
          android:layout_marginRight="10dp"
          android:layout_centerVertical="true"
          android:background="@drawable/down_arrow" />
	</RelativeLayout>

</LinearLayout>


    上段メインウィンドウのコード SpinerWindowDemoActivity.javaを、以下のように修正します。

package com.model.spinner;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageButton;
import android.widget.TextView;
import android.widget.Toast;

import com.model.spinner.widget;

import java.util.Arrays;


/**
 * 
 * @author lance
 * csdn blog:http://blog.csdn.net/geniuseoe2012 
 * android-develop group:298044305
 */
public class SpinerWindowDemoActivity extends Activity {
    /** Called when the activity is first created. */
	
	private View mRootView;
	private TextView mTView;
	private ImageButton mBtnDropDown;
	private MySpinner myspinner;
	String[] names;
	
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        setupViews();
    }
    
    
    private void setupViews(){
    	mRootView = findViewById(R.id.rootView);
		names = getResources().getStringArray(R.array.city_name);
		
		myspinner = (MySpinner) findViewById(R.id.myspinner);
		myspinner.setData(Arrays.asList(names));
		myspinner.setOnItemSelectedListener(new MySpinner.OnItemSelectedListener(){

			@Override
			public void onItemSelected(int var3) {
				// TODO Auto-generated method stub
				Toast.makeText(SpinerWindowDemoActivity.this, "You clicked on:"+names[var3], Toast.LENGTH_SHORT).show();                
			}			
		});
    }
}

        を呼び出す。 MySpinnerコントロールはとてもシンプルだと思いませんか! ポップアップのデータとコールバックのインターフェイスを設定するだけです。main.xml のコードを見てみましょう。

<?xml version="1.0" encoding="utf-8"? >
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/rootView"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#ffe3e3e3" >
    <RelativeLayout 
        android:id="@+id/title_bar"
        android:orientation="vertical"
        android:background="@drawable/title_bar" 
        android:layout_width="fill_parent" 
        android:layout_height="wrap_content">
        <TextView android:id="@+id/title" android:layout_centerInParent="true" android:textSize="20.0sp" android:textColor="#fffffffe" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="dropdown_box" />
    </RelativeLayout>
    <LinearLayout
           android:id="@+id/bottom_layout"
           android:layout_below="@id/title_bar"
           android:layout_width="fill_parent"
           android:layout_height="wrap_content"
           android:orientation="vertical"
           android:layout_marginTop="10dp"
		   android:layout_marginLeft="10.0dip" 
	       android:layout_marginBottom="10.0dip" 
	       android:layout_marginRight="10.0dip" >
	        <LinearLayout 
		       android:layout_width="fill_parent"
		       android:layout_height="wrap_content"
			   android:gravity="center_vertical"
		       android:orientation="horizontal"
			   android:background="@drawable/singleline_item_bg"
		       >
				<TextView
					android:id="@+id/tv_pre"
					android:layout_width="wrap_content"
					android:layout_height="wrap_content"
					android:layout_marginLeft="10dp"
					android:layout_marginRight="10dp"
					android:text="City:"
					android:textColor="#000000"
					android:textSize="20sp" />
		       <com.model.spinner.widget.MySpinner 
		           android:id="@+id/myspinner"
		           android:layout_width="160dp"
		     		android:layout_height="wrap_content"
		           >
		       </com.model.spinner.widget.MySpinner>
   			</LinearLayout>
       </LinearLayout>
</RelativeLayout>


    以下はポップアップウィンドウです。 SpinnerPopWindow.javaは以下の通りです。

package com.model.spinner.widget;

import android.content.Context;
import android.graphics.drawable.ColorDrawable;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup.LayoutParams;
import android.widget.AdapterView;
OnItemClickListener;
import android.widget.ListView;
import android.widget.PopupWindow;

import com.model.spinner;

import java.util.List;

public class SpinnerPopWindow extends PopupWindow implements OnItemClickListener{

	private Context mContext;
	private ListView mListView;
	private SpinnerAdapter mAdapter;
	private MySpinner.OnItemSelectedListener mItemSelectListener;
	
	
	public SpinnerPopWindow(Context context)
	{
		super(context);
		
		mContext = context;
		init();
	}
	
	
	public void setItemListener(MySpinner.OnItemSelectedListener listener){
		mItemSelectListener = listener;
	}
	
	public void setAdatper(SpinnerAdapter adapter){
		mAdapter = adapter;
		mListView.setAdapter(mAdapter);	
	}

	
	private void init()
	{
		View view = LayoutInflater.from(mContext).inflate(R.layout.spiner_window_layout, null);
		setContentView(view);		
		setWidth(LayoutParams.WRAP_CONTENT);
		setHeight(LayoutParams.WRAP_CONTENT);
		
		setFocusable(true);
    	ColorDrawable dw = new ColorDrawable(0x00);
		setBackgroundDrawable(dw);
	
		
		mListView = (ListView) view.findViewById(R.id.listview);
		mListView.setOnItemClickListener(this);
	}
		
	
	public <T> void refreshData(List<T> list, int selIndex)
	{
		if (list ! = null && selIndex ! = -1)
		{
			if (mAdapter ! = null){
				mAdapter.refreshData(list, selIndex);
			}		
		}
	}


	@Override
	public void onItemClick(AdapterView<? > arg0, View view, int pos, long arg3) {
		dismiss();
		if (mItemSelectListener ! = null){
			mItemSelectListener.onItemSelected(pos);
		}
	}	
}


SpinnerAdapter.javaのコードは以下の通りです。

package com.model.spinner.widget;

import android.content;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.TextView;

import com.model.spinner;

import java.util.ArrayList;
import java.util.List;

public class SpinnerAdapter<String> extends BaseAdapter {

	public static interface IOnItemSelectListener{
		public void onItemClick(int pos);
	};
	
	 private Context mContext;   
	 private List<String> mObjects = new ArrayList<String>();
	 private int mSelectItem = 0;
	    
	 private LayoutInflater mInflater;
	
	 public SpinnerAdapter(Context context){
		 init(context);
	 }
	 
	 public void refreshData(List<String> objects, int selIndex){
		 mObjects = objects;
		 if (selIndex < 0){
			 selIndex = 0;
		 }
		 if (selIndex >= mObjects.size()){
			 selIndex = mObjects.size() - 1;
		 }
		 
		 mSelectItem = selIndex;
	 }
	 
	 private void init(Context context) {
	        mContext = context;
	        mInflater = (LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
	 }
	    
	    
	@Override
	public int getCount() {

		return mObjects.size();
	}

	@Override
	public String getItem(int pos) {
		return mObjects.get(pos);
	}

	@Override
	public long getItemId(int pos) {
		return pos;
	}

	@Override
	public View getView(int pos, View convertView, ViewGroup arg2) {
		 ViewHolder viewHolder;
    	 
	     if (convertView == null) {
	    	 convertView = mInflater.inflate(R.layout.spiner_item_layout, null);
	         viewHolder = new ViewHolder();
	         viewHolder.mTextView = (TextView) convertView.findViewById(R.id.textView);
	         convertView.setTag(viewHolder);
	     } else {
	         viewHolder = (ViewHolder) convertView.getTag();
	     }

	     
	     Object item = getItem(pos);
		 viewHolder.mTextView.setText(item.toString());

	     return convertView;
	}

	public static class ViewHolder
	{
	    public TextView mTextView;
    }


}


他にもいくつかレイアウトがありますが、一つ一つ掲載するのはやめておきますので、興味のある方はソースコードを見てください。このデモは比較的シンプルなものなので、きっと理解できると思います。

クリックするとソースコードをダウンロードできます