简易仿ios菊花加载loading图

简介:

原文链接:https://mp.weixin.qq.com/s/wBbQgOfr59wntNK9ZJ5iRw

项目中经常会用到加载数据的loading显示图,除了设计根据app自身设计的动画loading,一般用的比较多的是仿照ios 的菊花加载loading 图,当然一些条件下还会涉及到加载成功/ 失败情况的显示,还有显示文字。


使用ProgressBar 来加载动画转圈,这里使用drawable文件 定义转圈动画,indeterminateDrawable属性进行加载。

<?xml version="1.0" encoding="utf-8"?>
<animated-rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@mipmap/load"
    android:pivotX="50%"
    android:pivotY="50%" />
    
<ProgressBar
    android:id="@+id/progressBar"
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:indeterminateDrawable="@drawable/anim" />

部分情况下,在加载成功/ 失败之后会显示对应的静态图片,所以一开始想直接通过setIndeterminateDrawable(Drawable d) 来加载静态图片,但是直接写是显示不出图片的,还要设置Drawable 的位置 d.setBounds(Rect bounds),即使这样加载出了静态图片,但是设置R.drawable.anim 的转圈动画时 却没有了转圈的效果,好气哟 ~~

所以在自定义view 的布局里 成功/失败的状态单独用imageView显示

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="110dp"
    android:layout_height="110dp"
    android:background="@drawable/shape_dialog_bg"
    android:gravity="center"
    android:orientation="vertical">

    <ProgressBar
        android:id="@+id/progressBar"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:indeterminateDrawable="@drawable/anim" />

    <ImageView
        android:id="@+id/iv"
        android:visibility="gone"
        android:layout_width="50dp"
        android:layout_height="50dp" />

    <TextView
        android:id="@+id/tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:text="正在加载"
        android:textColor="#fff" />

</LinearLayout>

自定义view,提供三种状态的方法。

public class LoadingView extends LinearLayout {

    ...构造函数...
    
    /**
     * loading
     */
    public void showLoading() {
        iv.setVisibility(GONE);
        progressBar.setVisibility(VISIBLE);
    }

    /**
     * 成功
     */
    public void showSuccess() {
        iv.setImageResource(R.mipmap.load_success);
        iv.setVisibility(View.VISIBLE);
        progressBar.setVisibility(GONE);
    }

    /**
     *失败
     */
    public void showFail() {
        iv.setImageResource(R.mipmap.load_fail);
        iv.setVisibility(View.VISIBLE);
        progressBar.setVisibility(GONE);
    }

    /**
     * 提示文字
     *
     * @param txt string
     */
    public void setText(String txt) {
        tv.setText(txt);
    }

    /**
     * 提示文字
     */
    public void setText(@StringRes int txtId) {
        tv.setText(txtId);
    }
    
}

效果图:

github地址:https://github.com/taixiang/loading

欢迎关注我的个人博客:https://www.manjiexiang.cn/

更多精彩欢迎关注微信号:春风十里不如认识你
一起学习,一起进步,有问题随时联系,一起解决!!!

目录
相关文章
|
iOS开发 MacOS
iOS指定加载任意语言
iOS指定加载任意语言
79 2
|
Swift iOS开发
IOS使用Swift加载Xib文件
IOS使用Swift加载Xib文件
326 0
|
移动开发 weex API
weex在iOS环境加载本地图片的方法
weex在iOS环境加载本地图片的方法
168 0
weex在iOS环境加载本地图片的方法
|
iOS开发
iOS开发-banner滚动图自定义
iOS开发-banner滚动图自定义
206 0
iOS开发-banner滚动图自定义
|
iOS开发
iOS首次启动程序引导图
iOS首次启动程序引导图
211 0
iOS首次启动程序引导图
|
Android开发 iOS开发 UED
关于安卓自定义类似于iOS系统自带的菊花loading
app请求数据多多少少需要点时间,友好的用户体验就是添加loading
176 1
关于安卓自定义类似于iOS系统自带的菊花loading
|
移动开发 测试技术 Android开发
一分钟教你Android、iOS如何实现自动化截长图功能,超实用!
在移动端自动化测试过程中经常会遇到需要截长图的场景,比如大促活动的H5页面、动态信息流页面等,但是目前在网上检索只能搜到关于截长图的软件推荐,没有讲关于如何通过自动化脚本的方式实现的文章,今天就来给大家分享一个简单的实现方案。
730 0
一分钟教你Android、iOS如何实现自动化截长图功能,超实用!
|
存储 iOS开发
iOS-底层原理 18:类的加载(下)
iOS-底层原理 18:类的加载(下)
134 0
iOS-底层原理 18:类的加载(下)
|
存储 缓存 算法
iOS-底层原理 17:类的加载(上)
iOS-底层原理 17:类的加载(上)
199 0
iOS-底层原理 17:类的加载(上)
|
存储 缓存 C++
iOS-底层原理 15:dyld加载流程
iOS-底层原理 15:dyld加载流程
386 0
iOS-底层原理 15:dyld加载流程