【Android UI设计与开发】7.底部菜单栏(四)PopupWindow 实现显示仿腾讯新闻菜单

前一篇文章中有用到 PopupWindow 来实现弹窗的功能。简单介绍以下吧。

官方文档是这样解释的:这就是一个弹出窗口,可以用来显示一个任意视图。出现的弹出窗口是一个浮动容器的当前活动。

1.首先来个简单的栗子,效果如下:

只有两个布局文件,一个是弹窗布局(只有一张图片),一个是主界面布局(只有一个按钮)。

然后在主界面代码中实例 PopupWindow ,指定弹出的界面,在按钮点击事件中显示或隐藏弹窗就可以了,代码如下:

package com.yanis.demo;

import android.app.Activity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.LinearLayout.LayoutParams;
import android.widget.PopupWindow;

public class PopupWindowActivity extends Activity {
    PopupWindow pop;
    Button btn;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_popup_window);
        btn = (Button) findViewById(R.id.btnShowWindow);

        LayoutInflater inflater = LayoutInflater.from(this);
        // 引入窗口配置文件 - 即弹窗的界面
        View view = inflater.inflate(R.layout.my_popup_window, null);
        // PopupWindow实例化
        pop = new PopupWindow(view, LayoutParams.WRAP_CONTENT,
                LayoutParams.WRAP_CONTENT, false);

        btn.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                if (pop.isShowing()) {
                    // 隐藏窗口,如果设置了点击窗口外消失,则不需要此方式隐藏
                    pop.dismiss();
                } else {
                    // 弹出窗口显示内容视图,默认以锚定视图的左下角为起点,这里为点击按钮
                    pop.showAsDropDown(v);
                }
            }
        });

    }
}

2.知道了怎么实现 PopupWindow 弹窗,利用其特性替换系统自带的菜单栏,来个仿腾讯新闻的菜单吧,效果图如下:

布局什么的花点时间,慢慢调,自然就出来了,主要还是主界面的逻辑代码啊,菜单就是通过 PopupWindow 来显示的,具体代码如下:

package com.yanis.popup_window;

import android.app.Activity;
import android.os.Bundle;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.LinearLayout.LayoutParams;
import android.widget.PopupWindow;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends Activity implements OnClickListener {
    PopupWindow pop;
    TextView hideView;
    Button btnCancel;
    ImageView btnNight, btnWord, btnExit;
    View view;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        initView();
        initData();
    }

    /**
     * 初始化组件
     */
    private void initView() {
        hideView = (TextView) findViewById(R.id.hideView);

        LayoutInflater inflater = LayoutInflater.from(this);
        // 引入窗口配置文件 - 即弹窗的界面
        view = inflater.inflate(R.layout.menu_view, null);
        btnNight = (ImageView) view.findViewById(R.id.btnNight);
        btnWord = (ImageView) view.findViewById(R.id.btnWord);
        btnExit = (ImageView) view.findViewById(R.id.btnExit);
        btnCancel = (Button) view.findViewById(R.id.btnCancel);

    }

    /**
     * 初始化数据
     */
    private void initData() {
        btnNight.setOnClickListener(this);
        btnWord.setOnClickListener(this);
        btnExit.setOnClickListener(this);
        btnCancel.setOnClickListener(this);
        // PopupWindow实例化
        pop = new PopupWindow(view, LayoutParams.MATCH_PARENT,
                LayoutParams.WRAP_CONTENT, true);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        if (pop.isShowing()) {
            // 隐藏窗口,如果设置了点击窗口外消失,则不需要此方式隐藏
            pop.dismiss();
        } else {
            // 显示窗口,位置为父容器底部
            pop.showAtLocation(hideView, Gravity.BOTTOM, 0, 0);
        }
        return super.onCreateOptionsMenu(menu);
    }

    @Override
    public boolean onMenuOpened(int featureId, Menu menu) {
        if (pop.isShowing()) {
            // 隐藏窗口,如果设置了点击窗口外消失,则不需要此方式隐藏
            pop.dismiss();
        } else {
            // 弹出窗口显示内容视图,默认以锚定视图的左下角为起点,这里为点击按钮
            pop.showAtLocation(hideView, Gravity.BOTTOM, 0, 0);
        }
        return super.onMenuOpened(featureId, menu);
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
        case R.id.btnNight:
            closeThePopupWindow();
            Toast.makeText(MainActivity.this, "你点击了夜间模式", Toast.LENGTH_SHORT)
                    .show();
            break;
        case R.id.btnWord:
            closeThePopupWindow();
            Toast.makeText(MainActivity.this, "你点击了文本模式", Toast.LENGTH_SHORT)
                    .show();
            break;
        case R.id.btnExit:
            closeThePopupWindow();
            finish();
            break;
        case R.id.btnCancel:
            closeThePopupWindow();
            break;
        }
    }

    /**
     * 关闭 PopupWindow
     */
    private void closeThePopupWindow() {
        if (pop != null) {
            pop.dismiss();
        }
    }

}

源代码地址:https://github.com/YeXiaoChao/Yc_ui_popup_window

时间: 2024-10-12 18:43:39

【Android UI设计与开发】7.底部菜单栏(四)PopupWindow 实现显示仿腾讯新闻菜单的相关文章

【转】【Android UI设计与开发】第07期:底部菜单栏(二)Fragment的详细介绍和使用方法

原始地址:http://blog.csdn.net/yangyu20121224/article/category/1431917/1 由于TabActivity在Android4.0以后已经被完全弃用,那么我就不再浪费口水继续讲解它了,取而代之的是Fragment.Fragment是Android3.0新增的概念,Fragment翻译成中文是碎片的意思,不过却和Activity十分的相似,这一篇我花大量的篇幅来详细的讲解Fragment的介绍和使用方法. 一.Fragment的基础知识介绍  

【Android UI设计与开发】第05期:引导界面(五)实现应用程序只启动一次引导界面

[Android UI设计与开发]第05期:引导界面(五)实现应用程序只启动一次引导界面 jingqing 发表于 2013-7-11 14:42:02 浏览(229501) 这篇文章算是对整个引导界面开发专题的一个终结了吧,个人觉得大部分的引导界面基本上都是千篇一律的,只要熟练掌握了一个,基本上也就没什么好说的了,要是在今后的开发中遇到了更好玩,更有趣的引导界面,博主也会在这里及时的跟大家分享,今天的内容主要是教大家的应用程序只有在第一次启动的时候显示引导界面,以后在启动程序的时候就不再显示了

【Android UI设计与开发】第06期:底部菜单栏(一)使用TabActivity实现底部菜单栏

转载请注明出处:http://blog.csdn.net/yangyu20121224/article/details/8989063       从这一篇文章开始,我们将进入到一个应用程序主界面UI的开发和设计中了,底部菜单栏在Android的应用开发当中占有非常重要的地位.几乎所有的手机应用程序都有底部菜单栏这样的控件,主要是因为手机的屏幕大小有限,这样一种底部菜单栏实现起来的效果可以很方便的为用户切换自己所需要的界面,具有更强的交互性.底部菜单栏的样式和效果也是五花八门,多的数不胜数,但是

【Android UI设计与开发】第09期:底部菜单栏(四)Fragment+PopupWindow仿QQ空间最新版底部菜单栏

转载请注明出处:http://blog.csdn.net/yangyu20121224/article/details/9023451          在今天的这篇文章当中,我依然会以实战加理论结合的方式教大家如何设计出自己觉得很炫的UI界面.好的,话不多说,进入正题.今天的这篇文章主要是以仿QQ空间的底部菜单栏效果为主,实现的效果有: <1>实现了点击按钮时的切换图片效果: <2>实现了点击按钮时的切换界面效果: <3>实现了点击中间圆形按钮时弹出菜单以及按钮图片切

【Android UI设计与开发】6.底部菜单栏(三)使用Fragment+PopupWindow仿QQ空间最新版底部菜单栏

直接看栗子吧,效果基本实现,界面微调和弹窗的优化,去做的话会很耗时说,暂时就酱紫了.上传效果动态图太大了,直接手机截图的效果图如下: 至于代码的实现主要就是自定义的菜单栏,和用 PopupWindow 实现弹窗了.仔细看代码很好懂的. 1.主界面布局代码如下: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.and

【Android UI设计与开发】4.底部菜单栏(一)Fragment介绍和简单实现

TabActivity在Android4.0以后已经被完全弃用,取而代之的是Fragment.Fragment是Android3.0新增的概念,Fragment翻译成中文是碎片的意思,不过却和Activity十分的相似.以下内容适用于3.0及以上的版本,3.0以下就不再赘述. 官方文档地址:http://developer.android.com/reference/android/support/v4/app/Fragment.html 一.Fragment的基础知识介绍 1.Fragment

【Android UI设计与开发】5.底部菜单栏(二)使用Fragment实现底部菜单栏

既然 Fragment 取代了TabActivity,当然 TabActivity 的能实现的菜单栏,Fragment 当然也能实现.主要其实就是通过菜单栏的点击事件切换 Fragment 的显示和隐藏. 来看看栗子吧: 1.效果图来了: 2.代码具体实现 (1)对应的 Fragment 编辑代码和布局实现在前面的Fragment介绍和简单实现  中已经有提及,代码中没复杂的地方,此处略过,具体可看实例代码. (2)菜单栏实现,这里使用代码实现的,其实也可以用布局文件实现,代码如下: packa

【Android UI设计与开发】第07期:底部菜单栏(二)Fragment的详细介绍和使用方法

转载请注明出处:http://blog.csdn.net/yangyu20121224/article/details/8995025 由于TabActivity在Android4.0以后已经被完全弃用,那么我就不再浪费口水继续讲解它了,取而代之的是Fragment.Fragment是Android3.0新增的概念,Fragment翻译成中文是碎片的意思,不过却和Activity十分的相似,这一篇我花大量的篇幅来详细的讲解Fragment的介绍和使用方法. 一.Fragment的基础知识介绍  

【Android UI设计与开发】第08期:底部菜单栏(三)Fragment+FragmentTabHost实现仿新浪微博底部菜单栏

转载请注明出处:http://blog.csdn.net/yangyu20121224/article/details/9016223       在上一篇文章中,我们花了大量的篇幅来讲解Fragment这个新引进类的使用,目的就是为了让大家能够牢牢的掌握它的使用方法,以便读者在今后的开发中能够熟练的使用它. 一.实现效果图   二.项目工程结构 三.详细代码编写 1.主tab布局界面,main_tab_layout: <?xml version="1.0" encoding=&