Android 自定义底部上拉控件的实现方法

前言

又到了新的一月，今天提供一个Android自定义底部上拉布局的实现，起因是自己在项目中需要实现这样一个控件，干脆自己写一个练练手。

写完了觉得能想到的需求都基本有了（可能会有其它需求，不过基本上改吧改吧就行了），又花了一点时间直接放到了Github上托管，希望能给您一些参考价值：

SlideBottomLayout-Android 简单易上手的Android底部上拉控件

先看一下实现效果：

分析一下这种控件的基本需求有以下几种：

1.有一个部分是能够作为把手（就是图中的handle，）进行拖拽的，这部分高度是暴露在界面中的 -> 需要实现：Handle按钮

* 特殊需求特殊分析，比如让这个Handle透明实现无Handle的效果

2.底部上啦布局是有一定高度限制的，不一定覆盖设备的整个屏幕 -> 需要自定义最大高度

3.当从底部上拉一点点时抬手，布局缩回，若超过一定高度，自动弹到最高，隐藏同理 -> 需要自定义自动到达顶部/隐藏的阈值

直接使用

直接使用也很简单，笔者进行了简单的封装，以供参考：

1. 在Project的build.gradle文件中添加：

allprojects {
repositories {
 ...
 maven { url 'https://jitpack.io' }
}
}

2.在Module的build.gradle文件中添加：

dependencies {
  compile 'com.github.qingmei2:SlideBottomLayout-Android:1.2.3'
}

3.Add view in your layout:

需要注意的是：为了简单实现，笔者偷了个懒，设定为该布局下只能有一个直接的子View(类似ScrollView)

因此如果您添加需要一个布局，请在外面嵌套一个ViewGroup：

<com.qingmei2.library.SlideBottomLayout
   android:id="@+id/slideLayout"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:layout_alignParentBottom="true"
   android:layout_marginTop="200dp"
   app:handler_height="50dp">
   <!--app:handler_height:该属性就是您要暴露出来Handle的高度，详见下方的TextView(id=handle)-->
   <!--Just one child-->
   <LinearLayout
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:orientation="vertical">
     <TextView
       android:id="@+id/handle"
       android:layout_width="match_parent"
       android:layout_height="50dp"
       android:background="#d95858"
       android:gravity="center"
       android:text="handle"
       android:textColor="@android:color/white"
       android:textSize="16sp" />
     <android.support.v7.widget.RecyclerView
       android:id="@+id/recycler_view"
       android:layout_width="match_parent"
       android:layout_height="wrap_content">
     </android.support.v7.widget.RecyclerView>
   </LinearLayout>
 </com.qingmei2.library.SlideBottomLayout>

实现步骤

具体代码如下，其中上述需求的设置方式都已经在代码中声明：

先看下属性声明：

<?xml version="1.0" encoding="utf-8"?>
<resources>
 <declare-styleable name="SlideBottomLayout">
   <attr name="handler_height" format="dimension"></attr>
 </declare-styleable>
</resources>

public class SlideBottomLayout extends LinearLayout {
 public void setShortSlideListener(ShortSlideListener listener) {
   this.shortSlideListener = listener;
 }
 private ShortSlideListener shortSlideListener;
 /**
  * The {@link MotionEvent#ACTION_DOWN} gesture location.
  */
 private int downY;
 /**
  * The {@link MotionEvent#ACTION_MOVE} gesture location.
  */
 private int moveY;
 /**
  * the value of moved distance by the gesture. When the value was modified and not exceed
  * the {@link #movedMaxDis}, then make this ViewGroup move.
  */
 private int movedDis;
 /**
  * The max distance that the {@link SlideBottomLayout} can scroll to, it used to compare with the
  * {@link #downY}, determine whether it can slide by the gesture.
  */
 private int movedMaxDis;
 /**
  * ChildView of the {@link SlideBottomLayout}, you can set a Layout such as the {@link LinearLayout}、
  * {@link android.widget.RelativeLayout} ect.
  * We set the rules that {@link SlideBottomLayout} just can have one child-view, or else get a
  * {@link RuntimeException} at {@link #onFinishInflate()}
  */
 private View childView;
 /**
  * The control {@link SlideBottomLayout} automatically switches the threshold of the state. if
  * this ViewGroup moved distance more than {@link #movedMaxDis} * it, switch the state of
  * {@link #arriveTop} right now.
  * </p>
  * See the {@link #touchActionUp(float)}.
  */
 private float hideWeight = 0.25f;
 //3.注意，这个接口用来设置「需要自定义自动到达顶部/隐藏的阈值」
 public void setHideWeight(float hideWeight) {
   if (hideWeight <= 0 || hideWeight > 1)
     throw new IllegalArgumentException("hideWeight should belong (0f,1f]");
   this.hideWeight = hideWeight;
 }
 private Scroller mScroller;
 /**
  * It means the {@link #childView} is arriving the top of parent or else.
  */
 private boolean arriveTop = false;
 /**
  * the {@link #childView} Initially visible height
  */
 private float visibilityHeight;
 //1.初始化Handle显示高度，建议您在xml中设置对应属性来实现该效果
 public void setVisibilityHeight(float visibilityHeight) {
   this.visibilityHeight = visibilityHeight;
 }
 public SlideBottomLayout(@NonNull Context context) {
   super(context);
 }
 public SlideBottomLayout(@NonNull Context context, @Nullable AttributeSet attrs) {
   super(context, attrs);
   initAttrs(context, attrs);
 }
 public SlideBottomLayout(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
   super(context, attrs, defStyleAttr);
   initAttrs(context, attrs);
 }
 /**
  * Get the config from {@link R.styleable}, then init other configrations{@link #initConfig(Context)}.
  *
  * @param context the {@link Context}
  * @param attrs  the configs in layout attrs.
  */
 private void initAttrs(Context context, AttributeSet attrs) {
   final TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.SlideBottomLayout);
   visibilityHeight = ta.getDimension(R.styleable.SlideBottomLayout_handler_height, 0);
   ta.recycle();
   initConfig(context);
 }
 private void initConfig(Context context) {
   if (mScroller == null)
     mScroller = new Scroller(context);
   this.setBackgroundColor(Color.TRANSPARENT);
 }
 /**
  * It start a judgement for ensure the child-view be unique in this method，then assgin it
  * to {{@link #childView}.
  * this method will be called before the {@link #onMeasure(int, int)}
  */
 @Override
 protected void onFinishInflate() {
   super.onFinishInflate();
   if (getChildCount() == 0 || getChildAt(0) == null) {
     throw new RuntimeException("there have no child-View in the SlideBottomLayout！");
   }
   if (getChildCount() > 1) {
     throw new RuntimeException("there just alow one child-View in the SlideBottomLayout!");
   }
   childView = getChildAt(0);
 }
 @Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
   super.onMeasure(widthMeasureSpec, heightMeasureSpec);
   movedMaxDis = (int) (childView.getMeasuredHeight() - visibilityHeight);
 }
 @Override
 protected void onLayout(boolean changed, int l, int t, int r, int b) {
   super.onLayout(changed, l, t, r, b);
   childView.layout(0, movedMaxDis, childView.getMeasuredWidth(), childView.getMeasuredHeight() + movedMaxDis);
 }
 @Override
 public boolean onTouchEvent(MotionEvent event) {
   final float dy = event.getY();
   switch (event.getAction()) {
     case MotionEvent.ACTION_DOWN:
       if (touchActionDown(dy))
         return true;
       break;
     case MotionEvent.ACTION_MOVE:
       if (touchActionMove(dy))
         return true;
       break;
     case MotionEvent.ACTION_UP:
       if (touchActionUp(dy))
         return true;
       break;
   }
   return super.onTouchEvent(event);
 }
 @Override
 public void computeScroll() {
   super.computeScroll();
   if (mScroller == null)
     mScroller = new Scroller(getContext());
   if (mScroller.computeScrollOffset()) {
     scrollTo(0, mScroller.getCurrY());
     postInvalidate();
   }
 }
 /**
  * When the touch event is {@link MotionEvent#ACTION_UP},
  * then judge the state of view group and control the {@link Scroller} to scroll.
  * <p>
  * In this ViewGroup, we set the rules that is if this scroll gesture's move distance
  * more than {@link #movedMaxDis} * {@link #hideWeight}(default hideWeight value is 1/4 heights
  * of this ViewGroup), then call {@link #hide()} or {@link #show()} right now. which method will
  * be call depends on {@link #arriveTop}.
  * <p
  * if the scroll gesture's move distance don't reach the goal value, then call the
  * {@link ShortSlideListener#onShortSlide(float)} if you call {@link #setShortSlideListener(ShortSlideListener)}
  * init this ViewGroup. else will call {@link #hide()}.
  *
  * @param eventY The location of trigger
  * @return Be used to determine consume this event or else.
  */
 public boolean touchActionUp(float eventY) {
   if (movedDis > movedMaxDis * hideWeight) {
     switchVisible();
   } else {
     if (shortSlideListener != null) {
       shortSlideListener.onShortSlide(eventY);
     } else {
       hide();
     }
   }
   return true;
 }
 /**
  * When the touch event is {@link MotionEvent#ACTION_MOVE},
  * then judge the state of view group and control the {@link Scroller} to scroll.
  * <p>
  * In this ViewGroup, we set the rules that is if this scroll gesture's move distance
  * more than {@link #movedMaxDis} * {@link #hideWeight}(default hideWeight value is 1/4 heights of this ViewGroup),
  * then call {@link #hide()} or {@link #show()} right now.
  * <p>
  *
  * @param eventY The location of trigger
  * @return Be used to determine consume this event or else.
  */
 public boolean touchActionMove(float eventY) {
   moveY = (int) eventY;
   //the dy is sum of the move distance, the value > 0 means scroll up, the value < 0 means scroll down.
   final int dy = downY - moveY;
   if (dy > 0) {        //scroll up
     movedDis += dy;
     if (movedDis > movedMaxDis)
       movedDis = movedMaxDis;
     if (movedDis < movedMaxDis) {
       scrollBy(0, dy);
       downY = moveY;
       return true;
     }
   } else {        //scroll down
     movedDis += dy;
     if (movedDis < 0) movedDis = 0;
     if (movedDis > 0) {
       scrollBy(0, dy);
     }
     downY = moveY;
     return true;
   }
   return false;
 }
 /**
  * When the touch event is {@link MotionEvent#ACTION_DOWN},
  * Record the location of this action.
  *
  * @param eventY The location of trigger
  * @return Be used to determine consume this event or else.
  */
 public boolean touchActionDown(float eventY) {
   downY = (int) eventY;
   //Whether custom this gesture.
   if (!arriveTop && downY < movedMaxDis) {
     return false;
   } else
     return true;
 }
 /**
  * the extand method for showing {@link SlideBottomLayout}
  */
 public void show() {
   scroll2TopImmediate();
 }
 /**
  * the extand method for hiding {@link SlideBottomLayout}
  */
 public void hide() {
   scroll2BottomImmediate();
 }
 /**
  * @return The ViewGroup is arrive top or else.
  */
 public boolean switchVisible() {
   if (arriveTop())
     hide();
   else
     show();
   return arriveTop();
 }
 public boolean arriveTop() {
   return this.arriveTop;
 }
 public void scroll2TopImmediate() {
   mScroller.startScroll(0, getScrollY(), 0, (movedMaxDis - getScrollY()));
   invalidate();
   movedDis = movedMaxDis;
   arriveTop = true;
 }
 public void scroll2BottomImmediate() {
   mScroller.startScroll(0, getScrollY(), 0, -getScrollY());
   postInvalidate();
   movedDis = 0;
   arriveTop = false;
 }
}

注释也比较明了，如果有疑问，详细请参照SlideBottomLayout-Android 简单易上手的Android底部上拉控件

里面有相对详细的使用说明，此外，如果还有一些需求，您可以在issue中提出，提前感谢！

来源：http://blog.csdn.net/mq2553299/article/details/77776967