android自定义popupwindow仿微信右上角弹出菜单效果

微信右上角的操作菜单看起来很好用,就照着仿了一下,不过是旧版微信的,手里刚好有一些旧版微信的资源图标,给大家分享一下。

不知道微信是用什么实现的,我使用popupwindow来实现,主要分为几块内容:

1、窗口布局文件:popwin_share.xml

 <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:background="@drawable/title_tools_bg"
  android:orientation="vertical" > 

  <LinearLayout
    android:id="@+id/layout_share"
    style="@style/fill_width"
    android:orientation="horizontal"
    android:background="@drawable/menu_left_item_selector"
    android:padding="5dp"> 

    <ImageView
      android:layout_marginLeft="7dp"
      style="@style/wrap"
      android:scaleType="fitCenter"
      android:src="@drawable/share" /> 

    <TextView
      style="@style/wrap"
      android:textColor="@color/white"
      android:textSize="@dimen/text18"
      android:layout_marginLeft="5dp"
      android:text="分享内容" />
  </LinearLayout> 

  <LinearLayout
    android:id="@+id/layout_copy"
    style="@style/fill_width"
    android:orientation="horizontal"
    android:background="@drawable/menu_left_item_selector"
    android:padding="5dp"> 

    <ImageView
      android:layout_marginLeft="5dp"
      style="@style/wrap"
      android:scaleType="fitCenter"
      android:src="@drawable/copy_pressed" /> 

    <TextView
      style="@style/wrap"
      android:textColor="@color/white"
      android:textSize="@dimen/text18"
      android:layout_marginLeft="5dp"
      android:text="复制结果" />
  </LinearLayout> 

</LinearLayout>

采用线性布局,因为里面是一行一行竖排的菜单,线性布局更容易控制。大布局里面放了两个垂直排列的线性布局,每个线性布局中分别有横向排列的imageview和textview,很简单的布局。大布局的背景用了一个图片,当然也可以自定义一些其他颜色。

2、popupwindow代码,我这里是自定义一个popupwindows类,继承自PopupWindow:

 package com.xjw.view; 

import com.xjw.translate.R; 

import android.app.Activity;
import android.graphics.drawable.ColorDrawable;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.AdapterView;
import android.widget.BaseAdapter;
import android.widget.LinearLayout;
import android.widget.ListView;
import android.widget.PopupWindow;
  /**
 * 项目名称:translate
 * 实现功能: 翻译详情界面,分享弹出窗口
 * 类名称:PopWinShare
 * 类描述:(该类的主要功能)
 * 创建人:徐纪伟
 * E-mail: xujiwei558@126.com
 * 创建时间:2014年10月18日 下午4:37:25
 * @version
 */
public class PopWinShare extends PopupWindow{
  private View mainView;
  private LinearLayout layoutShare, layoutCopy; 

 public PopWinShare(Activity paramActivity, View.OnClickListener paramOnClickListener, int paramInt1, int paramInt2){
     super(paramActivity);
     //窗口布局
    mainView = LayoutInflater.from(paramActivity).inflate(R.layout.popwin_share, null);
    //分享布局
    layoutShare = ((LinearLayout)mainView.findViewById(R.id.layout_share));
    //复制布局
    layoutCopy = (LinearLayout)mainView.findViewById(R.id.layout_copy);
    //设置每个子布局的事件监听器
    if (paramOnClickListener != null){
      layoutShare.setOnClickListener(paramOnClickListener);
      layoutCopy.setOnClickListener(paramOnClickListener);
    }
    setContentView(mainView);
    //设置宽度
    setWidth(paramInt1);
    //设置高度
    setHeight(paramInt2);
    //设置显示隐藏动画
    setAnimationStyle(R.style.AnimTools);
    //设置背景透明
    setBackgroundDrawable(new ColorDrawable(0));
  }
}

里面提供了一个构造方法,包含四个参数,第一个参数是上下文的activity,第二个是菜单的点击事件,从外边传递进来的,要绑定给每一行的菜单,具体的事件实现当然要写在activity中,后面两个分别是弹出窗口的宽度和高度。里面还包含了一个动画样式,窗口打开和关闭时出现动画的样式。

3、动画样式,显示动画,缩放动画:push_in.xml

<?xml version="1.0" encoding="utf-8"?>
<scale  xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/accelerate_decelerate_interpolator"
    android:fromXScale="1.0"
    android:toXScale="1.0"
    android:fromYScale="0"
    android:toYScale="1.0"
    android:pivotX="0"
    android:pivotY="10%"
    android:duration="200" /> 

关闭动画,也是缩放动画:push_out.xml

 <?xml version="1.0" encoding="utf-8"?> 

<scale  xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/accelerate_decelerate_interpolator"
    android:fromXScale="1.0"
    android:toXScale="1.0"
    android:fromYScale="1.0"
    android:toYScale="0"
    android:pivotX="0"
    android:pivotY="10%"
    android:duration="200" />

style样式定义:

 <style name="AnimTools" parent="@android:style/Animation">
   <item name="android:windowEnterAnimation">@anim/push_in</item>
   <item name="android:windowExitAnimation">@anim/push_out</item>
 </style>

到此为止我们的自定义窗口已经定义好了。接下来看使用。

 if (popWinShare == null) {
  //自定义的单击事件
  OnClickLintener paramOnClickListener = new OnClickLintener();
  popWinShare = new PopWinShare(TranslateDataContentActivity.this, paramOnClickListener, DisplayUtil.dip2px(context, 160), DisplayUtil.dip2px(context, 160));
  //监听窗口的焦点事件,点击窗口外面则取消显示
  popWinShare.getContentView().setOnFocusChangeListener(new View.OnFocusChangeListener() { 

    @Override
    public void onFocusChange(View v, boolean hasFocus) {
      if (!hasFocus) {
        popWinShare.dismiss();
      }
    }
  });
}
//设置默认获取焦点
popWinShare.setFocusable(true);
//以某个控件的x和y的偏移量位置开始显示窗口
popWinShare.showAsDropDown(btnTools, 0, 0);
//如果窗口存在,则更新
popWinShare.update();

每个子菜单的单击事件自定义内部类,在里面就可以写每个子菜单的单击事件啦,

class OnClickLintener implements OnClickListener{ 

    @Override
    public void onClick(View v) {
      switch (v.getId()) {
      case R.id.layout_share: 

        break;
      case R.id.layout_copy: 

        break; 

      default:
        break;
      } 

    } 

  }

效果预览:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Android开发Popwindow仿微信右上角下拉菜单实例代码

    先给大家看下效果图: MenuPopwindow: package com.cloudeye.android.cloudeye.view; import android.app.Activity; import android.content.Context; import android.graphics.drawable.ColorDrawable; import android.view.LayoutInflater; import android.view.View; import an

  • Android中微信小程序开发之弹出菜单

    先给大家展示下效果图,具体效果图如下所示: 具体代码如下所示: 1.index.js //index.js //获取应用实例 var app = getApp() Page({ data: { isPopping: false,//是否已经弹出 animationPlus: {},//旋转动画 animationcollect: {},//item位移,透明度 animationTranspond: {},//item位移,透明度 animationInput: {},//item位移,透明度

  • Android仿微信顶/底部菜单栏效果

    本文要实现仿微信微信底部菜单栏+顶部菜单栏,采用ViewPage来做,每一个page对应一个XML,当手指在ViewPage左右滑动时,就相应显示不同的page(其实就是xml)并且同时改变底部菜单按钮的图片变暗或变亮,同时如果点击底部菜单按钮,左右滑动page(其实就是xml)并且改变相应按钮的亮度. 一.布局 1.顶部菜单布局,命名为top_layout.xml <?xml version="1.0" encoding="utf-8"?> <R

  • Android开发之微信底部菜单栏实现的几种方法汇总

     实现方式 实现的方式有很多种 这里总结最常见的几种方式,以后再添加其他的. viewPager + RadioGroup viewPager + FragmentTabHost viewpager +TabLayout viewPager+RadioGroup 感觉这是最简单的一个了,我也就不贴代码 说说我理解的思路吧 通过给pager 和RadioGroup 添加监听,监听两个控件的变化 实现联动 当viewPager的显示pager改变就会触发监听 ,在监听中选中对应的RadioButto

  • Android仿微信菜单(Menu)(使用C#和Java分别实现)

    本篇是对安卓菜单使用编程方式实现,当然可以使用XML的方式完成同样的功能,基本Java和C#写法都是一致的,所以使用XML的方式在本篇中使用Java演示,需要注意的是,对于如果不是VS开发的话,那么资源文件名称必须以小写开头,否则会报错. 运行效果 C#实现 using Android.App; using Android.OS; using Android.Views; using Android.Widget; namespace MenuDemo { [Activity(Label = "

  • Android仿微信底部菜单栏效果

    前言 在市面上,大多数的APP都需要通过底部菜单栏来将程序的功能进行分类整理,通常都是分为3-5个大模块,从而正确有效地引导用户去使用我们的APP.实现底部菜单栏的方法也有很多种. 1.仿微信底部菜单栏(ViewPager+ImagerView+TextView) ......(其他方式后续会补充) 效果预览 首先来个开胃菜,看看实现效果: 先贴出项目所需的资源文件,这些可随个人自由更改颜色和文字 colors.xml <color name="bg_line_light_gray&quo

  • Android制作微信app顶部menu菜单(ActionBar)

    使用微信APP的小伙伴对于微信的ActionBar一定有印象,今天就带领大家一起实现以下这个效果. 第一步打开我们的开发工具,这里我使用的是Eclipse+ADT插件,然后创建我们的工程,这里选择Android的最低版本号为3.0或以上. 然后开始我们的"抄袭",首先打开我们微信,我们看到,顶部标题部分,分为左右两部分,左侧为"微信"两字,右侧则为搜索按钮+更多按钮,点击搜索按钮,会出现一个文本输入框.点击更多按钮,则会出现隐藏的menu菜单,分为:添加好友.发起群

  • Android仿微信底部菜单栏功能显示未读消息数量

    底部菜单栏很重要,我看了一下很多应用软件都是用了底部菜单栏,这里使用了tabhost做了一种通用的(就是可以像微信那样显示未读消息数量的,虽然之前也做过但是layout下的xml写的太臃肿,这里去掉了很多不必要的层,个人看起来还是不错的,所以贴出来方便以后使用). 先看一下做出来之后的效果: 以后使用的时候就可以换成自己项目的图片和字体了,主框架不用变哈哈, 首先是要布局layout下xml文件 main.xml: <?xml version="1.0" encoding=&qu

  • Android仿微信滑动弹出编辑、删除菜单效果、增加下拉刷新功能

    如何为不同的list item呈现不同的菜单,本文实例就为大家介绍了Android仿微信或QQ滑动弹出编辑.删除菜单效果.增加下拉刷新等功能的实现,分享给大家供大家参考,具体内容如下 效果图: 1. 下载开源项目,并将其中的liberary导入到自己的项目中: 2. 使用SwipeMenuListView代替ListView,在页面中布局: <android.support.v4.widget.SwipeRefreshLayout android:id="@+id/swipeRefresh

  • android自定义popupwindow仿微信右上角弹出菜单效果

    微信右上角的操作菜单看起来很好用,就照着仿了一下,不过是旧版微信的,手里刚好有一些旧版微信的资源图标,给大家分享一下. 不知道微信是用什么实现的,我使用popupwindow来实现,主要分为几块内容: 1.窗口布局文件:popwin_share.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com

  • Android自定义PopupWindow仿点击弹出分享功能

    本文实例自定义PopupWindow,点击弹出PopupWindow,背景变暗,仿点击弹出分享功能,供大家参考,具体内容如下 注:参照大神代码写的 自定义代码 package com.duanlian.popupwindowdemo; import android.app.Activity; import android.content.Context; import android.graphics.drawable.ColorDrawable; import android.view.Lay

  • PopupWindow仿微信浮层弹出框效果

    最近公司项目需要实现类似微信的浮层弹出框.研究发现是用PopupWindow实现的.而且可以自定义位置以及出现和退出时的动画,由于太晚了就不实现动画了,需要得同学请自己研究下.由于本人新手其中的不足和缺点请见谅. 代码如下: 首先是定义顶部按钮的main.xml文件 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.an

  • Android自定义PopWindow实现QQ、微信弹出菜单效果

    前段时间在个人开发的项目中需要用到弹出菜单,类似QQ右上角的弹出菜单,自己使用popwin的次数也不是很多,其中也遇到过一点问题,今天正好有时间就把一些经验分享给大家. 先来看看最终实现过后的效果怎么样,下面放上图 自定义的弹出菜单是继承的popwin,并不是view 因为没有必要重复造车轮,如果想要实现某种特殊的效果另说.首先创建类MyPopWindow继承Popwindow. public class MyPopWindow extends PopupWindow implements Vi

  • Android仿微信进度弹出框的实现方法

    MainActivity: package com.ruru.dialogproject; import android.app.Activity; import android.os.Bundle; import android.view.View; public class MainActivity extends Activity implements Runnable { LoadingDialog dialog; @Override protected void onCreate(Bu

  • Android使用popupWindow仿微信弹出框使用方法

    本文实例为大家分享了Android使用popupWindow仿微信弹出框的具体实现代码,供大家参考,具体内容如下 效果如下: 一.activity_main.xml代码 在activity_main.xml中设置"弹出框"按钮,并将activity_main.xml最外层设置一个id,代码如下 <androidx.drawerlayout.widget.DrawerLayout     xmlns:android="http://schemas.android.com/

  • flutter 实现点击下拉栏微信右上角弹出窗功能

    先看效果实现 需求分析 这个是使用 PopupRoute这个路由类进行实现 大概原理就是利用PopupRpute这个类进行改造,然后自定义一个页面,页面内镶嵌一个动画类,用来实现缩放动画 大概分为三部分,PopupRoute改造,弹出页面设置,动画类设置. 为什么选择PopupRoute? 可以镶嵌在flutter本身的路由管理之中 也就是逻辑操作都是正常的页面管理,可以手动管理,也可以用路由返回直接关掉,不会影响原有页面和布局 第一步,改造PopupRoute类 import 'package

  • IOS开发仿微信右侧弹出视图实现

    IOS开发仿微信右侧弹出视图实现 微信首页的+号,点击之后会弹出一个更多的视图,这个视图如何实现呢? 实现该效果可能需要以下技术要点: 1.图片拉伸,通过拉伸图片的中间的较小区域来保持图片的边上的形状 2.仿射变换,用到仿射变换的缩放,平移和合并,视图动画 3.navigationBar的样式设置 实现效果,如下: 本Demo图片来源微信安装包解压得到的图片 实现代码: // // ViewController.m // appXX-微信更多工具栏 // // Created by MRBean

  • Android自定义TextView仿微信朋友圈文字展开全文功能

    Android自定义TextView仿微信朋友圈文字信息,展开全文功能 代码及注释如下: 首先写一个xml文件 showmore.xml: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical

随机推荐