最新仿淘宝详细页头部渐变效果

最新推荐文章于 2025-04-22 21:03:34 发布

xinyu315

最新推荐文章于 2025-04-22 21:03:34 发布

阅读量1.2k

点赞数 1

分类专栏： android-基础文章标签：淘宝详细渐变滚动

本文链接：https://blog.csdn.net/xinyu315/article/details/78364808

版权

android-基础专栏收录该内容

0 篇文章

订阅专栏

现在还在用上拉拖拽显示更多？淘宝都已经废弃了的效果还要继续使用吗！下面我们先来看看淘宝现在效果，右图是我实现的效果，其实还是很相近的，对吧！

ok，效果呢就是这样了，今天这里主要关注俩个地方，1、头部渐变 2、滚动到指定位置选显卡颜色做出相应的改变并且点击选项卡页面滑动到相应的位置。

首先大家不要把这个想的多么多么难啊，其实实现起来很简单的，那我们看看实现方案吧！文章末尾，我会给出源码地址，大家互相学习哈！

1、布局activity_taobao_detail.xml

页面上一共有四个模块，我得分别是：商品、评价、详情、售后。这四个模块分别使用布局layout1、layout2、layout3、layout4将内容包裹起来。页面方便后面监听高度he点击选项卡滚动为主

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >

    <android.support.v4.widget.NestedScrollView
        android:id="@+id/detail_scroll"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scrollbars="vertical"
        >

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

            <LinearLayout
                android:id="@+id/layout1"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                >
                <RelativeLayout
                    android:id="@+id/layout1_vp_rl"
                    android:layout_width="match_parent"
                    android:layout_height="300dp">
                    <android.support.v4.view.ViewPager
                        android:id="@+id/layout1_viewpager"
                        android:layout_width="match_parent"
                        android:layout_height="300dp">
                    </android.support.v4.view.ViewPager>

                    <TextView
                        android:id="@+id/layout1_text"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="0/0"
                        android:gravity="center_vertical"
                        android:layout_alignParentRight="true"
                        android:layout_alignParentBottom="true"
                        android:background="@drawable/xml_bg_gray_20_tra"
                        android:textColor="@color/color_fff"
                        android:layout_marginBottom="15dp"
                        android:layout_marginRight="20dp"
                        />

                </RelativeLayout>

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="500dp"
                    android:background="#eeddaa"
                    android:text="dw9esad"
                    android:textColor="#33ddaa"/>
            </LinearLayout>

            <LinearLayout
                android:id="@+id/layout2"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                >
                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="40dp"
                    android:background="#dddddd"
                    android:text="商品评价"
                    android:textColor="#666"
                    android:gravity="center"/>

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="800dp"
                    android:background="#33ddaa"
                    android:text="dw9esad"
                    android:textColor="#ddeeaa"/>
            </LinearLayout>
            <LinearLayout
                android:id="@+id/layout3"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical"
                >
                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="40dp"
                    android:background="#dddddd"
                    android:text="商品详情"
                    android:textColor="#666"
                    android:gravity="center"/>

                <WebView
                    android:id="@+id/layout3_webview"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content" />

            </LinearLayout>


            <LinearLayout
                android:id="@+id/layout4"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                >
                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="40dp"
                    android:background="#dddddd"
                    android:text="售后服务"
                    android:textColor="#666"
                    android:gravity="center"/>

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="830dp"
                    android:background="#ee22ee"
                    android:text="dw9esad"
                    android:textColor="#eeaadd"/>
            </LinearLayout>
        </LinearLayout>
    </android.support.v4.widget.NestedScrollView>
    <include layout="@layout/layout_top"/>
    <include layout="@layout/layout"/>
</RelativeLayout>

可以看到我这里引入了两个布局，其实都是头部啦！命名啥的大家知道就好啊

layout_top.xml 这个头部呢，其实我只是作为效果的，页面上没有起到什么实际性的作用，就是个展示。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:id="@+id/top_layout2"
                android:layout_width="match_parent"
                android:layout_height="55dp"
                android:background="@android:color/transparent"
                android:gravity="center_vertical"
    >

    <ImageView
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:padding="8dp"
        android:src="@mipmap/back"/>

    <ImageView
        android:id="@+id/top_share1"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_alignParentRight="true"
        android:layout_marginLeft="8dp"
        android:padding="8dp"
        android:src="@mipmap/share"/>

    <ImageView
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_toLeftOf="@+id/top_share1"
        android:padding="8dp"
        android:src="@mipmap/shop_cart"/>
</RelativeLayout>

layout.xml 这个才是详细页真正意义上的头部，里面主要是用了一个tabLayout，当然大家也可以使用其他的方案实现。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:app="http://schemas.android.com/apk/res-auto"
                android:id="@+id/top_layout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@color/color_fff"
                android:paddingTop="8dp">

    <ImageView
        android:id="@+id/top_back"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:padding="8dp"
        android:src="@mipmap/back1"/>

    <ImageView
        android:id="@+id/top_share"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_alignParentRight="true"
        android:layout_marginLeft="8dp"
        android:padding="8dp"
        android:src="@mipmap/share1"/>

    <ImageView
        android:id="@+id/top_shop"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_toLeftOf="@+id/top_share"
        android:padding="8dp"
        android:src="@mipmap/shop_cart1"/>

    <ImageView
        android:id="@+id/top_img"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_centerHorizontal="true"
        android:scaleType="fitXY"
        android:src="@mipmap/gilder1"
        />


    <android.support.design.widget.TabLayout
        android:id="@+id/top_tab"
        android:layout_width="match_parent"
        android:layout_height="45dp"
        android:layout_below="@+id/top_img"
        app:tabIndicatorHeight="0dp"
        app:tabMode="fixed"
        app:tabSelectedTextColor="@color/colorPrimary"
        app:tabTextColor="@color/color_666"
        >

        <android.support.design.widget.TabItem
            android:id="@+id/top_tab_product"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="商品"/>

        <android.support.design.widget.TabItem
            android:id="@+id/top_tab_eva"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="评价"/>

        <android.support.design.widget.TabItem
            android:id="@+id/top_tab_detail"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="详情"/>

        <android.support.design.widget.TabItem
            android:id="@+id/top_tab_cusser"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="售后"/>
    </android.support.design.widget.TabLayout>


</RelativeLayout>

Ok布局全部内容就是这样了，下面我们来看看代码是怎么实现的吧。

一、透明度

首先实现scrollView的滚动监听，然后就是scrollYhe轮播图的高度比对，这里我是希望滑动超过轮播图的高度是带选项卡的头部（toplayout1）设为不透明，

使用setAlpha()直接设置控件的透明度，当然你可能在很多文档中看到top_layout.getBackground().mutate().setAlpha();这个方法来改变标题的透明度，这里我为什么没有用呢，主要是这个方法仅仅只是改变了这块布局的背景的透明的度，其中的子View不受影响。而我们希望的效果时整块布局都带有透明的效果（这里我要瞎掰扯一会了，我一开始当然是不知道，然后我就在布局里面先把toplayout1的xml 文件中将根布局透明度设置为全透明android:alpha="0"，后来在代码中使用设置背景透明度的方法结果比起作用了，不要说我傻啊，凡事都个过程。）总之这个方法是可以的哦，两者的效果不一样罢了。

那个计算透明度的算法，大家看看就行了啊，这我也解释不好，毕竟是数学。

到此为止呢，透明度的基本上效果就实现了。

二、滚动到指定位置选显卡颜色做出相应的改变并且点击选项卡页面滑动到相应的位置

1、页面滚动到指定位置改变选项卡选中状态。

实现的方案就是简单的获取四部分内容距离头部的位置，getTop（）获取的是距离父控件的高度，但是这里呢，恰好父控件是全屏的。然后就layout1.getTop（）；layut2,getTop（）；layout3.getTop（）；layout4.getTop（）；分别获取距离头部的高度。至于为什么要减去toplayout_height（toplayout1高度）；是因为我希望他显示在头部的下面啊。是不是很简单。下面就是设置tab的选中状态了