java Android中的自定义进度条？

Custom Progress Bar in Android?

提问by JehandadK

I havent got a clue to how to do this. My progress bar should be the shape of cloud. Can someone direct me to a book, tutorial or just give the right step by step method?

我不知道如何做到这一点。我的进度条应该是云的形状。有人可以指导我看一本书、教程或只是提供正确的分步方法吗？

Thank you for your time.

感谢您的时间。

回答by Harry Joy

As shown hereyou can use image views to get custom scroll bar like effect.

如此处所示，您可以使用图像视图来获得类似效果的自定义滚动条。

The layout XML for custom progress bar in that example is:

该示例中自定义进度条的布局 XML 是：

<RelativeLayout android:id="@+id/RelativeLayout01"
    android:layout_width="fill_parent" xmlns:android="http://schemas.android.com/apk/res/android"
    android:gravity="center" android:layout_height="wrap_content"
    android:paddingLeft="30sp" android:paddingRight="30sp">
    <ImageView android:layout_width="wrap_content"
        android:layout_height="wrap_content" android:src="@drawable/progress_1"
        android:id="@+id/imgOne" android:tag="1"></ImageView>
    <ImageView android:layout_width="wrap_content"
        android:layout_height="wrap_content" android:src="@drawable/progress_2"
        android:id="@+id/imgTwo" android:layout_toRightOf="@id/imgOne"
        android:tag="2"></ImageView>
    <ImageView android:layout_width="wrap_content"
        android:layout_height="wrap_content" android:src="@drawable/progress_3"
        android:id="@+id/imgThree" android:layout_toRightOf="@id/imgTwo"
        android:tag="3"></ImageView>
    <TextView android:id="@+id/TextView01" android:layout_height="wrap_content"
        android:layout_toRightOf="@id/imgThree" android:layout_width="wrap_content"
        android:layout_alignTop="@id/imgThree" android:layout_alignBottom="@id/imgThree"
        android:gravity="bottom" android:text="Please Wait..."></TextView>
</RelativeLayout>

And then he creates a list of images in class file as:

然后他在类文件中创建了一个图像列表：

/**
 * Loads the layout and sets the initial set of images
 */
private void prepareLayout() {
    LayoutInflater inflater = (LayoutInflater) context
            .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    View view = inflater.inflate(R.layout.myprogressbar, null);
    addView(view);

    imageHolders = new ArrayList<ImageView>();
    imageHolders.add((ImageView) view.findViewById(R.id.imgOne));
    imageHolders.add((ImageView) view.findViewById(R.id.imgTwo));
    imageHolders.add((ImageView) view.findViewById(R.id.imgThree));

    // Prepare an array list of images to be animated
    images = new ArrayList<String>();

    images.add("progress_1");
    images.add("progress_2");
    images.add("progress_3");
    images.add("progress_4");
    images.add("progress_5");
    images.add("progress_6");
    images.add("progress_7");
    images.add("progress_8");
    images.add("progress_9");
}

Then he starts a Thread that sleeps for 0.3 seconds and calls the handler with handler.sendEmptyMessage(0);and finally in Handler he do the rest of the work of images:

然后他启动一个休眠 0.3 秒的线程并调用处理程序，handler.sendEmptyMessage(0);最后在处理程序中他完成图像的其余工作：

@Override
public void handleMessage(Message msg) {
    int currentImage = 0;
    int nextImage = 0;
    // Logic to change the images
    for (ImageView imageView : imageHolders) {
        currentImage = Integer.parseInt(imageView.getTag().toString());
        if (currentImage < 9) {
            nextImage = currentImage + 1;
        } else {
            nextImage = 1;
        }
        imageView.setTag("" + nextImage);
        imageView.setImageResource(getResources().getIdentifier(
                images.get(nextImage - 1), "drawable",
                "com.beanie.example"));
    }
    super.handleMessage(msg);
}

Also take a look at hereand here.

也看看这里和这里。

回答by digiphd

I ended up using the Custom Progress Bar with Round Cornersas a foundation to mine that Harry Joy recommended. However, if you want the same functionality that android's SDK version, such has intermediatefrom the ProgressBar class I had to make some changes. The changes I have made enable an intermediate drawable to be defined and animated.

我最终使用带有圆角的自定义进度条作为挖掘 Harry Joy 推荐的基础。但是，如果你想相同的功能Android的SDK版本，例如具有中间从ProgressBar类，我不得不做出一些改变。我所做的更改使中间可绘制对象能够被定义和动画化。

Make sure you follow the instructions here, but replace the RoundProgress class with this:

确保按照此处的说明进行操作，但将 RoundProgress 类替换为：

public class RoundProgress extends RelativeLayout {
private ImageView progressDrawableImageView;
private ImageView trackDrawableImageView;
private ImageView backGroundImageView;
private double max = 100;
private AttributeSet attrs2 ;
private Transformation mTransformation;
private AlphaAnimation mAnimation;
private int mBehavior;
private int mDuration;
private Interpolator mInterpolator;
private static Context ctx;
private int bgResource;

public int getMax() {
    Double d = new Double(max);
    return d.intValue();
}

public double getMaxDouble() {
    return max;
}

public void setMax(int max) {
    Integer maxInt = new Integer(max);
    maxInt.doubleValue();
    this.max = max;
}

public void setMax(double max) {
    this.max = max;
}

public RoundProgress(Context context, AttributeSet attrs) {
    super(context, attrs);
    LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    inflater.inflate(R.layout.round_progress, this);
    setup(context, attrs);
}

protected void setup(Context context, AttributeSet attrs)
{
    attrs2 = attrs;
    ctx = context;
    TypedArray a = context.obtainStyledAttributes(attrs,
        R.styleable.RoundProgress);
    //setBackgroundResource(R.drawable.custom_loading_bg);
    backGroundImageView = (ImageView) findViewById(R.id.background_image_view);
    backGroundImageView.setBackgroundResource(R.drawable.custom_loading_bg);


    final String xmlns="http://schemas.android.com/apk/res/com.digiphd.prospec";
   bgResource = attrs.getAttributeResourceValue(xmlns,
            "progressDrawable", 0);
    progressDrawableImageView = (ImageView) findViewById(
            R.id.progress_drawable_image_view);

    progressDrawableImageView.setBackgroundResource(bgResource);

    int trackResource = attrs.getAttributeResourceValue(xmlns, "track", 0);
    trackDrawableImageView = (ImageView) findViewById(R.id.track_image_view);
    trackDrawableImageView.setBackgroundResource(trackResource);

    int progress = attrs.getAttributeIntValue(xmlns, "progress", 0);
    setProgress(progress);
    int max = attrs.getAttributeIntValue(xmlns, "max", 100);
    setMax(max);

    int numTicks = attrs.getAttributeIntValue(xmlns, "numTicks", 0);

    a.recycle();

    ProgressBarOutline outline = new ProgressBarOutline(context);
    //addView(outline);


}

public void setProgress(Integer value)
{
    setProgress((double) value);
}

public void setProgress(double value) {
    ClipDrawable drawable = (ClipDrawable)
            progressDrawableImageView.getBackground();
    double percent = (double) value/ (double)max;
    int level = (int)Math.floor(percent*10000);

    drawable.setLevel(level);
}

public void setIntermediate(boolean t)
{
   if(t){
       progressDrawableImageView.setBackgroundResource(R.drawable.custom_intermediate_bg);
       startAnimation();
   }else{
       progressDrawableImageView.clearAnimation();
       progressDrawableImageView.setBackgroundResource(bgResource);

   }
}

/**
 * <p>Start the indeterminate progress animation.</p>
 */
void startAnimation() {
    int visibility = getVisibility();
    if (visibility != VISIBLE) {
        return;
    }
    Log.d("INTERMEDIATE","ANIMATION START!");
    mDuration = 1000;

        if (mInterpolator == null) {
            mInterpolator = new LinearInterpolator();
        }

        mTransformation = new Transformation();
        mAnimation = new AlphaAnimation(0.0f, 1.0f);
        mAnimation.setRepeatMode(Animation.REVERSE);
        mAnimation.setRepeatCount(Animation.INFINITE);
        mAnimation.setDuration(mDuration);
        mAnimation.setInterpolator(mInterpolator);
        mAnimation.setStartTime(Animation.START_ON_FIRST_FRAME);
        progressDrawableImageView.startAnimation(mAnimation);


}
}

Now in your activity, you can just call .setIntermediate(true or false) when required.

现在在您的活动中，您可以在需要时调用 .setIntermediate(true 或 false)。