仿淘宝详情页的商品详情

最新推荐文章于 2024-08-12 10:45:36 发布
最新推荐文章于 2024-08-12 10:45:36 发布
阅读量7.2k 收藏 17
点赞数 5
文章标签： 自定义Scrollview
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36020854/article/details/82702167
版权

先上效果图

效果就是上面图片的效果 接下来看看如何实现

  • 首先我们来看下布局文件 

 <LinearLayout
            android:id="@+id/header"
            android:layout_width="match_parent"
            android:layout_height="72dp"
            android:paddingTop="24dp"
            android:background="#00FFFFFF"
            android:orientation="horizontal">

            <ImageView
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:layout_gravity="center"
                android:src="@drawable/back"
                />
            <View
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"/>
          <ImageView
              android:id="@+id/icon"
              android:layout_width="30dp"
              android:layout_height="30dp"
              android:src="@drawable/aa"
              android:layout_gravity="center"/>
            <View
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"/>
            <ImageView
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:layout_gravity="center"
                />

        </LinearLayout>

这块主要是设置刚进入页面时的透明头部  主要组成部分有返回键  和头部的方形小图片 还有分享按钮 以及你想附加的标题功能 默认进入是透明的只显示返回按钮

 <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <RadioGroup
                android:id="@+id/radioGroup"
                android:background="#00FFFFFF"
                android:layout_width="match_parent"
                android:orientation="horizontal"
                android:layout_height="48dp">

                <RadioButton
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:button="@null"
                    android:textColor="#00000000"
                    android:gravity="center"
                    android:text="宝贝"/>

                <RadioButton
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:button="@null"
                    android:textColor="#00000000"
                    android:gravity="center"
                    android:text="评价"/>

                <RadioButton
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:button="@null"
                    android:textColor="#00000000"
                    android:gravity="center"
                    android:text="详情"/>

                <RadioButton
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:gravity="center"
                    android:button="@null"
                    android:textColor="#00000000"
                    android:text="推荐"/>

            </RadioGroup>

            <View
                android:id="@+id/layer"
                android:layout_width="match_parent"
                android:background="#00FFFFFF"
                android:layout_height="48dp"/>
        </FrameLayout>

这部分主要是我们的标签选项卡 我这边采用的是RadioGroup+radioButton实现的 类似于淘宝的商品、评价、详情等标签 

这样我们的页面布局头部就完成了  下面我们来看下具体组成内容

<com.text.lg.ideascrollview.IdeaScrollView
        android:id="@+id/ideaScrollView"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">
            <LinearLayout
                android:id="@+id/one"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical">
                <com.text.lg.ideascrollview.IdeaViewPager
                    android:id="@+id/viewPager"
                    android:layout_width="match_parent"
                    android:background="@drawable/aa"
                    android:layout_height="wrap_content"/>
                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:src="@drawable/one"/>
            </LinearLayout>

            <LinearLayout
                android:id="@+id/two"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical">
                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:src="@drawable/two"/>

                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:src="@drawable/three"/>
            </LinearLayout>

            <ImageView
                android:id="@+id/three"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:src="@drawable/four"/>
            <LinearLayout
                android:id="@+id/four"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical">
                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:src="@drawable/five"/>

                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:src="@drawable/six"/>
                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:src="@drawable/six"/>
                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:src="@drawable/six"/>
            </LinearLayout>

        </LinearLayout>
    </com.text.lg.ideascrollview.IdeaScrollView>

这部分就是我们的具体页面内容  可以看到我们的详情页面数据使用自定义的一个Scrollview来包裹的 其中分为4块 我们布局里面写的很清楚 分别对应着详情页中的四个模块  当然  我这里面只是用图片来代替内容了  具体内容可自己填充

  • 下面来看下我们具体实现代码

StatusBarCompat.translucentStatusBar(this);

我这边是采用的第三方的沉浸式透明状态栏  你们可以自行替换

dependencies {
        compile ('com.github.niorgai:StatusBarCompat:2.1.4', {
            exclude group: 'com.android.support'
        })
    }

这个是我沉浸式状态栏的依赖  感兴趣的可以了解一下

 Rect rectangle= new Rect();
        getWindow().getDecorView().getWindowVisibleDisplayFrame(rectangle);
        ideaScrollView.setViewPager(viewPager,getMeasureHeight(headerParent)-rectangle.top);
        icon.setImageAlpha(0);
        radioGroup.setAlpha(0);
        radioGroup.check(radioGroup.getChildAt(0).getId());

上面是获取状态栏的高度并且使用自定义scrollview绑定banner图片 并获取图片高度

以及初始化我们头部部分控件的透明度 和默认选择第一个标签

View one = findViewById(R.id.one);
View two = findViewById(R.id.two);
View four = findViewById(R.id.four);
View three = findViewById(R.id.three);
ArrayList<Integer> araryDistance = new ArrayList<>();

araryDistance.add(0);
araryDistance.add(getMeasureHeight(one)-getMeasureHeight(headerParent));
araryDistance.add(getMeasureHeight(one)+getMeasureHeight(two)-getMeasureHeight(headerParent));    

araryDistance.add(getMeasureHeight(one)+getMeasureHeight(two)+getMeasureHeight(three)-getMeasureHeight(headerParent));

ideaScrollView.setArrayDistance(araryDistance);

这块是我们获取到我们的四个模块的高度 并把高度存到集合中 传入到我们自定义的scrollview中

 private void scrollToPosition(int position){
        scrollTo(0,arrayDistance.get(position));
    }

scrollview通过传过来的高度进行定位滑动 意思就是点击我们的标题选项滑动到相应的位置

 public int getMeasureHeight(View view){
        int width = View.MeasureSpec.makeMeasureSpec(0,
                View.MeasureSpec.UNSPECIFIED);
        int height = View.MeasureSpec.makeMeasureSpec(0,
                View.MeasureSpec.UNSPECIFIED);
        view.measure(width, height);
        return view.getMeasuredHeight();
    }

这个是获取控件高度的方法

ideaScrollView.setOnScrollChangedColorListener(new IdeaScrollView.OnScrollChangedColorListener() {
            @Override
            public void onChanged(float percentage) {

                int color = getAlphaColor(percentage>0.9f?1.0f:percentage);
                header.setBackgroundDrawable(new ColorDrawable(color));
                radioGroup.setBackgroundDrawable(new ColorDrawable(color));
                icon.setImageAlpha((int) ((percentage>0.9f?1.0f:percentage)*255));
                radioGroup.setAlpha((percentage>0.9f?1.0f:percentage)*255);

                setRadioButtonTextColor(percentage);

            }

            @Override
            public void onChangedFirstColor(float percentage) {

            }

            @Override
            public void onChangedSecondColor(float percentage) {

            }
        });

这个监听方法是监测我们滑动的距离 来改变我们标题的颜色 从透明慢慢滑动进行颜色渐变 以及设置我们头部控件的颜色 和展示我们的标题选项卡

public int getAlphaColor(float f){
        return Color.argb((int) (f*255),0x09,0xc1,0xf4);
    }

    public int getLayerAlphaColor(float f){
        return Color.argb((int) (f*255),0x09,0xc1,0xf4);
    }

    public int getRadioCheckedAlphaColor(float f){
        return Color.argb((int) (f*255),0x44,0x44,0x44);
    }

    public int getRadioAlphaColor(float f){
        return Color.argb((int) (f*255),0xFF,0xFF,0xFF);
    }

可以根据这块来改变我们头部以及标题的颜色 根据传入的值来进行颜色渐变

 ideaScrollView.setOnSelectedIndicateChangedListener(new IdeaScrollView.OnSelectedIndicateChangedListener() {
            @Override
            public void onSelectedChanged(int position) {
                isNeedScrollTo = false;
                radioGroup.check(radioGroup.getChildAt(position).getId());
                isNeedScrollTo = true;
            }
        });

        radioGroup.setOnCheckedChangeListener(radioGroupListener);

 private RadioGroup.OnCheckedChangeListener radioGroupListener =new RadioGroup.OnCheckedChangeListener() {
        @Override
        public void onCheckedChanged(RadioGroup group, @IdRes int checkedId) {
            for(int i=0;i<radioGroup.getChildCount();i++){
                RadioButton radioButton = (RadioButton) radioGroup.getChildAt(i);
                radioButton.setTextColor(radioButton.isChecked()?getRadioCheckedAlphaColor(currentPercentage):getRadioAlphaColor(currentPercentage));
                if(radioButton.isChecked()&&isNeedScrollTo){
                    ideaScrollView.setPosition(i);
                }
            }
        }
    };

根据这两个监听方法来改变我们标题的选中tab 滑动到不同的位置选中对应的Tab并改变颜色 具体实现方法看自定义Scrollview

根据限定距离（Banner）计算百分比偏移量，实现颜色渐变、透明度渐变（淘宝商品详情页有二次颜色渐变）

 @Override
    protected void onScrollChanged(int l, int t, int oldl, int oldt) {
        super.onScrollChanged(l, t, oldl, oldt);
        if (viewPager != null && t != oldt) {
            viewPager.setTranslationY(t/2);
        }

        if(viewPager!=null&&t<=point.x-headerHeight&&getOnScrollChangedColorListener()!=null){

            getOnScrollChangedColorListener().onChanged(Math.abs(t)/Float.valueOf(point.x-headerHeight));
            if(t<=(point.x-headerHeight)/2){
                getOnScrollChangedColorListener().onChangedFirstColor(t/(point.x-headerHeight)/2);
            }else{
                getOnScrollChangedColorListener().onChangedSecondColor((t-(point.x-headerHeight)/2)/(point.x-headerHeight)/2);
            }

        }

        int currentPosition = getCurrentPosition(t,arrayDistance);
        if(currentPosition!=position&&getOnSelectedIndicateChangedListener()!=null){
            getOnSelectedIndicateChangedListener().onSelectedChanged(currentPosition);
        }
        this.position = currentPosition;
    }

    private int getCurrentPosition(int t, ArrayList<Integer> arrayDistance) {

        int index = 0;
        for (int i=0;i<arrayDistance.size();i++){
            if(i==arrayDistance.size()-1){
                index = i;
            }else {
                if(t>=arrayDistance.get(i)&&t<arrayDistance.get(i+1)){
                    index = i;
                    break;
                }
            }
        }
        return index;
    }

下面是自定义Scrollview的全部代码

package com.text.lg.ideascrollview;

import android.content.Context;
import android.graphics.Point;
import android.util.AttributeSet;
import android.view.WindowManager;
import android.widget.ScrollView;

import java.util.ArrayList;

public class IdeaScrollView extends ScrollView {

    private final Point point;
    private IdeaViewPager viewPager;

    private int position = 0;

    ArrayList<Integer> arrayDistance = new ArrayList<>();
    private int headerHeight;

    public IdeaScrollView(Context context) {
        this(context,null,0);
    }

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

    public IdeaScrollView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        WindowManager windowManager = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
        point = new Point();
        windowManager.getDefaultDisplay().getSize(point);
    }

    @Override
    protected void onScrollChanged(int l, int t, int oldl, int oldt) {
        super.onScrollChanged(l, t, oldl, oldt);
        if (viewPager != null && t != oldt) {
            viewPager.setTranslationY(t/2);
        }

        if(viewPager!=null&&t<=point.x-headerHeight&&getOnScrollChangedColorListener()!=null){

            getOnScrollChangedColorListener().onChanged(Math.abs(t)/Float.valueOf(point.x-headerHeight));
            if(t<=(point.x-headerHeight)/2){
                getOnScrollChangedColorListener().onChangedFirstColor(t/(point.x-headerHeight)/2);
            }else{
                getOnScrollChangedColorListener().onChangedSecondColor((t-(point.x-headerHeight)/2)/(point.x-headerHeight)/2);
            }

        }

        int currentPosition = getCurrentPosition(t,arrayDistance);
        if(currentPosition!=position&&getOnSelectedIndicateChangedListener()!=null){
            getOnSelectedIndicateChangedListener().onSelectedChanged(currentPosition);
        }
        this.position = currentPosition;
    }

    private int getCurrentPosition(int t, ArrayList<Integer> arrayDistance) {

        int index = 0;
        for (int i=0;i<arrayDistance.size();i++){
            if(i==arrayDistance.size()-1){
                index = i;
            }else {
                if(t>=arrayDistance.get(i)&&t<arrayDistance.get(i+1)){
                    index = i;
                    break;
                }
            }
        }
        return index;
    }

    private void scrollToPosition() {
        scrollToPosition(position);
    }

    private void scrollToPosition(int position){
        scrollTo(0,arrayDistance.get(position));
    }

    public void setViewPager(IdeaViewPager viewPager,int headerHeight){
        this.viewPager = viewPager;
        this.headerHeight = headerHeight;
    }

    public interface OnScrollChangedColorListener{

        void onChanged(float percentage);

        void onChangedFirstColor(float percentage);

        void onChangedSecondColor(float percentage);

    }

    public interface OnSelectedIndicateChangedListener{

        void onSelectedChanged(int position);
    }

    private OnSelectedIndicateChangedListener onSelectedIndicateChangedListener;

    private OnScrollChangedColorListener onScrollChangedColorListener;

    public OnScrollChangedColorListener getOnScrollChangedColorListener() {
        return onScrollChangedColorListener;
    }

    public void setOnScrollChangedColorListener(OnScrollChangedColorListener onScrollChangedColorListener) {
        this.onScrollChangedColorListener = onScrollChangedColorListener;
    }

    public IdeaViewPager getViewPager() {
        return viewPager;
    }

    public int getPosition() {
        return position;
    }

    public void setPosition(int position) {
        this.position = position;
        scrollToPosition();
    }

    public ArrayList<Integer> getArrayDistance() {
        return arrayDistance;
    }

    public void setArrayDistance(ArrayList<Integer> arrayDistance) {
        this.arrayDistance = arrayDistance;
    }

    public OnSelectedIndicateChangedListener getOnSelectedIndicateChangedListener() {
        return onSelectedIndicateChangedListener;
    }

    public void setOnSelectedIndicateChangedListener(OnSelectedIndicateChangedListener onSelectedIndicateChangedListener) {
        this.onSelectedIndicateChangedListener = onSelectedIndicateChangedListener;
    }
}

以上代码就实现了文中效果图样式

本文借鉴了大佬博客内容  https://blog.csdn.net/AnalyzeSystem/article/details/79442196?from=singlemessage 

GitHub项目地址

小水缸
关注
高仿淘宝html和js
03-08
仿照爱淘宝，包含html和js,jq,其中包含了爱淘宝首页，信息页，物件详情页，登陆页面和分类详情页。
HTML+CSS 仿淘宝静态首页
热门推荐
小柒的前端之旅
03-19 1万+
学完HTML和CSS需要有一个好的练习，仿淘宝等首页都是一个不错的练习方法，目前处于学习原生js阶段，学html+css时没有做一个像样的项目，现在边学js边将前面的基础部分打牢。 里面很多地方可以用js写，轮播图这一块以及有些ul里面的li需要动态创建 之后都会进行修改。 html部分 <!DOCTYPE html> <html lang="en"> <head&g...
技术分享-商城篇-商品详情（六）
最新发布
BOBO博客
08-12 736
一个高效、可扩展的B2C商城商品详情页系统，通常采用微服务架构，将不同功能模块（如商品信息、用户管理、订单处理、支付系统等）拆分为独立的服务，通过API网关进行服务间的通信与数据交换。前端采用React、Vue等现代JavaScript框架构建，后端则可能选用Spring Boot、Django等框架，数据库层面则可能采用MySQL、MongoDB等关系型或非关系型数据库，以满足不同数据存储需求。
jquery仿淘宝商城商品详情页图片展示特效.zip
09-02
jquery仿淘宝商城商品详情页图片展示特效, jquery仿淘宝商城商品详情页图片展示特效 jquery仿淘宝商城商品详情页图片展示特效 jquery仿淘宝商城商品详情页图片展示特效 jquery仿淘宝商城商品详情页图片展示特效 jquery仿淘宝商城商品详情页图片展示特效
仿淘宝html网页模板
12-11
仿淘宝html网页模板
仿作淘宝页面 html+css
m0_63706031的博客
07-13 1921
仿作淘宝页面简单版
Android仿淘宝商品详情页
01-20
以上就是实现Android仿淘宝商品详情页的关键技术点，包括状态栏透明、标题栏图标透明度变化、自定义ViewPager、ScrollView的交互以及颜色渐变。这些知识点的掌握有助于开发者创建更加丰富和动态的Android界面。
Android仿淘宝商品详情页效果
01-20
综上所述，实现一个Android仿淘宝商品详情页涉及到多个方面的技术，包括布局设计、组件交互、数据处理、动画效果以及性能优化等。通过合理的设计和编码，可以构建出一个功能丰富且用户体验良好的商品详情页面。
自定义VIewGroup实现仿淘宝商品详情页
07-23
本教程将深入讲解如何通过自定义ViewGroup来实现类似淘宝商品详情页的滚动效果，即当页面滑动到底部时出现粘滞效果，继续上拉则切换至下一页。这种效果常见于电商应用的商品浏览界面，为用户提供流畅的浏览体验。 ...
商城手机端vue仿淘宝商品详情demo
05-19
在“商城手机端vue仿淘宝商品详情demo”项目中，Vue.js 被用于构建一个类似淘宝的商品详情展示和购物车功能。Vue的核心特性包括数据绑定、组件系统和指令系统，使得开发者可以更高效地组织和管理代码。 1. **数据...
jQuery仿淘宝商品详情页图片放大镜效果，支持IE6及以上
07-18
本人参考淘宝的商品详细页商品放大镜效果来制作，商品图片可以为各种矩形，放大规则同淘宝相似。css中的样式可进行各种样式修改。支持IE6及以上版本
仿淘宝移动端的静态html5页面(比较全27个页面)
01-03
仿淘宝移动端的静态html5页面，还是比较全的，共有27个页面。 注意只有移动端的网页，没有pc端的。
JS仿淘宝首页商品分类列表效果
05-29
JS仿淘宝首页商品分类列表效果! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net/
使用HTML5编写的移动端仿淘宝页面
10-16
使用HTML5编写的安卓移动端仿淘宝页面，基本上一样，下载即用
仿淘宝网html网页模板
05-01
仿淘宝网html网页模板,仿淘宝网html网页模板，静态页面学习，前端基础学习
仿淘宝网html网页模板.rar
10-20
仿淘宝网html网页模板
手写仿淘宝商城页面（html+css+部分js）
xiediyue的博客
10-07 4878
一个练手项目，边看视频边写的，代码都是别人的。 效果图： html部分： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, ini.
仿淘宝移动端商品详情页面
06-01
仿淘宝移动端商品详情页面，规格添加商品自适应布局兼容移动端
仿淘宝商品界面（html div+css)
yikaluosidexizhe的博客
11-10 917
div+css做的
Android实现淘宝商品详情页效果
"Android仿淘宝商品详情页效果的实现方法及代码示例" 在Android应用开发中，为了提供用户友好的体验，开发者常常需要模仿知名应用的设计，如淘宝的商品详情页。这个页面通常包含丰富的信息展示，如商品图片、描述、...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值