类似滴滴打车司机端滑动开始接单SlideView

开局一张图，先看看是不是想要的效果

没错，今天就要实现这种效果，首先，可以看出来，这个效果是由两部分组成的，滑动的view以及背景view.重点就是滑动的View,并且分两种情况，当滑动距离超过一半时，则顺势滑下去，没有超过一半，则回弹到初始位置。

对于View跟随手势去滑动，当然是ViewDragHelper是比较合适的。我对这个类我也是第一次用，里面还有很多东西没有理解，只是简单的去运用。主要是自定义View继承自LinearLayout.

贴代码，不多BB，看会应该都能懂。

public class SlideRightViewDragHelper extends LinearLayout {private ViewDragHelper viewDragHelper;private View child;private Point childPosition = new Point();private Point childEndPosition = new Point();private OnReleasedListener onReleasedListener;private int oldX;public SlideRightViewDragHelper(Context context, AttributeSet attrs) {super(context, attrs);}public void setTouchable(boolean isTouch) {if (isTouch) {//新建viewDragHelper ,viewGroup, 灵敏度，回调(子view的移动)viewDragHelper = ViewDragHelper.create(this, 1.0f, new ViewDragHelper.Callback() {@Overridepublic boolean tryCaptureView(View child, int pointerId) {oldX = 0;return true;}@Overridepublic int clampViewPositionHorizontal(View child, int left, int dx) {oldX = left;return Math.max(0, left);}@Overridepublic void onViewReleased(View releasedChild, float xvel, float yvel) {if (oldX > getWidth() / 2) {
/**之所以没这么写，是因为在滑到最右边之后，滑动的View就会被释放，我通过layout方法无法将view设置*为复原，然后我必须又要把view在移回最左边，但无法实现向右顺势滑动的效果，反正达不到预期的效果，*后来就自己写了个位移动画，最终实现了想要的效果。
*/
//                        viewDragHelper.settleCapturedViewAt(childEndPosition.x, childEndPosition.y);
//                        invalidate(); //必须刷新,因为其内部使用的是mScroller.startScroll，所以别忘了需要invalidate()以及结合computeScroll方法一起。
//                        if (onReleasedListener != null) {
//                            child.layout(childPosition.x, childPosition.y, getWidth(), getHeight());
//                            viewDragHelper.settleCapturedViewAt(childPosition.x, childPosition.y); //反弹
//                            onReleasedListener.onReleased();
//                        }TranslateAnimation translateAnimation =
new TranslateAnimation(0, childEndPosition.x, childPosition.y, childPosition.y);translateAnimation.setDuration(300);child.startAnimation(translateAnimation);translateAnimation.setAnimationListener(new Animation.AnimationListener() {@Overridepublic void onAnimationStart(Animation animation) {}@Overridepublic void onAnimationEnd(Animation animation) {Handler handler = new Handler();handler.postDelayed(new Runnable() {@Overridepublic void run() {onReleasedListener.onReleased(0, 0, getWidth(), getHeight());}}, 10);}@Overridepublic void onAnimationRepeat(Animation animation) {}});} else {//滑动距离不够一半，回到初始位置viewDragHelper.settleCapturedViewAt(childPosition.x, childPosition.y); //反弹invalidate();//必须调用}super.onViewReleased(releasedChild, xvel, yvel);}@Overridepublic void onViewCaptured(View capturedChild, int activePointerId) {super.onViewCaptured(capturedChild, activePointerId);}@Overridepublic void onViewPositionChanged(View changedView, int left, int top, int dx, int dy) {super.onViewPositionChanged(changedView, left, top, dx, dy);}});} else {viewDragHelper = ViewDragHelper.create(this, 1.0f, new ViewDragHelper.Callback() {@Overridepublic boolean tryCaptureView(View child, int pointerId) {return false;}});}}@Overrideprotected void onFinishInflate() {super.onFinishInflate();child = getChildAt(0);}@Override   //用viewDragHelper拦截-truepublic boolean onInterceptTouchEvent(MotionEvent ev) {return viewDragHelper.shouldInterceptTouchEvent(ev);}@Override  //viewDragHelper拦截事件public boolean onTouchEvent(MotionEvent event) {viewDragHelper.processTouchEvent(event);return true;}@Overrideprotected void onLayout(boolean changed, int l, int t, int r, int b) {super.onLayout(changed, l, t, r, b);//定位左侧的坐标childPosition.x = child.getLeft();childPosition.y = child.getTop();//定位右侧的坐标childEndPosition.x = child.getRight();childEndPosition.y = child.getTop();}@Overridepublic void computeScroll() {super.computeScroll();if (viewDragHelper.continueSettling(true)) {invalidate();}}public void setOnReleasedListener(OnReleasedListener onReleasedListener) {this.onReleasedListener = onReleasedListener;}public interface OnReleasedListener {void onReleased(int left, int top, int right, int bottom);}
}

主要重写了ViewDragHelper的三个方法

tryCaptureView()试图要捕捉的View 当返回true时，可对当前View进行操作，返回false,则不可操作

clampViewPositionHorizontal() 在水平滑动过程中，可以得到当前View的left值

onViewReleased() 当手指抬起的时候回走这个方法，但我总觉得当我滑到最右边的时候，就会把我的View给释放掉，这个方法还不是很懂

当View滑动到最右边时，就会通过接口告知Activity当前view已经滑到最右边，实现这个接口，并作出对应的操作。

dragHelper.setOnReleasedListener(new SlideRightViewDragHelper.OnReleasedListener() {@Overridepublic void onReleased(final int left, final int top, final int right, final int bottom) {//自己的操作}
});

把所有代码都贴一下

布局代码

<RelativeLayoutandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_centerInParent="true"><Buttonandroid:id="@+id/slide_view_bt"android:layout_width="@dimen/x80"android:layout_height="@dimen/x60"android:text="上线" /><com.gengchao.test_slideView.SlideRightViewDragHelperandroid:id="@+id/slide_view_drag_helper"android:layout_width="match_parent"android:layout_height="@dimen/x60"android:layout_marginRight="@dimen/x10"android:layout_toRightOf="@+id/slide_view_bt"android:background="@color/colorPrimary"android:orientation="horizontal"><LinearLayoutandroid:id="@+id/slide_view_ll"android:layout_width="match_parent"android:layout_height="match_parent"android:background="@color/gray"android:orientation="horizontal"><ImageViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center"android:layout_marginLeft="20dp"android:src="@mipmap/ic_launcher"android:visibility="gone" /><TextViewandroid:id="@+id/slide_view_tv"android:layout_width="0dp"android:layout_height="wrap_content"android:layout_gravity="center"android:layout_marginLeft="10dp"android:layout_weight="1"android:gravity="center"android:text=">>滑动开始听单"android:textColor="@color/white"android:textStyle="bold" /><TextViewandroid:id="@+id/get_order_tv_left_time"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center"android:layout_marginRight="15dp"android:text="确认（30s）"android:textColor="@color/white"android:textStyle="bold"android:visibility="gone" /></LinearLayout></com.gengchao.test_slideView.SlideRightViewDragHelper>
</RelativeLayout>

Activity代码

public class SlideViewActivity extends AppCompatActivity implements View.OnClickListener {SlideRightViewDragHelper dragHelper;LinearLayout llSlideBg;TextView tv;Button bt;boolean onLine = false;//false为离线  true为在线boolean orderState = false; //false为未接单  true为接单@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_slide_view);initView();dragHelper.setOnReleasedListener(new SlideRightViewDragHelper.OnReleasedListener() {@Overridepublic void onReleased(final int left, final int top, final int right, final int bottom) {if (orderState == true) {//可接单状态——>不可接单状态orderState = !orderState;llSlideBg.setBackgroundColor(getResources().getColor(R.color.red));} else {//不可接单状态——>可接单状态orderState = !orderState;llSlideBg.setBackgroundColor(getResources().getColor(R.color.colorPrimary));}tv.setText(orderState == true ? ">>滑动结束听单" : ">>滑动开始听单");dragHelper.setBackgroundColor(orderState == true ? getResources().getColor(R.color.red) : getResources().getColor(R.color.colorPrimary));llSlideBg.layout(left, top, right, bottom);}});}private void initView() {llSlideBg = findViewById(R.id.slide_view_ll);tv = findViewById(R.id.slide_view_tv);bt = findViewById(R.id.slide_view_bt);dragHelper = findViewById(R.id.slide_view_drag_helper);bt.setOnClickListener(this);dragHelper.setTouchable(false);}@Overridepublic void onClick(View v) {switch (v.getId()) {case R.id.slide_view_bt:if (onLine) {//当前为上线  去下线onLine = !onLine;llSlideBg.setBackgroundColor(getResources().getColor(R.color.gray));dragHelper.setBackgroundColor(getResources().getColor(R.color.colorPrimary));bt.setText("上线");dragHelper.setTouchable(false);tv.setText(">>滑动开始听单");dragHelper.recovery(llSlideBg);} else {//当前为下线 去上线onLine = !onLine;llSlideBg.setBackgroundColor(getResources().getColor(R.color.red));dragHelper.setBackgroundColor(getResources().getColor(R.color.colorPrimary));bt.setText("下线");dragHelper.setTouchable(true);}break;}}
}

到这里就结束了，这种功能也不是很难，前提是一定要多实践才行。加油

类似滴滴打车司机端滑动开始接单SlideView相关推荐

仿Android美团打车司机端右滑接单效果
当前项目需要使用该效果,但是网上能找到的大多是封装好的RecyclerView的item. 本文参考 https://blog.csdn.net/lilu_leo/article/details ...
滴滴司机端大更新并公布了一份设计方案！
PMCAFF(www.pmcaff.com):互联网产品社区,是百度,腾讯,阿里等产品经理的学习交流平台.定期出品深度产品观察,互联产品研究首选. 外包大师(www.waibaodashi.com): ...
使用 RIBs 重构 Uber 司机端
Architecting Uber's New Driver App in RIBs feature image 本文是 Uber 的客户端工程师团队是如何开发最新版本司机端的系列文章中的第二篇,代号 ...
成都优步uber司机客户端下载-支持安卓、IOS系统、优步司机端Uberpartner
国外打车软件优步乘客端大家在手机应用商店里都可以下载到,但是优步司机的App却不好找下载地址:这就跟滴滴打车一样,滴滴的乘客端是滴滴打车,而司机端是滴滴专车,司机版本在应用商店里都找不到,原因不清楚. ...
打车代驾顺风车货车租运系统开发功能（司机端）
随着社会经济水平的提高,人们对于打车代驾服务要求也不断提高,更多的人愿意在手机上通过打车代驾APP小程序软件来预约叫车,选择打车代驾服务.打车代驾软件开发是基于广大用户的要求而产生的新型服务方式,满足 ...
为什么我们决定重构 Uber 司机端
Driver App Rewrite: Why - feature image 本文是 Uber 的客户端工程师团队是如何开发最新版本司机端的系列文章中的第一篇,代号 Carbon ,是我们拼车业务的 ...
优步司机端界面大改版，不会用搓这里！
滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...
app内嵌h5页面在ios手机端滑动卡顿的解决方法
app内嵌h5页面在ios手机端滑动卡顿的解决方法参考文章: (1)app内嵌h5页面在ios手机端滑动卡顿的解决方法 (2)https://www.cnblogs.com/1rookie/p/11 ...
移动端html右滑空白,BootStrap.css 在手机端滑动时右侧出现空白的原因及解决办法...
最近的一个项目前台使用了 bootstrap.css + angularjs, 后台只处理数据(用的php,处理结果直接 json_encode($arr),非常爽).一直在Chrome的仿真机测试 ...

类似滴滴打车司机端滑动开始接单SlideView

类似滴滴打车司机端滑动开始接单SlideView相关推荐

最新文章

热门文章