在网易严选的看东西的时候在商品详情页里看到他的底部弹出菜单，本能反应是想用DottomSheetDialog或者PopupWindow来实现，可是发现实现不了他那种效果，于是就自己模仿一个像严选这样的底部弹出菜单。

不管是DottomSheetDialog或者PopupWindow他们的阴影背景都是全部覆盖的，这就造成除了菜单内容的View之外其他都是阴影的，而严选不是这样的。唠叨到此，首先展示效果图如下：

是不是还可以呢，由于代码量不多却注释详细，所以先贴出代码再一一详说:

BottomPopupWindowView类：

 public class BottomPopupWindowView extends LinearLayout{

  private AnimatorListener animatorListener;
  //底部内容的View
  private FrameLayout base_view;
  //内容的View
  private FrameLayout content_view;
  //背景的View
  private RelativeLayout popup_bg;
  //xml加载的View
  private View bottomPopouView;
  //外部加载的内容View
  private View contentView;
  //外部加载的底部内容View
  private View baseView;
  //手势的最小值
  private float minVelocity=0;
  //加载一次的判断值
  private boolean mDrawable=true;

  public void setAnimatorListener(AnimatorListener animatorListener) {
    this.animatorListener = animatorListener;
  }

  public void setBaseView(View baseView){
    this.baseView=baseView;
  }

  public void setContextView(View view){
    this.contentView=view;
  }

  public void setContentView(int id){
    this.contentView=LayoutInflater.from(getContext()).inflate(id,null);
  }

  public BottomPopupWindowView(Context context) {
    this(context,null);
  }

  public BottomPopupWindowView(Context context, @Nullable AttributeSet attrs) {
    this(context,attrs,0);
  }

  public BottomPopupWindowView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    //初始化各种数值
    minVelocity=ViewConfiguration.get(getContext()).getScaledTouchSlop();
    bottomPopouView= LayoutInflater.from(getContext()).inflate(R.layout.layout_bottom_popup,null);
    base_view=(FrameLayout)bottomPopouView.findViewById(R.id.bottom_view);
    content_view=(FrameLayout)bottomPopouView.findViewById(R.id.content_view);
    popup_bg=(RelativeLayout)bottomPopouView.findViewById(R.id.popup_bg);
    //把整个View都加载在LinearLayout里以显示出来
    addView(bottomPopouView);
    //背景颜色监听
    popup_bg.setOnClickListener(new OnClickListener() {
      @Override
      public void onClick(View v) {
        disMissPopupView();
      }
    });

    //屏蔽内容区域点击事件
    content_view.setOnClickListener(new OnClickListener() {
      @Override
      public void onClick(View view){}
    });

    //屏蔽底部内容区域点击事件
    base_view.setOnClickListener(new OnClickListener() {
      @Override
      public void onClick(View view){}
    });

    //内容区域判断是否向下，手势向下就关闭弹框
    content_view.setOnTouchListener(new OnTouchListener() {
      @Override
      public boolean onTouch(View view, MotionEvent motionEvent) {
        float y1=0,y2=0;
        if(motionEvent.getAction() == MotionEvent.ACTION_DOWN) {
          y1 = motionEvent.getY();
        }
        if(motionEvent.getAction() == MotionEvent.ACTION_UP){
          y2 = motionEvent.getY();
          if((y2-y1)>minVelocity){
            disMissPopupView();
          }
        }
        return false;
      }
    });

  }

  @Override
  protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    if(mDrawable&&baseView!=null){
      //刚开始加载底部内容区域，只需一次就行，多次报错
      base_view.addView(baseView);
      mDrawable=false;
    }
  }

  public void showPopouView(){
    if(contentView!=null){
      //开始动画数据
      startAnimation();
      //开启背景颜色的渐变动画
      popup_bg.setVisibility(View.VISIBLE);
      popup_bg.setAnimation(AnimationUtils.loadAnimation(getContext(), R.anim.bp_bottom_bg_in));
      //把这个区域全部显示出来
      ((BottomPopupWindowView)this).setLayoutParams(new RelativeLayout.LayoutParams(
          RelativeLayout.LayoutParams.MATCH_PARENT,RelativeLayout.LayoutParams.MATCH_PARENT));
      //假如内容区域
      content_view.addView(contentView,0);
      content_view.setVisibility(View.VISIBLE);
      //开启内容区域动画
      content_view.setAnimation(AnimationUtils.loadAnimation(getContext(),R.anim.bp_bottom_view_in));
    }
  }

  public void disMissPopupView(){
    //开始关闭动画数据
    endAnimation();
    //开启内容区域动画
    content_view.setVisibility(View.GONE);
    Animation animation=AnimationUtils.loadAnimation(getContext(),R.anim.bp_bottom_view_out);
    animation.setAnimationListener(new Animation.AnimationListener() {
      @Override
      public void onAnimationStart(Animation animation) {}
      @Override
      public void onAnimationRepeat(Animation animation) {}
      @Override
      public void onAnimationEnd(Animation animation) {
        //等内容区域动画结束后，清楚所有View
        content_view.removeAllViews();
        //开启背景颜色的渐变动画
        popup_bg.setVisibility(View.GONE);
        popup_bg.setAnimation(AnimationUtils.loadAnimation(getContext(), R.anim.bp_bottom_bg_out));
        //把整个控件的大小恢复到底部View区域的大小
        RelativeLayout.LayoutParams layoutParams=new RelativeLayout.LayoutParams(
            RelativeLayout.LayoutParams.MATCH_PARENT,getViewHeight((BottomPopupWindowView)BottomPopupWindowView.this));
        layoutParams.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM,-1);
        ((BottomPopupWindowView)BottomPopupWindowView.this).setLayoutParams(layoutParams);
      }
    });
    //开始动画
    content_view.setAnimation(animation);
  }

  //获取View的高度
  public int getViewHeight(View view){
    int width =View.MeasureSpec.makeMeasureSpec(0,View.MeasureSpec.UNSPECIFIED);
    int height =View.MeasureSpec.makeMeasureSpec(0,View.MeasureSpec.UNSPECIFIED);
    view.measure(width,height);
    return view.getMeasuredHeight();
  }

  //开始动画数据变化
  public void startAnimation(){
    ValueAnimator valueAnimator = ValueAnimator.ofInt(0,40);
    valueAnimator.setDuration(250);
    valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
      @Override
      public void onAnimationUpdate(ValueAnimator valueAnimator) {
        if(animatorListener!=null){
          animatorListener.startValue((int) valueAnimator.getAnimatedValue());
        }
      }
    });
    valueAnimator.start();
  }

  //结束动画数值变化
  public void endAnimation() {
    ValueAnimator valueAnimator = ValueAnimator.ofInt(40,0);
    valueAnimator.setDuration(250);
    valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
      @Override
      public void onAnimationUpdate(ValueAnimator valueAnimator) {
        if(animatorListener!=null){
          animatorListener.endValue((int) valueAnimator.getAnimatedValue());
        }
      }
    });
    valueAnimator.start();
  }

}

对应的加载的xml布局是：
layout_bottom_popou.xml如下：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:background="#707A7A7A">

  <RelativeLayout
    android:id="@+id/popup_bg"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#707A7A7A"
    android:layout_above="@+id/bottom_view"></RelativeLayout>

  <FrameLayout
    android:id="@+id/content_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_above="@+id/bottom_view"
    android:orientation="horizontal">
  </FrameLayout>

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

</RelativeLayout>

1.在BottomPopupWindowView是继承LinearLayout，而layout_bottom_popou.xml是这整个BottomPopupWindowView里的骨架，然后在BottomPopupWindowView初始化的时候通过addView()来加载整个骨架布局。在onDraw()里只需加载一次baseView就可以了，不然后重复加载导致报错。这样就初始化成功了，刚开始只会加载baseView的界面，就相当于严选最下面的购物车立即购买等界面。

2.当调用showPopouView()时显示菜单的。startAnimation()方法只是为了产生动画的数据。

popup_bg.setVisibility(View.VISIBLE);
popup_bg.setAnimation(AnimationUtils.loadAnimation(getContext(), R.anim.bp_bottom_bg_in));

只是为了开启背景渐变的动画没什么说的。最重要的是显示菜单实现是把BottomPopupWindowView的大小扩展到全屏，所以设置((BottomPopupWindowView)this).setLayoutParams(new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT,RelativeLayout.LayoutParams.MATCH_PARENT));,然后把弹出菜单的View即contentView装进content_view即可，然后开启弹出动画就实现了。

3.最后是disMissPopupView()方法关闭弹窗。endAnimation()方法只是为了产生动画的数据。再启动内容域View即content_View的退出动画，在动画结束后用content_view.removeAllViews();
起初菜单内容，再像上面一样开启背景颜色渐变动画，最后只需使BottomPopupWindowView恢复原来的baseView的大小及可以了，具体如下:

RelativeLayout.LayoutParams layoutParams=new RelativeLayout.LayoutParams(
     RelativeLayout.LayoutParams.MATCH_PARENT,getViewHeight((BottomPopupWindowView)BottomPopupWindowView.this));
        layoutParams.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM,-1);
        ((BottomPopupWindowView)BottomPopupWindowView.this).setLayoutParams(layoutParams);

这就是核心的代码功能了，代码量不多具体细节看上面的源码。

有人或许会问返回动画的数据有什么用，很简单就是为了实现严选菜单框出来时整个上面详情的缩放。具体看如下demo,首先给出界面xml,如下:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent">

  <LinearLayout
    android:id="@+id/main_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/colorAccent"
    android:orientation="vertical">

    <ImageView
      android:id="@+id/banner_img"
      android:layout_width="match_parent"
      android:layout_height="300dp"
      android:scaleType="fitXY"
      android:src="@mipmap/banner"/>

    <View
      android:layout_width="match_parent"
      android:layout_height="0.1dp"
      android:background="@color/colorPrimary"></View>

    <RelativeLayout
      android:id="@+id/guige"
      android:layout_width="match_parent"
      android:layout_height="50dp"
      android:background="#ffffff">

      <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_marginLeft="15dp"
        android:textSize="15dp"
        android:text="规格数量选择"/>

      <ImageView
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:layout_marginRight="15dp"
        android:src="@mipmap/ic_jiantou"/>

    </RelativeLayout>

    <View
      android:layout_width="match_parent"
      android:layout_height="0.1dp"
      android:background="@color/colorPrimary"></View>


  </LinearLayout>

  <com.jack.bottompopupwindowview.BottomPopupWindowView
    android:id="@+id/bottom_popup"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:background="@android:color/transparent"
    android:layout_alignParentBottom="true">
  </com.jack.bottompopupwindowview.BottomPopupWindowView>

</RelativeLayout>

这就是上面效果图的界面布局，没什么可以说的，再看事例代码如下：

public class MainActivity extends AppCompatActivity implements View.OnClickListener, AnimatorListener {

  private BottomPopupWindowView bottomPopupWindowView;
  private View contentView;
  private View bottomView;
  private LinearLayout mainView;

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    mainView=(LinearLayout)findViewById(R.id.main_view);

    bottomView=LayoutInflater.from(this).inflate(R.layout.layout_bottom_view,null);
    (bottomView.findViewById(R.id.promptly_buy)).setOnClickListener(this);
    (findViewById(R.id.guige)).setOnClickListener(this);
    bottomPopupWindowView=(BottomPopupWindowView)findViewById(R.id.bottom_popup);
    bottomPopupWindowView.setOnClickListener(this);
    bottomPopupWindowView.setBaseView(bottomView);
    contentView=LayoutInflater.from(this).inflate(R.layout.layout_content_view,null);
    bottomPopupWindowView.setContextView(contentView);
    (contentView.findViewById(R.id.ic_cancel)).setOnClickListener(this);
    bottomPopupWindowView.setAnimatorListener(this);
  }

  @Override
  public void onClick(View view) {
    switch(view.getId()){
      case R.id.promptly_buy:
      case R.id.ic_cancel:
        bottomPopupWindowView.disMissPopupView();
        break;
      case R.id.guige:
        bottomPopupWindowView.showPopouView();
        break;
    }
  }

  @Override
  public void startValue(int value) {
    setMargins (mainView,value-10,value,value-10,value);
  }

  @Override
  public void endValue(int value) {
    setMargins (mainView,value,value,value,value);
  }

  public static void setMargins (View v, int l, int t, int r, int b) {
    if (v.getLayoutParams() instanceof ViewGroup.MarginLayoutParams) {
      ViewGroup.MarginLayoutParams p = (ViewGroup.MarginLayoutParams) v.getLayoutParams();
      p.setMargins(l, t, r, b);
      v.requestLayout();
    }
  }
}

其中设置内容菜单的View
BottomPopupWindowView.setContextView(bottomView);
设置没有显示菜单时候显示的View(注:bottomView的高度要和BottomPopupWindowView的高度一样，具体看demo)
BottomPopupWindowView.setBaseView(bottomView);

而回调的public void startValue(int value)和public void endValue(int value)设置动画监听放回的数据，以便根据数据实现动画，严选的弹出和显示商品详情动画很简单就是不断设设置View的间距就可以了。

最后附上demo和源码链接https://github.com/jack921/BottomPopupWindowDemo

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

# Android弹出菜单  # Android底部弹出菜单  # Android仿网易严选底部弹出菜单  # Android使用CoordinatorLayout实现底部弹出菜单  # Android底部菜单栏实现的实例代码  # android SectorMenuView底部导航扇形菜单的实现代码  # android实现上滑屏幕隐藏底部菜单栏的示例  # Android仿微信底部菜单栏效果  # Android使用Activity实现从底部弹出菜单或窗口的方法  # Android自定义控件实现底部菜单(下)  # Android自定义控件实现底部菜单(上)  # Android如何实现底部菜单固定到底部  # 加载  # 弹出  # 只需  # 都是  # 这就是  # 不多  # 很简单  # 刚开始  # 报错  # 就可以  # 装进  # 没什么  # 结束后  # 他们的  # 还可以  # 可以说  # 这就  # 就行  # 只会  # 网易 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： php静态变量怎么调试_php静态变量作用域调试技巧【解答】  Laravel Telescope怎么调试_使用Laravel Telescope进行应用监控与调试  想要更高端的建设网站，这些原则一定要坚持！  Laravel怎么进行浏览器测试_Laravel Dusk自动化浏览器测试入门  如何在宝塔面板创建新站点？  如何在搬瓦工VPS快速搭建网站？  Laravel如何实现全文搜索功能？（Scout和Algolia示例）  Laravel怎么使用Collection集合方法_Laravel数组操作高级函数pluck与map【手册】  如何在局域网内绑定自建网站域名？  Laravel怎么创建自己的包(Package)_Laravel扩展包开发入门到发布  企业在线网站设计制作流程,想建设一个属于自己的企业网站，该如何去做？  佛山企业网站制作公司有哪些,沟通100网上服务官网？  如何在阿里云服务器自主搭建网站？  logo在线制作免费网站在线制作好吗,DW网页制作时，如何在网页标题前加上logo？  简单实现Android文件上传  Laravel Vite是做什么的_Laravel前端资源打包工具Vite配置与使用  Laravel如何使用Guzzle调用外部接口_Laravel发起HTTP请求与JSON数据解析【详解】  英语简历制作免费网站推荐,如何将简历翻译成英文？  关于BootStrap modal 在IOS9中不能弹出的解决方法(IOS 9 bootstrap modal ios 9 noticework)  湖南网站制作公司,湖南上善若水科技有限公司做什么的？  如何快速生成高效建站系统源代码？  北京企业网站设计制作公司,北京铁路集团官方网站？  Laravel队列由Redis驱动怎么配置_Laravel Redis队列使用教程  制作网站软件推荐手机版,如何制作属于自己的手机网站app应用？  Laravel Blade组件怎么用_Laravel可复用视图组件的创建与使用  Linux系统命令中screen命令详解  JavaScript如何实现继承_有哪些常用方法  详解免费开源的DotNet二维码操作组件ThoughtWorks.QRCode（.NET组件介绍之四）  如何快速打造个性化非模板自助建站？  Laravel如何与Pusher实现实时通信？（WebSocket示例）  实例解析angularjs的filter过滤器  如何在 Pandas 中基于一列条件计算另一列的分组均值  如何在万网自助建站中设置域名及备案？  Laravel如何实现数据库事务？（DB Facade示例）  Laravel与Inertia.js怎么结合_使用Laravel和Inertia构建现代单页应用  ,南京靠谱的征婚网站？  电视网站制作tvbox接口,云海电视怎样自定义添加电视源？  微信小程序 闭包写法详细介绍  如何快速搭建高效香港服务器网站？  购物网站制作费用多少,开办网上购物网站，需要办理哪些手续？  Android 常见的图片加载框架详细介绍  Laravel如何使用Service Provider注册服务_Laravel服务提供者配置与加载  js代码实现下拉菜单【推荐】  如何快速辨别茅台真假？关键步骤解析  Zeus浏览器网页版官网入口 宙斯浏览器官网在线通道  Windows10如何更改计算机工作组_Win10系统属性修改Workgroup  Laravel如何使用Scope本地作用域_Laravel模型常用查询逻辑封装技巧【手册】  阿里云高弹*务器配置方案｜支持分布式架构与多节点部署  Laravel如何使用Seeder填充数据_Laravel模型工厂Factory批量生成测试数据【方法】  米侠浏览器网页背景异常怎么办 米侠显示修复