Barre de progression sous la barre d'action

Question

Question de Synthèse: Comment puis-je faire une ProgressBar intégré à l'intérieur de l' ActionBar, comme sur le Chrome App?

Détails: Regardez cette capture d'écran de google Chrome:

Je veux créer une Barre d'Action comme celui-là. Juste en dessous de la Barre d'Action, il y a une Barre qui se remplit en fonction de chargement de la page. J'ai vu cet exemple de nombreuses applications, comme Feedly, mais je n'ai pas été en mesure de créer ma propre mise en œuvre. J'ai essayé d'utiliser Android propre Api pour la créer:

@Override
protected void onCreate(Bundle savedInstanceState) {
    //Request Permission to display the Progress Bar...
    this.requestWindowFeature(Window.FEATURE_PROGRESS);
            this.setWindowContentView(R.layout.activity_main)
    super.onCreate(savedInstanceState);

    this.setProgressBarIndeterminate(true);
}

Mais ce code ne cause que la ProgressBar à afficher sur la Barre d'Action, comme suit:

Alors, comment puis-je faire de ma Barre de progression apparaît sous la Barre d'Action, comme sur le Chrome App?

Answer 1

Je n'étais pas pleinement satisfait de la accepté la réponse ci-dessus, j'ai donc fait quelques recherches complémentaires à moi-même.

Le truc je crois qu'ils ont utilisé est qu'ils ont récupéré la vue de dessus à la vue de la hiérarchie appelés DecorView et ajout de la barre de progression. De cette façon, la barre de progression s'affiche à la fois sur la barre d'action ET la zone de contenu. Notez que le S. D. réponse met la barre de progression dans la zone de contenu et 'vole' espace de contenu réel, ce qui peut conduire à des résultats inattendus.

Exemple de captures d'écran de cette application:

Code

Juste mettre ce code en onCreate méthode de l'activité et cela devrait fonctionner:

// create new ProgressBar and style it
final ProgressBar progressBar = new ProgressBar(this, null, android.R.attr.progressBarStyleHorizontal);
progressBar.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT, 24));
progressBar.setProgress(65);

// retrieve the top view of our application
final FrameLayout decorView = (FrameLayout) getWindow().getDecorView();
decorView.addView(progressBar);

// Here we try to position the ProgressBar to the correct position by looking
// at the position where content area starts. But during creating time, sizes 
// of the components are not set yet, so we have to wait until the components
// has been laid out
// Also note that doing progressBar.setY(136) will not work, because of different
// screen densities and different sizes of actionBar
ViewTreeObserver observer = progressBar.getViewTreeObserver();
observer.addOnGlobalLayoutListener(new OnGlobalLayoutListener() {
    @Override
    public void onGlobalLayout() {
        View contentView = decorView.findViewById(android.R.id.content);
        progressBar.setY(contentView.getY() - 10);

        ViewTreeObserver observer = progressBar.getViewTreeObserver();
        observer.removeGlobalOnLayoutListener(this);
    }
});

Vous pouvez jouer avec LayoutParams hauteur argument pour définir la progressBar plus large ou plus étroit, mais vous pourriez avoir à ajuster l' -10 offset.

Style

Malheureusement, vous pouvez voir le vilain fond gris de la barre de progression. Pour l'enlever, il suffit de chercher pour l'arrière-plan en identifiant et en essayant de cacher ça ne fonctionne pas. Pour supprimer le fond, j'ai dû créer identiques drawble de la version du système et de supprimer l'élément d'arrière-plan.

TL;DR: Créer le fichier progress_horizontal_holo_no_background_light.xml et collez cette drawable:

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

    <item android:id="@android:id/secondaryProgress">
        <scale android:scaleWidth="100%"
               android:drawable="@drawable/progress_secondary_holo_light" />
    </item>

    <item android:id="@android:id/progress">
        <scale android:scaleWidth="100%"
               android:drawable="@drawable/progress_primary_holo_light" />
    </item>

</layer-list>

Copie appropriée .png un drawable d' sdk/platforms/android-xx/data/res/drawable-xxx/ à votre projet, puis dans le code, vous pouvez ajouter:

progressBar.setProgressDrawable(getResources().getDrawable(R.drawable.progress_horizontal_holo_no_background_light));

Extra: Barre De Progression Indéterminée

Pré-KitKat versions indéterminée, les barres de progression sont assez moches, et de lag. Vous pouvez télécharger de nouveaux lisse progressBar appelés ButteryProgressBar. Il suffit de chercher sur google (je ne pouvez pas poster des liens, parce que je suis nouveau ici :[ ), ajouter la classe dans votre projet et vous pouvez simplement remplacer la précédente ProgressBar avec ce code et croustillant barre de progression indéterminée:

final ButteryProgressBar progressBar = new ButteryProgressBar(this);
progressBar.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT, 24));

Vous pourriez aussi avoir besoin de simplifier ce code:

final TypedArray ta = c.obtainStyledAttributes(attrs, R.styleable.ButteryProgressBar);
try {
    mBarColor = ta.getColor(R.styleable.ButteryProgressBar_barColor,
            c.getResources().getColor(android.R.color.holo_blue_light));
    mSolidBarHeight = ta.getDimensionPixelSize(
            R.styleable.ButteryProgressBar_barHeight,
            Math.round(DEFAULT_BAR_HEIGHT_DP * mDensity));
    mSolidBarDetentWidth = ta.getDimensionPixelSize(
            R.styleable.ButteryProgressBar_detentWidth,
            Math.round(DEFAULT_DETENT_WIDTH_DP * mDensity));
} finally {
    ta.recycle();
}

pour ce code:

mBarColor = c.getResources().getColor(android.R.color.holo_blue_light);
mSolidBarHeight = Math.round(DEFAULT_BAR_HEIGHT_DP * mDensity);
mSolidBarDetentWidth = Math.round(DEFAULT_DETENT_WIDTH_DP * mDensity);

Espère que j'ai aidé :)

Answer 2

Étendez les activités de la classe suivante pour avoir une barre de progression en haut (sous la barre de action) de chacune et une méthode getProgressBar() :

Classe parentale:

 public abstract class ProgressActivity extends Activity {
    private ProgressBar mProgressBar;

    @Override
    public void setContentView(View view) {
        init().addView(view);
    }

    @Override
    public void setContentView(int layoutResID) {
        getLayoutInflater().inflate(layoutResID,init(),true);
    }

    @Override
    public void setContentView(View view, ViewGroup.LayoutParams params) {
        init().addView(view,params);
    }

    private ViewGroup init(){
        super.setContentView(R.layout.progress);
        mProgressBar = (ProgressBar) findViewById(R.id.activity_bar);
        return (ViewGroup) findViewById(R.id.activity_frame);
    }

    protected ProgressBar getProgressBar(){
        return mProgressBar;
    }
}
 

Mise en page (progress.xml):

 <?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical"
    android:layout_width="match_parent" android:layout_height="match_parent">
<ProgressBar android:id="@+id/activity_bar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="-8dp"
    style="@android:style/Widget.DeviceDefault.ProgressBar.Horizontal"
    />
  <FrameLayout android:id="@+id/activity_frame"
      android:layout_width="match_parent"
      android:layout_height="fill_parent"
      />
</LinearLayout>
 

Answer 3

J'ai compilé du code à partir de ce fil ainsi que d'autres threads sur StackOverflow et créé un projet qui peut être utilisé pour implémenter ButteryProgessbar ainsi que "dérouler pour actualiser". https://github.com/pauldmps/Gmail-like-Pull-Down-to-Refresh

N'hésitez pas à utiliser le code dans votre application.

Un grand merci à vous les gars.

Answer 4

Veuillez utiliser le code ci-dessous. il suffit d'utiliser un style par défaut dans la barre de progression en tant que style="?android:attr/progressBarStyleHorizontal"

 <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"
    >
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_world" />
    <ProgressBar 
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        style="?android:attr/progressBarStyleHorizontal"
        android:indeterminate="true"

        />

</RelativeLayout>
 

Answer 5

Eh bien , j'ai fait quelque chose de similaire pour l'un de mes animaux apps et ne suis pas sûr si c'est le seul moyen ou la meilleure façon de le faire , mais cela fonctionne bien.

Pour commencer , utiliser une superposition de la barre d'action, puis de définir l'arrière-plan dessiné à "null", de sorte que la superposition de la barre d'action est transparent.

Maintenant à vous de l'activité mise en page , définissez la marge du haut pour votre vue de la racine "actionbar hauteur", Vous pouvez le faire comme ceci.

<RelativeLayout
    ...
    android:layout_marginTop="?android:attr/actionBarSize" />

Or, l'action ne va pas de masquer n'importe quel de votre activité.

La prochaine chose que vous avez à faire maintenant est d'ajouter un en-tête de la vue sur le dessus de votre vue de la racine à la hauteur de même que la barre d'action. Définir une couleur d'arrière-plan. Ce serait maintenant la couleur de votre barre d'action et depuis la barre d'action s'aligne parfaitement sur le dessus pf cette vue d'en-tête.

Maintenant, vous pouvez facilement mettre une barre de progression dans la vue d'en-tête et d'aligner le bas de l'en-tête de la vue. Pour l'utilisateur, ce serait comme si la barre de progression est sur la barre d'action lui-même , tout comme chrome ..