Android之仿淘宝商品详情浏览效果

最新推荐文章于 2023-05-04 16:26:02 发布
最新推荐文章于 2023-05-04 16:26:02 发布
阅读量1w 收藏 16
点赞数 3
分类专栏： Android进阶 文章标签： 仿淘宝 商品详情 图文详情 scrollview 浏览效果
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/android_cll/article/details/78499042
版权

一：先来几张效果图，没有弄gif动画，也就是商品详情滑动到底部继续上滑查看图文详情、

 

 

 

二：实现步骤：

  1.自定义一个父容器ScrollViewContainer装载两个ScrollView、

package com.zjtd.bzcommunity.util;

import android.content.Context;
import android.os.Handler;
import android.os.Message;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.VelocityTracker;
import android.view.View;
import android.widget.RelativeLayout;
import android.widget.ScrollView;

import java.util.Timer;
import java.util.TimerTask;

/**
 * 包含两个ScrollView的容器
 *
 * @author
 */
public class ScrollViewContainer extends RelativeLayout {

    /**
     * 自动上滑
     */
    public static final int AUTO_UP = 0;
    /**
     * 自动下滑
     */
    public static final int AUTO_DOWN = 1;
    /**
     * 动画完成
     */
    public static final int DONE = 2;
    /**
     * 动画速度
     */
    public static final float SPEED = 6.5f;

    private boolean isMeasured = false;

    /**
     * 用于计算手滑动的速度
     */
    private VelocityTracker vt;

    private int mViewHeight;
    private int mViewWidth;

    private View topView;
    private View bottomView;

    private boolean canPullDown;
    private boolean canPullUp;
    private int state = DONE;

    /**
     * 记录当前展示的是哪个view，0是topView，1是bottomView
     */
    private int mCurrentViewIndex = 0;
    /**
     * 手滑动距离，这个是控制布局的主要变量
     */
    private float mMoveLen;
    private MyTimer mTimer;
    private float mLastY;
    /**
     * 用于控制是否变动布局的另一个条件，mEvents==0时布局可以拖拽了，mEvents==-1时可以舍弃将要到来的第一个move事件，
     * 这点是去除多点拖动剧变的关键
     */
    private int mEvents;

    private Handler handler = new Handler() {

        @Override
        public void handleMessage(Message msg) {
            if (mMoveLen != 0) {
                if (state == AUTO_UP) {
                    mMoveLen -= SPEED;
                    if (mMoveLen <= -mViewHeight) {
                        mMoveLen = -mViewHeight;
                        state = DONE;
                        mCurrentViewIndex = 1;
                    }
                } else if (state == AUTO_DOWN) {
                    mMoveLen += SPEED;
                    if (mMoveLen >= 0) {
                        mMoveLen = 0;
                        state = DONE;
                        mCurrentViewIndex = 0;
                    }
                } else {
                    mTimer.cancel();
                }
            }
            requestLayout();
        }

    };

    public ScrollViewContainer(Context context) {
        super(context);
        init();
    }

    public ScrollViewContainer(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public ScrollViewContainer(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init();
    }

    private void init() {
        mTimer = new MyTimer(handler);
    }

    @Override
    public boolean dispatchTouchEvent(MotionEvent ev) {
        switch (ev.getActionMasked()) {
            case MotionEvent.ACTION_DOWN:
                if (vt == null)
                    vt = VelocityTracker.obtain();
                else
                    vt.clear();
                mLastY = ev.getY();
                vt.addMovement(ev);
                mEvents = 0;
                break;
            case MotionEvent.ACTION_POINTER_DOWN:
            case MotionEvent.ACTION_POINTER_UP:
                // 多一只手指按下或抬起时舍弃将要到来的第一个事件move，防止多点拖拽的bug
                mEvents = -1;
                break;
            case MotionEvent.ACTION_MOVE:
                vt.addMovement(ev);
                if (canPullUp && mCurrentViewIndex == 0 && mEvents == 0) {
                    mMoveLen += (ev.getY() - mLastY);
                    // 防止上下越界
                    if (mMoveLen > 0) {
                        mMoveLen = 0;
                        mCurrentViewIndex = 0;
                    } else if (mMoveLen < -mViewHeight) {
                        mMoveLen = -mViewHeight;
                        mCurrentViewIndex = 1;

                    }
                    if (mMoveLen < -8) {
                        // 防止事件冲突
                        ev.setAction(MotionEvent.ACTION_CANCEL);
                    }
                } else if (canPullDown && mCurrentViewIndex == 1 && mEvents == 0) {
                    mMoveLen += (ev.getY() - mLastY);
                    // 防止上下越界
                    if (mMoveLen < -mViewHeight) {
                        mMoveLen = -mViewHeight;
                        mCurrentViewIndex = 1;
                    } else if (mMoveLen > 0) {
                        mMoveLen = 0;
                        mCurrentViewIndex = 0;
                    }
                    if (mMoveLen > 8 - mViewHeight) {
                        // 防止事件冲突
                        ev.setAction(MotionEvent.ACTION_CANCEL);
                    }
                } else
                    mEvents++;
                mLastY = ev.getY();
                requestLayout();
                break;
            case MotionEvent.ACTION_UP:
                mLastY = ev.getY();
                vt.addMovement(ev);
                vt.computeCurrentVelocity(700);
                // 获取Y方向的速度
                float mYV = vt.getYVelocity();
                if (mMoveLen == 0 || mMoveLen == -mViewHeight)
                    break;
                if (Math.abs(mYV) < 500) {
                    // 速度小于一定值的时候当作静止释放，这时候两个View往哪移动取决于滑动的距离
                    if (mMoveLen <= -mViewHeight / 2) {
                        state = AUTO_UP;
                    } else if (mMoveLen > -mViewHeight / 2) {
                        state = AUTO_DOWN;
                    }
                } else {
                    // 抬起手指时速度方向决定两个View往哪移动
                    if (mYV < 0)
                        state = AUTO_UP;
                    else
                        state = AUTO_DOWN;
                }
                mTimer.schedule(2);
                try {
                    vt.recycle();
                    vt = null;//防止第二次报错
                } catch (Exception e) {
                    e.printStackTrace();
                }
                break;

        }
        super.dispatchTouchEvent(ev);
        return true;
    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        topView.layout(0, (int) mMoveLen, mViewWidth,
                topView.getMeasuredHeight() + (int) mMoveLen);
        bottomView.layout(0, topView.getMeasuredHeight() + (int) mMoveLen,
                mViewWidth, topView.getMeasuredHeight() + (int) mMoveLen
                        + bottomView.getMeasuredHeight());
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        if (!isMeasured) {
            isMeasured = true;

            mViewHeight = getMeasuredHeight();
            mViewWidth = getMeasuredWidth();

            topView = getChildAt(0);
            bottomView = getChildAt(1);

            bottomView.setOnTouchListener(bottomViewTouchListener);
            topView.setOnTouchListener(topViewTouchListener);
        }
    }

    private OnTouchListener topViewTouchListener = new OnTouchListener() {

        @Override
        public boolean onTouch(View v, MotionEvent event) {
            ScrollView sv = (ScrollView) v;
            if (sv.getScrollY() == (sv.getChildAt(0).getMeasuredHeight() - sv
                    .getMeasuredHeight()) && mCurrentViewIndex == 0)
                canPullUp = true;
            else
                canPullUp = false;
            return false;
        }
    };
    private OnTouchListener bottomViewTouchListener = new OnTouchListener() {

        @Override
        public boolean onTouch(View v, MotionEvent event) {
            ScrollView sv = (ScrollView) v;
            if (sv.getScrollY() == 0 && mCurrentViewIndex == 1)
                canPullDown = true;
            else
                canPullDown = false;
            return false;
        }
    };

    class MyTimer {
        private Handler handler;
        private Timer timer;
        private MyTask mTask;

        public MyTimer(Handler handler) {
            this.handler = handler;
            timer = new Timer();
        }

        public void schedule(long period) {
            if (mTask != null) {
                mTask.cancel();
                mTask = null;
            }
            mTask = new MyTask(handler);
            timer.schedule(mTask, 0, period);
        }

        public void cancel() {
            if (mTask != null) {
                mTask.cancel();
                mTask = null;
            }
        }

        class MyTask extends TimerTask {
            private Handler handler;

            public MyTask(Handler handler) {
                this.handler = handler;
            }

            @Override
            public void run() {
                handler.obtainMessage().sendToTarget();
            }

        }
    }

}

2.布局xml的实现、

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/containerLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffffff"
    android:orientation="vertical">
    <!--父容器-->
    <com.zjtd.bzcommunity.util.ScrollViewContainer
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/bottom"
        android:layout_below="@+id/lintonei"
        android:layout_marginBottom="-27dp">

        <!--商品详情-->
        <ScrollView
            android:id="@+id/mymyscrollview"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:background="#ffffff"
            android:scrollbars="none">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical">

                <RelativeLayout
                    android:id="@+id/layout_product"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content">

                    <ImageView
                        android:id="@+id/detial_product_img"
                        android:layout_width="match_parent"
                        android:layout_height="256dp"
                        android:background="@mipmap/guanggao3"
                        android:scaleType="fitXY" />

                    <com.zjtd.bzcommunity.view.SlideShowView
                        android:id="@+id/chaoshilunboyi"
                        android:layout_width="match_parent"
                        android:layout_height="256dp"
                        android:fitsSystemWindows="true"
                        android:scaleType="fitXY"
                        android:src="@drawable/ic_launcher"
                        android:visibility="gone" />

                </RelativeLayout>

                <View
                    android:layout_width="fill_parent"
                    android:layout_height="1dp"
                    android:background="#f3f2f8" />

                <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="127dp"
                    android:background="#ffffff">

                    <RelativeLayout
                        android:id="@+id/layout_1"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:layout_toLeftOf="@+id/view"
                        android:orientation="vertical">

                        <TextView
                            android:id="@+id/detial_product_name"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginLeft="12dp"
                            android:layout_marginTop="17dp"
                            android:ellipsize="end"
                            android:lines="2"
                            android:maxLines="2"
                            android:text="暂无商品 "
                            android:textColor="#262626"
                            android:textSize="16dp" />

                        <TextView
                            android:id="@+id/detial_product_num"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_below="@+id/detial_product_name"
                            android:layout_marginLeft="12dp"
                            android:layout_marginTop="6dp"
                            android:text="已售00件"
                            android:textColor="#999999"
                            android:textSize="12dp" />

                        <RelativeLayout
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_alignParentBottom="true"
                            android:layout_alignParentRight="true"
                            android:layout_marginBottom="15dp"
                            android:layout_marginRight="17dp">

                            <TextView
                                android:id="@+id/textjrgwc"
                                android:layout_width="105dp"
                                android:layout_height="33dp"
                                android:background="@drawable/csspxqjrgwc"
                                android:gravity="center"
                                android:text="加入购物车"
                                android:textColor="#ffffff"
                                android:textSize="14dp"
                                android:visibility="gone" />

                            <LinearLayout
                                android:id="@+id/linearjjgwc"
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content">

                                <TextView
                                    android:id="@+id/tvMinus"
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    android:background="@mipmap/button_minus"
                                    android:clickable="true"
                                    android:gravity="center" />

                                <TextView
                                    android:id="@+id/count"
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    android:layout_gravity="center_vertical"
                                    android:layout_marginBottom="3dp"
                                    android:layout_marginLeft="5dp"
                                    android:layout_marginRight="5dp"
                                    android:gravity="center"
                                    android:text="0"
                                    android:textColor="#1a1a1a"
                                    android:textSize="18dp" />

                                <TextView
                                    android:id="@+id/tvAdd"
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    android:layout_marginBottom="7dp"
                                    android:background="@mipmap/button_add"
                                    android:clickable="true"
                                    android:gravity="center" />
                            </LinearLayout>
                        </RelativeLayout>


                        <TextView
                            android:id="@+id/detial_product_price"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_below="@+id/detial_product_num"
                            android:layout_marginLeft="12dp"
                            android:layout_marginTop="15dp"
                            android:text="¥0.00"
                            android:textColor="#f33637"
                            android:textSize="18dp"
                            android:textStyle="bold" />

                        <TextView
                            android:id="@+id/textyuanjia"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_below="@+id/detial_product_num"
                            android:layout_marginLeft="12dp"
                            android:layout_marginTop="19dp"
                            android:layout_toRightOf="@+id/detial_product_price"
                            android:text="原价:"
                            android:textSize="12dp" />

                        <TextView
                            android:id="@+id/zhejia"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_below="@+id/detial_product_num"
                            android:layout_marginTop="19dp"
                            android:layout_toRightOf="@+id/textyuanjia"
                            android:text="¥0.00"
                            android:textSize="12dp" />
                    </RelativeLayout>


                </RelativeLayout>

                <View
                    android:layout_width="match_parent"
                    android:layout_height="0.5dp"
                    android:background="#d9d9d9" />

                <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="140dp"
                    android:visibility="gone">

                    <TextView
                        android:id="@+id/textspgg"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="12dp"
                        android:layout_marginTop="16dp"
                        android:textColor="#676767"
                        android:textSize="14dp" />

                </RelativeLayout>

                <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="110dp"
                    android:visibility="gone">

                    <TextView
                        android:id="@+id/textname"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="12dp"
                        android:layout_marginTop="21dp"
                        android:textColor="#262626"
                        android:textSize="14dp" />

                    <TextView
                        android:id="@+id/textdz"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_below="@+id/textname"
                        android:layout_marginLeft="12dp"
                        android:layout_marginTop="12dp"
                        android:maxLength="20"
                        android:textColor="#989898"
                        android:textSize="13dp" />

                    <RelativeLayout
                        android:id="@+id/relativedh"
                        android:layout_width="64dp"
                        android:layout_height="37dp"
                        android:layout_alignParentRight="true"
                        android:layout_below="@+id/textname">

                        <TextView
                            android:layout_width="1dp"
                            android:layout_height="fill_parent"
                            android:background="#d8d8d8" />

                        <ImageView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_centerHorizontal="true"
                            android:layout_centerVertical="true"
                            android:src="@mipmap/icon_iphone" />
                    </RelativeLayout>

                    <ImageView
                        android:id="@+id/imagdw"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_below="@+id/textdz"
                        android:layout_marginLeft="10dp"
                        android:layout_marginTop="11dp"
                        android:src="@mipmap/ic_global_landmark_groupon_list" />

                    <TextView
                        android:id="@+id/textmishu"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_below="@+id/textdz"
                        android:layout_marginLeft="5dp"
                        android:layout_marginTop="12dp"
                        android:layout_toRightOf="@+id/imagdw"
                        android:textColor="#999999"
                        android:textSize="13dp" />
                </RelativeLayout>

                <View
                    android:layout_width="match_parent"
                    android:layout_height="9dp"
                    android:background="#f2f2f2" />

                <RelativeLayout
                    android:id="@+id/linearpl"
                    android:layout_width="fill_parent"
                    android:layout_height="50dp"
                    android:orientation="vertical">

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_centerVertical="true"
                        android:layout_marginLeft="15dp"
                        android:text="商品评价"
                        android:textColor="#303030"
                        android:textSize="15dp" />

                    <TextView
                        android:id="@+id/textsong_id"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_centerVertical="true"
                        android:layout_marginRight="15dp"
                        android:layout_toLeftOf="@+id/xiangyou2_id"
                        android:text="全部评价"
                        android:textColor="#999999"
                        android:textSize="12dp" />

                    <ImageView
                        android:id="@+id/xiangyou2_id"
                        android:layout_width="15dp"
                        android:layout_height="15dp"
                        android:layout_alignParentRight="true"
                        android:layout_centerVertical="true"
                        android:layout_marginRight="13dp"
                        android:src="@mipmap/icon_you" />

                    <Button
                        android:id="@+id/chakangengduo"
                        android:layout_width="wrap_content"
                        android:layout_height="25dp"
                        android:layout_centerHorizontal="true"
                        android:layout_centerVertical="true"
                        android:background="@drawable/ncpinglunchakan"
                        android:text="查看全部评价"
                        android:textColor="#CDCDCD"
                        android:textSize="12sp"
                        android:visibility="gone" />
                </RelativeLayout>


                <View
                    android:layout_width="match_parent"
                    android:layout_height="9dp"
                    android:background="#f2f2f2" />


                <RelativeLayout
                    android:layout_width="fill_parent"
                    android:layout_height="50dp"
                    android:orientation="vertical">

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_centerVertical="true"
                        android:layout_marginLeft="15dp"
                        android:text="商品详情"
                        android:textColor="#303030"
                        android:textSize="15dp" />

                    <ImageView
                        android:layout_width="15dp"
                        android:layout_height="15dp"
                        android:layout_alignParentRight="true"
                        android:layout_centerVertical="true"
                        android:layout_marginRight="13dp"
                        android:src="@mipmap/icon_you" />

                </RelativeLayout>

                <View
                    android:layout_width="match_parent"
                    android:layout_height="0.5dp"
                    android:background="#d9d9d9" />

                <LinearLayout
                    android:layout_width="fill_parent"
                    android:layout_height="90dp"
                    android:background="#ffffff">

                    <TextView
                        android:layout_width="fill_parent"
                        android:layout_height="fill_parent"
                        android:layout_marginTop="20dp"
                        android:gravity="center_horizontal"
                        android:text="上滑查看图文详情"
                        android:textColor="#989898"
                        android:textSize="14dp" />
                </LinearLayout>

            </LinearLayout>
        </ScrollView>
        <!--图文详情-->
        <ScrollView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginTop="-50dp"
            android:background="#ffffff">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical">

                <com.tencent.smtt.sdk.WebView
                    android:id="@+id/webview"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"></com.tencent.smtt.sdk.WebView>

            </LinearLayout>
        </ScrollView>
    </com.zjtd.bzcommunity.util.ScrollViewContainer>


    <!--标题栏-->
    <LinearLayout
        android:id="@+id/lintonei"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <RelativeLayout
            android:id="@+id/title_layout_product"
            android:layout_width="match_parent"
            android:layout_height="45dp"
            android:background="@color/titlebar_title">

            <ImageView
                android:id="@+id/iv_title_left"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:padding="3dp"
                android:src="@mipmap/farm_nav_fanhui" />

            <TextView
                android:id="@+id/tv_title"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_centerInParent="true"
                android:gravity="center"
                android:text="商品详情"
                android:textColor="@color/titlecolor"
                android:textSize="18sp" />

        </RelativeLayout>

        <View
            android:layout_width="match_parent"
            android:layout_height="0.5dp"
            android:background="#d9d9d9" />
    </LinearLayout>
    <!--底部购物车-->
    <RelativeLayout
        android:id="@+id/bottom"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_alignParentBottom="true"
        android:background="#3b3b38"
        android:clickable="true"
        android:gravity="center_vertical"
        android:onClick="onClick"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/tvCost"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_marginLeft="89dp"
            android:text="￥ 0.0"
            android:textColor="#fff"
            android:textSize="16dp" />

        <TextView
            android:id="@+id/tvSubmit"
            android:layout_width="130dp"
            android:layout_height="match_parent"
            android:layout_alignParentRight="true"
            android:background="#4a4a47"
            android:gravity="center"
            android:text="去结算"
            android:textColor="#fff"
            android:textSize="16dp" />

    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/relative_gwc"
        android:layout_width="89dp"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="10dp">

        <ImageView
            android:id="@+id/imgCart"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:src="@mipmap/chaoshi_bottom_shopping_jicon" />

        <TextView
            android:id="@+id/tvount"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_marginRight="13dp"
            android:background="@drawable/circle_red"
            android:gravity="center"
            android:text="0"
            android:textColor="#fff"
            android:textSize="12sp"
            android:visibility="gone" />
    </RelativeLayout>

</RelativeLayout>

注意：

 

 

      一个父容器里面两个scrollview，第一个scrollview装商品详情的布局框架，第二个scrollview装图文详情的布局框架，为了简单我的第二个scrollview放了一个webview、

 

 

叶已初秋
关注
  • 3
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 4
    评论
专栏目录
Android仿淘宝商品浏览界面图片滚动效果
09-02
主要为大家详细介绍了Android仿淘宝商品浏览界面图片滚动效果，感兴趣的小伙伴们可以参考一下
Android仿京东详情页2实现沉浸式状态栏和标题栏，顶部tab切换，滑动到底部自动切换至详情页面
u012556114的博客
05-22 2650
本文是接着上次仿京东详情页的第2个版本，把之前的底部tab切换放到标题栏，并根据banner滑动的距离隐藏显示tab，滑动到底部自动切换到商品详情页面. 1.Mainactivity代码: package com.example.jdshopdetailtwo; import android.widget.ImageView; import android.widget.TextView; import androidx.appcompat.widget.Toolbar...
仿淘宝、京东拖拽上拉下拉商品详情(可嵌套ViewPager、ListView、WebView、FragmentTabhost)
happylishang的专栏
12-23 1619
背景对于电商App，商品详情无疑是很重要的一个模块，观察主流购物App的详情界面，发现大部分都是做成了上下两部分，上面展示商品规格信息，下面是H5商品详情，或者是嵌套了一个包含H5详情及评论列表的ViewPager界面，本文就是实现了一个兼容不同需求的上下滚动黏滞View-DragScrollDetailsLayout。DragScrollDetailsLayout GitHub链接 实现效果图首
android 滚动条透明度,GitHub - zhenghaoyang/ZProductInfo: Android商品详情页实现，包括顶部滚动半透明渐变效果实现，流式布局的实现，顶部悬浮(Scrol...
weixin_36143628的博客
05-26 232
ZProductInfoAndroid商品详情页实现，包括顶部滚动半透明渐变效果实现，流式布局的实现，顶部悬浮(ScrollView包裹ViewPager,ViewPager包裹Fragment,Fragment高度自适应)等相关功能。作者：邹峰立，微博：zrunker，邮箱：[email protected]，微信公众号：书客创作，个人平台：www.ibooker.cc。本文选自书客创作平台第6...
仿淘宝商品详情页面Android
小米
03-12 1万+
【致谢】：qifengdeqingchen 【博客地址】：http://blog.csdn.net/qifengdeqingchen/article/details/51659735 1、需求： 要实现一个类似淘宝、京东的商品详情页面。首先是在看一些前辈的思路，查看之后，发现博主qifengdeqingchen的文章不错，然后去下载下来查看demo。 2、查阅资料 来看看前辈的...
实现淘宝商品详情页面的viewPager滑动到最后一张图片跳转的功能
zhudewei007的博客
05-24 6707
之前写过仿淘宝的自定义viewGroup （点我查看）
Android 商品详情(TabLayout+RecyclerView)
weixin_42273922的博客
05-04 573
顶部是tabLayout(包含 商品、评论、详情、推荐等)下面是RecyclerView（多布局设计方案）
Android开发仿淘宝商品详情浏览效果 两步曲
徐玮的博客
09-13 4812
效果图：   第一步布局文件： &lt;?xml version="1.0" encoding="utf-8"?&gt; &lt;RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/containerLayout" android:layou...
Android仿淘宝商品详情页效果
01-20
本文实例为大家分享了Android仿淘宝商品详情页的具体代码，供大家参考，具体内容如下 Demo地址：先上效果图 效果就是上面图片的效果 接下来看看如何实现 首先我们来看下布局文件  <LinearLayout android:id=...
Android时光轴实现淘宝物流信息浏览效果
09-01
主要为大家详细介绍了Android时光轴实现淘宝物流信息浏览效果,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Android仿淘宝商品详情页
01-20
看到有人在问如何实现淘宝商品详情页效果，献上效果图 大致梳理一下思路，这里不提供源码 状态栏透明使用开源库StatusBarCompat，为了兼容手机4.4 dependencies { compile ('...
Android之TabLayout+抽屉式效果和RecyclerView的使用
热门推荐
叶已初秋的博客
12-21 2万+
导航栏是个TabLayout，抽屉式效果是两个listview的联动，RecyclerView的使用
Android之图片浮动随意拖拽的效果实现
叶已初秋的博客
01-14 2万+
Android之图片浮动随意拖拽的效果实现
Android之scrollview滑动使导航栏渐变背景色
叶已初秋的博客
03-05 2万+
监听scrollview滑动距离渐变导航栏背景色
Android之Android studio设置背景图片
叶已初秋的博客
05-04 2万+
Android studio设置背景图片和编辑区域的竖线去掉、
Android之新闻公告垂直翻滚及TextView跑马灯水平滚动
叶已初秋的博客
01-06 2万+
Android之TextView的跑马灯特效
Android之仿饿了吗购物车抛物线动画
叶已初秋的博客
02-23 2万+
Android之仿饿了吗及其他软件加入购物车抛物线动画和加减弹出弹回动画实现
Android之自定义Toast提示框样式
叶已初秋的博客
02-24 2万+
自定义Toast提示框样式，可以带图片提示，从顶部弹出，比较流行和大众化。
android studio 仿淘宝商品加入购物车界面
最新发布
07-14
### 回答1： Android Studio 仿淘宝商品加入购物车界面的实现可以通过以下步骤进行： 1. 创建一个新的Android项目并打开Android Studio。 2. 在项目的布局文件中，创建一个包含商品信息的卡片视图，可以包括商品图片、商品名称、价格等。 3. 在商品卡片视图下方创建一个按钮，用于添加商品到购物车。 4. 在项目的Java代码中，创建一个数据类来表示商品，包括商品的属性，比如商品名称、价格等。 5. 在Java代码中，创建一个购物车类来管理用户选择的商品，可以使用ArrayList来存储选择的商品。 6. 在Activity或Fragment中，当用户点击添加到购物车按钮时，获取商品的信息，并将商品添加到购物车类中。 7. 在界面中显示购物车中已选择的商品数量，可以使用TextView来显示。 8. 在界面的某个位置或侧边栏中添加一个购物车图标，以便用户随时查看购物车的状态。 9. 当用户点击购物车图标时，跳转到购物车界面，显示购物车中的商品信息，可以使用ListView或RecyclerView来展示购物车中的商品列表。 10. 在购物车界面中，可以提供删除商品、修改商品数量等操作。 以上是一种实现仿淘宝商品加入购物车界面的基本步骤，具体的实现细节还需根据实际需求进行调整和完善。 ### 回答2： Android Studio 是一种强大的集成开发环境（IDE），用于开发Android应用程序。在使用Android Studio进行开发时，你可以实现仿淘宝的商品加入购物车界面。 首先，在项目中创建一个布局文件来设计商品列表界面。你可以使用RecyclerView 来展示商品列表，每个商品显示图片、名称、价格等信息。通过适配器来管理商品数据，点击商品时可以打开商品详情页面。 接下来，创建一个购物车界面的布局文件。购物车界面可以使用ListView或RecyclerView 来展示已选中的商品列表。在购物车列表中，可以显示商品的图片、名称、价格和数量，并提供编辑或移除选项。 在商品列表界面，你可以通过一个按钮将选中的商品加入购物车。点击按钮后，需要将选中的商品信息传递到购物车界面，并在购物车列表中添加该商品的条目。可以使用SharedPreferences或SQLite数据库来保存购物车的商品信息，以便在购物车页面中能够展示和管理这些选中的商品。 在购物车界面，你还可以提供修改商品数量、删除商品等功能。你可以在每个购物车商品条目中添加增加或减少商品数量的按钮，并根据用户的操作来更新数量，并计算商品总价。 最后，在底部或顶部添加一个结算按钮，以便用户可以在购物车完成选购后进行结算。点击结算按钮，可以跳转到结算页面，显示选中商品的详细信息和总价等。 总之，使用Android Studio的开发环境，你可以创建一个仿淘宝商品加入购物车界面。这个界面可以展示商品列表、加入购物车、管理购物车商品和完成结算等功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

叶已初秋

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值