学习笔记：下拉刷新的视图和图标的旋转

Posted 2020-09-02

一、下拉才出现的视图

pull_to_refresh_header.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:id="@+id/pull_to_refresh_header"
              android:orientation="vertical"
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:background="#F3F3F3">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingTop="23dp">

        <LinearLayout 
　　　　　　　android:id="@+id/pull_to_refresh_view"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:layout_centerHorizontal="true">

            <TextView
                android:id="@+id/pull_to_refresh_text"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:text="@string/pull_to_refresh_text"
                android:textColor="#777777"
                android:textSize="16sp"/>

            <TextView
                android:id="@+id/pull_to_refresh_update_text"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:text="@string/pull_to_refresh_update_text"
                android:textColor="#999999"
                android:textSize="14sp"/>

        </LinearLayout>

        <ProgressBar
            android:id="@+id/pull_to_refresh_progress"
            android:layout_width="30dp"
            android:layout_height="30dp"
　　　　　　　android:layout_toLeftOf="@id/pull_to_refresh_view"
            android:layout_marginRight="22dp"
            android:layout_marginTop="5dp"
            android:indeterminate="true"
            android:indeterminateDrawable="@drawable/ic_loading_refresh"
            android:visibility="gone"/>

        <ImageView
            android:id="@+id/pull_to_refresh_image"
            android:layout_width="32dp"
            android:layout_height="32dp"
            android:layout_toLeftOf="@id/pull_to_refresh_view"
            android:layout_marginRight="20dp"
            android:layout_marginTop="5dp"
            android:src="@drawable/ic_refresh_down"
            android:scaleType="centerInside"
            android:contentDescription="@string/app_name"/>

    </RelativeLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="15dp"/>

</LinearLayout>

ic_loading_refresh.xml

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/ic_loading"
    android:fromDegrees="0"
    android:toDegrees="360"
    android:pivotX="50%"
    android:pivotY="50%" />

1、ProgressBar的indeterminate属性，代表进程的时间是否不确定。

2、黄色底的是Android Studio的提示。第一个提示的是，当LinearLayout中的Text拓展得足够长时，会与ImageView重叠，实际效果是把ImageView给覆盖了。第二个是，建议用toStartOf代替toLeftOf，用marginEnd代替marginRight等。原因和影响还没完全搞懂。

 

二、图标旋转的动画

private ImageView mPull_to_refresh_image;
private RotateAnimation mFlipAnimation;

...

        mFlipAnimation = new RotateAnimation(0, -180, RotateAnimation.RELATIVE_TO_SELF, 0.5f,
                RotateAnimation.RELATIVE_TO_SELF, 0.5f);
        mFlipAnimation.setInterpolator(new LinearInterpolator());
        mFlipAnimation.setDuration(250);
        mFlipAnimation.setFillAfter(true);

...

mPull_to_refresh_image.startAnimation(mFlipAnimation);

 

1、构造方法：

    public RotateAnimation(float fromDegrees, float toDegrees, int pivotXType, float pivotXValue,
            int pivotYType, float pivotYValue)

（1）toDegrees - fromDegrees < 0 就会是逆时针旋转，反之是顺时针。这是我取不同值测试出来的。水平线右边是0°，或者360°，左边是180°，或者是-180°。

（2）pivotType是枢轴类型，也就是旋转中心。RELATIVE_TO_SELF代表相对这个view本身。0.5f代表这个view一半大小的位置。

2、setInterpolator作用是设置速度器。LinearInterpolator是匀速加速器，也就是匀速播放动画。

3、setDuration作用是设置动画时长，以毫秒为单位。

4、setFillAfter作用是，当参数为true时，动画播放完后，view会维持在最终的状态。而默认值是false，也就是动画播放完后，view会恢复原来的状态。