Android之——自訂下拉式功能表的實現

標籤：android   自訂   spinner   listview   介面   

轉載請註明出處:http://blog.csdn.net/l1028386804/article/details/48101651

做過Android開發的童鞋，一般都會遇到這樣一種情況，就是Android中原有的下拉控制項Spinner過於單調和簡單，不能夠滿足我們實際開發的需求了，這時候就需要我們自己自訂下拉式功能表來實現相應的功能，那麼，如何?自訂下拉式功能表呢？下面我就來和大家一起實現這個功能。

一、原理

我們這個下拉式功能表展示的內容主要以ListView實現，在介面上放置一個文字框，文字框右側放置一個向下的箭頭表徵圖，表示可以點擊下拉。然後建立一個item.xml布局檔案，這個布局檔案展示的就是ListView的條目資訊，條目中有一個圖片，表示頭像，一串數字表示qq號(暫時以顯示qq號為例)，後面一個刪除按鈕。所有的資料封裝在ListView中。然後我們將這個ListView以PopupWindow的形式顯示在文字框的下面。

當ListView不顯示的時候，點擊文字框右側的下拉表徵圖，則彈出PopupWindow顯示ListView

當ListView顯示的時候，點擊文字框右側的下拉表徵圖，則隱藏PopupWindow從而隱藏ListView

點擊ListView中每一個條目後刪除表徵圖的時候，相應的條目就會從listView中消失。

二、實現1、MainActivity

程式很簡單，我將所有的java代碼都寫在了MainActivity中，我們還是分解來看這個類。

1)屬性欄位

每個欄位代表的含義見代碼注釋

具體代碼實現如下：

//介面控制項private ImageButton spinner;private EditText et_name;//構造qq號用到的集合private List<String> names = new ArrayList<String>();//布局載入器private LayoutInflater mInflater;//自訂配接器private MyAdapter mAdapter;//PopupWindowprivate PopupWindow pop;//是否顯示PopupWindow，預設不顯示private boolean isPopShow = false;

2)自訂Adapter

同樣，為了在ListView中更好的顯示資料，我們還是用到了自訂Adapter

具體代碼實現如下：

/** * 自訂Adapter * @author liuyazhuang * */private class MyAdapter extends BaseAdapter{@Overridepublic int getCount() {// TODO Auto-generated method stubreturn names.size();}@Overridepublic Object getItem(int position) {// TODO Auto-generated method stubreturn names.get(position);}@Overridepublic long getItemId(int position) {// TODO Auto-generated method stubreturn position;}@Overridepublic View getView(final int position, View convertView, ViewGroup parent) {View view = mInflater.inflate(R.layout.item, null);final TextView tv_name = (TextView) view.findViewById(R.id.tv_name);tv_name.setText(names.get(position));ImageButton delete = (ImageButton) view.findViewById(R.id.delete);//設定按鈕的監聽事件delete.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {// TODO Auto-generated method stubnames.remove(position);isPopShow = true;mAdapter.notifyDataSetChanged();}});//設定按鈕的監聽事件tv_name.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {// TODO Auto-generated method stubet_name.setText(names.get(position));pop.dismiss();}});return view;}} 

3)onCreate方法

這個方法中主要實現的功能就是，初始化介面布局，為屬性欄位賦值，構造要在ListView中顯示的資料，同時為相應的按鈕設定點擊事件，控制PopupWindow的顯示和隱藏。

具體實現代碼如下：

@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);//構造qq帳號for(int i = 10000; i < 10030; i++){names.add(String.valueOf(i));}spinner = (ImageButton) findViewById(R.id.spinner);et_name = (EditText) findViewById(R.id.et_name);mInflater = LayoutInflater.from(MainActivity.this);mAdapter = new MyAdapter();spinner.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {// TODO Auto-generated method stubif(pop == null){ListView listView = new ListView(MainActivity.this);listView.setCacheColorHint(0x00000000);listView.setAdapter(mAdapter);pop = new PopupWindow(listView, et_name.getWidth(), LayoutParams.WRAP_CONTENT, true);pop.setBackgroundDrawable(new ColorDrawable(0x00000000));isPopShow = true;}if(isPopShow){pop.showAsDropDown(et_name, 0, 0);isPopShow = false;}else{pop.dismiss();isPopShow = true;}}});}

4)完整代碼如下:

package com.lyz.spiner.activity;import java.util.ArrayList;import java.util.List;import android.os.Bundle;import android.app.Activity;import android.graphics.drawable.ColorDrawable;import android.view.LayoutInflater;import android.view.Menu;import android.view.View;import android.view.ViewGroup;import android.view.ViewGroup.LayoutParams;import android.widget.BaseAdapter;import android.widget.EditText;import android.widget.ImageButton;import android.widget.ListView;import android.widget.PopupWindow;import android.widget.TextView;/** * 程式主入口 * @author liuyazhuang * */public class MainActivity extends Activity {//介面控制項private ImageButton spinner;private EditText et_name;//構造qq號用到的集合private List<String> names = new ArrayList<String>();//布局載入器private LayoutInflater mInflater;//自訂配接器private MyAdapter mAdapter;//PopupWindowprivate PopupWindow pop;//是否顯示PopupWindow，預設不顯示private boolean isPopShow = false;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);//構造qq帳號for(int i = 10000; i < 10030; i++){names.add(String.valueOf(i));}spinner = (ImageButton) findViewById(R.id.spinner);et_name = (EditText) findViewById(R.id.et_name);mInflater = LayoutInflater.from(MainActivity.this);mAdapter = new MyAdapter();spinner.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {// TODO Auto-generated method stubif(pop == null){ListView listView = new ListView(MainActivity.this);listView.setCacheColorHint(0x00000000);listView.setAdapter(mAdapter);pop = new PopupWindow(listView, et_name.getWidth(), LayoutParams.WRAP_CONTENT, true);pop.setBackgroundDrawable(new ColorDrawable(0x00000000));isPopShow = true;}if(isPopShow){pop.showAsDropDown(et_name, 0, 0);isPopShow = false;}else{pop.dismiss();isPopShow = true;}}});}/** * 自訂Adapter * @author liuyazhuang * */private class MyAdapter extends BaseAdapter{@Overridepublic int getCount() {// TODO Auto-generated method stubreturn names.size();}@Overridepublic Object getItem(int position) {// TODO Auto-generated method stubreturn names.get(position);}@Overridepublic long getItemId(int position) {// TODO Auto-generated method stubreturn position;}@Overridepublic View getView(final int position, View convertView, ViewGroup parent) {View view = mInflater.inflate(R.layout.item, null);final TextView tv_name = (TextView) view.findViewById(R.id.tv_name);tv_name.setText(names.get(position));ImageButton delete = (ImageButton) view.findViewById(R.id.delete);//設定按鈕的監聽事件delete.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {// TODO Auto-generated method stubnames.remove(position);isPopShow = true;mAdapter.notifyDataSetChanged();}});//設定按鈕的監聽事件tv_name.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {// TODO Auto-generated method stubet_name.setText(names.get(position));pop.dismiss();}});return view;}} @Overridepublic 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;}}

2、主布局檔案activity_main.xml

具體實現代碼如下：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"     android:background="@android:color/black">    <EditText        android:id="@+id/et_name"        android:layout_width="200dip"        android:layout_height="wrap_content"android:layout_centerHorizontal="true"android:hint="請輸入帳號" />    <ImageButton     android:id="@+id/spinner"    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:background="@drawable/button"    android:layout_alignTop="@id/et_name"    android:layout_alignRight="@id/et_name"    android:layout_alignBottom="@id/et_name"/></RelativeLayout>

3、條目布局檔案item.xml

具體實現代碼如下:

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="horizontal"     android:gravity="center_vertical">    <ImageView         android:id="@+id/header"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:background="@drawable/user"/>        <TextView         android:id="@+id/tv_name"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_weight="1"/>        <ImageButton         android:id="@+id/delete"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:background="@drawable/delete"/></LinearLayout>

4、AndroidManifest.xml

最後貼出AndroidManifest.xml的代碼

<?xml version="1.0" encoding="utf-8"?><manifest xmlns:android="http://schemas.android.com/apk/res/android"    package="com.lyz.spiner.activity"    android:versionCode="1"    android:versionName="1.0" >    <uses-sdk        android:minSdkVersion="8"        android:targetSdkVersion="18" />    <application        android:allowBackup="true"        android:icon="@drawable/ic_launcher"        android:label="@string/app_name"        android:theme="@style/AppTheme" >        <activity            android:name="com.lyz.spiner.activity.MainActivity"            android:label="@string/app_name" >            <intent-filter>                <action android:name="android.intent.action.MAIN" />                <category android:name="android.intent.category.LAUNCHER" />            </intent-filter>        </activity>    </application></manifest>

三、運行效果

四、溫馨提示

大家可以到連結http://download.csdn.net/detail/l1028386804/9062795下載Android自訂下拉式功能表樣本完整原始碼

本執行個體中，為了方面，我把一些文字直接寫在了布局檔案中和相關的類中，大家在真實的項目中要把這些文字寫在string.xml檔案中，在外部參考這些資源，切記，這是作為一個Android程式員最基本的開發常識和規範，我在這裡只是為了方便直接寫在了類和布局檔案中。

著作權聲明：本文為博主原創文章，未經博主允許不得轉載。

Android之——自訂下拉式功能表的實現