原文链接: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菊花加载loading图的更多相关文章

  1. iOS菊花加载圈

    自定制一个继承于UIView的类然后重写initWithFrame方法;如下 - (id)initWithFrame:(CGRect)frame { self = [super initWithFra ...

  2. 菊花加载第三方--MBprogressHUD 分类: ios技术 2015-02-05 19:21 120人阅读 评论(0) 收藏

    上次说到了网络请求AFN,那么我们在网络请求的时候,等待期间,为了让用户不认为是卡死或程序出错,一般都会放一个菊花加载,系统有一个菊花加载类叫UIProgressHUD.但是我今天要说的是一个替代它的 ...

  3. 使用css3实现小菊花加载效果

    使用css3实现小菊花加载效果 最常见的就是我们用到的加载动画.加载动画的效果处理的好,会给页面带来画龙点睛的作用,而使用户愿意去等待.而页面中最常用的做法是把动画做成gif格式,当做背景图或是img ...

  4. 一个很酷的加载loading效果--IT蓝豹

    一个很酷的加载loading效果,自定义LeafLoadingView实现,LeafLoadingView继承view, 本例子主要由以下几点构成 (1):RotateAnimation实现叶子旋转 ...

  5. 菊花加载第三方--MBprogressHUD

    上次说到了网络请求AFN,那么我们在网络请求的时候,等待期间,为了让用户不认为是卡死或程序出错,一般都会放一个菊花加载,系统有一个菊花加载类叫UIProgressHUD.但是我今天要说的是一个替代它的 ...

  6. Android 菊花加载工具类

    先看看实现效果图 1.首先自定义一个类继承系统ProgressDialog /** * Created by hanbao0928 on 2018/11/1. */ public class Dial ...

  7. React Native封装Toast与加载Loading组件

    React Native开发封装Toast与加载Loading组件 在App开发中,我们避免不了使用的两个组件,一个Toast,一个网络加载Loading,在RN开发中,也是一样,React Nati ...

  8. [Swift通天遁地]五、高级扩展-(11)图像加载Loading动画效果的自定义和缓存

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  9. iOS 图片加载速度优化

    FastImageCache 是 Path 团队开发的一个开源库,用于提升图片的加载和渲染速度,让基于图片的列表滑动起来更顺畅,来看看它是怎么做的. 一.优化点 iOS 从磁盘加载一张图片,使用 UI ...

随机推荐

  1. 基于LinkedList实现桶排序

    需要考虑以下问题: 1.桶的大小,这里我们可以根据输入的元素的个数来确定桶的大小. 2.怎么样确定当前元素进入哪一个桶,这里我们使用到的是通过一个哈希函数来进行计算. int index = (ele ...

  2. Python爬取房产数据,在地图上展现!

    小伙伴,我又来了,这次我们写的是用python爬虫爬取乌鲁木齐的房产数据并展示在地图上,地图工具我用的是 BDP个人版-免费在线数据分析软件,数据可视化软件 ,这个可以导入csv或者excel数据. ...

  3. [SQL]LeetCode176. 第二高的薪水 | Second Highest Salary

    Write a SQL query to get the second highest salary from the Employee table. +----+--------+ | Id | S ...

  4. 当使用vue的按键修饰符不起效果的时候怎么办?如@keyup.enter = '' ;

    这个问题困扰了我一个多小时,各种测bug !始终测不出来! 直接上代码(错误示范) <el-form-item prop="password"> <el-inpu ...

  5. 【译】编写支持SSR的通用组件指南

    原文来自:https://blog.lichter.io/posts/the-guide-to-write-universal-ssr-ready-vue-compon?utm_campaign=Vu ...

  6. 基于ipv6的数据抓包

    一.实验拓扑 二.配置过程 以r1为例 R1: R1(config)#int f0/0 R1(config-if)#ipv6 enable R1(config-if)#ipv6 address 200 ...

  7. Android--逐帧动画FrameAnimation

    前言 开门见山,本篇博客讲解一下如何在Android平台下播放一个逐帧动画.逐帧动画在Android下可以通过代码和XML文件两种方式定义,本篇博客都将讲到,最后将以一个简单的Demo来演示两种方式定 ...

  8. 【Java基础】【09面向对象_多态&抽象类&接口】

    09.01_面向对象(多态的概述及其代码体现) A:多态(polymorphic)概述 事物存在的多种形态 B:多态前提 a:要有继承关系. b:要有方法重写. c:要有父类引用指向子类对象. C:案 ...

  9. linux下(fdisk,gdisk,parted)三种分区工具比较

    1 2种分区结构简介 MBR分区 硬盘主引导记录MBR由4个部分组成 主引导程序(偏移地址0000H--0088H),它负责从活动分区中装载,并运行系统引导程序. 出错信息数据区,偏移地址0089H- ...

  10. .Net语言 APP开发平台——Smobiler学习日志:在应用中添加WeiXin组件

    最前面的话:Smobiler是一个在VS环境中使用.Net语言来开发APP的开发平台,也许比Xamarin更方便 控件说明 WeiXin组件. 效果演示 1. 分享好友 2. 分享朋友圈 图1 图2 ...