Android: Animation de barre de progression horizontale personnalisée

Je suis en train de créer une barre de progression où la barre elle-même s'anime dans une verticale de spin à mesure qu'il progresse horizontalement. Je suis avec succès à l'aide de mes progrès dessiné le dessiné par:

<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" />

Voici mon drawable:

Mais je veux qu'il ait un subtil effet de roulis que sa progression. Donc, il serait comme les lignes verticales sont en mouvement vers l'arrière sorta. Vous suivez? Toute aide est très appréciée. Merci.

EDIT:
J'ai essayé de créé une animation-liste de mes progrès dessinés, mais je ne suis pas encore en mesure de voir l'animation. Une animation-liste à l'intérieur d'un clip pour le progrès de l'élément?

<?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>

source d'informationauteur askilondz

Yahoo! Enfin!!! Œuvres ! (MAIS !!!! peut causer la fuite de mémoire avec de grandes images. C'est corrigé dans le post ci-dessous)

Ce code prend la tuile de l'image (tile1), les répétitions(TileMode.RÉPÉTER), fait changé d'animation (10 fragments), ajoute ce dans l'Animation de jeu.

Android: Animation de barre de progression horizontale personnalisée

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;
}

2

Je ne pense pas que cela peut être fait de la façon dont j'ai pensé qu'il pourrait. La raison étant que je ne peux pas la référence de l'animation-liste, qui à ce moment est un ClipDrawable, et de le convertir en une AnimateDrawable qui est nécessaire afin que je puisse par programme démarrer l'animation. Il est également nécessaire de le contenir dans le clip de l'élément qui est la Barre de progression de la manière de masquer une image de sorte qu'il n'affiche que la partie de l'image ainsi que sa progression.

Côté de falsification de ma propre barre de progression à l'aide de ImageViews et l'animation de ceux que je ne vois pas un autre moyen de contourner cela pour cette ProgressBar.

Ma méthode précédente avait un problème avec la mémoire de consommer. J'ai eu une meilleure utilisation de TranslateAnimation. MAIS il a peu de LAG (attention sur HACK commentaire dans ProgressBgView.initAnimation méthode)

Mise en page xml :

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

Backend :

    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();
}
});

Et de la classe :

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);
}
}

Ce que je reçois.
Android: Animation de barre de progression horizontale personnalisée

Et c'est moyen:

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

Après que, dans styles.xml:

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

Dans le fichier 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>

Et voici 4 images à mettre dans le dossier res/drawable:

Android: Animation de barre de progression horizontale personnalisée

P. S. Si vous avez besoin d'inverser la direction de la barre de progression, il suffit de retourner les chiffres dans le nom des images dans progress_bar_indeterminate.xml.

Bonne journée! =)

J'ai trouvé une solution. Créer un xml dire, progress_loading.xml comme suit et l'attribuer au progrès dessinés de la progressbar :

<?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>

Ensuite dans le code:

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();

Où le xml loading.xml a l'animation de la liste. C'est travaillé pour moi.

J'ai trouvé une solution, un peu comme à l'explication ci-dessus, mais n'en sont issues. Fonctionne très bien!

Dire ci-dessous notre 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>

puis dans du code Java, procédez de la manière suivante:

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();

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>

De code 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);
}
}

Espère que cela aide. Vous pouvez facilement le modifier à l'appui de votre propre mise en œuvre.

Pour ceux qui veulent faire de la barre de progression déterminée, je poste ma amélioration de user1269737 de réponse.

J'ai changé intAnimation méthode comme ceci:

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);
}
}

Et a ajouté setProgress méthode d'animation avec les progrès de changement:

 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();
}

Et quelques changements dans le constructeur:

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);
}

Vous devez vous connecter pour publier un commentaire.