在Android中实现类似于iOS的旋转活动指示器

Question

我正在尝试实现类似于我在Android下面放置的旋转活动.我相信我应该使用ProgressDialog.我的问题源于如何实际操作ProgressDialog看起来像活动指示器.

欢迎任何想法.一个例子的链接甚至会更好.

谢谢.

重新编辑:

myProgress.java

public class myProgress extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);

    ProgressDialog d = (ProgressDialog)findViewById(R.id.progres);

main.xml中

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/progres"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
>
<ProgressBar  
    android:id="@+id/progressBar"
    android:indeterminate="true" 
    style="?android:attr/progressBarStyleLarge"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true" 
/>
</RelativeLayout>

Answer 1

我编写了自己的自定义 LoadingIndicatorView。

它由两个文件组成：

• 加载指示条视图
• 加载指示器视图

优点：

• 以编程方式创建，没有 PNG 滑稽动作意味着可扩展和清晰：D
• 可自定义的条形颜色和圆角半径（如果您理解我的代码）

缺点：

• 性能不如 iOS 版本（我只是一个来自 iOS 背景的初级 Android 开发人员，你有什么期望？）：P

免责声明：

• 如果你的项目失败了不要怪我，我把它作为免费的公共领域代码。

您会注意到我的编码风格和结构与我的 iOS 编程代码非常相似。我以编程方式做所有事情，如果我能逃脱它，就没有 XML。

如何使用此加载指示器

将所有三个类的源代码复制并粘贴到它们的 Java 文件中后，如果要使用LoadingIndicatorView该类，则不需要触摸其他类，除非您想自定义每个条的颜色或圆角。

LoadingIndicatorView在您的活动中创建这样的实例：

import com.companyName.myApplication.views.LoadingIndicatorView;

public class MyActivity extends AppCompatActivity
{
    public mainLayout RelativeLayout;
    ...
    public LoadingIndicatorView loadingIndicator;

    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);

        initViews();
        initLayouts();
        addViews();
    }

    public void initViews()
    {
        mainLayout = new RelativeLayout(this);
        mainLayout.setBackgroundColor(Color.BLACK);

        ...

        // ---------------------------------------------------
        // 40 here is the radius of the circle
        // try and use multiples of 2, e.g. 40, 60, 80 etc
        // ---------------------------------------------------
        loadingIndicator = new LoadingIndicatorView(this, 40);

        // hide until ready to start animating
        loadingIndicator.setAlpha(0.0f);
    }

    public void initLayouts()
    {
        ...

        // Need API level 17 for this, set in your AndroidManifeset.xml
        mainLayout.setId(View.generateViewId());
        loadingIndicator.setId(View.generateViewId());

        RelativeLayout.LayoutParams loadingIndicatorLayoutParams = new RelativeLayout.LayoutParams(
                (int)(loadingIndicator.radius * 2.0f),
                (int)(loadingIndicator.radius * 2.0f)
        );

        loadingIndicatorLayoutParams.addRule(RelativeLayout.CENTER_IN_PARENT);

        loadingIndicator.setLayoutParams(loadingIndicatorLayoutParams);
    }

    public void addViews()
    {
        ...

        mainLayout.addView(loadingIndicator);

        setContentView(mainLayout);
    }
}

一旦准备好显示它，例如在按钮单击侦听器中，然后调用：

loadingIndicator.startAnimating();

当您想停止并隐藏指标时，请调用：

loadingIndicator.stopAnimating();

你最终会得到这样的结果：

LoadingIndicatorView.java

package com.companyName.myApplication.views;

import android.app.Activity;
import android.content.Context;
import android.graphics.Color;
import android.graphics.ColorFilter;
import android.graphics.PorterDuff;
import android.os.CountDownTimer;
import android.os.Handler;
import android.os.Looper;
import android.util.Log;
import android.view.View;
import android.view.animation.RotateAnimation;
import android.widget.RelativeLayout;

import java.lang.reflect.Array;
import java.util.ArrayList;
import java.util.Timer;
import java.util.TimerTask;

/**
 * Created by Zhang on 11/02/16.
 */
public class LoadingIndicatorView extends RelativeLayout
{
    private Context context;

    private int numberOfBars;

    public ArrayList<LoadingIndicatorBarView> arrBars;

    public float radius;

    private boolean isAnimating;
    private int currentFrame;

    private final Handler handler = new Handler();
    private Runnable playFrameRunnable;

    public LoadingIndicatorView(Context context, float radius)
    {
        super(context);

        this.context = context;
        this.radius = radius;
        this.numberOfBars = 12;

        initViews();
        initLayouts();
        addViews();
        spreadBars();
    }

    public void initViews()
    {
        arrBars = new ArrayList<LoadingIndicatorBarView>();

        for(int i = 0; i < numberOfBars; i++)
        {
            LoadingIndicatorBarView bar = new LoadingIndicatorBarView(context, radius / 10.0f);

            arrBars.add(bar);
        }
    }

    public void initLayouts()
    {
        for(int i = 0; i < numberOfBars; i++)
        {
            LoadingIndicatorBarView bar = arrBars.get(i);

            bar.setId(View.generateViewId());

            RelativeLayout.LayoutParams barLayoutParams = new RelativeLayout.LayoutParams(
                    (int)(radius / 5.0f),
                    (int)(radius / 2.0f)
            );

            barLayoutParams.addRule(ALIGN_PARENT_TOP);
            barLayoutParams.addRule(CENTER_HORIZONTAL);

            bar.setLayoutParams(barLayoutParams);
        }
    }

    public void addViews()
    {
        for(int i = 0; i < numberOfBars; i++)
        {
            LoadingIndicatorBarView bar = arrBars.get(i);

            addView(bar);
        }
    }

    public void spreadBars()
    {
        int degrees = 0;

        for(int i = 0; i < arrBars.size(); i++)
        {
            LoadingIndicatorBarView bar = arrBars.get(i);

            rotateBar(bar, degrees);

            degrees += 30;
        }
    }

    private void rotateBar(LoadingIndicatorBarView bar, float degrees)
    {
        RotateAnimation animation = new RotateAnimation(0, degrees, radius / 10.0f, radius);
        animation.setDuration(0);
        animation.setFillAfter(true);

        bar.setAnimation(animation);
        animation.start();
    }

    public void startAnimating()
    {
        setAlpha(1.0f);

        isAnimating = true;

        playFrameRunnable = new Runnable()
        {
            @Override
            public void run()
            {
                playFrame();
            }
        };

        // recursive function until isAnimating is false
        playFrame();
    }

    public void stopAnimating()
    {
        isAnimating = false;

        setAlpha(0.0f);

        invalidate();

        playFrameRunnable = null;
    }

    private void playFrame()
    {
        if(isAnimating)
        {
            resetAllBarAlpha();
            updateFrame();

            handler.postDelayed(playFrameRunnable, 0);
        }
    }

    private void updateFrame()
    {
        if (isAnimating)
        {
            showFrame(currentFrame);
            currentFrame += 1;

            if (currentFrame > 11)
            {
                currentFrame = 0;
            }
        }
    }

    private void resetAllBarAlpha()
    {
        LoadingIndicatorBarView bar = null;

        for (int i = 0; i < arrBars.size(); i++)
        {
            bar = arrBars.get(i);

            bar.setAlpha(0.5f);
        }
    }

    private void showFrame(int frameNumber)
    {
        int[] indexes = getFrameIndexesForFrameNumber(frameNumber);

        gradientColorBarSets(indexes);
    }

    private int[] getFrameIndexesForFrameNumber(int frameNumber)
    {
        if(frameNumber == 0)
        {
            return indexesFromNumbers(0, 11, 10, 9);
        }
        else if(frameNumber == 1)
        {
            return indexesFromNumbers(1, 0, 11, 10);
        }
        else if(frameNumber == 2)
        {
            return indexesFromNumbers(2, 1, 0, 11);
        }
        else if(frameNumber == 3)
        {
            return indexesFromNumbers(3, 2, 1, 0);
        }
        else if(frameNumber == 4)
        {
            return indexesFromNumbers(4, 3, 2, 1);
        }
        else if(frameNumber == 5)
        {
            return indexesFromNumbers(5, 4, 3, 2);
        }
        else if(frameNumber == 6)
        {
            return indexesFromNumbers(6, 5, 4, 3);
        }
        else if(frameNumber == 7)
        {
            return indexesFromNumbers(7, 6, 5, 4);
        }
        else if(frameNumber == 8)
        {
            return indexesFromNumbers(8, 7, 6, 5);
        }
        else if(frameNumber == 9)
        {
            return indexesFromNumbers(9, 8, 7, 6);
        }
        else if(frameNumber == 10)
        {
            return indexesFromNumbers(10, 9, 8, 7);
        }
        else
        {
            return indexesFromNumbers(11, 10, 9, 8);
        }
    }

    private int[] indexesFromNumbers(int i1, int i2, int i3, int i4)
    {
        int[] indexes = {i1, i2, i3, i4};
        return indexes;
    }

    private void gradientColorBarSets(int[] indexes)
    {
        float alpha = 1.0f;

        LoadingIndicatorBarView barView = null;

        for(int i = 0; i < indexes.length; i++)
        {
            int barIndex = indexes[i];

            barView = arrBars.get(barIndex);


            barView.setAlpha(alpha);
            alpha -= 0.125f;
        }

        invalidate();
    }
}

加载IndicatorBarView.java

package com.companyName.myApplication.views;

import android.content.Context;
import android.graphics.Color;
import android.widget.RelativeLayout;

import com.companyName.myApplication.helper_classes.ToolBox;

/**
 * Created by Zhang on 11/02/16.
 */
public class LoadingIndicatorBarView extends RelativeLayout
{
    private Context context;
    private float cornerRadius;

    public LoadingIndicatorBarView(Context context, float cornerRadius)
    {
        super(context);

        this.context = context;
        this.cornerRadius = cornerRadius;

        initViews();
    }

    public void initViews()
    {
        setBackground(ToolBox.roundedCornerRectWithColor(
                Color.argb(255, 255, 255, 255), cornerRadius));

        setAlpha(0.5f);
    }

    public void resetColor()
    {
        setBackground(ToolBox.roundedCornerRectWithColor(
                Color.argb(255, 255, 255, 255), cornerRadius));

        setAlpha(0.5f);
    }
}

工具箱.java

package com.companyName.myApplication.helper_classes;

import android.content.Context;
import android.content.res.Configuration;
import android.content.res.Resources;
import android.graphics.Paint;
import android.graphics.drawable.ShapeDrawable;
import android.graphics.drawable.shapes.RoundRectShape;

/**
 * Created by Zhang on 3/02/16.
 */
public class ToolBox
{
    private static ToolBox instance;
    public Context context;

    private ToolBox()
    {

    }

    public synchronized static ToolBox getInstance()
    {
        if(instance == null)
        {
            instance = new ToolBox();
        }

        return instance;
    }

    public static ShapeDrawable roundedCornerRectOutlineWithColor(int color, float cornerRadius,
                                                                  float strokeWidth)
    {
        float[] radii = new float[] {
                cornerRadius, cornerRadius,
                cornerRadius, cornerRadius,
                cornerRadius, cornerRadius,
                cornerRadius, cornerRadius
        };

        RoundRectShape roundedCornerShape = new RoundRectShape(radii, null, null);

        ShapeDrawable shape = new ShapeDrawable();
        shape.getPaint().setColor(color);
        shape.setShape(roundedCornerShape);
        shape.getPaint().setStrokeWidth(strokeWidth);
        shape.getPaint().setStyle(Paint.Style.STROKE);

        return shape;
    }

    public static ShapeDrawable roundedCornerRectWithColor(int color, float cornerRadius)
    {
        float[] radii = new float[] {
                cornerRadius, cornerRadius,
                cornerRadius, cornerRadius,
                cornerRadius, cornerRadius,
                cornerRadius, cornerRadius
        };

        RoundRectShape roundedCornerShape = new RoundRectShape(radii, null, null);

        ShapeDrawable shape = new ShapeDrawable();
        shape.getPaint().setColor(color);
        shape.setShape(roundedCornerShape);

        return shape;
    }

    public static ShapeDrawable roundedCornerRectWithColor(int color, float topLeftRadius, float
            topRightRadius, float bottomRightRadius, float bottomLeftRadius)
    {
        float[] radii = new float[] {
                topLeftRadius, topLeftRadius,
                topRightRadius, topRightRadius,
                bottomRightRadius, bottomRightRadius,
                bottomLeftRadius, bottomLeftRadius
        };

        RoundRectShape roundedCornerShape = new RoundRectShape(radii, null, null);

        ShapeDrawable shape = new ShapeDrawable();
        shape.getPaint().setColor(color);
        shape.setShape(roundedCornerShape);

        return shape;
    }

    public static int getScreenWidth()
    {
        return Resources.getSystem().getDisplayMetrics().widthPixels;
    }

    public static int getScreenHeight()
    {
        return Resources.getSystem().getDisplayMetrics().heightPixels;
    }

    public static int getScreenOrientation(Context context)
    {
        return context.getResources().getConfiguration().orientation;
    }

    public static boolean isLandscapeOrientation(Context context)
    {
        return getScreenOrientation(context) == Configuration.ORIENTATION_LANDSCAPE;
    }

}

这个工具箱类是我在所有项目中创建圆角形状等的便利助手类。

希望有帮助：D

Answer 2

这就是我实现它的方式

这是代码

@Override   
protected Dialog onCreateDialog(int id) {
    switch (id) {
    case DIALOG_LOADING:
        final Dialog dialog = new Dialog(this, android.R.style.Theme_Translucent);          
        dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
        dialog.setContentView(R.layout.loading);
        dialog.setCancelable(true);
        dialog.setOnCancelListener(new OnCancelListener() {             
            @Override
            public void onCancel(DialogInterface dialog) {
                //onBackPressed();
            }
        });
    return dialog;  

    default:
        return null;
    }
};

这是load.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/progres"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
>
<ProgressBar  
    android:indeterminate="true" 
    style="?android:attr/progressBarStyleLarge"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true" 
/> 
</RelativeLayout>

用对话框调用对话框

showDialog(DIALOG_LOADING);

隐藏它使用

dismissDialog(DIALOG_LOADING);

UPDATE

如果需要和自定义指示器,您可以在layout.xml中执行以下操作.

1. ProgressBar用一个替换ImageView
2. 将backgroundImageView设置为AnimationDrawable
3. 你可以开始动画了 onPrepareDialog