Android 定製的旋轉太陽的下拉刷新樣式

效果圖：

能夠先看下個人上一篇博客：https://my.oschina.net/u/1462828/blog/1554536

這個是根據上一篇博客的代碼再繼承了一層定製一套下拉刷新上拉加載的UI，主要也就兩個步驟：

一、重寫佈局（仍是沿襲以前的大致結構）

二、繼承RefreshRelativeLayout類，定製一些動做和內容

詳細請看代碼：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/rly_bg"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <RelativeLayout
        android:id="@+id/rly_refresh_head"
        android:layout_width="match_parent"
        android:layout_height="60dp">

        <RelativeLayout
            android:id="@+id/rly_head_state_1"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
            <!--下拉但還未到頭部的高度-->
            <ImageView
                android:id="@+id/iv_head_state_1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerHorizontal="true"
                android:layout_centerVertical="true"
                android:src="@drawable/ic_sun" />

        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/rly_head_state_2"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:visibility="invisible">
            <!--下拉且超過了頭部的高度，可鬆開刷新-->
            <ImageView
                android:id="@+id/iv_head_state_2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerHorizontal="true"
                android:layout_centerVertical="true"
                android:src="@drawable/ic_sun" />

        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/rly_head_state_3"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:visibility="invisible">
            <!--正在刷新-->
            <ImageView
                android:id="@+id/iv_head_state_3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerHorizontal="true"
                android:layout_centerVertical="true"
                android:src="@drawable/ic_sun" />

        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/rly_head_state_4"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:visibility="invisible">
            <!--刷新成功-->
            <ImageView
                android:id="@+id/iv_head_state_4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerHorizontal="true"
                android:layout_centerVertical="true"
                android:src="@drawable/ic_sun" />

        </RelativeLayout>

    </RelativeLayout>

    <android.support.v7.widget.RecyclerView
        android:id="@+id/rlv"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:overScrollMode="never"
        android:scrollbars="none" />

    <RelativeLayout
        android:id="@+id/rly_refresh_foot"
        android:layout_width="match_parent"
        android:layout_height="60dp">

        <RelativeLayout
            android:id="@+id/rly_foot_state_1"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
            <!--下拉但還未到頭部的高度-->
            <ImageView
                android:id="@+id/iv_foot_state_1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerHorizontal="true"
                android:layout_centerVertical="true"
                android:src="@drawable/ic_sun" />

        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/rly_foot_state_2"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:visibility="invisible">
            <!--下拉且超過了頭部的高度，可鬆開刷新-->
            <ImageView
                android:id="@+id/iv_foot_state_2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerHorizontal="true"
                android:layout_centerVertical="true"
                android:src="@drawable/ic_sun" />

        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/rly_foot_state_3"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:visibility="invisible">
            <!--正在加載-->
            <ImageView
                android:id="@+id/iv_foot_state_3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerHorizontal="true"
                android:layout_centerVertical="true"
                android:src="@drawable/ic_sun" />

        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/rly_foot_state_4"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:visibility="invisible">
            <!--刷新成功-->
            <ImageView
                android:id="@+id/iv_foot_state_4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerHorizontal="true"
                android:layout_centerVertical="true"
                android:src="@drawable/ic_sun" />

        </RelativeLayout>

    </RelativeLayout>
</RelativeLayout>

package com.imxiaoyu.common.widget;

import android.content.Context;
import android.util.AttributeSet;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.LinearInterpolator;
import android.view.animation.RotateAnimation;
import android.widget.ImageView;
import android.widget.RelativeLayout;

import com.imxiaoyu.common.R;

/**
 * 下拉刷新以及上啦加載更多
 * Created by 她叫我小渝 on 2016/12/22.
 */

public class MyRefreshLayout extends RefreshRelativeLayout {

    private ImageView ivHeadState1;
    private ImageView ivHeadState2;
    private ImageView ivHeadState3;
    private ImageView ivHeadState4;
    private ImageView ivFootState1;
    private ImageView ivFootState2;
    private ImageView ivFootState3;
    private ImageView ivFootState4;


    public MyRefreshLayout(Context context) {
        super(context);
        initOnTouchHeight();
    }

    public MyRefreshLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
        initOnTouchHeight();
    }
    public MyRefreshLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initOnTouchHeight();
    }

    /**
     * 拖動的時候讓太陽圖標也旋轉起來
     */
    private void initOnTouchHeight(){
        setOnTouchHeightListener(new OnTouchHeightListener() {
            @Override
            public void onTouchHeight(int num) {
                if (num > 0) {
                    ivHeadState1.setRotation(num);
                    ivHeadState2.setRotation(num);
                } else {
                    ivFootState1.setRotation(num*-1);
                    ivFootState2.setRotation(num*-1);
                }
            }
        });
    }

    /**
     * 使用的佈局
     *
     * @return
     */
    public int getLayoutId() {
        return R.layout.my_refresh_layout;
    }


    /**
     * 下拉刷新的4種狀態的視圖
     *
     * @param rlyHead
     * @return
     */
    public RelativeLayout getHeadState1Layout(RelativeLayout rlyHead) {
        ivHeadState1 = (ImageView) rlyHead.findViewById(R.id.iv_head_state_1);
        return rlyHead;
    }

    public RelativeLayout getHeadState2Layout(RelativeLayout rlyHead) {
        ivHeadState2 = (ImageView) rlyHead.findViewById(R.id.iv_head_state_2);
        return rlyHead;
    }

    public RelativeLayout getHeadState3Layout(RelativeLayout rlyHead) {
        ivHeadState3 = (ImageView) rlyHead.findViewById(R.id.iv_head_state_3);
        Animation(ivHeadState3);
        return rlyHead;
    }

    public RelativeLayout getHeadState4Layout(RelativeLayout rlyHead) {
        ivHeadState4 = (ImageView) rlyHead.findViewById(R.id.iv_head_state_4);
        Animation(ivHeadState4);
        return rlyHead;
    }

    /**
     * 上拉刷新的4種狀態的視圖
     *
     * @param rlyHead
     * @return
     */
    public RelativeLayout getFootState1Layout(RelativeLayout rlyHead) {
        ivFootState1 = (ImageView) rlyHead.findViewById(R.id.iv_foot_state_1);
        return rlyHead;
    }

    public RelativeLayout getFootState2Layout(RelativeLayout rlyHead) {
        ivFootState2 = (ImageView) rlyHead.findViewById(R.id.iv_foot_state_2);
        return rlyHead;
    }

    public RelativeLayout getFootState3Layout(RelativeLayout rlyHead) {
        ivFootState3 = (ImageView) rlyHead.findViewById(R.id.iv_foot_state_3);
        Animation(ivFootState3);
        return rlyHead;
    }

    public RelativeLayout getFootState4Layout(RelativeLayout rlyHead) {
        ivFootState4 = (ImageView) rlyHead.findViewById(R.id.iv_foot_state_4);
        Animation(ivFootState4);
        return rlyHead;
    }


    /**
     * 自動旋轉動畫
     * @param view
     */
    public void Animation(View view) {
        RotateAnimation rotate = new RotateAnimation(0, 359, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
        //默認爲0，爲-1時一直循環動畫
        rotate.setRepeatCount(-1);
        //添加勻速加速器
        rotate.setInterpolator(new LinearInterpolator());
        rotate.setDuration(1200);
        rotate.setFillAfter(true);
        view.startAnimation(rotate);
    }
}

使用方式是同樣的，沒有任何變化，最後附上太陽的圖標：