左划商品详情UI处理

原创 2016年06月01日 16:44:29

工作需要,做一个左划的事件,类似淘宝的商品详情的轮播图,最后一个左划到详情,第一个想法,RefreshLayout横过来就好了,但是时间不允许,后来就一直耽搁了,最后使用的一个简单的办法:很low

使用 HorizontalScrolView 通过滑动监听做到

直接贴下代码吧,没啥难度;

<HorizontalScrollView
    android:id="@+id/horizontalScrollView"
    android:layout_width="match_parent"
    android:layout_height="@dimen/dp_341"
    android:scrollbars="none">


    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal">

            <ImageView
                android:id="@+id/iv_goodsDetail_pic"
                android:layout_width="match_parent"
                android:layout_height="@dimen/dp_341"
                android:scaleType="centerCrop"
                android:src="@mipmap/goodsimg" />
        <LinearLayout
            android:layout_toRightOf="@+id/iv_goodsDetail_pic"
            android:id="@+id/ll_zuohua"
            android:layout_width="90dp"
            android:layout_height="match_parent"
            android:background="#eeeeee"
            android:orientation="horizontal">

            <ImageView
                android:id="@+id/iv_zuohua"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:layout_marginLeft="@dimen/dp_5"
                android:src="@mipmap/zuohua" />

            <TextView
                android:id="@+id/tv_zuohua"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:layout_marginLeft="@dimen/dp_5"
                android:text="@string/zuohua"
                android:textColor="#808080"
                android:textSize="12sp" />
        </LinearLayout>
      
</HorizontalScrollView>










horizontalScrollView.setOnTouchListener(new View.OnTouchListener() {
    @Override
    public boolean onTouch(View v, MotionEvent event) {
        switch (event.getAction()) {

            case MotionEvent.ACTION_DOWN:
                LogUtils.i("onTouch:  " + "ACTION_DOWN");
                break;
            case MotionEvent.ACTION_MOVE:
                int zuohua1 = ll_zuohua.getMeasuredWidth() / 2;
                LogUtils.i("onTouch:  " + "ACTION_MOVE" + "\nv.getScrollX()" + v.getScrollX());
                if (v.getScrollX() >= zuohua1 && rotateState.equals("zuohua")) {
                    RotateAnimation rotateAnimation1 = new RotateAnimation(0, 180, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
                    rotateAnimation1.setDuration(500);
                    rotateAnimation1.setFillAfter(true);
                    iv_zuohua.startAnimation(rotateAnimation1);
                    tv_zuohua.setText(R.string.shifang);
                    rotateState = "shifang";
                } else if (v.getScrollX() < zuohua1 && rotateState.equals("shifang")) {
                    RotateAnimation rotateAnimation1 = new RotateAnimation(180, 0, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
                    rotateAnimation1.setDuration(500);
                    rotateAnimation1.setFillAfter(true);
                    iv_zuohua.startAnimation(rotateAnimation1);
                    tv_zuohua.setText(R.string.zuohua);
                    rotateState = "zuohua";
                }
                break;
            case MotionEvent.ACTION_UP:
                int zuohua = ll_zuohua.getMeasuredWidth() / 2;
                if (v.getScrollX() > zuohua) {
                    LogUtils.i("onTouch:  " + "ACTION_UP1" + "\nv.getScrollX()" + v.getScrollX() + "\nzuohuaWidth/2" + zuohua);
                    v.scrollBy(ll_zuohua.getMeasuredWidth(), 0);
                    if (drawUrl == null) {

                    } else {
                        intent.putExtra("key", "goods_detail");
                        intent.putExtra("goodsname", goodsName);
                        intent.putExtra("drawUrl", drawUrl);
                        startActivity(intent);
                        v.scrollTo(0, 0);
                        rotateState = "zuohua";
                    }
                } else {
                    LogUtils.i("onTouch:  " + "ACTION_UP2" + "\nv.getScrollX()" + v.getScrollX() + "\nzuohuaWidth/2=" + v.getScrollY());
                    v.scrollTo(0, 0);
                }
                iv_zuohua.clearAnimation();
                tv_zuohua.setText(R.string.zuohua);
                break;

        }
        return false;
    }
});




版权声明:本文为博主原创文章,未经博主允许不得转载。

Android右划喜欢左划不喜欢的View

最近,额,不对,挺久之前,有一类交友APP,喜欢的右划,不喜欢的左划。看到的时候感觉还挺新鲜的,就琢磨着自己整一波。下面上图,那阴影应该是录制软件的关系,连鼠标印子都上去了。 like_or...
  • a214024475
  • a214024475
  • 2016年11月16日 17:18
  • 1178

移动端左划右划事件触发简单的代码

Title *{margin:0;padding:0;} ul li {height: 50px; box-sizing: border-box; list-...
  • qq_30100043
  • qq_30100043
  • 2017年04月18日 16:13
  • 679

iOS项目开发小技巧 (三) --UITableView实现Cell左划删除等自定义功能

今天来介绍下iOS开发中UITableView的Cell左划实现微信中置顶,删除等功能。该功能在iOS8.0以前是需要很复杂的实现,不过github上应该有现成demo,不过今天介绍的是在iOS8.0...
  • u013950854
  • u013950854
  • 2015年06月03日 23:02
  • 1065

浅谈移动端之touch事件--手指的上滑、下滑、左滑和右滑

原理:第一,当开始一个touchstart事件的时候,获取此刻手指的横坐标startX和纵坐标startY;第二,当触发touchmove事件时,在获取此时手指的横坐标moveEndX和纵坐标move...
  • qq_27917627
  • qq_27917627
  • 2016年04月01日 13:53
  • 2000

安卓自定义控件之左滑删除

安卓自定义控件之左滑删除 目标: 今天我们要做的效果图为: 左滑之后会有删除按钮。上面这个图,为了主要研究原理,我们就先只加删除按钮好了。 思路: 在实现这个功能的时候,看了些资料。主要...
  • u011486491
  • u011486491
  • 2017年06月19日 09:47
  • 561

iOS开发中实现UITableView的Cell左划删除等自定义功能

在我们的app开发当中,经常会用到UITableView 的左滑删除的功能,通常的话效果如下 下面我们就开始实现,类似的做法 首先是tableView的代理方法,各种数据源方法的实现 -(N...
  • Shirley_Ying
  • Shirley_Ying
  • 2016年04月20日 17:20
  • 2342

Android 仿微信对话列表滑动删除效果

http://blog.csdn.net/top_code/article/details/17965743 微信对话列表滑动删除效果很不错的,借鉴了github上SwipeListView...
  • daditao
  • daditao
  • 2014年06月10日 12:57
  • 22948

iOS之tableView左划显示多个按钮(适配iOS11)

效果1是基于系统原生的左划出现多个按钮的效果.
  • luochuanAD
  • luochuanAD
  • 2017年01月13日 10:58
  • 1066

android listview左划删除与点击事件及item样式扩展

listview,左划删除,选中,改变选中行状态,同时切换未选中行状态,最好还能随意扩展listview的item样式,以上这些功能在一两百行代码中完成!...
  • lj489695332
  • lj489695332
  • 2015年11月02日 14:14
  • 1365

基于JS实现移动端左滑删除功能

HTML @foreach (var item in Model) {
  • afcl0514
  • afcl0514
  • 2017年11月20日 15:53
  • 564
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:左划商品详情UI处理
举报原因:
原因补充:

(最多只允许输入30个字)