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

直接看栗子吧,效果基本实现,界面微调和弹窗的优化,去做的话会很耗时说,暂时就酱紫了。上传效果动态图太大了,直接手机截图的效果图如下:

至于代码的实现主要就是自定义的菜单栏,和用 PopupWindow 实现弹窗了。仔细看代码很好懂的。

1.主界面布局代码如下:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <FrameLayout
        android:id="@+id/frame_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/frameMenu"
        android:layout_alignParentTop="true" >
    </FrameLayout>

    <FrameLayout
        android:id="@+id/frameMenu"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true" >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/skin_tabbar_bg"
            android:orientation="horizontal" >

            <!-- 动态 -->

            <FrameLayout
                android:id="@+id/layout_at"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1" >

                <ImageView
                    android:id="@+id/image_at"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="top|center"
                    android:src="@drawable/skin_tabbar_icon_auth_select" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="bottom|center"
                    android:text="@string/skin_tabbar_icon_auth"
                    android:textColor="@android:color/black"
                    android:textSize="12sp" />
            </FrameLayout>

            <!-- 与我相关 -->

            <FrameLayout
                android:id="@+id/layout_auth"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1" >

                <ImageView
                    android:id="@+id/image_auth"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="top|center"
                    android:src="@drawable/skin_tabbar_icon_at_select" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="bottom|center"
                    android:text="@string/skin_tabbar_icon_at"
                    android:textColor="@android:color/black"
                    android:textSize="12sp" />
            </FrameLayout>

            <!-- 留白 -->

            <FrameLayout
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1" >
            </FrameLayout>

            <!-- 我的空间 -->

            <FrameLayout
                android:id="@+id/layout_space"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1" >

                <ImageView
                    android:id="@+id/image_space"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="top|center"
                    android:src="@drawable/skin_tabbar_icon_space_select" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="bottom|center"
                    android:text="@string/skin_tabbar_icon_space"
                    android:textColor="@android:color/black"
                    android:textSize="12sp" />
            </FrameLayout>

            <!-- 玩吧 -->

            <FrameLayout
                android:id="@+id/layout_more"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1" >

                <ImageView
                    android:id="@+id/image_more"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="top|center"
                    android:src="@drawable/skin_tabbar_icon_more_select" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="bottom|center"
                    android:text="@string/skin_tabbar_icon_more"
                    android:textColor="@android:color/black"
                    android:textSize="12sp" />
            </FrameLayout>
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="1px"
            android:background="@android:color/black" >
        </LinearLayout>
    </FrameLayout>

    <!-- 中间按钮背景 -->

    <ImageView
        android:id="@+id/toggle_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignTop="@+id/frameMenu"
        android:layout_centerInParent="true"
        android:src="@drawable/skin_tabbar_btn" />

    <!-- 中间按钮 -->

    <ImageView
        android:id="@+id/plus_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignTop="@+id/frameMenu"
        android:layout_centerInParent="true"
        android:src="@drawable/skin_tabbar_icon_select" />

</RelativeLayout>

activity_main.xml

2.弹窗布局,就是几个图标的显示,比较简单的,可以看代码

3.然后就是主界面逻辑代码了,菜单栏按钮事件控制页面的显示,可以图标的选中状态,已经弹窗的实现,代码如下:

package com.yanis.yc_ui_qzone;

import android.content.Context;
import android.graphics.drawable.BitmapDrawable;
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentTransaction;
import android.util.DisplayMetrics;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.View.OnTouchListener;
import android.widget.FrameLayout;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.PopupWindow;
import android.widget.PopupWindow.OnDismissListener;

public class MainActivity extends FragmentActivity implements OnClickListener {
    // 定义Fragment页面
    private FragmentAt fragmentAt;
    private FragmentAuth fragmentAuth;
    private FragmentSpace fragmentSpace;
    private FragmentMore fragmentMore;
    // 定义布局对象
    private FrameLayout atFl, authFl, spaceFl, moreFl;

    // 定义图片组件对象
    private ImageView atIv, authIv, spaceIv, moreIv;

    // 定义按钮图片组件
    private ImageView toggleImageView, plusImageView;

    // 定义PopupWindow
    private PopupWindow popWindow;
    // 获取手机屏幕分辨率的类
    private DisplayMetrics dm;

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

        initView();

        initData();

        // 初始化默认为选中点击了“动态”按钮
        clickAtBtn();
    }

    /**
     * 初始化组件
     */
    private void initView() {
        // 实例化布局对象
        atFl = (FrameLayout) findViewById(R.id.layout_at);
        authFl = (FrameLayout) findViewById(R.id.layout_auth);
        spaceFl = (FrameLayout) findViewById(R.id.layout_space);
        moreFl = (FrameLayout) findViewById(R.id.layout_more);

        // 实例化图片组件对象
        atIv = (ImageView) findViewById(R.id.image_at);
        authIv = (ImageView) findViewById(R.id.image_space);
        spaceIv = (ImageView) findViewById(R.id.image_space);
        moreIv = (ImageView) findViewById(R.id.image_more);

        // 实例化按钮图片组件
        toggleImageView = (ImageView) findViewById(R.id.toggle_btn);
        plusImageView = (ImageView) findViewById(R.id.plus_btn);

    }

    /**
     * 初始化数据
     */
    private void initData() {
        // 给布局对象设置监听
        atFl.setOnClickListener(this);
        authFl.setOnClickListener(this);
        spaceFl.setOnClickListener(this);
        moreFl.setOnClickListener(this);

        // 给按钮图片设置监听
        toggleImageView.setOnClickListener(this);
    }

    /**
     * 点击事件
     */
    @Override
    public void onClick(View v) {
        switch (v.getId()) {
        // 点击动态按钮
        case R.id.layout_at:
            clickAtBtn();
            break;
        // 点击与我相关按钮
        case R.id.layout_auth:
            clickAuthBtn();
            break;
        // 点击我的空间按钮
        case R.id.layout_space:
            clickSpaceBtn();
            break;
        // 点击更多按钮
        case R.id.layout_more:
            clickMoreBtn();
            break;
        // 点击中间按钮
        case R.id.toggle_btn:
            clickToggleBtn();
            break;
        }
    }

    /**
     * 点击了“动态”按钮
     */
    private void clickAtBtn() {
        // 实例化Fragment页面
        fragmentAt = new FragmentAt();
        // 得到Fragment事务管理器
        FragmentTransaction fragmentTransaction = this
                .getSupportFragmentManager().beginTransaction();
        // 替换当前的页面
        fragmentTransaction.replace(R.id.frame_content, fragmentAt);
        // 事务管理提交
        fragmentTransaction.commit();
        // 改变选中状态
        atFl.setSelected(true);
        atIv.setSelected(true);

        authFl.setSelected(false);
        authIv.setSelected(false);

        spaceFl.setSelected(false);
        spaceIv.setSelected(false);

        moreFl.setSelected(false);
        moreIv.setSelected(false);
    }

    /**
     * 点击了“与我相关”按钮
     */
    private void clickAuthBtn() {
        // 实例化Fragment页面
        fragmentAuth = new FragmentAuth();
        // 得到Fragment事务管理器
        FragmentTransaction fragmentTransaction = this
                .getSupportFragmentManager().beginTransaction();
        // 替换当前的页面
        fragmentTransaction.replace(R.id.frame_content, fragmentAuth);
        // 事务管理提交
        fragmentTransaction.commit();

        atFl.setSelected(false);
        atIv.setSelected(false);

        authFl.setSelected(true);
        authIv.setSelected(true);

        spaceFl.setSelected(false);
        spaceIv.setSelected(false);

        moreFl.setSelected(false);
        moreIv.setSelected(false);
    }

    /**
     * 点击了“我的空间”按钮
     */
    private void clickSpaceBtn() {
        // 实例化Fragment页面
        fragmentSpace = new FragmentSpace();
        // 得到Fragment事务管理器
        FragmentTransaction fragmentTransaction = this
                .getSupportFragmentManager().beginTransaction();
        // 替换当前的页面
        fragmentTransaction.replace(R.id.frame_content, fragmentSpace);
        // 事务管理提交
        fragmentTransaction.commit();

        atFl.setSelected(false);
        atIv.setSelected(false);

        authFl.setSelected(false);
        authIv.setSelected(false);

        spaceFl.setSelected(true);
        spaceIv.setSelected(true);

        moreFl.setSelected(false);
        moreIv.setSelected(false);
    }

    /**
     * 点击了“更多”按钮
     */
    private void clickMoreBtn() {
        // 实例化Fragment页面
        fragmentMore = new FragmentMore();
        // 得到Fragment事务管理器
        FragmentTransaction fragmentTransaction = this
                .getSupportFragmentManager().beginTransaction();
        // 替换当前的页面
        fragmentTransaction.replace(R.id.frame_content, fragmentMore);
        // 事务管理提交
        fragmentTransaction.commit();

        atFl.setSelected(false);
        atIv.setSelected(false);

        authFl.setSelected(false);
        authIv.setSelected(false);

        spaceFl.setSelected(false);
        spaceIv.setSelected(false);

        moreFl.setSelected(true);
        moreIv.setSelected(true);
    }

    /**
     * 点击了中间按钮
     */
    private void clickToggleBtn() {
        showPopupWindow(toggleImageView);
        // 改变按钮显示的图片为按下时的状态
        plusImageView.setSelected(true);
    }

    /**
     * 改变显示的按钮图片为正常状态
     */
    private void changeButtonImage() {
        plusImageView.setSelected(false);
    }

    /**
     * 显示PopupWindow弹出菜单
     */
    private void showPopupWindow(View parent) {
        if (popWindow == null) {
            LayoutInflater layoutInflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);

            View view = layoutInflater.inflate(R.layout.popwindow_layout, null);
            dm = new DisplayMetrics();
            getWindowManager().getDefaultDisplay().getMetrics(dm);
            // 创建一个PopuWidow对象
            popWindow = new PopupWindow(view, dm.widthPixels, LinearLayout.LayoutParams.WRAP_CONTENT);
        }
        // 使其聚集 ,要想监听菜单里控件的事件就必须要调用此方法
        popWindow.setFocusable(true);
        // 设置允许在外点击消失
        popWindow.setOutsideTouchable(true);
        // 设置背景,这个是为了点击“返回Back”也能使其消失,并且并不会影响你的背景
        popWindow.setBackgroundDrawable(new BitmapDrawable());
        // PopupWindow的显示及位置设置
        // popWindow.showAtLocation(parent, Gravity.FILL, 0, 0);
        popWindow.showAsDropDown(parent, 0,0);

        popWindow.setOnDismissListener(new OnDismissListener() {
            @Override
            public void onDismiss() {
                // 改变显示的按钮图片为正常状态
                changeButtonImage();
            }
        });

        // 监听触屏事件
        popWindow.setTouchInterceptor(new OnTouchListener() {
            public boolean onTouch(View view, MotionEvent event) {
                // 改变显示的按钮图片为正常状态
                changeButtonImage();
                popWindow.dismiss();
                return false;
            }
        });
    }
}

MainActivity

4.其他的请看源代码吧 o(∩_∩)o

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

时间: 2024-10-19 02:41:04

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

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

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

【转】【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设计与开发】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设计与开发】9:滑动菜单栏(一)开源项目SlidingMenu的使用和示例

一.SlidingMenu简介 相信大家对SlidingMenu都不陌生了,它是一种比较新的设置界面或配置界面的效果,在主界面左滑或者右滑出现设置界面效果,能方便的进行各种操作.很多优秀的应用都采用了这种界面方案,像facebook.人人网.everynote.Google+等等.如下图所示: 因为效果确实比较新颖,所以在很多的应用开发中去实现此效果,解决的办法也是不尽相同.诸多比较以后发 现,还是GitHub上的开源项目SlidingMenu提供了最佳的实现:定制灵活.各种阴影和渐变以及动画的

【Android UI设计与开发】8.顶部标题栏(一)ActionBar 奥义&#183;详解

原文地址:http://www.cnblogs.com/yc-755909659/p/4290784.html 一.ActionBar介绍 在Android 3.0中除了我们重点讲解的Fragment外,Action Bar也是一个非常重要的交互元素,Action Bar取代了传统的tittle bar和menu,在程序运行中一直置于顶部,对于Android平板设备来说屏幕更大它的标题使用Action Bar来设计可以展示更多丰富的内容,方便操控. 二.ActionBar的功能 用图的方式来讲解

【Android UI设计与开发】顶部标题栏(一)ActionBar 奥义&#183;详解

转自:http://www.cnblogs.com/yc-755909659/p/4290784.html 一.ActionBar介绍 在Android 3.0中除了我们重点讲解的Fragment外,Action Bar也是一个非常重要的交互元素,Action Bar取代了传统的tittle bar和menu,在程序运行中一直置于顶部,对于Android平板设备来说屏幕更大它的标题使用Action Bar来设计可以展示更多丰富的内容,方便操控. 二.ActionBar的功能 用图的方式来讲解它的

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

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