現在還在用上拉拖拽顯示更多？淘寶都已經廢棄了的效果還要繼續使用嗎！下面我們先來看看淘寶現在效果，右圖是我實現的效果，其實還是很相近的，對吧！

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的選中狀態了

2、點擊選項卡滾動到指定位置。

這個感覺不用解釋太多，相信大家都是可以看懂的，這個方法就是監聽tab選重事件的嘛。

第一次寫文章，大家不要笑話，本來語文教不好，多多包涵。

http://download.csdn.net/download/xinyu315/10042049，需要2個積分，我也很無奈，最少就選兩個，沒有積分的就私信我吧，留下聯系方式哦，不過我不一定能看到呢。。

總結

以上是生活随笔為你收集整理的最新仿淘宝详细页头部渐变效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。