Dialog加载页面动画(Loding.....加载等待)三种方式

本文介绍了在Android中实现加载页面动画的两种方式:一是通过帧动画实现多张图片切换的效果,二是利用几个图片上下跳动来展示加载等待状态。详细步骤包括创建资源文件、自定义Interpolator和设置动画效果,并附带了实际运行的截图。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

方式一:帧动画切换效果(几张图片切换)

1.drawable 下创建资源(多张图片~根据自己需要)

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:drawable="@drawable/a"
        android:duration="150"/>
    <item
        android:drawable="@drawable/b"
        android:duration="150"/>
    <item
        android:drawable="@drawable/c"
        android:duration="150"/>
</animation-list>


2.mydialog.xml(普通布局)


<?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"
                android:orientation="vertical">
    <ImageView
        android:id="@+id/loadingIv"
        android:layout_width="30dp"
        android:layout_height="40dp"
        android:layout_centerInParent="true"
        android:background="@drawable/s"/>
    <TextView
        android:id="@+id/loadingTv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/loadingIv"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="15dp"
        android:text="加载中...."
        android:textColor="#fff"
        android:textSize="15dp"/>
</RelativeLayout>


3.MyDialog类:


public class MyDialog extends ProgressDialog{
    private AnimationDrawable mAnimation;
    private ImageView mImageView;
    private TextView mTextView;
    private String loadingTip;
    private int resid;
    /**
     *
     * @param context 上下文对象
     * @param content 显示文字提示信息内容
     * @param id 动画id
     */
    public MyDialog(Context context, String content, int resid) {
        super(context);
        this.loadingTip = content;
        this.resid = resid;
        //点击提示框外面是否取消提示框
        setCanceledOnTouchOutside(false);
        //点击返回键是否取消提示框
        setCancelable(false);
        setIndeterminate(true);
    }
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.dialog);
        mTextView = (TextView) findViewById(R.id.loadingTv);
        mImageView = (ImageView) findViewById(R.id.loadingIv);
        mImageView.setBackgroundResource(resid);
        // 通过ImageView对象拿到背景显示的AnimationDrawable
        mAnimation = (AnimationDrawable) mImageView.getBackground();
        mImageView.post(new Runnable() {
            @Override
            public void run() {
                mAnimation.start();
            }
        });
        mTextView.setText(loadingTip);
    }
}
//最后在activity中进行调用,这样就完成了一个自定义的dialog提示框


4.需要dialog的Activity写下方法,调用即可


 public void showMyDialog() {
        dialog = new MyDialog(this, "正在加载中", R.drawable.s);
        dialog.show();
        Handler handler = new Handler();
        handler.postDelayed(new Runnable() {
            @Override
            public void run() {
                dialog.dismiss();
            }
        }, 5000);
    }
方式二:圆形彩球旋转效果

1.建类 EaseInOutCubicInterpolator(复制)

public class EaseInOutCubicInterpolator implements TimeInterpolator{
    @Override
    public float getInterpolation(float input) {
        if ((input *= 2) < 1.0f) {
            return 0.5f * input * input * input;
        }
        input -= 2;
        return 0.5f * input * input * input + 1;
    }
}


2.建menu文件夹,建xml


<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto"
      xmlns:tools="http://schemas.android.com/tools"
      tools:context=".MainActivity">
    <item android:id="@+id/action_settings"
          android:title="Settings"
          android:orderInCategory="100"
          app:showAsAction="never"/>
</menu>


3.values下dimens.xml中添加


<dimen name="default_circle_view_size">200dp</dimen>


4.values下建attrs


<?xml version="1.0" encoding="utf-8"?>
<resources> <declare-styleable name="CircleProgress">
    <attr name="color1" format="reference|color"/>
    <attr name="color2" format="reference|color"/>
    <attr name="color3" format="reference|color"/>
</declare-styleable>
</resources>


5.自定义view,复制


public class CircleProgress extends View {
    private static final int RED = 0xFFE5282C;
    private static final int YELLOW = 0xFF1F909A;
    private static final int BLUE = 0xFFFC9E12;
    private static final int COLOR_NUM = 3;
    private int[] COLORS;
    private TimeInterpolator mInterpolator = new EaseInOutCubicInterpolator();

    private final double DEGREE = Math.PI / 180;
    private Paint mPaint;
    private int mViewSize;
    private int mPointRadius;
    private long mStartTime;
    private long mPlayTime;
    private boolean mStartAnim = false;
    private Point mCenter = new Point();

    private ArcPoint[] mArcPoint;
    private static final int POINT_NUM = 15;
    private static final int DELTA_ANGLE = 360 / POINT_NUM;
    private long mDuration = 3600;

    public CircleProgress(Context context) {
        super(context);
        init(null, 0);
    }

    public CircleProgress(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(attrs, 0);
    }

    public CircleProgress(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init(attrs, defStyle);
    }

    private void init(AttributeSet attrs, int defStyle) {
        mArcPoint = new ArcPoint[POINT_NUM];

        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setStyle(Paint.Style.FILL);

        TypedArray a = getContext().obtainStyledAttributes(attrs, R.styleable.CircleProgress, defStyle, 0);
        int color1 = a.getColor(R.styleable.CircleProgress_color1, RED);
        int color2 = a.getColor(R.styleable.CircleProgress_color2, YELLOW);
        int color3 = a.getColor(R.styleable.CircleProgress_color3, BLUE);
        a.recycle();

        COLORS = new int[]{color1, color2, color3};
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int defaultSize = getResources().getDimensionPixelSize(R.dimen.default_circle_view_size);
        int width = getDefaultSize(defaultSize, widthMeasureSpec);
        int height = getDefaultSize(defaultSize, heightMeasureSpec);
        mViewSize = Math.min(width, height);
        setMeasuredDimension(mViewSize, mViewSize);
        mCenter.set(mViewSize / 2, mViewSize / 2);

        calPoints(1.0f);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        canvas.save();
        canvas.translate(mCenter.x, mCenter.y);

        float factor = getFactor();
        canvas.rotate(36 * factor);
        float x, y;
        for (int i = 0; i < POINT_NUM; ++i) {
            mPaint.setColor(mArcPoint[i].color);
            float itemFactor = getItemFactor(i, factor);
            x = mArcPoint[i].x - 2 * mArcPoint[i].x * itemFactor;
            y = mArcPoint[i].y - 2 * mArcPoint[i].y * itemFactor;
            canvas.drawCircle(x, y, mPointRadius, mPaint);
        }

        canvas.restore();

        if (mStartAnim) {
            postInvalidate();
        }
    }

    private void calPoints(float factor) {
        int radius = (int) (mViewSize / 3 * factor);
        mPointRadius = radius / 12;

        for (int i = 0; i < POINT_NUM; ++i) {
            float x = radius * -(float) Math.sin(DEGREE * DELTA_ANGLE * i);
            float y = radius * -(float) Math.cos(DEGREE * DELTA_ANGLE * i);

            ArcPoint point = new ArcPoint(x, y, COLORS[i % COLOR_NUM]);
            mArcPoint[i] = point;
        }
    }


    private float getFactor() {
        if (mStartAnim) {
            mPlayTime = AnimationUtils.currentAnimationTimeMillis() - mStartTime;
        }
        float factor = mPlayTime / (float) mDuration;
        return factor % 1f;
    }

    private float getItemFactor(int index, float factor) {
        float itemFactor = (factor - 0.66f / POINT_NUM * index) * 3;
        if (itemFactor < 0f) {
            itemFactor = 0f;
        } else if (itemFactor > 1f) {
            itemFactor = 1f;
        }
        return mInterpolator.getInterpolation(itemFactor);
    }

    public void startAnim() {
        mPlayTime = mPlayTime % mDuration;
        mStartTime = AnimationUtils.currentAnimationTimeMillis() - mPlayTime;
        mStartAnim = true;
        postInvalidate();
    }

    public void reset() {
        stopAnim();
        mPlayTime = 0;
        postInvalidate();

    }

    public void stopAnim() {
        mStartAnim = false;
    }

    public void setInterpolator(TimeInterpolator interpolator) {
        mInterpolator = interpolator;
    }

    public void setDuration(long duration) {
        mDuration = duration;
    }

    public void setRadius(float factor) {
        stopAnim();
        calPoints(factor);
        startAnim();
    }

    static class ArcPoint {
        float x;
        float y;
        int color;

        ArcPoint(float x, float y, int color) {
            this.x = x;
            this.y = y;
            this.color = color;
        }
    }
}


6.写类MyProgressDialog extends ProgressDialog,对应布局main_dialog.xml


public class MyProgressDialog extends ProgressDialog{
    protected CircleProgress mProgress;
    protected TextView mLoadingTv;
    //private AnimationDrawable mAnimation;

    public MyProgressDialog(Context context) {
        super(context);
        //点击提示框外面是否取消提示框
        setCanceledOnTouchOutside(false);
        //点击返回键是否取消提示框
        setCancelable(false);
        setIndeterminate(true);
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main_dialog);
        initView();
        //弹出dialog
        mProgress.post(new Runnable() {
            @Override
            public void run() {
                mProgress.startAnim();
            }
        });
    }
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getOwnerActivity().getMenuInflater().inflate(R.menu.main_menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }
    private void initView() {
        mProgress = (CircleProgress)findViewById(R.id.progress);
        mLoadingTv = (TextView)findViewById(R.id.loadingTv);
    }
}


7.布局main_dialog.xml(用自定义view)


<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:circleprogress="http://schemas.android.com/apk/res-auto"
    tools:context="a1113duoji.qf.com.loding.MainActivity">
    <a1113duoji.qf.com.loding.CircleProgress
        android:id="@+id/progress"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        circleprogress:color1="@android:color/holo_red_light"
        circleprogress:color2="@android:color/holo_green_light"
        circleprogress:color3="@android:color/holo_blue_light"/>

    <TextView
        android:id="@+id/loadingTv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/progress"
        android:layout_alignStart="@+id/progress"
        android:layout_below="@+id/progress"
        android:text="正在加载中.."
        android:textSize="15sp"/>
</RelativeLayout>


8.需要效果的Activity 写入下方法调用


public void showMyDialog() {
    MyProgressDialog    dialog = new MyProgressDialog(this);//=============上下文
        dialog.show();
        dialog.getWindow().setBackgroundDrawable(new ColorDrawable(0));
        Handler handler = new Handler();
        handler.postDelayed(new Runnable() {
            @Override
            public void run() {
                dialog.dismiss();
            }
        }, 5000);//================动画的时间
    }

效果图如下(此图来自于:https://github.com/Fichardu/CircleProgress)




方式三:几个图片上下跳动效果


1.导包


compile 'com.github.zzz40500:android-shapeLoadingView:1.0.3.2'
//弹出小框需添加下面的
repositories {
        maven {
            url "https://jitpack.io"
        }
    }

2.建menu文件夹,建xml


<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto">
    <item android:id="@+id/action_settings" android:title="@string/action_settings"
          android:orderInCategory="100" app:showAsAction="never" />
</menu>


3.string 资源需添加


<resources>
    <string name="action_settings">Settings</string>
</resources>


4.mydialog.xml 布局中


<com.mingle.widget.LoadingView
        android:id="@+id/loadView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:paddingTop="50dp"
        app:loadingText="加载中..."/>


5.MyDialog 类(复制不变)


public class MyDialog extends ProgressDialog {
    protected LoadingView mLoadView;
    public MyDialog(Context context) {
        super(context);
        //点击提示框外面是否取消提示框
        setCanceledOnTouchOutside(false);
        //点击返回键是否取消提示框
        setCancelable(false);
        setIndeterminate(true);
    }
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.dia);
        mLoadView = (LoadingView) findViewById(R.id.loadView);
    }
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
//        getMenuInflater().inflate(R.menu.menu_view_demo, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();
        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }
        return super.onOptionsItemSelected(item);
    }
}


6.需要dialog的Activity,写此方法,oncreate下调用


 public void showMyDialog() {
        mMyDialog = new MyDialog(this);
        mMyDialog.show();
        Handler handler = new Handler();
        handler.postDelayed(new Runnable() {
            @Override
            public void run() {
                mMyDialog.dismiss();
            }
        }, 5000);
    }

效果图如下(此图来自于:https://github.com/zzz40500/android-shapeLoadingView)










评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值