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

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

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

• 首先看一下效果图

这里写图片描述

• 布局文件

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