Android实现下拉导航选择菜单效果

最新推荐文章于 2024-05-17 09:33:55 发布
最新推荐文章于 2024-05-17 09:33:55 发布
阅读量1.3k 收藏
点赞数
分类专栏： Android开发基础（五） 文章标签： android应用 UI

本文介绍在Android中如何实现下拉导航选择菜单效果。

 

　　关于下拉导航选择菜单效果在新闻客户端中用的比较多，当然也可以用在其他的项目中，这样可以很方便的选择更多的菜单。我们可以让我们的应用顶部有左右滑动或进行切换的导航菜单，也可以为了增强用户体验在应用中添加这样的下拉导航选择菜单效果。

　　关于它的实现原理，其实也是挺简单的，就是使用PopupWindow来进行展现，在显示时控制其高度并配置以相应的动画效果。在PopupWindow中我使用GridView来控制里面的菜单项，每个菜单项对应相应的图片和文字。当然了，也有其他的实现方式。为了大家能够清楚的理解，让我们先看下效果图，如下所示：

 

   

   

 

　　以上就是我实现的示例图，大家已经看到了，就是点击应用顶部中间的文字时展现出来，在我们点击其中一项菜单时隐藏并加载相应菜单的内容，同时该菜单处于选中状态。好了，下面就让我们开始我们的实现过程，还是先看下程序结构图吧：

 

  

 

　　在程序结构图中，PulldownMenuView是对PopupWindow进行的封装类，PulldownMenuItem是菜单项类，这是两个重要的类。在我们点击应用顶部中间的文字时，要进行展现，展现的同时，要实现对菜单的初始化工作，首先是初始化数据，其主要代码如下：

复制代码 
　  /**
     * 初始化数据，将数据加载到对应的View中
     */
    private void initData(){
        PulldownMenuItem item = new PulldownMenuItem(context);
        item.setMenuAlign(menuAlign);
        item.setMenuTextColor(menuTextColor);
        item.setMenuTextSize(menuTextSize);
        int txtLength = menuTexts.length;
        int imgLength = menuImageRes.length;
        
        if (txtLength != 0 && imgLength != 0){
            for (int i = 0; i < imgLength; i++){
                PulldownMenuItem menuItem = new PulldownMenuItem(context, item);
                
                if(!currentItem.equals(menuTexts[i])){
                    menuItem.setImageRes(menuImageRes[i]);
                    menuItem.setMenuText(menuTexts[i]);
                }else{
                    menuItem.setMenuText(menuTexts[i]);
                    menuItem.setMenuTextColor(Color.parseColor("#4FA7F9"));
                    menuItem.setImageRes(ConstantCategoryMenu.newsImageResPress[i]);
                }
                
                menuMenuItems.add(menuItem);
            }
        } else{
            if (txtLength != 0){
                for (int i = 0; i < txtLength; i++){
                    PulldownMenuItem menuItem = new PulldownMenuItem(context, item);
                    
                    if(!currentItem.equals(menuTexts[i])){
                        menuItem.setMenuText(menuTexts[i]);
                    }else{
                        menuItem.setMenuText(menuTexts[i]);
                        menuItem.setMenuTextColor(Color.parseColor("#4FA7F9"));
                    }
                    
                    menuMenuItems.add(menuItem);
                }
            }else if (imgLength != 0){
                for (int i = 0; i < imgLength; i++){
                    PulldownMenuItem menuItem = new PulldownMenuItem(context, item);
                    menuItem.setImageRes(menuImageRes[i]);
                    menuMenuItems.add(menuItem);
                }
            }
        }
    }
复制代码

 

　　currentItem代表当前的选择项，在初始化数据过程中，需要检测哪项菜单被选中了，如果某项菜单被选中，则在展开时需要将该项菜单图片和文字颜色设置成相应状态，表示该项菜单被选中。在初始化过程中分为三种情况：第一种是菜单项既有图片也有文字；第二种是菜单项只有文字；第三种是菜单项只有图片；所以在上面代码中需要进行相应判断。上面是初始化菜单中的数据，下面是初始化菜单中的内容：

复制代码 
    /**
     * 初始化菜单内容
     * @param context
     * @param columns 菜单的列数
     * @return
     */
    private GridView getMenuGirdView(Context context, int columns){
        if (menuMenuItems.isEmpty()){
            // 初始化菜单数据
            initData();
        }
        
        if (null != menuGridView){
            return menuGridView;
        }
        
        GridView gridView = new GridView(context);
        gridView.setLayoutParams(new LinearLayout.LayoutParams(
                ViewGroup.LayoutParams.MATCH_PARENT, 
                ViewGroup.LayoutParams.MATCH_PARENT));
        // 设置数据适配器
        gridView.setAdapter(new PulldownMenuAdapter(menuMenuItems));
        gridView.setVerticalSpacing(1);
        gridView.setNumColumns(columns);
        gridView.setGravity(Gravity.CENTER);
        gridView.setVerticalScrollBarEnabled(false);
        
        if (menuBackground != 0){
            gridView.setBackgroundResource(menuBackground);
        }
        
        if (menuSelector != -1){
            gridView.setSelector(menuSelector);
        }
        
        gridView.setHorizontalScrollBarEnabled(false);
        setMenuListener(gridView);
        
        return gridView;
    }
复制代码

 

　　初始化菜单之后，就需要我们菜单中相应的数据，设置数据比较容易，只需要三个数组即可：第一个数组代表菜单项文字内容；第二个数组代表菜单项图片资源，第三个数组代表菜单项被选中的图片资源。如下代码：

复制代码 
    /**
     * 新闻菜单项图片资源
     */
    public final static int[] newsImageRes = {
        R.drawable.ic_menu_toutiao,R.drawable.ic_menu_gn,
        R.drawable.ic_menu_gj,R.drawable.ic_menu_sh,
        R.drawable.ic_menu_sport,R.drawable.ic_menu_nba,
        R.drawable.ic_menu_blog,R.drawable.ic_menu_book,
        R.drawable.ic_menu_yule,R.drawable.ic_menu_mil,
        R.drawable.ic_menu_cj,R.drawable.ic_menu_tech,
        R.drawable.ic_menu_mobile,R.drawable.ic_menu_women,
        R.drawable.ic_menu_car,R.drawable.ic_menu_house
    };
    
    /**
     * 新闻菜单项选中图片资源
     */
    public final static int[] newsImageResPress = {
        R.drawable.ic_menu_toutiao_press,R.drawable.ic_menu_gn_press,
        R.drawable.ic_menu_gj_press,R.drawable.ic_menu_sh_press,
        R.drawable.ic_menu_sport_press,R.drawable.ic_menu_nba_press,
        R.drawable.ic_menu_blog_press,R.drawable.ic_menu_book_press,
        R.drawable.ic_menu_yule_press,R.drawable.ic_menu_mil_press,
        R.drawable.ic_menu_cj_press,R.drawable.ic_menu_tech_press,
        R.drawable.ic_menu_mobile_press,R.drawable.ic_menu_women_press,
        R.drawable.ic_menu_car_press,R.drawable.ic_menu_house_press
    };
    
    /**
     * 新闻菜单项文字
     */
    public final static String[] newsMenuTexts = {
        "今日头条","国内","国际","社会","体育","NBA","博客","读书",
        "娱乐","军事","财经","科技","手机","女性","汽车","房产"
    };
复制代码

 

　　菜单项使用GridView实现，我们还需要设置每个菜单项的监听事件，在选中一项菜单后或是点击返回键或点击菜单键时实现隐藏，代码如下：

复制代码 
    /**
     * 设置菜单项监听事件
     * @param gridView
     */
    private void setMenuListener(GridView gridView){
        if (null == gridView.getOnItemClickListener()){
            gridView.setOnItemClickListener(new OnItemClickListener(){
                @Override
                public void onItemClick(
                        AdapterView<?> parent, 
                        View view,
                        int position, 
                        long id){
                    if (null != menuItemListener){
                        menuItemListener.onMenuItemClick(parent, view, position);
                    }
                    
                    hide();
                }
            });
        }
        
        // 按返回键或菜单键隐藏菜单
        gridView.setOnKeyListener(new OnKeyListener(){
            @Override
            public boolean onKey(View v, int keyCode, KeyEvent event){
                if (event.getAction() == KeyEvent.ACTION_DOWN){
                    switch (keyCode){
                    case KeyEvent.KEYCODE_BACK:
                    case KeyEvent.KEYCODE_MENU:
                        hide();
                        break;
                    }
                }
                
                return false;
            }
        });
    }
复制代码

 

　　在PulldownMenuView类中的show()和hide()方法中，主要是实现菜单的显示与隐藏。在show()方法中，要计算每行存放的菜单数、设置相应的高度、菜单整体的背景、动画效果、菜单显示的位置等效果。具体不再详述。

　　我们在显示下拉导航选择菜单前还需要配置菜单相应的参数，比如显示位置、背景图片、高度等。这就是在MenuUtility类中要实现的，代码如下：

复制代码 
package com.navigation.utility;

import com.navigation.acitvity.R;
import com.navigation.control.PulldownMenuView;

import android.content.Context;
import android.view.View;

/**
 * PulldownMenuView基本操作类
 * @Description: PulldownMenuView基本操作类

 * @File: PulldownMenuUtility.java

 * @Package com.navigation.utility

 * @Author Hanyonglu

 * @Date 2012-7-30 上午11:41:04

 * @Version V1.0
 */
public class MenuUtility {
    private Context context = null;
    // PulldownMenuView对象
    private PulldownMenuView menu = null;
    // 图片资源
    private int[] imageRes = null;
    // 文字内容
    private String[] texts = null;
    // 菜单高度
    private int height = 0;
    private View anchorView = null;
    
    /**
     * 默认的构造器
     */
    public MenuUtility() {
        // TODO Auto-generated constructor stub
    }
    
    /**
     * 带Context的构造器
     * @param context
     */
    public MenuUtility(Context context) {
        // TODO Auto-generated constructor stub
        this(context,null,null,0,null);
    }
    
    /**
     * 带多参的构造器
     * @param context
     * @param imageRes
     * @param texts
     */
    public MenuUtility(Context context,int[] imageRes,String[] texts,int height,View anchorView){
        this.context = context;
        this.imageRes = imageRes;
        this.texts = texts;
        this.height = height;
        this.anchorView = anchorView;
    }
    
    /**
     * 设置图片资源
     * @param imageRes
     */
    public void setImageRes(int[] imageRes){
        this.imageRes = imageRes;
    }
    
    /**
     * 设置文字内容
     * @param texts
     */
    public void setTexts(String[] texts){
        this.texts = texts;
    }
    
    /**
     * 设置高度
     * @param height
     */
    public void setHeight(int height){
        this.height = height;
    }
    
    /**
     * 设置显示的位置
     * @param anchor
     */
    public void setAnchorView(View anchor){
        anchorView = anchor;
    }
    
    /**
     * 获取PulldownMenuView对象
     * 以下拉的形式展现出来菜单
     * @return
     */
    public PulldownMenuView getPulldownMenuView(String currentItem){
        PulldownMenuView menu = new PulldownMenuView(context);
        menu.setImageRes(imageRes);
        menu.setMenuText(texts);
        menu.setHeight(height);
        menu.setAnchorView(anchorView);
        menu.setCurrentItem(currentItem);
        menu.setBackground(R.drawable.navigation_bg);
        
        return menu;
    }
    
    /**
     * 获取PulldownMenuView对象
     * 以向上弹出的方式展现出来菜单
     * @return
     */
    public PulldownMenuView getPopupMenuView(){
        PulldownMenuView menu = new PulldownMenuView(context);
        menu.setImageRes(imageRes);
        menu.setMenuText(texts);
        // menu.setLocation(Gravity.BOTTOM | Gravity.CENTER);
        menu.setAnimStyle(R.style.pulldown_in_out);
        menu.setBackground(R.drawable.navigation_bg);
        
        return menu;
    }
}
复制代码

 

　　既然是使用PopupWindow实现我们的效果，当然了，它也可以以向上弹出的方式展现。在我这个示例中，需要它展现的位置是在顶部横条下面展现，所以设置：

menu.setAnchorView(anchorView);

 

　　另外，在MainActivity中需要设置它的显示高度，在这里高度需要在顶部横条和底部RadioGroup之间，这就需要我们获取手机屏幕的高度减去顶部横条的高度，再减去底部RadioGroup的高度，最后减去手机菜单栏的高度。在点击某项菜单后，还需要将顶部中间文字和右边三角图片进行相应的变换。代码如下所示：

复制代码 
package com.navigation.acitvity;

import com.navigation.constant.ConstantCategoryMenu;
import com.navigation.control.PulldownMenuView;
import com.navigation.control.PulldownMenuView.OnMenuItemClickListener;
import com.navigation.utility.DeviceUtility;
import com.navigation.utility.MenuUtility;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.AdapterView;
import android.widget.FrameLayout;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.TextView;

/**
 * Android实现下拉导航选择菜单效果
 * @Description: Android实现下拉导航选择菜单效果

 * @File: MainActivity.java

 * @Package com.navigation.acitvity

 * @Author Hanyonglu

 * @Date 2012-7-28 下午06:08:27

 * @Version V1.0
 */
public class MainActivity extends Activity {
    // 今日头条LinearLayout
    private LinearLayout linearLayoutTopic = null;
    // 界面布局
    private RelativeLayout layoutHeader = null;
    private LinearLayout layoutBottom = null;
    private FrameLayout layoutBody = null;
    // PulldownMenuView基本操作类
    private MenuUtility menuUtility = null;
    // PulldownMenuView对象
    private PulldownMenuView pullDownMenu = null;
    private TextView tvTopic = null;
    private ImageView ivTopic = null;
    
    private int height = 0;
    
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        // 初始化
        initViews();
    }
    
    /**
     * 初始化
     */
    protected void initViews(){    
        ivTopic = (ImageView) findViewById(R.id.imageViewTopic);
        tvTopic = (TextView) findViewById(R.id.textViewTopic);
        
        linearLayoutTopic = (LinearLayout)findViewById(R.id.linearLayoutTopic);
        linearLayoutTopic.setOnClickListener(TopicOnClickListener);
        layoutHeader = (RelativeLayout) findViewById(R.id.layout_top_header);
        layoutBottom = (LinearLayout) findViewById(R.id.layout_bottom);
        layoutBody = (FrameLayout) findViewById(R.id.layout_body);
        
        height = DeviceUtility.getScreenSize(this)[1] - 
                 layoutHeader.getLayoutParams().height - 
                   layoutBottom.getLayoutParams().height -
                   DeviceUtility.getStatusBarHeight(this);
        
        menuUtility = new MenuUtility(
                MainActivity.this, 
                ConstantCategoryMenu.newsImageRes,
                ConstantCategoryMenu.newsMenuTexts,
                height,layoutHeader);
    }
    
    /**
     * 显示PulldownMenuView
     */
    protected void showPulldownMenu(){
        pullDownMenu = menuUtility.getPulldownMenuView((String)tvTopic.getText());
        ivTopic.setImageResource(R.drawable.ic_menu_trangle_up);
    }
    
    /**
     * 隐藏PulldownMenuView
     */
    protected void hidePulldownMenu(){
        pullDownMenu.releasePopupMenuView();
        ivTopic.setImageResource(R.drawable.ic_menu_trangle_down);
    }
    
    // 顶部今日头条事件监听器
    private OnClickListener TopicOnClickListener = new OnClickListener() {
        @Override
        public void onClick(View v) {
            // 开始显示下拉菜单
            showPulldownMenu();
            
            // TODO Auto-generated method stub
            pullDownMenu.setOnMenuItemClickListener(new OnMenuItemClickListener() {
                @Override
                public void onMenuItemClick(AdapterView<?> parent, View view, int position) {
                    // TODO Auto-generated method stub
                    tvTopic.setText(ConstantCategoryMenu.newsMenuTexts[position]);
                    layoutBody.setBackgroundResource(ConstantCategoryMenu.newsBodyRes[position]);
                }
                
                @Override
                public void hideMenu() {
                    // TODO Auto-generated method stub
                    hidePulldownMenu();
                }
            });
            
            pullDownMenu.show();
        }
    };
}
复制代码

 

　　我们在获取MainActivity中顶部横条和底部RadioGroup的高度时需要注意在布局文件中设置其相应的layout_height，否则，我们是获取不到其高度的。程序中间的主体部分是截取了几张图片，这个大家可以根据自己的需要设置成自己的数据格式。这点知道就可以了。

 

　　以上便是Android中实现下拉导航选择菜单效果的实现过程，是在PopupWindow中嵌入GridView实现，当然也可以在PopupWindow中嵌入ListView等各种控件实现相应的效果，也可以对PopupWindow实现各种和样的变幻效果，具体过程这里就不再详述了，有兴趣的朋友我们可以一起探讨。

雷子的窝
关注
专栏目录
Android自定义view实现下拉筛选菜单（仿美团下拉）app-debug.apk
04-01
仿美团下拉筛选菜单，代码详细地址http://.ytsyt.cn/post/12.html
android下拉菜单——选择星座
04-19
NULL 博文链接：https://hotch.iteye.com/blog/1868298
Android下拉菜单
u014029141的博客
03-20 476
下拉列表 Spinner。  Spinner的使用，可以极大提高用户的体验性。当需要用户选择的时候，可以提供一个下拉列表将所有可选的项列出来。供用户选择。  Demo如下，可以留作参考  一、使用数组作为数据源  1.新建一个android的工程  2.工程的layout.xml文件如下：声明一个TextView控件和一个Spinner控件 3.java代码
android下拉菜单总结
唐诺
04-15 5392
Android下拉菜单总结： Spinner： Spinner自定义样式，下拉图标 https://www.runoob.com/w3cnote/android-tutorial-spinner.html https://blog.csdn.net/cyan20115/article/details/106551693 PopuWindow（背景会遮挡标题栏）： https://www.runoob.com/w3cnote/android-tutorial-popupwindow.html ht
推荐开源项目：Android下拉菜单DropdownMenu
gitblog_00094的博客
05-17 697
推荐开源项目：Android下拉菜单DropdownMenu DropDownMenuDropDownMenu for Android,Filter the list based on multiple condition.项目地址:https://gitcode.com/gh_mirrors/dropd/DropDownMenu 项目介绍 在Android应用开发中，我们常常需要实现一种多条件...
Android实现下拉导航选择菜单效果.zip
最新发布
08-26
可借鉴此优质项目实现复刻，也可基于此项目来扩展开发出更多功能 #注 1. 本资源仅用于开源学习和技术交流。不可商用等，一切后果由使用者承担 2. 部分字体及插图等来自网络，若是侵权请联系删除，本人不对所涉及的...
Android实现下拉导航菜单效果
"Android仿今日头条APP实现下拉导航选择菜单效果" 在Android开发中，创建一个仿照今日头条APP的下拉导航选择菜单是一项常见的需求，它可以提升应用的用户体验，让用户更方便地在不同内容之间切换。这个效果通常用于...
Android自定义view实现下拉筛选菜单
04-01
Android自定义view实现下拉筛选菜单（仿美团下拉），源代码地址 http://www.ytsyt.cn/post/12.html
Android封装popwindow类（下拉菜单弹出和收缩效果）
07-22
popwindow 实现下拉菜单的弹出和收缩效果 http://blog.csdn.net/jdsjlzx/article/details/52000107资源
Android自定义下拉菜单示例
08-30
本示例完整实现了自定义下拉菜单的功能，初学者可快速掌握自定义下拉菜单的技巧，有关具体的实现细节请参考博文：http://blog.csdn.net/l1028386804/article/details/48101651
Android仿微信下拉列表实现（加顶部菜单栏和底部菜单栏）
03-21
Android仿微信下拉列表实现（加顶部菜单栏和底部菜单栏），具体看博文blog.csdn.net/evankaka/article/details/44179321
android 下拉菜单实现,Android自定义控件：下拉菜单的实现与优化
weixin_39901518的博客
05-27 533
下拉菜单美团首页类似的下拉弹出菜单工程中经常遇到的控件，不同工程中菜单条目的类型与数量也不一样所以需要根据实际需要填充不同内容。先写个demo，一倍不时之需吧。既然每个项目用到的菜单样式不同，此时我们必须根据实际情况填充，这样就需要将容器和内容分开。容器容器的画当然就使用popWindow了，我们需要在点击指定控件后弹出window，需要1.指定当前window的位置及大小2.指定window出方...
Android 简单的下拉选择框实现
QG
05-11 1695
Android 简单的下拉选择框实现
android 简单的下拉选择框实现（ListPopupWindow）
weixin_42602900的博客
05-13 2221
android 使用ListPopupWindow 简单的实现下拉选择框
android制作下拉选择_下拉菜单一：最全一级下拉菜单的制作方法
weixin_39892565的博客
12-01 780
Excel下拉菜单制作共三期，今天来给大家分享第一期：一级下拉菜单的制作全技巧，希望可以帮助到大家。操作方法一、快捷键法 操作步骤为：首先，在需要建立下拉菜单的列中依次输入菜单选项。然后 ，选中其下方空白单元格，然后按Alt+↓组合键，即可生成一个快捷式下拉菜单。二、数据验证法 其实，工作中最常用的方法就是利用数据的有有效性制作Excel下拉菜单。具体操作步骤如下： 第一步，添加辅助列(O列),在...
Android中的下拉选择菜单（封装控件）
carter_yu的博客
01-28 9366
在应用中常见的一种点击下拉菜单，应用次数很多，今天找时间抽取出来封装成类。( 源码在底部 )先看一眼效果图：功能介绍： 菜单按钮的默认内容可以自定义； 下拉菜单的内容可以自定义； 选中菜单中的内容后，菜单按钮进行切换，并且收起下拉菜单； 下边是代码：public class PullDownMenu extends LinearLayout { // 选中之后是否需要搜索 privat
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值