高仿网易严选底部弹出菜单

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

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

show.gif

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

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的界面，就相当于严选最下面的购物车立即购买等界面。

baseView.png

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

最后编辑于：2017.12.08 05:40:36

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 202,332评论 5赞 475
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 84,930评论 2赞 379
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 149,204评论 0赞 335
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,348评论 1赞 272
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,356评论 5赞 363
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,447评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,862评论 3赞 394
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,516评论 0赞 256
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,710评论 1赞 295
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,518评论 2赞 318
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,582评论 1赞 329
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,295评论 4赞 318
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,848评论 3赞 306
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,881评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,121评论 1赞 259
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 42,737评论 2赞 349
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,280评论 2赞 341

高仿网易严选底部弹出菜单

推荐阅读更多精彩内容