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