Android实现上拉查看图文详情的一种想法

在京东和淘宝的商品详情页都有这样一个上拉查看图文详情的操作，感觉很有意思，就用一种简单粗暴的方式简单实现了一下

其实，第一次在手机上尝试这个功能的时候，想着这不就是一个类似于列表的上拉加载更多吗？于是就按照下拉刷新和上拉加载更多的思路进行了如下研究。这里借鉴PullToRefreshView 开源框架，对其中一些内容按需要做一些更改。

首先看一下效果图



布局文件

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="engineer.pulltomore.MainActivity">

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

<engineer.pulltomore.pullview.PullToRefreshViewUp
android:id="@+id/RefreshUp"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">

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

<ImageView
android:layout_width="match_parent"                        android:layout_height="match_parent"
android:scaleType="fitXY"
android:src="@drawable/im1" />
</LinearLayout>
</ScrollView>
</engineer.pulltomore.pullview.PullToRefreshViewUp>

<engineer.pulltomore.pullview.PullToRefreshViewDown
android:id="@+id/RefreshDown"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:visibility="gone">

<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent">

<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:src="@drawable/im2" />
</LinearLayout>
</ScrollView>
</engineer.pulltomore.pullview.PullToRefreshViewDown>

</LinearLayout>

<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">

<LinearLayout
android:id="@+id/head_up"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#87cefa">

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="商品信息"
android:padding="10dp"
android:textColor="#000000" />
</LinearLayout>

<LinearLayout
android:visibility="gone"
android:id="@+id/head_down"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#87cefa">

<TextView
android:padding="10dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="图文详情"
android:textColor="#000000" />
</LinearLayout>

</FrameLayout>

</RelativeLayout>

这里的两个自定义view：PullToRefreshViewUp和PullToRefreshViewDown，只是对开源框架PullToRefreshView内部就需要进行了一些修改。PullToRefreshViewUp去除了上拉时的动画效果，保留文字并作为查看图文详情的提示，PullToRefreshViewDown这个view只需要实现下拉刷新的效果即可，同样做了修改。

最后，使用方法：

public class MainActivity extends AppCompatActivity implements
PullToRefreshViewUp.OnHeaderRefreshListener, PullToRefreshViewUp.OnFooterRefreshListener,
PullToRefreshViewDown.OnHeaderRefreshListenerDown {
PullToRefreshViewUp refreshUp;
PullToRefreshViewDown refreshDown;
LinearLayout headUp, headDown;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
refreshUp = (PullToRefreshViewUp) findViewById(R.id.RefreshUp);
refreshUp.setOnHeaderRefreshListener(this);
refreshUp.setOnFooterRefreshListener(this);
refreshDown = (PullToRefreshViewDown) findViewById(R.id.RefreshDown);
refreshDown.setOnHeaderRefreshListener(this);
headUp = (LinearLayout) findViewById(R.id.head_up);
headDown = (LinearLayout) findViewById(R.id.head_down);
}

@Override
public void onHeaderRefresh(PullToRefreshViewUp view) {
refreshUp.onHeaderRefreshComplete();
}

@Override
public void onFooterRefresh(PullToRefreshViewUp view) {
refreshUp.onFooterRefreshComplete();
refreshUp.setVisibility(View.GONE);
headUp.setVisibility(View.GONE);
headDown.setVisibility(View.VISIBLE);
refreshDown.setVisibility(View.VISIBLE);

}

@Override
public void onHeaderRefresh(PullToRefreshViewDown view) {
refreshDown.onHeaderRefreshComplete();
refreshDown.setVisibility(View.GONE);
headDown.setVisibility(View.GONE);
refreshUp.setVisibility(View.VISIBLE);
headUp.setVisibility(View.VISIBLE);
}
}

好了，这就是整个实现方式。因为是通过隐藏显示两个view来实现，所以总体效果和京东淘宝仍有巨大差距，但这也只是一种思考，特此记录。