仿京东天猫商品详情页

最新推荐文章于 2025-07-25 10:06:03 发布
原创 最新推荐文章于 2025-07-25 10:06:03 发布 · 2.1k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#仿京东天猫

1.参考借鉴
效果图

仿京东商品详情页.gif

简单介绍
  • 1,自定义控件
public class DragScrollDetailsLayout extends LinearLayout {


    public interface OnSlideFinishListener {
        void onStatueChanged(CurrentTargetIndex status);
    }

    public enum CurrentTargetIndex {
        UPSTAIRS,
        DOWNSTAIRS;

        public static CurrentTargetIndex valueOf(int index) {
            return 1 == index ? DOWNSTAIRS : UPSTAIRS;
        }
    }

    private static final float DEFAULT_PERCENT = 0.3f;
    private static final int DEFAULT_DURATION = 300;


    private int mMaxFlingVelocity;
    private int mMiniFlingVelocity;
    private int mDefaultPanel = 0;
    private int mDuration = DEFAULT_DURATION;
    private float mTouchSlop;
    private float mDownMotionY;
    private float mDownMotionX;
    private float mInitialInterceptY;

    public void setPercent(float percent) {
        mPercent = percent;
    }

    private float mPercent = DEFAULT_PERCENT;
    /**
     * flag for listview or scrollview ,if child overscrolled ,do not judge view region 滚过头了，还是可以滚动
     */
    private boolean mChildHasScrolled;

    private View mUpstairsView;
    private View mDownstairsView;
    private View mCurrentTargetView;

    private Scroller mScroller;

    private VelocityTracker mVelocityTracker;
    private OnSlideFinishListener mOnSlideDetailsListener;
    private CurrentTargetIndex mCurrentViewIndex = CurrentTargetIndex.UPSTAIRS;

    public DragScrollDetailsLayout(Context context) {
        this(context, null);
    }

    public DragScrollDetailsLayout(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public DragScrollDetailsLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.DragScrollDetailsLayout, defStyleAttr, 0);
        mPercent = a.getFloat(R.styleable.DragScrollDetailsLayout_percent, DEFAULT_PERCENT);
        mDuration = a.getInt(R.styleable.DragScrollDetailsLayout_duration, DEFAULT_DURATION);
        mDefaultPanel = a.getInt(R.styleable.DragScrollDetailsLayout_default_panel, 0);
        a.recycle();
        mScroller = new Scroller(getContext(), new DecelerateInterpolator());
        mTouchSlop = ViewConfiguration.get(getContext()).getScaledTouchSlop();
        mMaxFlingVelocity = ViewConfiguration.get(getContext()).getScaledMaximumFlingVelocity();
        mMiniFlingVelocity = ViewConfiguration.get(getContext()).getScaledMinimumFlingVelocity();
        setOrientation(VERTICAL);
    }

    public void setOnSlideDetailsListener(OnSlideFinishListener listener) {
        this.mOnSlideDetailsListener = listener;
    }

    @Override
    protected void onFinishInflate() {
        super.onFinishInflate();

        final int childCount = getChildCount();
        if (1 >= childCount) {
            throw new RuntimeException("SlideDetailsLayout only accept childs more than 1!!");
        }
        mUpstairsView = getChildAt(0);
        mDownstairsView = getChildAt(1);
    }

    /**
     * requestDisallowInterceptTouchEvent guarantee DragScrollDetailsLayout intercept event as wish
     */
    @Override
    public boolean dispatchTouchEvent(MotionEvent ev) {
        if (!mScroller.isFinished()) {
            resetDownPosition(ev);
            return true;
        }
        Log.v("lishang", "" + getScrollY());
        requestDisallowInterceptTouchEvent(false);
        return super.dispatchTouchEvent(ev);
    }

    /**
     * intercept rules：
     * 1. The vertical displacement is larger than the horizontal displacement;
     * 2. Panel stauts is UPSTAIRS：  slide up
     * 3. Panel status is DOWNSTAIRS：slide down
     * 4. child can requestDisallowInterceptTouchEvent();
     */
    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {
        switch (ev.getActionMasked()) {
            case MotionEvent.ACTION_DOWN:
                resetDownPosition(ev);
                break;
            case MotionEvent.ACTION_MOVE:
                adjustValidDownPoint(ev);
                return checkCanInterceptTouchEvent(ev);
            default:
                break;
        }
        return false;
    }

    private void resetDownPosition(MotionEvent ev) {
        mDownMotionX = ev.getX();
        mDownMotionY = ev.getY();
        if (mVelocityTracker == null) {
            mVelocityTracker = VelocityTracker.obtain();
        }
        mVelocityTracker.clear();
        mChildHasScrolled = false;
        mInitialInterceptY = (int) ev.getY();
    }

    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        switch (ev.getActionMasked()) {
            case MotionEvent.ACTION_UP:
            case MotionEvent.ACTION_CANCEL:
                flingToFinishScroll();
                recycleVelocityTracker();
                break;
            case MotionEvent.ACTION_MOVE:
                scroll(ev);
                break;
            default:
                break;
        }
        return true;
    }

    private boolean checkCanInterceptTouchEvent(MotionEvent ev) {
        final float xDiff = ev.getX() - mDownMotionX;
        final float yDiff = ev.getY() - mDownMotionY;
        if (!canChildScrollVertically((int) yDiff, ev)) {
            mInitialInterceptY = (int) ev.getY();
            if (Math.abs(yDiff) > mTouchSlop && Math.abs(yDiff) >= Math.abs(xDiff)
                    && !(mCurrentViewIndex == CurrentTargetIndex.UPSTAIRS && yDiff > 0
                    || mCurrentViewIndex == CurrentTargetIndex.DOWNSTAIRS && yDiff < 0)) {
                return true;
            }
        }
        return false;
    }


    private void adjustValidDownPoint(MotionEvent event) {
        if (mCurrentViewIndex == CurrentTargetIndex.UPSTAIRS && event.getY() > mDownMotionY
                || mCurrentViewIndex == CurrentTargetIndex.DOWNSTAIRS && event.getY() < mDownMotionY) {
            mDownMotionX = event.getX();
            mDownMotionY = event.getY();
        }
    }

    /**
     * 拦截之后的拖动
     */
    private void scroll(MotionEvent event) {
        if (mCurrentViewIndex == CurrentTargetIndex.UPSTAIRS) {
            if (getScrollY() <= 0 && event.getY() >= mInitialInterceptY) {
                mInitialInterceptY = (int) event.getY();
            }
            int distance = mInitialInterceptY - event.getY() >= 0 ? (int) (mInitialInterceptY - event.getY()) : 0;
            scrollTo(0, distance);
        } else {
            if (getScrollY() >= mUpstairsView.getMeasuredHeight() && event.getY() <= mInitialInterceptY) {
                mInitialInterceptY = (int) event.getY();
            }
            int distance = event.getY() <= mInitialInterceptY ? mUpstairsView.getMeasuredHeight()
                    : (int) (mInitialInterceptY - event.getY() + mUpstairsView.getMeasuredHeight());
            scrollTo(0, distance);
        }
        mVelocityTracker.addMovement(event);
    }


    /**
     * 清理VelocityTracker
     */

    private void recycleVelocityTracker() {
        if (mVelocityTracker != null) {
            mVelocityTracker.clear();
            mVelocityTracker.recycle();
            mVelocityTracker = null;
        }
    }

    /**
     * if speed is enough even though offset is not enough go
     */

    private void flingToFinishScroll() {

        final int pHeight = mUpstairsView.getMeasuredHeight();
        final int threshold = (int) (pHeight * mPercent);
        float needFlingDistance = 0;
        if (CurrentTargetIndex.UPSTAIRS == mCurrentViewIndex) {
            if (getScrollY() <= 0) {
                needFlingDistance = 0;
            } else if (getScrollY() <= threshold) {
                if (needFlingToToggleView()) {
                    needFlingDistance = pHeight - getScrollY();
                    mCurrentViewIndex = CurrentTargetIndex.DOWNSTAIRS;
                } else {
                    needFlingDistance = -getScrollY();
                }
            } else {
                needFlingDistance = pHeight - getScrollY();
                mCurrentViewIndex = CurrentTargetIndex.DOWNSTAIRS;
            }
        } else if (CurrentTargetIndex.DOWNSTAIRS == mCurrentViewIndex) {
            if (pHeight <= getScrollY()) {
                needFlingDistance = 0;
            } else if (pHeight - getScrollY() < threshold) {
                if (needFlingToToggleView()) {
                    needFlingDistance = -getScrollY();
                    mCurrentViewIndex = CurrentTargetIndex.UPSTAIRS;
                } else {
                    needFlingDistance = pHeight - getScrollY();
                }
            } else {
                needFlingDistance = -getScrollY();
                mCurrentViewIndex = CurrentTargetIndex.UPSTAIRS;
            }
        }
        mScroller.startScroll(0, getScrollY(), 0, (int) needFlingDistance, mDuration);
        if (mOnSlideDetailsListener != null) {
            mOnSlideDetailsListener.onStatueChanged(mCurrentViewIndex);
        }
        postInvalidate();
    }


    private boolean needFlingToToggleView() {
        mVelocityTracker.computeCurrentVelocity(1000, mMaxFlingVelocity);
        if (mCurrentViewIndex == CurrentTargetIndex.UPSTAIRS) {
            if (-mVelocityTracker.getYVelocity() > mMiniFlingVelocity) {
                return true;
            }
        } else {
            if (mVelocityTracker.getYVelocity() > mMiniFlingVelocity) {
                return true;
            }
        }
        return false;
    }

    private View getCurrentTargetView() {
        return mCurrentViewIndex == CurrentTargetIndex.UPSTAIRS
                ? mUpstairsView : mDownstairsView;
    }

    @Override
    public void computeScroll() {
        super.computeScroll();
        if (mScroller.computeScrollOffset()) {
            scrollTo(0, mScroller.getCurrY());
            postInvalidate();
        }
    }

    /***
     * 复用已经实现的View，省却了测量布局之类的麻烦
     */
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        measureChildren(widthMeasureSpec, heightMeasureSpec);
        setMeasuredDimension(getMeasuredWidth(), getMeasuredHeight());
    }

    protected boolean canChildScrollVertically(int offSet, MotionEvent ev) {
        mCurrentTargetView = getCurrentTargetView();
        return canScrollVertically(mCurrentTargetView, -offSet, ev);
    }

    /***
     * judge is event  is in current view
     * 判断MotionEvent是否处于View上面
     */
    protected boolean isTransformedTouchPointInView(MotionEvent ev, View view) {
        float x = ev.getRawX();
        float y = ev.getRawY();
        int[] rect = new int[2];
        view.getLocationInWindow(rect);
        float localX = x - rect[0];
        float localY = y - rect[1];
        return localX >= 0 && localX < (view.getRight() - view.getLeft())
                && localY >= 0 && localY < (view.getBottom() - view.getTop());
    }

    /***
     * first    can view self  ScrollVertically
     * seconde  if View is ViewPager only judge current page
     * third    if view is viewgroup check it`s children
     */
    private boolean canScrollVertically(View view, int offSet, MotionEvent ev) {

        if (!mChildHasScrolled && !isTransformedTouchPointInView(ev, view)) {
            return false;
        }
        if (ViewCompat.canScrollVertically(view, offSet)) {
            mChildHasScrolled = true;
            return true;
        }
        if (view instanceof ViewPager) {
            return canViewPagerScrollVertically((ViewPager) view, offSet, ev);
        }
        if (view instanceof ViewGroup) {
            ViewGroup vGroup = (ViewGroup) view;
            for (int i = 0; i < vGroup.getChildCount(); i++) {
                if (canScrollVertically(vGroup.getChildAt(i), offSet, ev)) {
                    mChildHasScrolled = true;
                    return true;
                }
            }
        }
        return false;
    }

    private boolean canViewPagerScrollVertically(ViewPager viewPager, int offset, MotionEvent ev) {

        if(viewPager.getAdapter() instanceof DragDetailFragmentPagerAdapter){
            View showView = ((DragDetailFragmentPagerAdapter) viewPager.getAdapter()).getPrimaryItem();
            return showView != null && canScrollVertically(showView, offset, ev);
        }else {
            return false;
        }

    }

    @Override
    protected void onScrollChanged(int l, int t, int oldl, int oldt) {
        super.onScrollChanged(l, t, oldl, oldt);
    }

    public void scrollToTop() {
        if (mCurrentViewIndex == CurrentTargetIndex.DOWNSTAIRS) {
            mScroller.startScroll(0, getScrollY(), 0, -getScrollY(), mDuration);
            mCurrentViewIndex= CurrentTargetIndex.UPSTAIRS;
            postInvalidate();
        }
        if (mOnSlideDetailsListener != null) {
            mOnSlideDetailsListener.onStatueChanged(mCurrentViewIndex);
        }
    }
}
  • 2,自定义属性
<declare-styleable name="DragScrollDetailsLayout">
        <!-- float value for indicate the moment of switch panel-->
        <attr name="percent" format="float" />
        <!-- how long the animation keep-->
        <attr name="duration" format="integer" />
        <!-- default panel to show after init-->
        <attr name="default_panel" format="enum">
            <enum name="front" value="0" />
            <enum name="behind" value="1" />
        </attr>
    </declare-styleable>
  • 3,DragDetailFragmentPagerAdapter用途不明(代替FragmentPagerAdapter)
public abstract class DragDetailFragmentPagerAdapter extends FragmentPagerAdapter {

    private View mCurrentView;

    public DragDetailFragmentPagerAdapter(FragmentManager fm) {
        super(fm);
    }

    @Override
    public void setPrimaryItem(ViewGroup container, int position, Object object) {
        if (object instanceof View) {
            mCurrentView = (View) object;
        } else if (object instanceof Fragment) {
            Fragment fragment = (Fragment) object;
            mCurrentView = fragment.getView();
        }
    }
    public View getPrimaryItem() {
        return mCurrentView;
    }
}
其余看源码

地址

FlyClound
关注
仿照京东商品展示html,仿京东的商品展示详情页面
weixin_32698563的博客
06-07 3106
【实例简介】仿照京东商品展示详情页做的demo,解压到Hbuilder或者其他IDE中即可使用,商城项目中可以直接拿过来修改使用。【实例截图】【核心代码】9374d44a-1695-43f2-a897-d32eef875b93└── shangchengxiangmu├── css│ └── shouye.css├── images│ ├── left.png│ ├── loader....
仿天猫的静态网页，纯HTML+CSS
09-05
自己刚学时写的仿天猫 的静态网页 注册-登录-首页-搜索结果页-商品详情页-购物车侧边栏-结算页-确认收货地址页-付款页-支付完成页 电商的生老病死都在了，都是自己写的，留给需要的人。
Java项目:仿天猫网上商城项目(java+jsp+servlet+mysql+ajax)
m0_66863468的博客
02-14 1312
源码获取：博客首页 "资源" 里下载！ 一、项目简述 功能： 前台： * 用户模块 * 分类模块 * 商品模块 * 购物车模块 * 订单模块 后台： * 管理员模块 * 分类管理模块 * 商品管理模块 * 订单模块 二、项目运行 环境配置： Jdk1.8 + Tomcat8.5 + mysql + Eclispe (IntelliJ IDEA,Eclispe,MyEclispe,Sts 都支持) 项目技术： JSP + C3P0+ Servlert + ht.
仿京东的商品展示详情页面
11-16
仿照京东商品展示详情页做的demo,解压到Hbuilder或者其他IDE中即可使用,商城项目中可以直接拿过来修改使用。
Android电商应用开发：模仿京东商品详情页
最新发布
weixin_29496633的博客
07-25 912
在当前移动互联网时代，用户界面(UI)的设计与开发对于应用的成败至关重要。本章将概述如何模仿京东app的商品详情页进行设计。我们将从理解用户需求与期望开始，进而分析商品详情页在京东app中的作用，以及它如何为用户提供丰富的商品信息和优质的浏览体验。此外，本章也将介绍设计的基本思路与步骤，提供在设计商品详情页时应该遵循的若干原则，例如简洁性、易用性和响应速度。设计京东app商品详情页，不仅需要考虑美观和直观，还要确保加载速度快和交互流畅。
“每日10行代码”计划规则的明确
天天卡丁的博客
09-20 370
坚持“每日10行代码”有24天了，效果应该还是不错的，产生了20多篇的博客文章，有些文章的内容远远超过了10行代码，有时为了写一篇博客我会花费数小时的时间。 根据这20多天的以来的经验，我决定给这个计划制定一些规则： “每日10行代码” 可以是写代码，也可以是看代码的数量，但是看的话要确保每一行代码都看懂了，能给代码写详细的注释。 “每日10行代码” 并不一定非是10行，而是一个范围，7-15行。 “每日10行代码” 并不是每天一篇博客，当然最好能写出一篇博客，如果因为其他原因没写出来也是可以的，但一定
打造仿京东天猫商品详情页的ViewPager滑动效果
1. **仿京东天猫商品详情页的设计与实现** 在安卓开发中，仿京东或天猫的商品详情页涉及到用户界面(UI)设计和用户体验(UX)设计的诸多方面。首先，开发者需要考虑的是界面布局，通常包括商品图片展示区、商品信息...
仿淘宝商品详情页顶部banner和沉浸式效果
时光小偷
01-03 1537
这边使用第三方沉浸式库https://github.com/gyf-dev/ImmersionBar使用自己去研究 一、沉浸式效果 主要是看滑动过程中toolBar的透明度变化 布局如下： <android.support.design.widget.CoordinatorLayout android:id="@+id/coordinator" andr...
Android中实现简单的仿京东详情页面
u012556114的博客
03-25 6408
之前做过一个商场项目，实现了类似京东的详情页，采用Coordinatorlatout+Appbarlayout+toolbar实现，实现的效果主要是沉浸式状态栏和标题栏，当图片滑动时标题栏和按钮颜色发生相应变化. 1.布局代码: <?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget....
基于Bootstarp 仿京东多条件筛选插件
10-27
基于Bootstarp 仿京东多条件筛选插件的开发
jq仿京东商品详细页图片放大镜
06-11
jq仿京东商品详细页图片放大镜
仿京东、淘宝商品详情页上拉显示详情的嵌套ScrollView
04-26
在做安卓商城项目时，产品经理老是拿京东和淘宝做样板，然后，就有了这个demo，实现在商品详情页上拉显示详情，主要技术就是处理ScrollView嵌套ScrollView或WebView时触摸、滑动事件的交互处理
高仿淘宝、京东上拉加载图文详情实现
01-25
高仿淘宝、京东商品详情页面的上拉加载图文详情功能。使用扩展ViewGroup实现，对事件冲突已经做了处理，可嵌套ListView、WebView等自由使用。
仿京东商城html网页源码
2401_84103344的博客
05-02 636
由于篇幅限制，小编在此截出几张知识讲解的图解=“” />由于篇幅限制，小编在此截出几张知识讲解的图解[外链图片转存中…(img-UFNgsrDY-1714625444290)][外链图片转存中…(img-jqgbDYWv-1714625444290)][外链图片转存中…(img-XZ7UVDDX-1714625444291)][外链图片转存中…(img-qhdS05he-1714625444291)][外链图片转存中…(img-9TgIlkLf-1714625444291)]本文已被。
Android仿京东详情页2实现沉浸式状态栏和标题栏，顶部tab切换，滑动到底部自动切换至详情页面
u012556114的博客
05-22 2884
本文是接着上次仿京东详情页的第2个版本，把之前的底部tab切换放到标题栏，并根据banner滑动的距离隐藏显示tab，滑动到底部自动切换到商品详情页面. 1.Mainactivity代码: package com.example.jdshopdetailtwo; import android.widget.ImageView; import android.widget.TextView; import androidx.appcompat.widget.Toolbar...
天猫HTML练手项目,GitHub - txz1220/tianmao: 一个模仿天猫网页的项目
weixin_34234884的博客
06-20 347
一个模仿天猫网页的项目主要涉及到前端方面，后端暂无。主要目的：拿来练手用的本项目主要是联系使用，所以css js 都放在html页面上了。知识点学习：1、html要有个布局框架2、css要有层次写，首先写最上层的body 、div 依次写样式。 最好有继承关系，没有继承关系的再单写。3、js 交互逻辑层次要强1、产品页-产品图片html设置clss id 值 命名规范化。css1、首先设置...
模仿京东页面——首页、商品列表页、购物车页，实现添加购物车功能
ningsheng的博客
12-06 761
模仿京东页面首页分类页商品详情页购物车 首页 分类页 商品详情页 购物车 详情页面图 代码压缩包可以在资源里自取或者百度网盘（提取码：sqxp）！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值