Android仿網(wǎng)易嚴選底部彈出菜單效果

更新時間：2017年07月18日 15:27:45 作者：小杰921

這篇文章主要為大家詳細介紹了Android仿網(wǎng)易嚴選底部彈出菜單效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下

在網(wǎng)易嚴選的看東西的時候在商品詳情頁里看到他的底部彈出菜單，本能反應是想用DottomSheetDialog或者PopupWindow來實現(xiàn)，可是發(fā)現(xiàn)實現(xiàn)不了他那種效果，于是就自己模仿一個像嚴選這樣的底部彈出菜單。

不管是DottomSheetDialog或者PopupWindow他們的陰影背景都是全部覆蓋的，這就造成除了菜單內(nèi)容的View之外其他都是陰影的，而嚴選不是這樣的。嘮叨到此，首先展示效果圖如下：

是不是還可以呢，由于代碼量不多卻注釋詳細，所以先貼出代碼再一一詳說:

BottomPopupWindowView類：

 public class BottomPopupWindowView extends LinearLayout{

  private AnimatorListener animatorListener;
  //底部內(nèi)容的View
  private FrameLayout base_view;
  //內(nèi)容的View
  private FrameLayout content_view;
  //背景的View
  private RelativeLayout popup_bg;
  //xml加載的View
  private View bottomPopouView;
  //外部加載的內(nèi)容View
  private View contentView;
  //外部加載的底部內(nèi)容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);
    //初始化各種數(shù)值
    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);
    //背景顏色監(jiān)聽
    popup_bg.setOnClickListener(new OnClickListener() {
      @Override
      public void onClick(View v) {
        disMissPopupView();
      }
    });

    //屏蔽內(nèi)容區(qū)域點擊事件
    content_view.setOnClickListener(new OnClickListener() {
      @Override
      public void onClick(View view){}
    });

    //屏蔽底部內(nèi)容區(qū)域點擊事件
    base_view.setOnClickListener(new OnClickListener() {
      @Override
      public void onClick(View view){}
    });

    //內(nèi)容區(qū)域判斷是否向下，手勢向下就關閉彈框
    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){
      //剛開始加載底部內(nèi)容區(qū)域，只需一次就行，多次報錯
      base_view.addView(baseView);
      mDrawable=false;
    }
  }

  public void showPopouView(){
    if(contentView!=null){
      //開始動畫數(shù)據(jù)
      startAnimation();
      //開啟背景顏色的漸變動畫
      popup_bg.setVisibility(View.VISIBLE);
      popup_bg.setAnimation(AnimationUtils.loadAnimation(getContext(), R.anim.bp_bottom_bg_in));
      //把這個區(qū)域全部顯示出來
      ((BottomPopupWindowView)this).setLayoutParams(new RelativeLayout.LayoutParams(
          RelativeLayout.LayoutParams.MATCH_PARENT,RelativeLayout.LayoutParams.MATCH_PARENT));
      //假如內(nèi)容區(qū)域
      content_view.addView(contentView,0);
      content_view.setVisibility(View.VISIBLE);
      //開啟內(nèi)容區(qū)域動畫
      content_view.setAnimation(AnimationUtils.loadAnimation(getContext(),R.anim.bp_bottom_view_in));
    }
  }

  public void disMissPopupView(){
    //開始關閉動畫數(shù)據(jù)
    endAnimation();
    //開啟內(nèi)容區(qū)域動畫
    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) {
        //等內(nèi)容區(qū)域動畫結(jié)束后，清楚所有View
        content_view.removeAllViews();
        //開啟背景顏色的漸變動畫
        popup_bg.setVisibility(View.GONE);
        popup_bg.setAnimation(AnimationUtils.loadAnimation(getContext(), R.anim.bp_bottom_bg_out));
        //把整個控件的大小恢復到底部View區(qū)域的大小
        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();
  }

  //開始動畫數(shù)據(jù)變化
  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();
  }

  //結(jié)束動畫數(shù)值變化
  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.當調(diào)用showPopouView()時顯示菜單的。startAnimation()方法只是為了產(chǎn)生動畫的數(shù)據(jù)。

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

只是為了開啟背景漸變的動畫沒什么說的。最重要的是顯示菜單實現(xiàn)是把BottomPopupWindowView的大小擴展到全屏，所以設置((BottomPopupWindowView)this).setLayoutParams(new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT,RelativeLayout.LayoutParams.MATCH_PARENT));,然后把彈出菜單的View即contentView裝進content_view即可，然后開啟彈出動畫就實現(xiàn)了。

3.最后是disMissPopupView()方法關閉彈窗。endAnimation()方法只是為了產(chǎn)生動畫的數(shù)據(jù)。再啟動內(nèi)容域View即content_View的退出動畫，在動畫結(jié)束后用content_view.removeAllViews();
起初菜單內(nèi)容，再像上面一樣開啟背景顏色漸變動畫，最后只需使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);

這就是核心的代碼功能了，代碼量不多具體細節(jié)看上面的源碼。

有人或許會問返回動畫的數(shù)據(jù)有什么用，很簡單就是為了實現(xiàn)嚴選菜單框出來時整個上面詳情的縮放。具體看如下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="規(guī)格數(shù)量選擇"/>

      <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();
    }
  }
}

其中設置內(nèi)容菜單的View
BottomPopupWindowView.setContextView(bottomView);
設置沒有顯示菜單時候顯示的View(注:bottomView的高度要和BottomPopupWindowView的高度一樣，具體看demo)
BottomPopupWindowView.setBaseView(bottomView);

而回調(diào)的public void startValue(int value)和public void endValue(int value)設置動畫監(jiān)聽放回的數(shù)據(jù)，以便根據(jù)數(shù)據(jù)實現(xiàn)動畫，嚴選的彈出和顯示商品詳情動畫很簡單就是不斷設設置View的間距就可以了。

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

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

Android實現(xiàn)簡單C/S聊天室應用
這篇文章主要為大家詳細介紹了Android實現(xiàn)簡單C/S聊天室應用，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-01-01
Android重寫TextView實現(xiàn)文字整齊排版的方法(附demo源碼下載)
這篇文章主要介紹了Android重寫TextView實現(xiàn)文字整齊排版的方法,結(jié)合實例形式分析了Android重寫TextView實現(xiàn)文字整齊排版的相關技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下
2016-02-02
Android應用第一次安裝成功點擊“打開”后Home鍵切出應用后再點擊桌面圖標返回導致應用重啟問題的解決方法
這篇文章主要介紹了Android應用第一次安裝成功點擊“打開”后Home鍵切出應用后再點擊桌面圖標返回導致應用重啟問題的解決方法,需要的朋友可以參考下
2016-11-11
Android編程使用AlarmManager設置鬧鐘的方法
這篇文章主要介紹了Android編程使用AlarmManager設置鬧鐘的方法,結(jié)合具體實例分析了Android基于AlarmManager實現(xiàn)鬧鐘功能的設置、取消、顯示等相關操作技巧,需要的朋友可以參考下
2017-03-03
Android Studio中Run按鈕是灰色的快速解決方法
這篇文章主要介紹了Android Studio中Run按鈕是灰色的快速解決方法,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2018-03-03
Android自定義動態(tài)壁紙開發(fā)詳解
這篇文章主要為大家詳細介紹了Android自定義動態(tài)壁紙開發(fā)，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-01-01
Android自定義View實現(xiàn)圓環(huán)帶數(shù)字百分比進度條
這篇文章主要為大家詳細介紹了Android自定義View實現(xiàn)圓環(huán)帶數(shù)字百分比進度條，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2018-12-12
Android?ViewModel創(chuàng)建不受橫豎屏切換影響原理詳解
這篇文章主要為大家介紹了Android?ViewModel創(chuàng)建不受橫豎屏切換影響原理詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-03-03
Android 文件存儲與SharedPreferences存儲方式詳解用法
SharedPreferences是安卓平臺上一個輕量級的存儲類，用來保存應用的一些常用配置，比如Activity狀態(tài)，Activity暫停時，將此activity的狀態(tài)保存到SharedPereferences中；當Activity重載，系統(tǒng)回調(diào)方法onSaveInstanceState時，再從SharedPreferences中將值取出
2021-10-10
android教程之textview解析帶圖片的html示例
本文介紹的示例適用于android中需要解析帶圖片的htlm數(shù)據(jù),需要的朋友可以參考下
2014-02-02