Question

我正在尝试创建一个进度条，当条形图水平前进时，它会在垂直旋转中进行动画制作。我成功地使用了我的进度drawable作为drawable via：

<ProgressBar
        android:id="@+id/progressBar"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        style="@android:style/Widget.ProgressBar.Horizontal"
        android:progressDrawable="@drawable/custom_progress"
        android:layout_marginRight="5dp" />

这是我的绘画：

enter image description here

但是我希望它的进展具有微妙的滚动效果。所以它看起来像垂直线向后移动sorta。你跟着？任何帮助深表感谢。感谢。

编辑：我尝试创建一个动画列表作为我的进度可绘制但我仍然无法看到动画。动画列表可以位于进度项的剪辑内吗？

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@android:id/background" android:drawable="@drawable/gutter"></item>

<item android:id="@android:id/progress">

<clip>
    <animation-list android:oneshot="false">
        <item android:drawable="@drawable/progress_bar_animate" android:duration="100" />
        <item android:drawable="@drawable/progress_bar_animate2" android:duration="100" />
        <item android:drawable="@drawable/progress_bar_animate3" android:duration="100" />
        <item android:drawable="@drawable/progress_bar_animate4" android:duration="100" />
        <item android:drawable="@drawable/progress_bar_animate5" android:duration="100" />
        <item android:drawable="@drawable/progress_bar_animate6" android:duration="100" />
        <item android:drawable="@drawable/progress_bar_animate7" android:duration="100" />
    </animation-list>
</clip>

</item>
</layer-list>

Answer 1

雅虎！最后！工作！（但是!!!!可能导致大图像的内存泄漏。它已在下面的帖子中修复）

此代码获取平铺图片（tile1），重复它（TileMode.REPEAT），制作移位动画（10个片段），在动画集中添加它。

enter image description here

private void initAnimation() {
//      R.drawable.tile1 is PNG
        Bitmap b = BitmapFactory.decodeResource(getResources(),R.drawable.tile1);
        AnimationDrawable shiftedAnimation = getAnimation(b);

//      R.id.img_3 is ImageView in my application
        View v = findViewById(R.id.img_3);
        v.setBackground(shiftedAnimation);
        shiftedAnimation.start();
}

private Bitmap getShiftedBitmap(Bitmap bitmap, int shiftX) {
    Bitmap newBitmap = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight(), bitmap.getConfig());
    Canvas newBitmapCanvas = new Canvas(newBitmap);

    Rect srcRect1 = new Rect(shiftX, 0, bitmap.getWidth(), bitmap.getHeight());
    Rect destRect1 = new Rect(srcRect1);
    destRect1.offset(-shiftX, 0);
    newBitmapCanvas.drawBitmap(bitmap, srcRect1, destRect1, null);

    Rect srcRect2 = new Rect(0, 0, shiftX, bitmap.getHeight());
    Rect destRect2 = new Rect(srcRect2);
    destRect2.offset(bitmap.getWidth() - shiftX, 0);
    newBitmapCanvas.drawBitmap(bitmap, srcRect2, destRect2, null);

    return newBitmap;
}

private List<Bitmap> getShiftedBitmaps(Bitmap bitmap) {
    List<Bitmap> shiftedBitmaps = new ArrayList<Bitmap>();
    int fragments = 10;
    int shiftLength = bitmap.getWidth() / fragments;

    for(int i = 0 ; i < fragments; ++i){
        shiftedBitmaps.add( getShiftedBitmap(bitmap,shiftLength * i));
    }

    return shiftedBitmaps;
}

private AnimationDrawable getAnimation(Bitmap bitmap) {
    AnimationDrawable animation = new AnimationDrawable();
    animation.setOneShot(false);

    List<Bitmap> shiftedBitmaps = getShiftedBitmaps(bitmap);
    int duration = 50;

    for(Bitmap image: shiftedBitmaps){
        BitmapDrawable navigationBackground = new BitmapDrawable(getResources(), image);
        navigationBackground.setTileModeX(TileMode.REPEAT);

        animation.addFrame(navigationBackground, duration);
    }
    return animation;
}

Answer 2

我不认为这可以按照我认为的方式完成。原因是我无法引用动画列表，此时它是一个ClipDrawable，并将其转换为AnimateDrawable，这是必要的，因此我可以以编程方式启动动画。还需要将它包含在clip元素中，因为这是ProgressBar屏蔽图像的方式，因此它只显示图像的一部分作为其进展。

除了伪造我自己的进度条使用ImageViews和动画那些我没有看到它为这个特定的ProgressBar的另一种方式。

Answer 3

我找到了解决方案。创建一个xml say，progress_loading.xml，如下所示，并将其分配给进度条的进度drawable：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
  <item android:id="@android:id/progress">
    <clip>
      <shape>
        <solid android:color="#33FFFFFF" />
      </shape>
    </clip>
  </item>
</layer-list>

然后在代码中：

AnimationDrawable anim = (AnimationDrawable) getResources()
                .getDrawable(R.drawable.loading);
        ClipDrawable clipDrawable = new ClipDrawable(anim, Gravity.LEFT,
                ClipDrawable.HORIZONTAL);
        LayerDrawable layerDrawable = (LayerDrawable) progressBar
                .getProgressDrawable();
        layerDrawable.setDrawableByLayerId(android.R.id.progress,
                clipDrawable);
        anim.start();

xml loading.xml具有实际动画列表。这对我有用。

Answer 4

我以前的方法存在内存消耗问题。我改进了它以使用TranslateAnimation。但它有很少的LAG（注意ProgressBgView.initAnimation方法中的HACK注释）

布局xml：

    <com.example.tweenanimation.ProgressBgView
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:id="@+id/progress_db_view"
        />

后端：

    final ProgressBgView prog = (ProgressBgView) findViewById(R.id.progress_db_view);
        prog.setBackgroundAsTile(R.drawable.bg_tile_1);
        prog.setOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View v) {
                prog.startAnimation();
            }
        });

上课：

public class ProgressBgView extends FrameLayout {
    private ImageView mProgressImage;
    private TranslateAnimation mProgressAnimation;

    public ProgressBgView(Context context, AttributeSet attrs) {
        super(context, attrs);

        mProgressImage = new ImageView(getContext());
        FrameLayout.LayoutParams layoutParams = new FrameLayout.LayoutParams(FrameLayout.LayoutParams.MATCH_PARENT, FrameLayout.LayoutParams.WRAP_CONTENT);
        mProgressImage.setLayoutParams(layoutParams);
        addView(mProgressImage);
    }

    public void setBackgroundAsTile(int tileImageResId) {
        Bitmap tileBitmap = BitmapFactory.decodeResource(getResources(), tileImageResId);
        BitmapDrawable tileRepeatedBitmap = new BitmapDrawable(getResources(), tileBitmap);
        tileRepeatedBitmap.setTileModeX(TileMode.REPEAT);

        initAnimation(tileBitmap.getWidth());

        mProgressImage.setBackgroundDrawable(tileRepeatedBitmap);
    }

    private void initAnimation(int tileImageWidth) {
        FrameLayout.LayoutParams layoutParams = (FrameLayout.LayoutParams) mProgressImage.getLayoutParams();
        layoutParams.setMargins(-tileImageWidth, 0, 0, 0);

        // *HACK* tileImageWidth-3 is used because of *lags*(slow pause) in the moment
        // of animation END-RESTART.
        mProgressAnimation = new TranslateAnimation(0, tileImageWidth - 3, 0, 0);
        mProgressAnimation.setInterpolator(new LinearInterpolator());
        mProgressAnimation.setDuration(1000);
        mProgressAnimation.setRepeatCount(Animation.INFINITE);
    }

    public void startAnimation() {
        mProgressImage.startAnimation(mProgressAnimation);
    }
}

Answer 5

这就是我得到的。 Custom horizontal progress bar

这就是：

<ProgressBar
    android:layout_width="match_parent"
    android:layout_height="15dp"
    android:indeterminate="true"
    style="@style/IndeterminateProgressBar" />

之后在styles.xml：

<style name="IndeterminateProgressBar" parent="@android:style/Widget.ProgressBar.Horizontal">
    <item name="android:indeterminateDrawable">@anim/progress_bar_indeterminate</item>
</style>

在文件res / anim / progress_bar_indeterminate.xml中：

<?xml version="1.0" encoding="utf-8"?>
<animation-list
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="false">
    <item android:drawable="@drawable/progress_bar_horizontal_1" android:duration="200" />
    <item android:drawable="@drawable/progress_bar_horizontal_2" android:duration="200" />
    <item android:drawable="@drawable/progress_bar_horizontal_3" android:duration="200" />
    <item android:drawable="@drawable/progress_bar_horizontal_4" android:duration="200" />
</animation-list>

这里需要放入文件夹res / drawable的4张图片：

progress_bar_horizontal_1

progress_bar_horizontal_2

progress_bar_horizontal_3

progress_bar_horizontal_4

P.S。如果您需要进度条的反向，只需在progress_bar_indeterminate.xml中翻转图像名称中的数字。

美好的一天！ =）

Answer 6

对于那些想要确定进度条的人，我将我的改进发布到user1269737的答案。

我已经改变了intAnimation方法：

private void initAnimation(int tileImageResId) {
    Bitmap b = BitmapFactory.decodeResource(getResources(), tileImageResId);
    if (b != null) {
        shiftedAnimation = getAnimation(b);

        setBackgroundColor(ContextCompat.getColor(getContext(), #14000000));
        mProgressImage.setBackground(shiftedAnimation);
    }
}

并添加了动画进度更改的setProgress方法：

 public void setProgress(double progress){
    if (progress > 100){
        progress = 100;
    }
    else if (progress < 0){
        progress = 0;
    }
    int parentWidth = getWidth();
    final int newWidth =  (int)(parentWidth*(progress/100.0));

    widthAnimator = ValueAnimator.ofInt(mProgressImage.getLayoutParams().width, newWidth);
    widthAnimator.setDuration(200);
    widthAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator animation) {
            mProgressImage.getLayoutParams().width = (Integer) animation.getAnimatedValue();
            mProgressImage.requestLayout();
        }
    });
    widthAnimator.start();
}

构造函数中的一些更改：

public LProgressBar(Context context, AttributeSet attrs) {
    super(context, attrs);

    mProgressImage = new ImageView(getContext());
    FrameLayout.LayoutParams layoutParams = new FrameLayout.LayoutParams(0, FrameLayout.LayoutParams.MATCH_PARENT);
    mProgressImage.setLayoutParams(layoutParams);
    addView(mProgressImage);

    initAnimation(R.drawable.pb_background);
}

Answer 7

我找到了一种解决方案，类似于上面的解释，但并非源自它。效果很棒！

下面说的是我们的progress_drawable.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@android:id/background">
        <shape>
            <solid
                android:color="@color/black_20"/>
        </shape>
    </item>

    <item android:id="@android:id/progress">
        <clip>
            <animation-list
                android:oneshot="false">
                <item
                    android:drawable="@drawable/stripe3"
                    android:duration="100"/>
                <item
                    android:drawable="@drawable/stripe2"
                    android:duration="100"/>
                <item
                    android:drawable="@drawable/stripe1"
                    android:duration="100"/>
            </animation-list>
        </clip>
    </item>
</layer-list>

然后在Java代码中，执行以下操作：

mDownloadProgressBar.setProgressDrawable(getResources().getDrawable(R.drawable.download_progress, null));
LayerDrawable drawable = (LayerDrawable)mDownloadProgressBar.getProgressDrawable();
ClipDrawable clipDrawable = (ClipDrawable) drawable.getDrawable(1);
AnimationDrawable animationDrawable =(AnimationDrawable)clipDrawable.getDrawable();
animationDrawable.start();

Answer 8

download_progress_anim.xml

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:drawable="@drawable/stripe3"
        android:duration="100"/>
    <item
        android:drawable="@drawable/stripe2"
        android:duration="100"/>
    <item
        android:drawable="@drawable/stripe1"
        android:duration="100"/>
</animation-list>

Java代码：

mDownloadProgressBar.setProgressDrawable(createProgressDrawable(context));

private Drawable createProgressDrawable(Context context) {

    ShapeDrawable shape = new ShapeDrawable();
    shape.getPaint().setStyle(Paint.Style.FILL);
    shape.getPaint()
            .setColor(ContextCompat.getColor(context, R.color.black_20));

    AnimationDrawable animationDrawable = (AnimationDrawable) getDrawable(R.drawable.download_progress_anim, context);
    ClipDrawable clipDrawable = new ClipDrawable(animationDrawable, Gravity.LEFT, ClipDrawable.HORIZONTAL);
    animationDrawable.start();

    LayerDrawable layerDrawable = new LayerDrawable(new Drawable[]{shape, clipDrawable});
    layerDrawable.setId(0, android.R.id.background);
    layerDrawable.setId(1, android.R.id.progress);
    return layerDrawable;
}

private Drawable getDrawable(@DrawableRes int drawable, Context context) {
        if (Build.VERSION.SDK_INT < 21) {
            return context.getResources().getDrawable(drawable);
        } else {
            return context.getResources().getDrawable(drawable, null);
        }
    }

希望它有所帮助。您可以轻松修改它以支持您自己的实现。

Answer 9

如果且仅当您想要自定义颜色高度进度条：

我相信谷歌有一个视图可以做到这一点（LinearProgressIndicator）。您可以自定义颜色和高度。我在这篇文章中解释过：

https://stackoverflow.com/a/68505259/2719243

Android：自定义水平进度条动画

9 个答案: