Android 实现ProgressBar菊花旋转进度条的效果（用于耗时loading时显示）

最新推荐文章于 2024-04-21 09:50:42 发布

liuhaha1015

最新推荐文章于 2024-04-21 09:50:42 发布

阅读量3k

点赞数 1

分类专栏： Android 文章标签： android java

本文链接：https://blog.csdn.net/NewActivity/article/details/126190894

版权

Android 专栏收录该内容

132 篇文章 1 订阅

订阅专栏

1，创建简单的自定义Dialog

2，设置dialog属性与布局

3，布局里使用结合了animated-rotate 的progress

1，创建简单的自定义Dialog

public class LoadDia extends Dialog {


    public LoadDia(@NonNull Context context, int themeResId) {
        super(context, R.style.LoadDiaStyle);
    }

    protected LoadDia(@NonNull Context context, boolean cancelable, @Nullable OnCancelListener cancelListener) {
        super(context, cancelable, cancelListener);
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.load_view);
        setCancelable(true);//设置点击dialog外部 不可取消
        setCanceledOnTouchOutside(true);//设置点击dialog外部 不可取消
    }

}

2，设置dialog属性与布局

style文件：

    <style name="LoadDiaStyle" parent="@android:style/Theme.Dialog">
        <item name="android:windowBackground">@android:color/transparent</item>
        <item name="android:windowNoTitle">true</item>
        <item name="android:windowFrame">@null</item>
        <item name="android:windowIsFloating">true</item>
        <item name="android:backgroundDimEnabled">false</item>
        <item name="android:windowSoftInputMode">adjustNothing</item>

        <item name="android:windowIsTranslucent">false</item>

        <item name="android:windowContentOverlay">@null</item>

    </style>

布局文件：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/spe_dia_load"
    android:orientation="vertical">

    <ProgressBar
        android:layout_centerHorizontal="true"
        android:id="@+id/loadpro"
        android:layout_width="@dimen/dp_34"
        android:layout_height="@dimen/dp_34"
        android:indeterminateBehavior="repeat"
        android:indeterminateDrawable="@drawable/spe_dia_load_view"
        android:layout_marginTop="@dimen/dp_15" />

    <TextView
        android:layout_below="@+id/loadpro"
        android:layout_centerHorizontal="true"
        android:id="@+id/loadDes"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="@dimen/dp_9"
        android:layout_marginEnd="@dimen/dp_19"
        android:layout_marginStart="@dimen/dp_19"
        android:layout_marginTop="@dimen/dp_9"
        android:text="@string/http_loading"
        android:textColor="@android:color/white"
        android:textSize="@dimen/sp_13" />
</RelativeLayout>

重点就是这个：

3，布局里使用结合了animated-rotate 的progress

spe_dia_load_view：

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

里面是一个普通的图片png文件~

rot_load:

页面需要使用时：

简单的菊花loading完成

-------------------------end---------------------------------

另外一种圆圈旋转动画

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


    <shape
        android:innerRadius="8dp"
        android:shape="ring"
        android:thickness="3dp"
        android:useLevel="false">
        <gradient
            android:centerY="0.50"
            android:endColor="#cccccc"
            android:startColor="@color/white"
            android:type="sweep"
            android:useLevel="false" />
    </shape>

    <!--  android:pivotX     动画执行的起点x坐标 50%代表相对自身宽度的
    android:innerRadius  内环的半径
    android:thickness  环的厚度
    android:useLevel  只有当我们的shape使用在LevelListDrawable中时，这个值为true，否则为false
    android:centerY 渐变中心Y的相对位置，值为0-1
    android:type  渐变类型，还有linear,radial两种类型，线性渐变和放射渐变-->

</animated-rotate>