Android 根據(jù)手勢頂部View自動展示與隱藏效果

更新時間：2017年08月21日 10:20:52 作者：不甘猿人

這篇文章主要介紹了Android 根據(jù)手勢頂部View自動展示與隱藏效果，本文給大家介紹非常詳細包括實現(xiàn)原理和實例代碼，需要的朋友參考下吧

首先來看一下效果：

這里寫圖片描述

大體思路如下：

總體布局用了一個自定義的ViewGroup，里面包了兩個View（top View，bottomView）

我在bottomView里放了ViewPager，里面又有Fragment，F(xiàn)ragment里放的是ListView

原理：

ViewGroup在分發(fā)touchEvent的時候先通過手勢GestureDetector判斷手勢方向，當向上滑動的時候讓topView和bottomView同時向上移動，反之亦然。

整體思路不是很難如下是干貨：

布局文件

<com.lin.gesturedetector.MyViewGroup
  android:id="@+id/view_group"
  android:layout_width="match_parent"
  android:layout_height="match_parent">
  <include
   android:id="@+id/group_top"
   layout="@layout/view_top" />
  <include
   android:id="@+id/group_bottom"
   layout="@layout/view_bottom" />
 </com.lin.gesturedetector.MyViewGroup>

手勢監(jiān)聽重要的是打log看一下上下滑動是數(shù)值的變化，找到其規(guī)律：

 @Override
   public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {
    Log.i(tag, "onScroll -> distanceY" + distanceY);
    if (distanceY < 0) {// 手勢向下滑動是負值
     animatorLayoutOffset(1);
    }
    if (distanceY > 0) {
     animatorLayoutOffset(0f);
    }
    return true;
   }

一定記得在ViewGroup內(nèi)查找控件需要在onFinishInflate后才能找到：

 @Override
 protected void onFinishInflate() {
  super.onFinishInflate();
  viewTop = findViewById(R.id.group_top);
  viewBottom = findViewById(R.id.group_bottom);
 }

在ViewGroup布局的邏輯中需要處理的有一下幾點：

1、onMeasure的時候要把子控件測量出來

2、onLayout時需要手動將子控件布局

接下來就是監(jiān)聽手勢設(shè)置動畫，不停的onLayout以達到topView和bottomView的布局效果

@Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
  int width = MeasureSpec.getSize(widthMeasureSpec);
  int height = MeasureSpec.getSize(heightMeasureSpec);
  viewTop.measure(MeasureSpec.makeMeasureSpec(width, MeasureSpec.EXACTLY), MeasureSpec.makeMeasureSpec(height, MeasureSpec.AT_MOST));
  viewBottom.measure(MeasureSpec.makeMeasureSpec(width, MeasureSpec.EXACTLY), MeasureSpec.makeMeasureSpec(height, MeasureSpec.EXACTLY));
  setMeasuredDimension(width, height);
 }
 @Override
 protected void onLayout(boolean changed, int l, int t, int r, int b) {
  int topHeight = viewTop.getMeasuredHeight();
  float offset = layoutOffset * topHeight;
  int width = r - l;
  float topViewYTop = offset - topHeight;
  float topViewYBottom = topViewYTop + topHeight;
  viewTop.layout(0, (int) topViewYTop, width, (int) topViewYBottom);
  viewBottom.layout(0, (int) topViewYBottom, width, (int) topViewYBottom + viewBottom.getMeasuredHeight());
 }
 private void animatorLayoutOffset(float offset) {
  if (animator != null && animator.isRunning()) {
   return;
  }
  animator = ObjectAnimator.ofFloat(this, "layoutOffset", layoutOffset, offset);
  animator.setDuration(500);
  animator.start();
 }

項目地址在這：

GitHub

總結(jié)

以上所述是小編給大家介紹的Android 根據(jù)手勢頂部View自動展示與隱藏效果，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: