android 仿淘宝、京东商品详情页 向上拖动查看图文详情控件

一、淘宝商品详情页效果

先看一下淘宝详情页的效果

我们的效果

二、实现思路

     使用两个scrollView，两个scrollView 竖直排列，通过自定义viewGroup来控制两个scrollView的竖直排列，以及滑动事件的处理。如下图

三、具体实现

1、继承viewGroup自定义布局View 重写onMeasure()和onLayout方法，在onLayout方法中完成对两个子ScrollView的竖直排列布局，代码如下：

布局文件:

[java]  view plain   copy

1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2.     xmlns:tools="http://schemas.android.com/tools"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent"  
5.     tools:context="com.baoyunlong.view.pulluptoloadmore.MainActivity">  
6.   
7.     <com.baoyunlong.view.pulluptoloadmore.PullUpToLoadMore  
8.         android:layout_width="match_parent"  
9.         android:layout_height="match_parent"  
10.         android:orientation="vertical">  
11.   
12.         <com.baoyunlong.view.pulluptoloadmore.MyScrollView  
13.             android:layout_width="match_parent"  
14.             android:layout_height="match_parent"  
15.             android:fillViewport="true">  
16.   
17.             <LinearLayout  
18.                 android:layout_width="match_parent"  
19.                 android:layout_height="match_parent"  
20.                 android:orientation="vertical">  
21.   
22.                 <ImageView  
23.                     android:scaleType="fitXY"  
24.                     android:src="@drawable/a1"  
25.                     android:layout_width="match_parent"  
26.                     android:layout_height="180dp" />  
27.   
28.                 <TextView  
29.                     android:text="这里是标题"  
30.                     android:textSize="18dp"  
31.                     android:layout_marginRight="10dp"  
32.                     android:layout_marginLeft="10dp"  
33.                     android:layout_marginTop="10dp"  
34.                     android:layout_width="match_parent"  
35.                     android:layout_height="wrap_content" />  
36.   
37.                 <TextView  
38.                     android:layout_marginTop="10dp"  
39.                     android:text="子标题"  
40.                     android:layout_marginLeft="10dp"  
41.                     android:layout_marginRight="10dp"  
42.                     android:textSize="18dp"  
43.                     android:layout_width="match_parent"  
44.                     android:layout_height="wrap_content" />  
45.   
46.                ..............  
47.   
48.                 <LinearLayout  
49.                     android:layout_height="0dp"  
50.                     android:layout_weight="1"  
51.                     android:gravity="bottom"  
52.                     android:layout_width="match_parent">  
53.   
54.                     <TextView  
55.                         android:layout_width="match_parent"  
56.                         android:layout_height="wrap_content"  
57.                         android:height="50dp"  
58.                         android:background="#b11"  
59.                         android:gravity="center"  
60.                         android:text="继续拖动查看图文详情"  
61.                         android:textColor="#000" />  
62.   
63.                 </LinearLayout>  
64.             </LinearLayout>  
65.   
66.         </com.baoyunlong.view.pulluptoloadmore.MyScrollView>  
67.   
68.         <com.baoyunlong.view.pulluptoloadmore.MyScrollView  
69.             android:layout_width="match_parent"  
70.             android:layout_height="match_parent"  
71.             android:fillViewport="true">  
72.   
73.             <LinearLayout  
74.                 android:layout_width="match_parent"  
75.                 android:layout_height="match_parent"  
76.                 android:gravity="center"  
77.                 android:orientation="vertical">  
78.   
79.   
80.                 <ImageView  
81.                     android:layout_width="wrap_content"  
82.                     android:layout_height="wrap_content"  
83.                     android:src="@drawable/a1" />  
84.   
85.                 <ImageView