【參考借鑒】 Android仿京東土思、天貓商品詳情頁
首先看一下效果圖
GIF圖片太大了荷科，就看一下截圖吧。想看效果的去下載apk应狱±逊荩【各位小可愛們?nèi)绻X得效果需要绑嘹，可以小小的贊賞一下~~么么噠】
001.png
002.png
003.png
一稽荧、項目結構分析
1、頂部是TabLayout+ViewPager來實現(xiàn)工腋，主要處理在DetailFragment中姨丈。布局中最外層是CoordinatorLayout，其次是自定義的一個view夷蚊，slideDetailsLayout构挤。來看一下detailFragment的布局文件。
<android.support.design.widget.CoordinatorLayout
android:layout_above="@id/goodDetail_bottomLinearId"
android:layout_alignParentTop="true"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.zxh.taobaogooddetail.views.SlideDetailsLayout
android:id="@+id/slideDetailsLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/backgroundWhite">
<ScrollView
android:id="@+id/scrollView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scrollbars="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:background="@color/backgroundGray">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.youth.banner.Banner
android:id="@+id/detail_banner"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</com.youth.banner.Banner>
</RelativeLayout>
<View style="@style/common_horizontal_line" />
<TextView
style="@style/style_black_s15"
android:background="@color/backgroundWhite"
android:ellipsize="end"
android:lineSpacingMultiplier="1.3"
android:maxLines="2"
android:text="雀巢（Nestle）咖啡1+2原味速溶咖啡飲品100條1500g（新老包裝隨機發(fā)貨)" />
<LinearLayout
android:background="@color/backgroundWhite"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="10dp">
<TextView
style="@style/style_red_s18"
android:layout_marginLeft="3dp"
android:text="￥99.00"
android:textStyle="bold" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="15sp"
android:layout_marginLeft="4dp"
android:text="￥120" />
</LinearLayout>
<LinearLayout
android:layout_marginTop="12dp"
android:padding="2dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/backgroundWhite"
android:gravity="center_vertical">
<TextView
style="@style/style_black_s15"
android:layout_width="wrap_content"
android:text="促銷"
android:textColor="#888888"/>
<TextView
style="@style/style_black_s15"
android:layout_width="0dp"
android:layout_weight="1"
android:ellipsize="end"
android:maxLines="1"
android:text="購買2-3件可享受每件9折"/>
<ImageView
android:layout_marginRight="10dp"
android:layout_width="24dp"
android:layout_height="wrap_content"
android:src="@mipmap/more"/>
</LinearLayout>
<LinearLayout
android:background="@color/backgroundWhite"
android:layout_marginTop="12dp"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
style="@style/style_black_s15"
android:layout_width="wrap_content"
android:text="已選"
android:textColor="#888888"/>
<TextView
style="@style/style_black_s15"
android:layout_width="0dp"
android:layout_weight="1"
android:ellipsize="end"
android:maxLines="1"
android:text="原味100條惕鼓，1件"/>
</LinearLayout>
<LinearLayout
android:layout_marginTop="12dp"
android:background="@color/backgroundWhite"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical">
<TextView
style="@style/style_black_s15"
android:layout_width="wrap_content"
android:text="送至"
android:textColor="#888888"/>
<ImageView
android:layout_width="14dp"
android:layout_height="14dp"
android:src="@mipmap/address"/>
<TextView
style="@style/style_black_s15"
android:layout_width="0dp"
android:layout_weight="1"
android:ellipsize="end"
android:maxLines="1"
android:text="北京>朝陽區(qū)>三環(huán)以內(nèi)"/>
<ImageView
android:layout_marginRight="10dp"
android:layout_width="24dp"
android:layout_height="wrap_content"
android:src="@mipmap/more"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical">
<TextView
android:visibility="invisible"
style="@style/style_black_s15"
android:layout_width="wrap_content"
android:text="重量"
android:textColor="#888888"/>
<TextView
style="@style/style_black_s15"
android:layout_width="wrap_content"
android:text="現(xiàn)貨"
android:textColor="@color/mainColor"/>
<TextView
style="@style/style_black_s15"
android:layout_width="0dp"
android:layout_weight="1"
android:ellipsize="end"
android:maxLines="1"
android:text="15:00下單筋现，可預約今晚送達"
android:textColor="#888888"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical">
<TextView
style="@style/style_black_s15"
android:layout_width="wrap_content"
android:text="重量"
android:textColor="#888888"/>
<TextView
style="@style/style_black_s15"
android:layout_width="0dp"
android:layout_weight="1"
android:ellipsize="end"
android:maxLines="1"
android:text="1200g"/>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_marginTop="12dp"
android:background="@color/backgroundWhite"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical">
<TextView
style="@style/style_black_s15"
android:layout_width="wrap_content"
android:text="評論(1080)"
android:textColor="#888888"/>
<TextView
style="@style/style_black_s15"
android:layout_width="0dp"
android:layout_weight="1"/>
<TextView
style="@style/style_black_s15"
android:layout_width="wrap_content"
android:text="好評度"/>
<TextView
android:layout_marginRight="10dp"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="100%"
android:textSize="15sp"
android:textColor="@color/mainColor"/>
</LinearLayout>
<View style="@style/common_horizontal_line" />
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="12dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical">
<ImageView
android:layout_width="32dp"
android:layout_height="32dp"
android:src="@mipmap/head"/>
<TextView
style="@style/style_black_s15"
android:layout_width="wrap_content"
android:text="隱***膀"/>
<TextView
style="@style/style_black_s15"
android:layout_width="0dp"
android:layout_weight="1"/>
<ImageView
android:layout_width="12dp"
android:layout_height="12dp"
android:src="@mipmap/star"/>
<ImageView
android:layout_width="12dp"
android:layout_height="12dp"
android:src="@mipmap/star"/>
<ImageView
android:layout_width="12dp"
android:layout_height="12dp"
android:src="@mipmap/star"/>
<ImageView
android:layout_width="12dp"
android:layout_height="12dp"
android:src="@mipmap/star"/>
<ImageView
android:layout_width="12dp"
android:layout_height="12dp"
android:src="@mipmap/star"/>
</LinearLayout>
<TextView
android:layout_marginTop="10dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/backgroundWhite"
android:ellipsize="end"
android:lineSpacingMultiplier="1.3"
android:maxLines="2"
android:textColor="#555555"
android:text="發(fā)貨速度快，早上下單箱歧，下午就收到貨了矾飞。都是用小紙箱裝好的，日期也新鮮呀邢，準備每天早晚都沖一杯蜂蜜水喝喝洒沦。" />
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.zxh.taobaogooddetail.views.MyImageView
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:src="@mipmap/goods_img01"
android:scaleType="fitXY"/>
<View
android:layout_width="8dp"
android:layout_height="wrap_content"/>
<com.zxh.taobaogooddetail.views.MyImageView
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:src="@mipmap/goods_img02"
android:scaleType="fitXY"/>
<View
android:layout_width="8dp"
android:layout_height="wrap_content"/>
<com.zxh.taobaogooddetail.views.MyImageView
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:src="@mipmap/goods_img03"
android:scaleType="fitXY"/>
<View
android:layout_width="8dp"
android:layout_height="wrap_content"/>
<com.zxh.taobaogooddetail.views.MyImageView
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:src="@mipmap/goods_img04"
android:scaleType="fitXY"/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
<RelativeLayout
android:id="@+id/detail_allCommentRelative"
android:layout_marginTop="2dp"
android:layout_marginRight="8dp"
android:layout_marginLeft="8dp"
android:background="@drawable/login_btn_bg"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="12dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="全部評價"
android:textSize="14sp"
android:textColor="#888888"
android:layout_centerInParent="true"/>
</RelativeLayout>
<!-- 上拉查看圖文詳情 -->
<LinearLayout
android:id="@+id/pull_up_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/backgroundWhite"
android:gravity="center_vertical"
android:padding="12dp"
android:orientation="horizontal">
<View
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="2px"
android:background="@color/divide"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="繼續(xù)拖動,查看圖文詳情"
android:paddingLeft="12px"
android:paddingRight="12px"
android:textSize="12sp"
android:textColor="#888888"/>
<View
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="2px"
android:background="@color/divide"/>
</LinearLayout>
</LinearLayout>
</ScrollView>
<include layout="@layout/include_item_tab" />
</com.zxh.taobaogooddetail.views.SlideDetailsLayout>
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab_up"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="30dp"
android:src="@mipmap/top"
app:backgroundTint="#ffffff"
app:borderWidth="0dp"
app:fabSize="mini"
app:rippleColor="#ffffff" />
</android.support.design.widget.CoordinatorLayout>
2、SlideDetailsLayout實現(xiàn)setOnSlideDetailsListener監(jiān)聽事件价淌，滑動操作的處理主要在這里執(zhí)行申眼。
@Override
public void onStatusChanged(SlideDetailsLayout.Status status) {
//當前為圖文詳情頁
if (status == SlideDetailsLayout.Status.OPEN) {
fabUp.show();
activity.operaTitleBar(true, true, false);
} else {
//當前為商品詳情頁
fabUp.hide();
activity.operaTitleBar(false, false, true);
}
}
3、圖文詳情中的自定義WebView.
public class ItemWebView extends WebView {
public float oldY;
private int t;
private float oldX;
public ItemWebView(Context context) {
super(context);
}
public ItemWebView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public ItemWebView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
@Override
public boolean onTouchEvent(MotionEvent ev) {
switch (ev.getAction()) {
case MotionEvent.ACTION_MOVE:
float Y = ev.getY();
float Ys = Y - oldY;
float X = ev.getX();
if (Ys > 0 && t == 0) {
getParent().getParent().requestDisallowInterceptTouchEvent(false);
}
break;
case MotionEvent.ACTION_DOWN:
getParent().getParent().requestDisallowInterceptTouchEvent(true);
oldY = ev.getY();
oldX = ev.getX();
break;
case MotionEvent.ACTION_UP:
getParent().getParent().requestDisallowInterceptTouchEvent(true);
break;
default:
break;
}
return super.onTouchEvent(ev);
}
@Override
protected void onScrollChanged(int l, int t, int oldl, int oldt) {
this.t = t;
super.onScrollChanged(l, t, oldl, oldt);
}
