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来实现，所以总体效果和京东淘宝仍有巨大差距，但这也只是一种思考，特此记录。