Android仿天天动态上拉播放界面控件-阿里云开发者社区

转自：http://blog.csdn.net/huweigoodboy/article/details/42156209

看到天天动听的播放界面，可以从底部划出来，被其效果惊艳到，于是想自己动手模仿。

效果：1，在Content未展开的状态（隐藏）：

1>点击Handler控件，弹出Content。

2>拖动Handler，Content会从底部逐渐出来。

2，在Content展开的状态：

拖动Content,content位置随着手指的滑动而产生位置变化。

最开始想到的是用SlidingDraw,因为有几分相似，SlidingDraw有一个handle,拖着handle让content跟着移动。

区别在于在我们要设计的控件handle是不动的，监听到handle的touch事件，只能让content去移动。

要自定义一个控件，首先一定要清楚一下几个方法，onMeasure(),用于测量view的大小，onLayout()用于放置view的位置，onDraw()用于绘制控件，onDispatchDraw()一般在这里绘制子控件。这里我们把handle放在最底部，content位于handle下面，也就是屏幕外面。

实现思路：

1，Content关闭状态，touch事件的监听应该在Handler上，也就是说父控件不能去拦截，在onInterceptTouchEvent（）中返回false，handler控件去消费onTouch事件。这里用了一个手势辅助类GestureDetector，其实我们要用到只是滑动手势和点击，所以这里不用这个辅助类也可以自己实现。

2，Content展开状态，touch事件的监听应该放在ParentView上，也就是说监听事件是全屏的。（一开始我犯了一个错误，将监听事件放到content上，也就是content去监听滑动，然后移动自己，这样会由于移动content自身后，监听位置更新不及时而发生抖动现象）。

3,当拖动content到屏幕中间而放手，应该去调整content的位置，播放从当前位置到展开位置或者关闭位置的动画。

由于代码比较简单，关于自定义控件的事件监听以及重要的几个方法这里不多啰嗦了。

SlidingPanel.java

[java]view plain copy 
   
 
 package com.example.huwei.slidingpaneldemo.ui;   
    
    
 import android.content.Context;   
 import android.graphics.Canvas;   
 import android.graphics.Rect;   
 import android.os.Handler;   
 import android.util.AttributeSet;   
 import android.util.Log;   
 import android.view.GestureDetector;   
 import android.view.Gravity;   
 import android.view.MotionEvent;   
 import android.view.View;   
 import android.view.animation.AccelerateInterpolator;   
 import android.view.animation.Animation;   
 import android.view.animation.TranslateAnimation;   
 import android.widget.LinearLayout;   
 import android.widget.Scroller;   
    
    
    
    
 import com.example.huwei.slidingpaneldemo.R;   
    
    
    
    
    
    
    
    
 /**  
  * Created by huwei on 14-12-19.  
  */   
 public class SlidingPanel extends LinearLayout implements GestureDetector.OnGestureListener {   
     private static final String TAG = "SlidingPanel";   
     private static final String GTAG = "GTAG";    //手势TAG   
    
    
     private View mHandle;   
     private View mContent;   
    
    
     private int mContentRangeTop;   //content在父布局的移动范围   
     private int mContentRangeBottom;   
    
    
     private int mDownY;     //ACTION_DOWN时y的坐标   
     private boolean mExpanded=false;  //是否展开   
    
    
    
    
     private static final int ANIMATION_DURATION = 1000;   //  从底部到上面需要1s   
    
    
     private GestureDetector mGestureDetector;   //检测手势辅助类   
    
    
    
    
    
    
     public SlidingPanel(Context context) {   
         this(context, null);   
     }   
    
    
     public SlidingPanel(Context context, AttributeSet attrs) {   
         this(context, attrs, 0);   
     }   
    
    
     public SlidingPanel(Context context, AttributeSet attrs, int defStyleAttr) {   
         super(context, attrs, defStyleAttr);   
    
    
         mGestureDetector = new GestureDetector(context, this);   
         setOrientation(LinearLayout.VERTICAL);   
     }   
    
    
    
    
     @Override   
     protected void onFinishInflate() {   
         mHandle = findViewById(R.id.handle);   
    
    
         if (mHandle == null) {   
             throw new IllegalArgumentException("The handle attribute is required and must refer "   
                     + "to a valid child.");   
         }   
    
    
         mContent =  findViewById(R.id.content);   
    
    
         if (mContent == null) {   
             throw new IllegalArgumentException("The content attribute is required and must refer "   
                     + "to a valid child.");   
         }   
    
    
         Log.i(TAG, "***********handle:" + mHandle + "************content:" + mContent + "**********");   
            
         mHandle.setClickable(true);   
         mHandle.setOnTouchListener(touchListener);   
     }   
    
    
    
    
     @Override   
     protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {   
         super.onMeasure(widthMeasureSpec, heightMeasureSpec);   
         int widthSpecSize = MeasureSpec.getSize(widthMeasureSpec);   
    
    
         int heightSpecSize = MeasureSpec.getSize(heightMeasureSpec);   
    
    
         View handle = mHandle;   
    
    
         measureChild(handle, widthMeasureSpec, heightMeasureSpec);   
    
    
         int height = (int) heightSpecSize;   
         measureChild(mContent, MeasureSpec.makeMeasureSpec(widthSpecSize, MeasureSpec.EXACTLY), MeasureSpec.makeMeasureSpec(height, MeasureSpec.EXACTLY));   
    
    
         setMeasuredDimension(widthMeasureSpec, heightMeasureSpec);   
     }   
    
    
     @Override   
     protected void onLayout(boolean changed, int l, int t, int r, int b) {   
         super.onLayout(changed, l, t, r, b);   
    
    
    
    
         //获取自身的宽高   
         final int width = r - l;   
         final int height = b - t;   
    
    
         mContentRangeTop=0;   
         mContentRangeBottom = b - t;   
    
    
         final View handle = mHandle;   
         int childHeight = handle.getMeasuredHeight();   
         int childWidth = handle.getMeasuredWidth();   
    
    
         handle.layout(0, height - childHeight, childWidth, height);   
    
    
         final View content = mContent;   
         if (!mExpanded) {   
             mContent.layout(0, mContentRangeBottom, content.getMeasuredWidth(), mContentRangeBottom + content.getMeasuredHeight());   
         } else {   
             mContent.layout(0, mContentRangeTop, content.getMeasuredWidth(), mContentRangeTop + content.getMeasuredHeight());   
         }   
     }   
    
    
     @Override   
     protected void dispatchDraw(Canvas canvas) {   
         super.dispatchDraw(canvas);   
    
    
         long drawingTime = getDrawingTime();   
    
    
         final View handle = mHandle;   
         drawChild(canvas, handle, drawingTime);   
    
    
         final View content = mContent;   
         drawChild(canvas, content, drawingTime);   
     }   
    
    
    
    
     @Override   
     public boolean onInterceptTouchEvent(MotionEvent ev) {   
         return mExpanded;   
     }   
    
    
     @Override   
     public boolean onTouchEvent(MotionEvent event) {   
         switch (event.getAction()){   
             case MotionEvent.ACTION_DOWN:   
                 mDownY= (int)event.getY();   
                 break;   
             case MotionEvent.ACTION_MOVE:   
                 int nowY=(int)event.getY();   
                    
                 moveContent(nowY-mDownY);   
                 break;   
             case MotionEvent.ACTION_UP:   
                 adjustContentView();   
                 break;   
         }   
         return  mExpanded;   
     }   
     
    
    
     /**  
      * 停止滑动  
      *  
      * @param  
      */   
     private void stopTracking() {   
         //判断content是展开还是收缩   
         updateExpanded();   
     }   
    
    
     /**  
      * 更新mExpanded状态  
      */   
     private void updateExpanded(){   
         if (mContent.getTop() <= mContentRangeTop) {   
             mExpanded = true;   
         } else {   
             mExpanded = false;   
         }   
     }   
    
    
     /**  
      * move content到指定位置  
      *  
      * @param position  
      */   
     private void moveContent(int position) {   
    
    
    
    
         Log.i(GTAG, "*********move Content:position" + position + "**********");   
         //不能移出上边界   
         if (position < mContentRangeTop) {   
             position = mContentRangeTop;   
         } else if (position > mContentRangeBottom) {   
             position = mContentRangeBottom;   
         }   
    
    
         final View content=mContent;   
         final int top = (int) mContent.getY();   
         final int deltaY = position - top;   
    
    
    
    
    
    
         content.layout(0,position,content.getWidth(),position+content.getHeight());   
     }   
    
    
     //移动Content   
     private void doAnimation(int nowY, final int targetY) {   
         AccelerateInterpolator accelerateInterpolator = new AccelerateInterpolator();   
         //BounceInterpolator bounceInterpolator=new BounceInterpolator();   
         TranslateAnimation animation = new TranslateAnimation(0, 0, 0, targetY - nowY);   
         animation.setDuration(ANIMATION_DURATION * Math.abs(targetY - nowY) / mContentRangeBottom);   
         animation.setInterpolator(accelerateInterpolator);   
         animation.setAnimationListener(new Animation.AnimationListener() {   
             @Override   
             public void onAnimationStart(Animation animation) {   
    
    
    
    
             }   
    
    
             @Override   
             public void onAnimationEnd(Animation animation) {   
                 //Log.i(TAG,"onAnimationEnd");   
                 mContent.clearAnimation();   
                 mContent.layout(0, targetY, mContent.getMeasuredWidth(), targetY + mContent.getMeasuredHeight());   
    
    
                 stopTracking();   
             }   
    
    
             @Override   
             public void onAnimationRepeat(Animation animation) {   
    
    
             }   
         });   
    
    
         mContent.startAnimation(animation);   
    
    
     }   
    
    
     /**  
      * 点击时打开Content*  
      */   
     private void open() {   
         doAnimation(mContentRangeBottom, 0);   
         stopTracking();   
     }   
    
    
    
    
     /**  
      * ACTION_UP时 contentView不是停靠在屏幕边缘（在屏幕中间）时，调整contentView的位置*  
      */   
     private void adjustContentView(){   
         final int top = mContent.getTop();   
    
    
         //切割父容器，分成3等份   
         final int perRange=(mContentRangeBottom-mContentRangeTop)/3;   
         if(mExpanded){   
             //小于1/3   
             if(top<perRange+mContentRangeTop){   
                 doAnimation(top,0);   
             }else{   
                 doAnimation(top, mContentRangeBottom);   
             }   
         }else{   
             //小于2/3   
             if(top<mContentRangeTop+perRange*2){   
                 doAnimation(top,0);   
             }else{   
                 doAnimation(top,mContentRangeBottom);   
             }   
         }   
            
     }   
    
    
     /**  
      *按下时触发*   
      * @param e  
      * @return  
      */   
     @Override   
     public boolean onDown(MotionEvent e) {   
         Log.i(GTAG, "onDown:"+e.getY());   
         return false;   
     }   
    
    
     @Override   
     public void onShowPress(MotionEvent e) {   
         Log.i(GTAG, "onShowPress");   
     }   
    
    
     /**  
      * 轻轻点击*   
      * @param e  
      * @return  
      */   
     @Override   
     public boolean onSingleTapUp(MotionEvent e) {   
         Log.i(GTAG, "onSingleTapUp");   
         if (!mExpanded) {   
             open();   
         }   
         return false;   
     }   
    
    
     /**  
      * 滚动时出发*   
      * @param e1  
      * @param e2  
      * @param distanceX  
      * @param distanceY  
      * @return  
      */   
     @Override   
     public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {   
    
    
         int touchY = (int) e2.getY();   
         Log.i(GTAG, "onScroll:"+mContent.getY());   
         moveContent(touchY - mDownY + (mExpanded ? mContentRangeTop : mContentRangeBottom));   
         return false;   
     }   
    
    
     /**  
      * 长按*   
      * @param e  
      */   
     @Override   
     public void onLongPress(MotionEvent e) {   
         Log.i(GTAG, "onLongPress");   
     }   
    
    
     /**  
      * 瞬时滑动*  
      * @param e1  
      * @param e2  
      * @param velocityX  
      * @param velocityY  
      * @return  
      */   
     @Override   
     public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {   
         Log.i(GTAG, "onFling");   
         return false;   
     }   
    
    
     OnTouchListener touchListener = new OnTouchListener() {   
         @Override   
         public boolean onTouch(View v, MotionEvent event) {   
             final View handle = mHandle;   
             if (event.getAction() == MotionEvent.ACTION_DOWN) {   
                 final int top = handle.getTop();   
                 mDownY = (int) event.getY();   
    
    
                 Log.i(GTAG,"mDownY:"+mDownY);   
             } else if (event.getAction() == MotionEvent.ACTION_UP) {   
                  adjustContentView();   
             }   
             Log.i(GTAG, "onTouch:" + event.getAction() + " y:" + event.getY());   
             return mGestureDetector.onTouchEvent(event);   
         }   
    
    
     };   
 }   

xml

[html]view plain copy 
   
 
 <com.example.huwei.slidingpaneldemo.ui.SlidingPanel xmlns:android="http://schemas.android.com/apk/res/android"   
     android:layout_width="match_parent"   
     android:layout_height="match_parent">   
    
    
     <Button   
         android:layout_width="wrap_content"   
         android:layout_height="wrap_content" />   
     <Button   
         android:layout_width="wrap_content"   
         android:layout_height="wrap_content" />   
    
     <LinearLayout   
         android:id="@+id/handle"   
         android:orientation="horizontal"   
         android:layout_width="fill_parent"   
         android:layout_height="68dp"   
         android:background="@drawable/handle_seletor">   
    
         <Button   
             android:layout_width="wrap_content"   
             android:layout_height="wrap_content" />   
         </LinearLayout>   
    
     <LinearLayout   
         android:orientation="vertical"   
         android:id="@+id/content"   
         android:background="#78ADFF2F"   
         android:layout_width="match_parent"   
         android:layout_height="match_parent" >   
         <Button    
             android:layout_width="wrap_content"   
             android:layout_height="wrap_content"/>   
     </LinearLayout>   
 </com.example.huwei.slidingpaneldemo.ui.SlidingPanel>   

百度网盘地址

csdn下载

Android仿天天动态上拉播放界面控件

热门文章

最新文章

相关课程

相关电子书

相关实验场景