android开发加载图片旋转的例子

最近写了个项目,是使用webView写的,在网页加载的时候因为网速的原因,往往没有达到1秒即开的那种效果,所以添加了一个图片loading旋转的功能,告诉用户,APP正在加载中。

下面是xml布局代码:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent"
    android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:showIn="@layout/activity_main" tools:context=".MainActivity">

    <WebView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:id="@+id/webView"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="0dp"
        android:layout_alignParentTop="true"
        android:layout_alignParentEnd="true" />

    <ImageView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:id="@+id/loading1"
        android:visibility="gone"
        android:background="@color/gray"
        android:alpha="0.3"/>

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/loading"
        android:src="@drawable/web_load"
        android:scaleType="center"
        android:visibility="gone"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="@dimen/fab_margin" />

</RelativeLayout>

使用RelativeLayout布局,只可以可以让控件层叠显示。首先创建一个ImageView,图片肯定是loading的那种,文中使用的是:

web_load

第二个Image使用背景颜色,透明度0.3,大致上布局完成,背景颜色的Image一定要在Loading图片的上面,这样才可以让Loading图片显示出来。

接着写代码:

Animation load_Anim = AnimationUtils.loadAnimation(mContext,R.anim.loading);
load_Anim.setInterpolator(new LinearInterpolator());
第一行的代码是加载一个动画,第二行是设置动画均匀;

R.anim.loading的源代码是:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <rotate
        android:fromDegrees="0"
        android:toDegrees="359"
        android:duration="800"
        android:repeatCount="-1"
        android:pivotX="50%"
        android:pivotY="50%" />
</set>

接着继续写JAVA的代码:

webView.setWebChromeClient(new WebChromeClient() {
    public void onProgressChanged(WebView view, int newProgress) {

        if (newProgress == 100) {
            if(loading.getVisibility() == View.VISIBLE){
                loading.clearAnimation();//一定要清楚动画,不然没办法隐藏image
                loading.setVisibility(View.GONE);
                loading1.setVisibility(View.GONE);
            }

          
        }else {
            if (loading.getVisibility()  == View.GONE){
                loading.startAnimation(load_Anim);
                loading.setVisibility(View.VISIBLE);
                loading1.setVisibility(View.VISIBLE);
            }

        }
    }
});

以上的代码就已实现页面加载的效果了。

下面是一张效果图:

QQ截图20160613103757

 

Leave a Comment