zoukankan      html  css  js  c++  java

  • Android开发之多级下拉列表菜单实现（仿美团，淘宝等）

    注：本文转载于：http://blog.csdn.net/minimicall/article/details/39484493

    我们在常用的电商或者旅游APP中，例如美团，手机淘宝等等，都能够看的到有那种下拉式的二级列表菜单。具体如图所示：




    上面两张图就是美团的一个二级列表菜单的一个展示。我相信很多人都想开发一个跟它一样的功能放到自己的APP中。好，接下来我们就开始动手，解决它。


    1，结构分析

    首先，我们给出这个下来菜单需要的组建。我们用线框图来分析。


    1）如上图所示，最外围的是一个Activity，顶部包含了一个View的容器，这个容器主要是装载ToggleButton来实现诸如美团里面的“美食，全城，理我最近，刷选”这一行。这一行一点就会弹出对应的下来菜单。

    2）下拉菜单是如何实现的呢？，这里我们利用了PopupWindow来实现这一弹出式窗口。然后我们在弹出式窗口里面再定义我们的下来列表项，是单列还是二级菜单，都是由里面来定。

    3）不同的菜单，需要一级或者需要二级，在这里根据我的需求而变动。我们在PopupWindow上面加一个自定义的LeftView，或者是MiddleView，RightView。主要是一个ToggleButton，你弹出一个窗口，你就定制一个窗口。

    3）视图里面嵌入ListView，就形成了列表项。

    好分析就到上面为止，接下来我们一步步的说明实现。

    2，项目结构

    本项目的项目结构如图所示：

    1） Adapter。适配器，主要是为ListView提供数据适配的。

    2）MainActivity。主活动页面。

    3）ExpandTabView。本项目的核心类，它包含ToggleButton容器和PopupWindow，是控制弹出窗口的核心类。

    4）ViewLeft,ViewMiddle,ViewRight。是弹出里面嵌套的类，实现不同的列表菜单。





    3，MainActivity

    承载所有元素。看代码比看文字实在。

    [java] view plaincopy在CODE上查看代码片派生到我的代码片
    1. package com.example.expandtabview;  
    2.   
    3.   
    4. import java.util.ArrayList;  
    5.   
    6. import android.app.Activity;  
    7. import android.os.Bundle;  
    8. import android.util.Log;  
    9. import android.view.View;  
    10. import android.widget.Toast;  
    11.   
    12. import com.example.view.ExpandTabView;  
    13. import com.example.view.ViewLeft;  
    14. import com.example.view.ViewMiddle;  
    15. import com.example.view.ViewRight;  
    16.   
    17. public class MainActivity extends Activity {  
    18.     private static final String TAG = "MainActivity";  
    19.     private ExpandTabView expandTabView;  
    20.     private ArrayList<View> mViewArray = new ArrayList<View>();  
    21.     private ViewLeft viewLeft;  
    22.     private ViewMiddle viewMiddle;  
    23.     private ViewRight viewRight;  
    24.       
    25.     @Override  
    26.     protected void onCreate(Bundle savedInstanceState) {  
    27.           
    28.         super.onCreate(savedInstanceState);  
    29.         setContentView(R.layout.activity_main);  
    30.         initView();  
    31.         initVaule();  
    32.         initListener();  
    33.           
    34.     }  
    35.   
    36.     private void initView() {  
    37.         Log.d(TAG,"initView");  
    38.         expandTabView = (ExpandTabView) findViewById(R.id.expandtab_view);  
    39.         viewLeft = new ViewLeft(this);  
    40.         viewMiddle = new ViewMiddle(this);  
    41.         viewRight = new ViewRight(this);  
    42.           
    43.     }  
    44.   
    45.     private void initVaule() {  
    46.         Log.d(TAG,"initValue");  
    47.         mViewArray.add(viewLeft);  
    48.         mViewArray.add(viewMiddle);  
    49.         mViewArray.add(viewRight);  
    50.         ArrayList<String> mTextArray = new ArrayList<String>();  
    51.         mTextArray.add("距离");  
    52.         mTextArray.add("区域");  
    53.         mTextArray.add("距离");  
    54.         expandTabView.setValue(mTextArray, mViewArray);//将三个下拉列表设置进去  
    55.         expandTabView.setTitle(viewLeft.getShowText(), 0);  
    56.         expandTabView.setTitle(viewMiddle.getShowText(), 1);  
    57.         expandTabView.setTitle(viewRight.getShowText(), 2);  
    58.           
    59.     }  
    60.   
    61.     private void initListener() {  
    62.         Log.d(TAG,"initListener");  
    63.         viewLeft.setOnSelectListener(new ViewLeft.OnSelectListener() {  
    64.   
    65.             @Override  
    66.             public void getValue(String distance, String showText) {  
    67.                 Log.d("ViewLeft", "OnSelectListener, getValue");  
    68.                 onRefresh(viewLeft, showText);  
    69.             }  
    70.         });  
    71.           
    72.         viewMiddle.setOnSelectListener(new ViewMiddle.OnSelectListener() {  
    73.               
    74.             @Override  
    75.             public void getValue(String showText) {  
    76.                 Log.d("ViewMiddle","OnSelectListener, getValue");  
    77.                 onRefresh(viewMiddle,showText);  
    78.                   
    79.             }  
    80.         });  
    81.           
    82.         viewRight.setOnSelectListener(new ViewRight.OnSelectListener() {  
    83.   
    84.             @Override  
    85.             public void getValue(String distance, String showText) {  
    86.                 Log.d("ViewRight","OnSelectListener, getValue");  
    87.                 onRefresh(viewRight, showText);  
    88.             }  
    89.         });  
    90.           
    91.     }  
    92.       
    93.     private void onRefresh(View view, String showText) {  
    94.         Log.d(TAG,"onRefresh,view:"+view+",showText:"+showText);  
    95.         expandTabView.onPressBack();  
    96.         int position = getPositon(view);  
    97.         if (position >= 0 && !expandTabView.getTitle(position).equals(showText)) {  
    98.             expandTabView.setTitle(showText, position);  
    99.         }  
    100.         Toast.makeText(MainActivity.this, showText, Toast.LENGTH_SHORT).show();  
    101.   
    102.     }  
    103.       
    104.     private int getPositon(View tView) {  
    105.         Log.d(TAG,"getPosition");  
    106.         for (int i = 0; i < mViewArray.size(); i++) {  
    107.             if (mViewArray.get(i) == tView) {  
    108.                 return i;  
    109.             }  
    110.         }  
    111.         return -1;  
    112.     }  
    113.       
    114.     @Override  
    115.     public void onBackPressed() {  
    116.           
    117.         if (!expandTabView.onPressBack()) {  
    118.             finish();  
    119.         }  
    120.           
    121.     }  
    122.   
    123. }  

    4 ，ExpandTabView

    最主要就是如何处理当我们点击这些ToggleButton的时候要弹出或者收起这些PopupWindow。

    [java] view plaincopy在CODE上查看代码片派生到我的代码片
    1. package com.example.view;  
    2.   
    3. import java.util.ArrayList;  
    4.   
    5. import com.example.expandtabview.R;  
    6.   
    7. import android.app.Activity;  
    8. import android.content.Context;  
    9. import android.util.AttributeSet;  
    10. import android.util.Log;  
    11. import android.view.LayoutInflater;  
    12. import android.view.View;  
    13. import android.widget.LinearLayout;  
    14. import android.widget.PopupWindow;  
    15. import android.widget.PopupWindow.OnDismissListener;  
    16. import android.widget.RelativeLayout;  
    17. import android.widget.TextView;  
    18. import android.widget.ToggleButton;  
    19.   
    20. /** 
    21.  * 菜单控件头部，封装了下拉动画，动态生成头部按钮个数 
    22.  *  
    23.  * @author zengjinlong 
    24.  */  
    25.   
    26. public class ExpandTabView extends LinearLayout implements OnDismissListener {  
    27.     private static final String TAG = "ExpandTabView";  
    28.     private ToggleButton selectedButton;  
    29.     private ArrayList<String> mTextArray = new ArrayList<String>();  
    30.     private ArrayList<RelativeLayout> mViewArray = new ArrayList<RelativeLayout>();  
    31.     private ArrayList<ToggleButton> mToggleButton = new ArrayList<ToggleButton>();  
    32.     private Context mContext;  
    33.     private final int SMALL = 0;  
    34.     private int displayWidth;  
    35.     private int displayHeight;  
    36.     private PopupWindow popupWindow;  
    37.     private int selectPosition;  
    38.   
    39.     public ExpandTabView(Context context) {  
    40.         super(context);  
    41.         init(context);  
    42.     }  
    43.   
    44.     public ExpandTabView(Context context, AttributeSet attrs) {  
    45.         super(context, attrs);  
    46.         init(context);  
    47.     }  
    48.   
    49.     /** 
    50.      * 根据选择的位置设置tabitem显示的值 
    51.      */  
    52.     public void setTitle(String valueText, int position) {  
    53.         if (position < mToggleButton.size()) {  
    54.             mToggleButton.get(position).setText(valueText);  
    55.         }  
    56.     }  
    57.   
    58.     public void setTitle(String title){  
    59.           
    60.     }  
    61.     /** 
    62.      * 根据选择的位置获取tabitem显示的值 
    63.      */  
    64.     public String getTitle(int position) {  
    65.         if (position < mToggleButton.size() && mToggleButton.get(position).getText() != null) {  
    66.             return mToggleButton.get(position).getText().toString();  
    67.         }  
    68.         return "";  
    69.     }  
    70.   
    71.     /** 
    72.      * 设置tabitem的个数和初始值 
    73.      * @param textArray 标题数组 
    74.      * @param viewArray 控件数组 
    75.      */  
    76.     public void setValue(ArrayList<String> textArray, ArrayList<View> viewArray) {  
    77.         if (mContext == null) {  
    78.             return;  
    79.         }  
    80.         LayoutInflater inflater = (LayoutInflater) mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);  
    81.         Log.d(TAG,"setValue");  
    82.         mTextArray = textArray;  
    83.         for (int i = 0; i < viewArray.size(); i++) {  
    84.             final RelativeLayout r = new RelativeLayout(mContext);  
    85.             int maxHeight = (int) (displayHeight * 0.7);  
    86.             RelativeLayout.LayoutParams rl = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT, maxHeight);  
    87.             rl.leftMargin = 10;  
    88.             rl.rightMargin = 10;  
    89.             r.addView(viewArray.get(i), rl);  
    90.             mViewArray.add(r);  
    91.             r.setTag(SMALL);  
    92.             ToggleButton tButton = (ToggleButton) inflater.inflate(R.layout.toggle_button, this, false);  
    93.             addView(tButton);  
    94.             View line = new TextView(mContext);  
    95.             line.setBackgroundResource(R.drawable.choosebar_line);  
    96.             if (i < viewArray.size() - 1) {  
    97.                 LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(2, LinearLayout.LayoutParams.MATCH_PARENT);  
    98.                 addView(line, lp);  
    99.             }  
    100.             mToggleButton.add(tButton);  
    101.             tButton.setTag(i);  
    102.             tButton.setText(mTextArray.get(i));  
    103.   
    104.             r.setOnClickListener(new OnClickListener() {  
    105.                 @Override  
    106.                 public void onClick(View v) {  
    107.                     Log.d("RelativeLayout","view:"+v);  
    108.                     onPressBack();  
    109.                 }  
    110.             });  
    111.   
    112.             r.setBackgroundColor(mContext.getResources().getColor(R.color.popup_main_background));  
    113.             tButton.setOnClickListener(new OnClickListener() {  
    114.                 @Override  
    115.                 public void onClick(View view) {  
    116.                     Log.d("tButton","setOnClickListener(l)");  
    117.                     // initPopupWindow();  
    118.                     ToggleButton tButton = (ToggleButton) view;  
    119.   
    120.                     if (selectedButton != null && selectedButton != tButton) {  
    121.                         selectedButton.setChecked(false);  
    122.                     }  
    123.                     selectedButton = tButton;  
    124.                     selectPosition = (Integer) selectedButton.getTag();  
    125.                     startAnimation();  
    126.                     if (mOnButtonClickListener != null && tButton.isChecked()) {  
    127.                         mOnButtonClickListener.onClick(selectPosition);  
    128.                     }  
    129.                 }  
    130.             });  
    131.         }// for..  
    132.     }  
    133.   
    134.     private void startAnimation() {  
    135.         Log.d(TAG,"startAnimation");  
    136.         if (popupWindow == null) {  
    137.             Log.d(TAG,"startAnimation(),new popupWindow now");  
    138.             popupWindow = new PopupWindow(mViewArray.get(selectPosition), displayWidth, displayHeight);  
    139.             popupWindow.setAnimationStyle(R.style.PopupWindowAnimation);  
    140.             popupWindow.setFocusable(false);  
    141.             popupWindow.setOutsideTouchable(true);  
    142.         }  
    143.         Log.d(TAG,"startAnimation(),selectedButton:"+selectedButton+",isChecked:"+selectedButton.isChecked()+  
    144.                 ",popupWindow.isShowing:"+popupWindow.isShowing());  
    145.         if (selectedButton.isChecked()) {  
    146.               
    147.             if (!popupWindow.isShowing()) {  
    148.                 showPopup(selectPosition);  
    149.             } else {  
    150.                 popupWindow.setOnDismissListener(this);  
    151.                 popupWindow.dismiss();  
    152.                 hideView();  
    153.             }  
    154.         } else {  
    155.             if (popupWindow.isShowing()) {  
    156.                 popupWindow.dismiss();  
    157.                 hideView();  
    158.             }  
    159.         }  
    160.     }  
    161.   
    162.     private void showPopup(int position) {  
    163.         View tView = mViewArray.get(selectPosition).getChildAt(0);  
    164.         if (tView instanceof ViewBaseAction) {  
    165.             ViewBaseAction f = (ViewBaseAction) tView;  
    166.             f.show();  
    167.         }  
    168.         if (popupWindow.getContentView() != mViewArray.get(position)) {  
    169.             popupWindow.setContentView(mViewArray.get(position));  
    170.         }  
    171.         popupWindow.showAsDropDown(this, 0, 0);  
    172.     }  
    173.   
    174.     /** 
    175.      * 如果菜单成展开状态，则让菜单收回去 
    176.      */  
    177.     public boolean onPressBack() {  
    178.         Log.d(TAG,"onPressBack");  
    179.         if (popupWindow != null && popupWindow.isShowing()) {  
    180.             popupWindow.dismiss();  
    181.             hideView();  
    182.             if (selectedButton != null) {  
    183.                 selectedButton.setChecked(false);  
    184.             }  
    185.             return true;  
    186.         } else {  
    187.             return false;  
    188.         }  
    189.   
    190.     }  
    191.   
    192.     private void hideView() {  
    193.         Log.d(TAG, "hide()");  
    194.         View tView = mViewArray.get(selectPosition).getChildAt(0);  
    195.         if (tView instanceof ViewBaseAction) {  
    196.             ViewBaseAction f = (ViewBaseAction) tView;  
    197.             f.hide();  
    198.         }  
    199.     }  
    200.   
    201.     private void init(Context context) {  
    202.         mContext = context;  
    203.         displayWidth = ((Activity) mContext).getWindowManager().getDefaultDisplay().getWidth();  
    204.         displayHeight = ((Activity) mContext).getWindowManager().getDefaultDisplay().getHeight();  
    205.         setOrientation(LinearLayout.HORIZONTAL);  
    206.     }  
    207.   
    208.     @Override  
    209.     public void onDismiss() {  
    210.         Log.d(TAG,"onDismiss,selectPosition:"+selectPosition);  
    211.         showPopup(selectPosition);  
    212.         popupWindow.setOnDismissListener(null);  
    213.     }  
    214.   
    215.     private OnButtonClickListener mOnButtonClickListener;  
    216.   
    217.     /** 
    218.      * 设置tabitem的点击监听事件 
    219.      */  
    220.     public void setOnButtonClickListener(OnButtonClickListener l) {  
    221.         mOnButtonClickListener = l;  
    222.     }  
    223.   
    224.     /** 
    225.      * 自定义tabitem点击回调接口 
    226.      */  
    227.     public interface OnButtonClickListener {  
    228.         public void onClick(int selectPosition);  
    229.     }  
    230.   
    231. }  


    5，ViewLeft

    其中的一个示例，其他两个就不列举了

    [java] view plaincopy在CODE上查看代码片派生到我的代码片
    1. package com.example.view;  
    2.   
    3.   
    4. import com.example.adapter.TextAdapter;  
    5. import com.example.expandtabview.R;  
    6.   
    7.   
    8. import android.content.Context;  
    9. import android.util.AttributeSet;  
    10. import android.view.LayoutInflater;  
    11. import android.view.View;  
    12. import android.widget.ListView;  
    13. import android.widget.RelativeLayout;  
    14. import android.widget.Toast;  
    15.   
    16.   
    17.   
    18.   
    19. public class ViewLeft extends RelativeLayout implements ViewBaseAction{  
    20.     private static final String TAG = "ViewLeft";  
    21.     private ListView mListView;  
    22.     private final String[] items = new String[] { "item1", "item2", "item3", "item4", "item5", "item6" };//显示字段  
    23.     private final String[] itemsVaule = new String[] { "1", "2", "3", "4", "5", "6" };//隐藏id  
    24.     private OnSelectListener mOnSelectListener;  
    25.     private TextAdapter adapter;  
    26.     private String mDistance;  
    27.     private String showText = "item1";  
    28.     private Context mContext;  
    29.   
    30.   
    31.     public String getShowText() {  
    32.         return showText;  
    33.     }  
    34.   
    35.   
    36.     public ViewLeft(Context context) {  
    37.         super(context);  
    38.         init(context);  
    39.     }  
    40.   
    41.   
    42.     public ViewLeft(Context context, AttributeSet attrs, int defStyle) {  
    43.         super(context, attrs, defStyle);  
    44.         init(context);  
    45.     }  
    46.   
    47.   
    48.     public ViewLeft(Context context, AttributeSet attrs) {  
    49.         super(context, attrs);  
    50.         init(context);  
    51.     }  
    52.   
    53.   
    54.     private void init(Context context) {  
    55.         mContext = context;  
    56.         LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);  
    57.         inflater.inflate(R.layout.view_distance, this, true);  
    58.         setBackgroundDrawable(getResources().getDrawable(R.drawable.choosearea_bg_mid));  
    59.         mListView = (ListView) findViewById(R.id.listView);  
    60.         adapter = new TextAdapter(context, items, R.drawable.choose_item_right, R.drawable.choose_eara_item_selector);  
    61.         adapter.setTextSize(17);  
    62.         if (mDistance != null) {  
    63.             for (int i = 0; i < itemsVaule.length; i++) {  
    64.                 if (itemsVaule[i].equals(mDistance)) {  
    65.                     adapter.setSelectedPositionNoNotify(i);  
    66.                     showText = items[i];  
    67.                     break;  
    68.                 }  
    69.             }  
    70.         }  
    71.         mListView.setAdapter(adapter);  
    72.         adapter.setOnItemClickListener(new TextAdapter.OnItemClickListener() {  
    73.   
    74.   
    75.             @Override  
    76.             public void onItemClick(View view, int position) {  
    77.   
    78.   
    79.                 if (mOnSelectListener != null) {  
    80.                     showText = items[position];  
    81.                     mOnSelectListener.getValue(itemsVaule[position], items[position]);  
    82.                 }  
    83.             }  
    84.         });  
    85.     }  
    86.   
    87.   
    88.     public void setOnSelectListener(OnSelectListener onSelectListener) {  
    89.         mOnSelectListener = onSelectListener;  
    90.     }  
    91.   
    92.   
    93.     public interface OnSelectListener {  
    94.         public void getValue(String distance, String showText);  
    95.     }  
    96.   
    97.   
    98.     @Override  
    99.     public void hide() {  
    100.           
    101.     }  
    102.   
    103.   
    104.     @Override  
    105.     public void show() {  
    106.           
    107.     }  
    108.   
    109.   
    110. }  

    6，效果图



    好，今天就到这里。。希望有用。
  • 相关阅读:
    JDK介绍
    选择器——过滤选择器——内容过滤器
    选择器——过滤选择器——基本过滤器
    选择器——层次选择器
    选择器——基本选择器
    jQuery 对象转成 DOM 对象
    dom转换成jquery对象
    Android-bindService本地服务-初步-Service返回对象
    Android-bindService本地服务-初步
    Android-Service生命周期
  • 原文地址：https://www.cnblogs.com/runwind/p/4454641.html
Copyright © 2011-2022 走看看