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

叶已初秋 叶已初秋 博客等级 墨衍会员 · AI 创作全网分发 墨衍智能分发 本文由作者通过墨衍一键同步至各平台 1分发平台 1.1w累计阅读 1.1w+平均单平台 已同步平台 优快云 微信公众号 微博 知乎 掘金 百家号 博客园 抖音 小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网 我也要 码龄11年
关注
原创 2025-02-24 16:51:47 1.1w 阅读 AI 写同款· GEO 优化 ›
【Android】仿淘宝商品详情页 话不多说---先上效果图： 图1 商品详情页 图2 加入购物车点击事件 需求分析： 图1中主要需要实现的效果： 1.轮播图 2.顶部导航栏的渐变 3.顶部导航栏随着滑动的位置选择对应的值以及点击滑动到对应位置 图2中主要需要实现的效果： 1.界面从底部出场的效果 2.参数选择的瀑布流式效果 技术分析： 图1： 1.轮播图，可以采用自定义（ViewPager的使用），也可以用直接用第三方库。这里我采用的是 https://github.com/youth5201314/bann 阅读详情

一：先来几张效果图，没有弄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、

收录于
Android进阶

当前文章被收录于：

Android进阶
31 篇文章 3 人学习

Android进阶技术

订阅专栏 查看详情
标签
#仿淘宝 #商品详情 #图文详情 #scrollview #浏览效果
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
实现淘宝商品详情页面的viewPager滑动到最后一张图片跳转的功能 之前写过仿淘宝的自定义viewGroup （点我查看） 阅读详情

相关推荐

安卓开发之用RecyclerView做陈列式布局（仿小红书首页/淘宝商品浏览）

ennn，首先一开始不知道这种界面效果叫做陈列式，然后网上搜了好多仿淘宝商品的，都是写的商品详情页，然后决定自己写一写，发现意外的简单哈哈哈 简单介绍一下Recyclerview吧，其实我并没有很懂哈哈哈~~~ RecyclerView是安卓5.0之后提供的用于在有限的窗口范围内显示大量数据的控件。 【1】相对于ListView来说，RecyclerView可以展示更多的界面效果，如横向、竖向的列...

Farewell_w的博客 6488

【Android进阶】Android仿淘宝商品浏览滑（拖）动查看详情界面

原文地址：http://dwtedx.com/itshare_311.html 本Demo实现了Android类似于淘宝商品页展示的滑动效果（继续拖动，查看图文详情）、如果拖动了一半就会自动滑动到顶部、并带有动画效果、原理是通过两个ScrollView来实现的、上面的ScrollView放产品简介、下面的ScrollView放详细介绍、下面是应用简单的截图、具体效果大家可以下载源代码导入

dodod2012的专栏 8651

android 仿淘宝、京东商品详情页 向上拖动查看图文详情控件

android 仿淘宝、京东商品详情页 向上拖动查看图文详情控件

qq_29443203的博客 1843

Android 商品详情(TabLayout+RecyclerView)

顶部是tabLayout(包含 商品、评论、详情、推荐等)下面是RecyclerView（多布局设计方案）

weixin_42273922的博客 815

仿淘宝、京东商品详情页、视频悬浮效果、tab吸顶效果

这是仿照淘宝的商品浏览详情页，主要实现的效果有： 视频和图片横向Banner浏览效果 视频播放全屏和小窗悬浮效果 tab吸顶效果 这是效果实例图： 具体完整代码，可以下载demo自行运行查看 布局文件：使用的是 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://sc

weixin_39592302的博客 1503

Android仿淘宝订单页面实现

一般电商项目会涉及到的订单管理模块，类似淘宝样式的订单主要是讲一下订单页面的实现。当然实现的方法有很多，我知道的有两种方法：一种是采用listview嵌套listview的方式，这种方式需要重写listview中onMearsure方法；还有一种是采用接口回调的方式，这种方式主要对后台返回的数据有依赖； 今天主要说下第二种方法： 实现的思想：首先Tab下面的布局还是用一个listview实现，然

Ideaqjjl的博客 3万+

Android开发仿淘宝商品详情浏览效果 两步曲

效果图：   第一步布局文件： &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...

徐玮的博客 4991

Android实现淘宝、京东首页浏览效果

CoordinatorLayout+AppBarLayout+TabLayout+ViewPager+Fragment 实现淘宝、京东首页效果 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。 新的改变 我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客： 全新的

weixin_39592302的博客 2447

Android自定义控件实战——仿淘宝商品浏览界面

Android自定义控件实战——仿淘宝商品浏览界面    转载请声明出处http://blog.youkuaiyun.com/zhongkejingwang/article/details/38656929     用手机淘宝浏览商品详情时，商品图片是放在后面的，在第一个ScrollView滚动到最底下时会有提示，继续拖动才能浏览图片。仿照这个效果写一个出来并不难，只要定义一个Layout管理

xlhb的专栏 6729

实现仿淘宝商品详情页的Android滑动分页效果

ViewPager是Android开发中广泛使用的一个组件，主要用来实现屏幕间的水平滑动切换效果。了解其基本用法、属性和与Fragment的配合使用，是进行Android界面开发的基础。自定义ViewPager是实现无限循环滑动的一种方法，这种方法的优点是可以完全控制循环的逻辑，并且可以灵活地适应不同的需求和界面。以下是通过自定义ViewPager实现循环滑动的关键步骤：继承ViewPager类：创建一个继承自ViewPager的自定义类，并重写相关的滑动监听方法。计算当前位置。

weixin_42430341的博客 926

仿淘宝商品详情页滚动效果的自定义ViewGroup实现

在Android应用开发中，自定义ViewGroup不仅能够实现复杂的布局，而且能够提供丰富的用户交互体验。为了达到这个目标，开发者需要深入理解ViewGroup的工作原理以及如何通过重写关键方法来扩展其功能。ViewGroup是所有布局类的基类，它不仅能够容纳子视图，还能管理这些子视图的布局过程。在自定义ViewGroup时，我们通过重写onLayout()方法来定义子视图的位置，通过方法来确定视图的大小，而方法则允许我们捕捉和处理用户触摸事件。

weixin_29443363的博客 676

Android 仿淘宝商品页详情（头部滑动渐变）

上布局 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" xmlns:app="http://schemas.android.com/apk/res-auto" android:background="#23F1F1F

weixin_43522997的博客 982

Android仿淘宝商品详情页效果

本文实例为大家分享了Android仿淘宝商品详情页的具体代码，供大家参考，具体内容如下 Demo地址：先上效果图 效果就是上面图片的效果 接下来看看如何实现 首先我们来看下布局文件  <LinearLayout android:id=@+id/header android:layout_width=match_parent android:layout_height=72dp android:paddingTop=24dp android:background=#00FFFFFF android:

Android开发之仿淘宝商品详情页

原博主，找了好多，感觉这个写的蛮不错，主要是这种实现思想很厉害 看到有人在问如何实现淘宝商品详情页效果，手痒了就撸了一个，献上效果图 大致梳理一下思路，这里不提供源码 状态栏透明使用开源库StatusBarCompat，为了兼容手机4.4 dependencies { compile ('com.github.niorgai:StatusBarCompat:2...

fengyeNom1的博客 2788

OGG故障指南：OGG-01163 Bad column length (xxx) specified for column

OGG-01163 Bad column length (xxx) specified for column AAA in table OWNER.TABLE, maximum allowable length is yyy

qqqyyy0422的博客 718

别再手动算重量了！用C++给UG/NX写个自动计算零件质量与质心的插件（附完整源码）

本文详细介绍了如何使用C++为UG/NX开发智能质量分析插件，实现零件质量与质心的自动计算。通过结合NXOpen和UF_MODL API，设计高效的数据结构和批量处理机制，大幅提升机械设计效率。文章包含完整源码和实用技巧，帮助工程师告别手动计算，适用于复杂装配体的自动化工程计算。

weixin_30247307的博客 131

仿淘宝商品详情页面

– title: 仿淘宝商品详情页面 tags: android grammar_cjkRuby: true 先来一张效果图 欢迎使用 {小书匠}(xiaoshujiang)编辑器，您可以通过 小书匠主按钮&amp;amp;amp;gt;模板 里的模板管理来改变新建文章的内容。 使用的第三方库 allprojects { repositories { googl...

suchong1466的博客 1万+

使用循环神经网络预测温度

简介 本文以天气时间序列数据集为例，讨论如何使用深度学习模型预测未来天气温度。 使用的是由德国耶拿马克思普朗克生物地球化学研究所的气象站记录。 数据每10分钟记录一次，共记录14种不同的量，如气温、气压、湿度、风向等，原始数据可追溯到2003年，本例只使用2009-2016年的数据。 数据 下载并解压数据略。 加载数据： data_dir = r'E:\practice\tf2\temperature' fname = os.path.join(data_dir, 'jena_climate_2009_

guotianqing的博客 5282

安卓项目实践——仿淘宝界面(二)——底部导航栏技术（Fragment实现）

安卓项目实践——仿淘宝界面(一)——底部导航栏技术（Fragment实现） 1、实现效果展示 2、技术简述 该导航栏主要使用Fragment技术实现，关于Fragment的介绍大家可以自行百度，导航栏只是该技术的一个方面，并不是唯一，当然，可以实现导航栏的技术中，fragment也并不是唯一！ 3、布局 万事讲布局 主布局： <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas

qq_44513251的博客 3991

2024年全国大学生电子设计竞赛A题_AC-AC变换电路并联运行

AC-AC变换电路并联运行（A 题）【本科组】

qq_74395263的博客 7836

手把手教你理解特斯拉Model 3的域控制器架构：RBCM如何成为“多面手”？

本文深入解析特斯拉Model 3的域控制器架构，重点介绍右车身域控制器（RBCM）如何整合车身电子系统功能。RBCM作为多任务处理中枢，管理空调系统、尾部电气设备和超声波雷达等关键功能，展现了特斯拉在汽车电子架构上的创新设计。文章详细探讨了RBCM的硬件架构、功能版图及信号网络，揭示其如何通过高性能MCU和智能开关技术实现功能集中与效率提升。

weixin_30919429的博客 383

Android仿淘宝首页UI（附代源代码及示例图片）

Android仿淘宝首页UI（附代源代码及示例图片）可以收获运行出来的效果源代码 可以收获 更改Layout中的文字和drawble中的图片即可生成适应于不同情景的APP，帮助开发者完成项目或者大学生做创业类比赛 代码包含详细注释，帮助学习导航栏、Fragement、Linearlayout、TableLayout等方面的知识 运行出来的效果 话不多说，直接上图片 源代码 点击这里（前一...

一位安分的码农的博客 1万+

Windows 2012 SYSVOL复制失败的处理

题外话：晓原理、知架构、查日志是排错的三件法宝今天在DC1上新建并链接了一个组策略对像，在客户端刷新时，却报下面的错误：“处理组策略失败。Windows无法应用组策略对象LDAP….”如下图所示：于是在客户端用\\domain.com访问，发现\\domain.com\SYSVOL\domain.com\policies下面没有上面报错的组策略对象。这是怎么一回事呢，pin...

weixin_33989780的博客 1669
上一篇： Android之EditText禁止输入空格和回车符
下一篇： Android之检测GPS服务和定位权限是否开启
点赞 3
评论 0
书签 书签 16
叶已初秋
叶已初秋
博客等级 码龄11年 2684粉丝 82原创
+ 关注 专栏目录 订阅专栏
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

叶已初秋

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

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

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

打赏作者

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

抵扣说明：

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

余额充值