标签

Android 44

Android Network security configuration Android 网络配置 Android Camera Preview gradlew 源码分析 Android 动态修改菜单 Android RelativeLayout 之 Gravity 的使用 Android Studio Gradle Download Error Android加载子View 【转】Android打开与关闭软键盘 Android EditText软键盘显示隐藏以及“监听” Android mipmap文件夹 Android 用命令行更新SDK Android Service学习之AIDL, Parcelable和远程服务 Android 5.0设备中,Notification小图标是白色的 Android最佳实践 Android Keystore 文件的密码修改 Android Studio 中加载so库文件 Android 中方法重载遇到的问题 ListView & RecyclerView Google Volley如何缓存HTTP请求文件 Creating logs in Android applications Advanced Android TextView TextView高亮URL地址解析 TextView 高亮URL地址,并实现跳转 Best practices in Android development Android Sdk Manager无法更新问题解决办法 Android ViewPager滑动事件 Google Volley 网络请求框架(一) Andorid UI注入工具的使用(ButterKnife) Android 项目中出现的奇葩bug, 数据NullPointExcption Android Drawable Animation Android 图片的毛玻璃效果 Android之使用Log打印日志 使用Fidder来拦截Android发送的HTTP请求 Android之Webview使用 Android之Notification的使用(二) Android之Notification的使用(一) Android Keyboard Show&Hiden Android 粘贴板的使用 Android中使用.9.png 使用Fidder来拦截Android发送的HTTP请求 Andorid JUnit 单元测试 Activity之间的切换动画 Android ListView中Adapter的使用

Android Drawable Animation

2014年10月27日

ProgressBar是一个经常使用的组件,但很多时候,它的外观看起来并不能满足我们的需求。 对它进行自定义也很麻烦。

有一个很简单的解决办法就是用GIF动画,不使用系统提供的ProgressBar。

有关显示GIF动画,网上有很多例子,这里只介绍将GIF动态图按每一帧切出来,然后在使用 Frame Animation将它展示出来。

先上代码loading.xml

<?xml version="1.0" encoding="utf-8"?>
<animation-list android:id="@+id/loading_animation" android:oneshot="false"
  xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:duration="@integer/loading_frame_interval" android:drawable="@drawable/loading_00" />
    <item android:duration="@integer/loading_frame_interval" android:drawable="@drawable/loading_01" />
    <item android:duration="@integer/loading_frame_interval" android:drawable="@drawable/loading_02" />
    <item android:duration="@integer/loading_frame_interval" android:drawable="@drawable/loading_03" />
    <item android:duration="@integer/loading_frame_interval" android:drawable="@drawable/loading_04" />
    <item android:duration="@integer/loading_frame_interval" android:drawable="@drawable/loading_05" />
    <item android:duration="@integer/loading_frame_interval" android:drawable="@drawable/loading_06" />
    <item android:duration="@integer/loading_frame_interval" android:drawable="@drawable/loading_07" />
    <item android:duration="@integer/loading_frame_interval" android:drawable="@drawable/loading_08" />
    <item android:duration="@integer/loading_frame_interval" android:drawable="@drawable/loading_09" />
    <item android:duration="@integer/loading_frame_interval" android:drawable="@drawable/loading_10" />
    <item android:duration="@integer/loading_frame_interval" android:drawable="@drawable/loading_11" />
    <item android:duration="@integer/loading_frame_interval" android:drawable="@drawable/loading_12" />
    <item android:duration="@integer/loading_frame_interval" android:drawable="@drawable/loading_13" />
    <item android:duration="@integer/loading_frame_interval" android:drawable="@drawable/loading_14" />
    <item android:duration="@integer/loading_frame_interval" android:drawable="@drawable/loading_15" />
</animation-list>

其中:

<integer name="loading_frame_interval">30</integer>

在使用的时候,因为网上说的种种bug,我直接自定义了一个ImageView,用来显示Loading View。 看源码:

package cn.lovecluo.widget;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.drawable.AnimationDrawable;
import android.util.AttributeSet;
import android.widget.ImageView;

/**
 * Create by luozc at Aug 21, 2014
 */
public class CustomeImageView extends ImageView {

    public CustomeImageView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        this.initView();
    }

    public CustomeImageView(Context context, AttributeSet attrs) {
        super(context, attrs);
        this.initView();
    }

    public CustomeImageView(Context context) {
        super(context);
        this.initView();
    }

    private void initView() {
        this.setImageResource(R.drawable.loading);
    }
    
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        this.loading();
    }   
    public void loading() {
        AnimationDrawable drawable = (AnimationDrawable) this.getDrawable();
        drawable.start();
    }
}

使用的时候也很简单,在XML中添加这个CustomeImageView即可,代码如下:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    style="@style/fillall"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin" >
    <cn.lovecluo.widget.CustomeImageView 
        style="@style/wrap"
        android:layout_centerInParent="true" />
</RelativeLayout>

当然使用场景并不仅仅是这么简单,有时候, 我们会需要在一个Button后面添加一loading动画, 就比如说在登录的时候,当然你可以定义几个组件,用代码控制每个组件的显示,但是这样子过于的麻烦。

就上述情况,我们还是用上面定义的loading.xml的动画效果来做展示: 在TextView中有这么几个属性:drawableLeftdrawableRightdrawableTopdrawableBottom

在这里,我们要动态控制,所以不能将这些写到xml中去,所以只能写代码了。

Drawable drawable= mContext.getResources().getDrawable(R.drawable.loading);
/// 这一步必须要做,否则不会显示.
drawable.setBounds(0, 0, drawable.getMinimumWidth(), drawable.getMinimumHeight());
mSubmitBtn.setCompoundDrawables(drawable, null, null, null);
AnimationDrawable loadingAnimation = (AnimationDrawable) mSubmitBtn.getCompoundDrawables()[0];
loadingAnimation.start();

是不是很简单,当然,如果你觉得图片和文字离的太近,你可以在xml中加上android:drawablePadding="8dip"

看XML代码 :

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/submit_framelayout"
    style="@style/fillx"
    android:background="@drawable/add_service_input_btn_bg"
    android:clickable="true"
    android:padding="@dimen/activity_horizontal_margin" >

    <Button
        android:id="@+id/submit_btn"
        style="@style/wrap"
        android:layout_gravity="center"
        android:background="@null"
        android:drawablePadding="@dimen/dp8"
        android:text="@string/submit"
        android:textColor="@color/white"
        android:textSize="@dimen/textsize_medium" />

</FrameLayout>

看了代码,你就会觉得特别的简单。



友情链接: Hiro's Blog | Junjun's Blog