讓你的Android應用與眾不同：自定義下拉刷新效果

一、為什麼要自定義下拉刷新效果

下拉刷新是Android中常見的UI設計，一般使用SwipeRefreshLayout或下拉刷新開源庫，但這些庫提供的效果可能無法滿足一些特殊的需求。比如，我們想要在下拉刷新時加入自己的載入動畫或下拉頭部，這時就需要自定義下拉刷新效果。

那麼，在讓我們看看如何實現自定義下拉刷新效果。

二、實現自定義下拉刷新效果

1.自定義下拉頭部

自定義下拉頭部是實現自定義下拉刷新的第一步。我們可以使用一個自定義布局來替代系統原有的下拉頭部。

//在下拉刷新的布局中添加自定義下拉頭部
<com.example.myapp.CustomRefreshLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:header_layout="@layout/custom_header_layout">
    <ListView
        android:id="@+id/list_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</com.example.myapp.CustomRefreshLayout>

在CustomRefreshLayout布局中添加自定義的header_layout。

接著，我們來看看如何實現自定義下拉頭部的效果。

public class CustomRefreshLayout extends SwipeRefreshLayout {
    private View headerView;
    private ImageView ivRefresh;
    private AnimationDrawable mAnim;

    public CustomRefreshLayout(Context context) {
        super(context);
        initView(context);
    }

    public CustomRefreshLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
        initView(context);
    }

    private void initView(Context context) {
        headerView = LayoutInflater.from(context).inflate(R.layout.custom_header_layout, null);
        ivRefresh = (ImageView) headerView.findViewById(R.id.iv_refresh);
        mAnim = (AnimationDrawable) ivRefresh.getDrawable();
        setProgressViewOffset(false, 0, 150); //調整刷新進度條的位置
        addView(headerView); //添加自定義下拉頭部
    }

    /**
     * 下拉刷新過程
     */
    @Override
    public void onProgressChanged(int progress, boolean fromUser) {
        super.onProgressChanged(progress, fromUser);
        if (progress == 0) {
            mAnim.stop();
        } else if (!mAnim.isRunning()) {
            mAnim.start();
        }
    }

    /**
     * 停止下拉刷新
     */
    @Override
    public void setRefreshing(boolean refreshing) {
        super.setRefreshing(refreshing);
        if (!refreshing) {
            mAnim.stop();
        }
    }
}

在CustomRefreshLayout中實現自定義下拉頭部的動畫效果。

2.自定義下拉載入動畫

為了滿足特殊的載入需求，我們可以自定義下拉載入動畫。

public class CustomRefreshLayout extends SwipeRefreshLayout {
    ...
    private View footerView;
    private ImageView ivLoading;
    ...
 
    public CustomRefreshLayout(Context context) {
        super(context);
        initView(context);
    }

    public CustomRefreshLayout(Context context, AttributeSet attrs) {  
        super(context, attrs);  
        initView(context);
    }

    private void initView(Context context) {  
        ......
        footerView = LayoutInflater.from(context).inflate(R.layout.custom_footer_layout, null);  
        ivLoading = (ImageView) footerView.findViewById(R.id.iv_loading);  
        mAnim = (AnimationDrawable) ivLoading.getDrawable();  
        addView(footerView); //添加自定義下拉載入
    } 

    /**
     * 載入完成後關閉載入動畫
     */
    public void onLoadComplete() {  
        setRefreshing(false);  
        footerView.setVisibility(GONE);  
        mAnim.stop();  
    } 
}

在CustomRefreshLayout中實現自定義下拉載入效果並在載入完成後關閉載入動畫。

3.觸發自定義下拉刷新

完成自定義下拉頭部和自定義下拉載入動畫後，還需要一個手勢觸發的方法。

listView.setOnTouchListener(new OnTouchListener() {  
    private float startY;  
    private float deltaX;  
    private boolean isHeaderVisible = false;  

    @Override  
    public boolean onTouch(View v, MotionEvent event) {  
        switch (event.getAction()) {  
            case MotionEvent.ACTION_DOWN:  
                startY = event.getY();  
                break;  
            case MotionEvent.ACTION_MOVE:  
                if (isHeaderVisible) {  
                    deltaY = (event.getY() - startY) * RESISTANCE_FACTOR;  
                    setHeaderHeight(deltaY);  
                    return true;  
                }
            case MotionEvent.ACTION_UP:  
                if (isHeaderVisible) { 
                    //觸發刷新
                    if (headerHeight >= headerViewHeight) {  
                        if (mOnRefreshListener != null) {  
                            mOnRefreshListener.onRefresh();  
                        }  
                    } else { 
                        //恢復原始狀態 
                        resetHeaderHeight();  
                    }  
                    return true;  
                }  
                break;  
        }  
        return false;  
    }
});

通過監聽ListView的onTouch事件，來手動觸發自定義下拉刷新效果。

三、總結

通過自定義下拉頭部和自定義下拉載入動畫，我們可以更快速更靈活地實現自己想要的下拉刷新效果，讓我們的應用在界面上更加與眾不同。