Android 定制的旋转太阳的下拉刷新样式

最新推荐文章于 2025-01-24 04:42:29 发布

原创最新推荐文章于 2025-01-24 04:42:29 发布 · 334 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#上拉加载 #Android #下拉刷新 #recyclerview

Android 专栏收录该内容

42 篇文章

订阅专栏

本文介绍了一种基于现有代码库定制下拉刷新及上拉加载更多功能的方法。通过重写布局并继承RefreshRelativeLayout类，实现了不同状态下的图标显示与动画效果。文中提供了详细的XML布局代码及关键的Java实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图：

可以先看下我的上一篇博客：https://my.oschina.net/u/1462828/blog/1554536

这个是根据上一篇博客的代码再继承了一层定制一套下拉刷新上拉加载的UI，主要也就两个步骤：

1、重写布局（还是沿袭之前的大体结构）

2、继承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);
    }
}

使用方式是一样的，没有任何变化，最后附上太阳的图标：