Android 모방 네트워크 는 아래쪽 팝 업 메뉴 효 과 를 엄 격 히 선택 합 니 다.

왕 이 엄 선 된 물건 을 볼 때 상품 상세 페이지 에서 그의 밑 에 메뉴 가 튀 어 나 오 는 것 을 보 았 다.본능 적 인 반응 은 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 를 계승 하고 layotbottom_popou.xml 는 이 전체 BottomPopupWindow View 의 골조 이 고 BottomPopupWindow View 가 초기 화 될 때 addView()를 통 해 전체 골조 구 조 를 불 러 옵 니 다.onDraw()에 baseView 를 한 번 만 불 러 오 면 됩 니 다.다시 불 러 오지 않 으 면 오류 가 발생 합 니 다.이렇게 해서 초기 화 에 성 공 했 습 니 다.처음에 baseView 의 인터페이스 만 불 러 오 면 맨 아래 의 카 트 를 엄 격 히 선택 하여 바로 구 매 하 는 등 화면 에 해당 합 니 다.

2.쇼 PopouView()를 호출 할 때 메뉴 를 표시 합 니 다.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.MATCHPARENT,RelativeLayout.LayoutParams.MATCH_PARENT));,그리고 팝 업 메뉴 의 View 즉 contentView 를 contentview 가 되면 팝 업 애니메이션 을 켜 면 됩 니 다.
3.마지막 으로 disMiss PopupView()방법 으로 팝 업 창 을 닫 습 니 다.endAnimation()방법 은 애니메이션 의 데 이 터 를 만 들 기 위 한 것 입 니 다.내용 영역 다시 시작 View 즉 contentView 의 애니메이션 종료,애니메이션 종료 후 contentview.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 의 높이 는 BottomPopupWindow View 의 높이 와 같 아야 합 니 다.demo 를 구체 적 으로 보 세 요)
BottomPopupWindowView.setBaseView(bottomView);
리 셋 된 Public void startValue(int value)와 Public void endValue(int value)는 애니메이션 감청 으로 재생 된 데 이 터 를 설정 하여 데이터 에 따라 애니메이션 을 실현 할 수 있 도록 합 니 다.엄 선 된 팝 업 과 상품 상세 정 보 를 보 여 주 는 애니메이션 은 간단 합 니 다.View 의 간격 을 계속 설정 하면 됩 니 다.
마지막 으로 demo 와 소스 링크 를 동봉 합 니 다https://github.com/jack921/BottomPopupWindowDemo
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.