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

ok，效果呢就是這樣了，今天這里主要關(guān)注倆個地方，1、頭部漸變 2、滾動到指定位置選顯卡顏色做出相應(yīng)的改變并且點擊選項卡頁面滑動到相應(yīng)的位置。

首先大家不要把這個想的多么多么難啊，其實實現(xiàn)起來很簡單的，那我們看看實現(xiàn)方案吧！文章末尾，我會給出源碼地址，大家互相學(xué)習哈！

1、布局activity_taobao_detail.xml

頁面上一共有四個模塊，我得分別是：商品、評價、詳情、售后。這四個模塊分別使用布局layout1、layout2、layout3、layout4將內(nèi)容包裹起來。頁面方便后面監(jiān)聽高度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="售后服務(wù)" 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，當然大家也可以使用其他的方案實現(xiàn)。

<?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布局全部內(nèi)容就是這樣了，下面我們來看看代碼是怎么實現(xiàn)的吧。

一、透明度

首先實現(xiàn)scrollView的滾動監(jiān)聽，然后就是scrollYhe輪播圖的高度比對，這里我是希望滑動超過輪播圖的高度是帶選項卡的頭部（toplayout1）設(shè)為不透明，

使用setAlpha()直接設(shè)置控件的透明度，當然你可能在很多文檔中看到top_layout.getBackground().mutate().setAlpha();這個方法來改變標題的透明度，這里我為什么沒有用呢，主要是這個方法僅僅只是改變了這塊布局的背景的透明的度，其中的子View不受影響。而我們希望的效果時整塊布局都帶有透明的效果（這里我要瞎掰扯一會了，我一開始當然是不知道，然后我就在布局里面先把toplayout1的xml 文件中將根布局透明度設(shè)置為全透明android:alpha="0"，后來在代碼中使用設(shè)置背景透明度的方法結(jié)果比起作用了，不要說我傻啊，凡事都個過程。）總之這個方法是可以的哦，兩者的效果不一樣罷了。

那個計算透明度的算法，大家看看就行了啊，這我也解釋不好，畢竟是數(shù)學(xué)。

到此為止呢，透明度的基本上效果就實現(xiàn)了。

二、滾動到指定位置選顯卡顏色做出相應(yīng)的改變并且點擊選項卡頁面滑動到相應(yīng)的位置

1、頁面滾動到指定位置改變選項卡選中狀態(tài)。

實現(xiàn)的方案就是簡單的獲取四部分內(nèi)容距離頭部的位置，getTop（）獲取的是距離父控件的高度，但是這里呢，恰好父控件是全屏的。然后就layout1.getTop（）；layut2,getTop（）；layout3.getTop（）；layout4.getTop（）；分別獲取距離頭部的高度。至于為什么要減去toplayout_height（toplayout1高度）；是因為我希望他顯示在頭部的下面啊。是不是很簡單。下面就是設(shè)置tab的選中狀態(tài)了

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

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

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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。