Android 帧动画实现自定义loading加载框
2017-01-04 本文已影响2508人
AFinalDream
动画加载框
通过动画实现
1.定义res/drawable/drawable_anim.xml如下：
<?xml version="1.0" encoding="UTF-8"?>
<animation-list android:oneshot="false" xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@mipmap/progress_1" android:duration="50" />
<item android:drawable="@mipmap/progress_2" android:duration="50" />
<item android:drawable="@mipmap/progress_3" android:duration="50" />
<item android:drawable="@mipmap/progress_4" android:duration="50" />
<item android:drawable="@mipmap/progress_5" android:duration="50" />
<item android:drawable="@mipmap/progress_6" android:duration="50" />
<item android:drawable="@mipmap/progress_7" android:duration="50" />
<item android:drawable="@mipmap/progress_8" android:duration="50" />
<item android:drawable="@mipmap/progress_9" android:duration="50" />
<item android:drawable="@mipmap/progress_10" android:duration="50" />
<item android:drawable="@mipmap/progress_11" android:duration="50" />
<item android:drawable="@mipmap/progress_12" android:duration="50" />
<item android:drawable="@mipmap/progress_13" android:duration="50" />
<item android:drawable="@mipmap/progress_14" android:duration="50" />
<item android:drawable="@mipmap/progress_15" android:duration="50" />
<item android:drawable="@mipmap/progress_16" android:duration="50" />
<item android:drawable="@mipmap/progress_17" android:duration="50" />
<item android:drawable="@mipmap/progress_18" android:duration="50" />
<item android:drawable="@mipmap/progress_19" android:duration="50" />
<item android:drawable="@mipmap/progress_20" android:duration="50" />
<item android:drawable="@mipmap/progress_21" android:duration="50" />
<item android:drawable="@mipmap/progress_22" android:duration="50" />
<item android:drawable="@mipmap/progress_23" android:duration="50" />
<item android:drawable="@mipmap/progress_24" android:duration="50" />
<item android:drawable="@mipmap/progress_25" android:duration="50" />
<item android:drawable="@mipmap/progress_26" android:duration="50" />
<item android:drawable="@mipmap/progress_27" android:duration="50" />
<item android:drawable="@mipmap/progress_28" android:duration="50" />
<item android:drawable="@mipmap/progress_29" android:duration="50" />
<item android:drawable="@mipmap/progress_30" android:duration="50" />
<item android:drawable="@mipmap/progress_31" android:duration="50" />
<item android:drawable="@mipmap/progress_32" android:duration="10" />
</animation-list>
2.定义values/styles.xml如下：
<!-- 自定义dialog背景全透明无边框 -->
<style name="MyDialog" 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>
<!-- 是否浮现在activity之上 -->
<item name="android:windowIsFloating">true</item>
<!-- 是否模糊 -->
<item name="android:backgroundDimEnabled">false</item>
</style>
3.自定义Dialog
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.anim_drawable_dialog_layout);
//点击imageview外侧区域，动画不会消失
setCanceledOnTouchOutside(false);
progressImg = (ImageView) findViewById(R.id.refreshing_drawable_img);
//加载动画资源
animation = (AnimationDrawable) progressImg.getDrawable();
}
4.创建加载框布局
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="@+id/refreshing_drawable_img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:scaleType="fitCenter"
android:src="@drawable/drawable_anim" />
</RelativeLayout>
通过图片实现
1.定义res/anim/alpha_in.xml如下：
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
<rotate
android:duration="200"
android:fromDegrees="0"
android:pivotX="50%"
android:pivotY="50%"
android:repeatCount="-1"
android:toDegrees="360" />
</set>
2.自定义Dialog
public IconDrawableDialog(Context context) {
super(context, R.style.MyDialog);
//点击imageview外侧区域，动画不会消失
setCanceledOnTouchOutside(false);
init();
}
private void init() {
setContentView(R.layout.icon_drawable_dialog_layout);
iv_route = (ImageView) findViewById(R.id.iv_route);
detail_tv = (TextView) findViewById(R.id.detail_tv);
tv_point = (TextView) findViewById(R.id.tv_point);
initAnim();
getWindow().setWindowAnimations(R.anim.alpha_in);
}
private void initAnim() {
// mAnim = new RotateAnimation(360, 0, Animation.RESTART, 0.5f,
// Animation.RESTART, 0.5f);
mAnim = new RotateAnimation(0, 360, Animation.RESTART, 0.5f, Animation.RESTART, 0.5f);
mAnim.setDuration(500);
mAnim.setRepeatCount(Animation.INFINITE);
mAnim.setRepeatMode(Animation.RESTART);
mAnim.setStartTime(Animation.START_ON_FIRST_FRAME);
}
3.创建加载框布局
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="100dp"
android:layout_gravity="center"
android:paddingRight="30dp"
android:background="@mipmap/dialog_background"
android:orientation="horizontal">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="100dp"
android:layout_marginLeft="20dp"
android:gravity="center_vertical">
<ImageView
android:id="@+id/iv_route"
android:layout_width="50dp"
android:layout_height="50dp"
android:background="@mipmap/dialog"></ImageView>
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="100dp"
android:layout_marginLeft="20dp"
android:gravity="center_vertical">
<TextView
android:id="@+id/detail_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="marquee"
android:gravity="center"
android:singleLine="true"
android:text="正在加载"
android:textColor="#000000"
android:textSize="20sp" />
<TextView
android:id="@+id/tv_point"
android:layout_width="20dp"
android:layout_height="wrap_content"
android:layout_toRightOf="@+id/detail_tv"
android:text="..."
android:textColor="#000000"
android:textSize="20sp" />
</RelativeLayout>
</LinearLayout>
效果图
Screenshot_2017-01-04-18-10-16.png
Screenshot_2017-01-04-18-10-10.png
以上是两种常用的加载框样式，由于时间有限，只贴了主要的代码，所以，如有需要，以下提供下载地址。
由于图片较多，所以rar包有点大。下载地址:http://download.csdn.net/detail/liu_ling1216/9728944
