web-dev-qa-db-fra.com

Comment superposer une vue dans une disposition de contraintes?

J'ai cette disposition de mon activité de connexion. Je veux superposer progressBar comme cela peut être fait en utilisant FrameLayout. Comment faire cela en utilisant ConstraintLayout?

<layout>

    <data>

        <variable
            name="vm"
            type="com.app.Android.login.vm" />
    </data>

    <ScrollView xmlns:Android="http://schemas.Android.com/apk/res/Android"
        xmlns:app="http://schemas.Android.com/apk/res-auto"
        xmlns:tools="http://schemas.Android.com/tools"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        Android:fillViewport="true"
        tools:context="com.app.Android.login.LoginActivity"
        tools:ignore="missingPrefix">

        <Android.support.constraint.ConstraintLayout
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            Android:paddingBottom="@dimen/default_view_margin_bottom_8dp">

            <Android.support.design.widget.TextInputLayout
                Android:id="@+id/til_login_email"
                Android:layout_width="match_parent"
                Android:layout_height="wrap_content"
                Android:layout_marginEnd="@dimen/default_view_margin_right_8dp"
                Android:layout_marginStart="@dimen/default_view_margin_left_8dp"
                Android:textColorHint="@color/colorSecondaryText"
                app:hintTextAppearance="@style/AppTheme.InputLayoutStyle"
                app:layout_constraintBottom_toTopOf="@+id/til_login_password"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintVertical_chainStyle="packed">

                <Android.support.design.widget.TextInputEditText
                    Android:layout_width="match_parent"
                    Android:layout_height="wrap_content"
                    Android:hint="@string/login_email"
                    Android:imeOptions="actionNext"
                    Android:singleLine="true"
                    Android:text="@={vm.emailField}"
                    Android:textColor="@color/colorPrimaryText" />
            </Android.support.design.widget.TextInputLayout>

            <Android.support.design.widget.TextInputLayout
                Android:id="@+id/til_login_password"
                Android:layout_width="match_parent"
                Android:layout_height="wrap_content"
                Android:layout_marginEnd="@dimen/default_view_margin_right_8dp"
                Android:layout_marginStart="@dimen/default_view_margin_left_8dp"
                Android:textColorHint="@color/colorSecondaryText"
                app:hintTextAppearance="@style/AppTheme.InputLayoutStyle"
                app:layout_constraintBottom_toTopOf="@+id/btn_login_login"
                app:layout_constraintTop_toBottomOf="@+id/til_login_email"
                app:layout_constraintVertical_chainStyle="packed">

                <Android.support.design.widget.TextInputEditText
                    Android:layout_width="match_parent"
                    Android:layout_height="wrap_content"
                    Android:hint="@string/login_password"
                    Android:imeOptions="actionDone"
                    Android:inputType="textPassword"
                    Android:singleLine="true"
                    Android:text="@={vm.passwordField}"
                    Android:textColor="@color/colorPrimaryText" />
            </Android.support.design.widget.TextInputLayout>

            <Button
                Android:id="@+id/btn_login_login"
                Android:layout_width="match_parent"
                Android:layout_height="wrap_content"
                Android:layout_marginEnd="@dimen/default_view_margin_right_8dp"
                Android:layout_marginStart="@dimen/default_view_margin_left_8dp"
                Android:layout_marginTop="48dp"
                Android:onClick="@{vm::login}"
                Android:text="@string/login_btn_text"
                Android:textColor="@color/colorWhite"
                app:layout_constraintBottom_toTopOf="@+id/textview_login_forgot_password"
                app:layout_constraintTop_toBottomOf="@+id/til_login_password"
                app:layout_constraintVertical_chainStyle="packed" />

            <TextView
                Android:id="@+id/textview_login_forgot_password"
                Android:layout_width="match_parent"
                Android:layout_height="wrap_content"
                Android:layout_marginEnd="@dimen/default_view_margin_right_8dp"
                Android:layout_marginStart="@dimen/default_view_margin_left_8dp"
                Android:layout_marginTop="36dp"
                Android:gravity="center"
                Android:text="@string/login_forgot_password"
                app:layout_constraintBottom_toTopOf="@+id/btn_login_register"
                app:layout_constraintTop_toBottomOf="@+id/btn_login_login"
                app:layout_constraintVertical_chainStyle="packed" />

            <Button
                Android:id="@+id/btn_login_register"
                Android:layout_width="match_parent"
                Android:layout_height="wrap_content"
                Android:layout_marginEnd="@dimen/default_view_margin_right_8dp"
                Android:layout_marginStart="@dimen/default_view_margin_left_8dp"
                Android:text="@string/login_sign_up"
                Android:textColor="@color/colorWhite"
                app:layout_constraintBottom_toBottomOf="parent" />

            <ProgressBar
                Android:id="@+id/progressBar"
                Android:layout_width="wrap_content"
                Android:layout_height="wrap_content"
                Android:visibility="@{vm.progressVisibility}"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

        </Android.support.constraint.ConstraintLayout>
    </ScrollView>
</layout>

Cela ressemble à ceci:

enter image description here

Je recherche une solution qui devrait fonctionner pour le niveau API 19+. Je ne veux pas ajouter plus de hiérarchie dans ma mise en page en enveloppant Button ou ProgressBar à l'intérieur de ViewGroup ou ainsi.

androidandroid-constraintlayout
19
Ajay S

Il existe deux options, dans chaque cas, vous ajoutez un attribut à votre <ProgressBar/> tag. C'est soit

Android:translationZ="2dp"

ou

Android:elevation="2dp"

Le niveau d'API doit être> = 21.

20
kalabalik

Si vous souhaitez superposer à 100% la vue cible, contraignez tous les côtés de la vue superposée aux côtés correspondants de la vue cible et définissez la hauteur et la largeur de la vue superposée sur 0dp comme suit:

    <View
        Android:layout_width="0dp"
        Android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="@id/animation_view"
        app:layout_constraintLeft_toLeftOf="@id/animation_view"
        app:layout_constraintRight_toRightOf="@id/animation_view"
        app:layout_constraintTop_toTopOf="@id/animation_view"/>

Voici un exemple de travail. Dans l'image suivante, un canevas rouge est placé sur une image. Le XML suit l'image.

enter image description here

<Android.support.constraint.ConstraintLayout 
    Android:layout_width="match_parent"
    Android:layout_height="match_parent">

    <ImageView
        Android:id="@+id/animation_view"
        Android:layout_width="250dp"
        Android:layout_height="250dp"
        Android:src="@mipmap/ic_launcher"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <View
        Android:layout_width="0dp"
        Android:layout_height="0dp"
        Android:background="#AAFF0000"
        app:layout_constraintBottom_toBottomOf="@id/animation_view"
        app:layout_constraintLeft_toLeftOf="@id/animation_view"
        app:layout_constraintRight_toRightOf="@id/animation_view"
        app:layout_constraintTop_toTopOf="@id/animation_view" />
</Android.support.constraint.ConstraintLayout>

Voir documentation pour ConstraintLayout pour plus d'informations.

12
Cheticamp

Voici votre solution API 19. Il place un CircularProgressDrawable dans une superposition au-dessus de votre ConstraintLayout.

Voici à quoi ça ressemble:

enter image description here

Ce que vous devez faire, c'est:

  1. Débarrassez-vous du XML ProgressBar.

  2. Donnez à votre XML ConstraintLayout un identifiant, par exemple:

    Android:id="@+id/cl"

  3. Ajoutez ce code à votre activité principale:

    public class MainActivity extends AppCompatActivity implements View.OnClickListener {
    boolean toggle;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        final ConstraintLayout cl = findViewById(R.id.cl);
        cl.setOnClickListener(this);
    }

    @Override
    public void onClick(final View view) {
        toggle ^= true;
        if (toggle) {
            startProgress();
        } else {
            stopProgress();
        }
    }

    void startProgress() {
        final ConstraintLayout cl = findViewById(R.id.cl);
        final CircularProgressDrawable progressDrawable = new CircularProgressDrawable(this);
        progressDrawable.setColorSchemeColors(Color.Magenta);
        progressDrawable.setCenterRadius(50f);
        progressDrawable.setStrokeWidth(12f);
        progressDrawable.setStrokeCap(Paint.Cap.BUTT);
        cl.post(new Runnable() {
            @Override
            public void run() {
                progressDrawable.setBounds(0, 0, cl.getWidth(), cl.getHeight());
                cl.getOverlay().add(progressDrawable);
            }
        });
        progressDrawable.start();
    }

    void stopProgress() {
        final ConstraintLayout cl = findViewById(R.id.cl);
        final CircularProgressDrawable progressDrawable = new CircularProgressDrawable(this);
        progressDrawable.setColorSchemeColors(Color.Magenta);
        progressDrawable.setCenterRadius(50f);
        progressDrawable.setStrokeWidth(12f);
        progressDrawable.setStrokeCap(Paint.Cap.BUTT);
        cl.post(new Runnable() {
            @Override
            public void run() {
                cl.getOverlay().clear();
            }
        });
        progressDrawable.stop();
    }
}
2
kalabalik

Définissez une élévation sur le ProgressBar 2dp semble fonctionner.

Android:elevation="2dp"

Vous pouvez également essayer de définir translationZ comme suggéré dans réponse à question similaire . Pour moi, cela fonctionne sur un émulateur exécutant l'API 17 et la barre de progression est apparue en haut comme prévu. Si vous recevez un avertissement, vérifiez votre version de build

2
Dipali s.

Dans mes observations Android "empile" les vues le long de l'axe z dans l'ordre dans lequel elles apparaissent dans le fichier xml en ce que la vue à la fin du fichier sera en haut du z -axis et la vue au début du fichier sera en bas. Bien sûr, une fois que vous commencez à définir l'élévation et zTranslation etc. l'ordre de la pile de l'axe z sera affecté ...

donc déplacer la déclaration progressBar à la fin de ConstraintLayout devrait la faire apparaître au-dessus des autres vues, cela a fonctionné pour moi.

1
ProjectDelta

Un autre moyen simple de résoudre ce problème consiste à remplacer Button par View, à modifier l'arrière-plan et la taille. Superposez-le avec TextView pour remplacer l'ancien texte Button et un autre View pour cliquer plus tard

1
Septian Triadi

Je veux vous proposer une alternative à la solution XML.
Vous pouvez également ajouter une vue par programme à votre vue racine. (ConstraintLayout)

ViewGroupOverlay est une couche supplémentaire qui se trouve au-dessus d'un ViewGroup (la "vue hôte") qui est dessinée après tout autre contenu de cette vue (y compris les enfants du groupe de vues). L'interaction avec la couche de superposition se fait en ajoutant et en supprimant des vues et des dessins.

<Android.support.constraint.ConstraintLayout
            Android:id="@+id/root_layout"
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            Android:paddingBottom="@dimen/default_view_margin_bottom_8dp">

Si vous référencez la racine dans votre code, vous pouvez ensuite ajouter votre ProgressBar.
Quelque chose comme ça:

rootLayout.overlay.add(ProgressBar(context).apply {
    measure(View.MeasureSpec.makeMeasureSpec(100, View.MeasureSpec.EXACTLY), View.MeasureSpec.makeMeasureSpec(100, View.MeasureSpec.EXACTLY))
    layout(0, 0, 100, 100)
})

Vous pouvez également consulter ce lien pour plus d'informations.
Et cette DONC question peut aussi aider.

1
tim

Vous pouvez essayer l'une de ces options: 1. Ajoutez une disposition relative en dehors de votre disposition comme ici

 <RelativeLayout
   Android:id="@+id/relativelayout_progress"
   Android:layout_width="match_parent"
   Android:layout_height="match_parent"
   Android:visibility="gone"
   Android:background="#aa000022" >

   <ProgressBar 
       Android:layout_centerInParent="true"
       Android:layout_width="wrap_content"
       Android:layout_height="wrap_content"
       Android:indeterminateOnly="true" />

</RelativeLayout>
  1. Ajoutez une superposition de vue dans onCreate de votre activité comme décrit ici superpositions de vue de l'interface utilisateur Android 4.
1
fhery021

Vous pouvez atteindre votre objectif en définissant la traduction Z pour la vue.

Mettez cette méthode dans une classe d'assistance (par exemple: UIUtils) et utilisez-la pour votre vue:

/**
 * Set the 'Z' translation for a view
 *
 * @param view         {@link View} to set 'Z' translation for
 * @param translationZ 'Z' translation as float
 */
public static void setTranslationZ(View view, float translationZ) {
    ViewCompat.setTranslationZ(view, translationZ);
}

TILISATION:

UIUTils.setTranslationZ(YOUR_VIEW, 5);
0
blueware