Comment faire pour centrer les éléments dans ConstraintLayout
Je suis en utilisant ConstraintLayout
dans mon application pour faire des applications de mise en page. Je suis en train de créer un écran de wheren'un EditText
et Button
devrait être dans le centre et Button
devrait être en dessous de EditText
avec un marginTop seulement 16dp.
Voici ma mise en page et de la capture d'écran de la façon dont il est à la recherche dès maintenant.
activity_authenticate_content.xml
<android.support.constraint.ConstraintLayout 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:paddingLeft="16dp"
android:paddingRight="16dp"
tools:context="com.icici.iciciappathon.login.AuthenticationActivity">
<android.support.design.widget.TextInputLayout
android:id="@+id/client_id_input_layout"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent">
<android.support.design.widget.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/login_client_id"
android:inputType="textEmailAddress" />
</android.support.design.widget.TextInputLayout>
<android.support.v7.widget.AppCompatButton
android:id="@+id/authenticate"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:text="@string/login_auth"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="@id/client_id_input_layout"
app:layout_constraintRight_toRightOf="@id/client_id_input_layout"
app:layout_constraintTop_toTopOf="@id/client_id_input_layout" />
</android.support.constraint.ConstraintLayout>
Vous devez vous connecter pour publier un commentaire.
Mise à jour:
De la chaîne d'
Vous pouvez maintenant utiliser le
chain
fonctionnalité danspacked
mode comme décrit dans Eugène de réponse.Directive
Vous pouvez utiliser l'horizontale de la ligne directrice à 50% de la position et de l'ajouter en haut et en bas (8dp) les contraintes à l'edittext et bouton:
<android.support.constraint.Guideline
? Devons-nous utiliser à chaque fois que lorsque nous utilisonsConstraintLayout
?layout_constraintGuide_percent
?Guideline
est juste un invisible élément sur lequel vous pouvez ancrer votre point de vue.layout_constraintGuide_percent
est le pourcentage dans le parent. Ici, de 0,5 à 50 % de la hauteurTextInputEditText
et unButton
. Je veux les placer dans un centre de l'écran. Mais comme de maintenant, il n'est pas pastebin.com/iXYtuXHg voici la capture d'écran dropbox.com/s/k7997q2buvw76cp/q.png?dl=0LinearLayout
et centre.Il y a un moyen plus simple. Si vous définissez des contraintes de mise en forme comme suit et votre EditText est de taille fixe, il sera centré dans la contrainte de mise en page:
La paire gauche/droite des centres de la vue horizontalement et haut/bas de la paire de centres verticalement. C'est parce que lorsque vous réglez la gauche, à droite ou en haut,en bas des contraintes plus grand que la vue elle-même, la vue est centré entre les deux contraintes je.e la polarisation est fixé à 50%. Vous pouvez également déplacer la vue vers le haut/bas ou droite/gauche en définissant le biais de votre auto. Jouer avec elle un peu et vous verrez comment il affecte le point de vue de la position.
app:layout_constraintCenter_in="parent"
serait beaucoup mieux. Mais comme toujours, Google n'a pas les fournir.La solution avec la directive ne fonctionne que pour ce cas particulier, avec une seule ligne de EditText. Pour le faire fonctionner pour multiligne EditText vous devez utiliser des "paniers" de la chaîne.
Voici à quoi il ressemble:
Vous pouvez en savoir plus sur l'utilisation de chaînes dans les postes suivants:
Vous pouvez centrer une vue comme un pourcentage de la taille de l'écran.
Cet exemple utilise 50% de la largeur et de la hauteur:
Cela a été fait à l'aide de ConstraintLayout la version 1.1.3. N'oubliez pas de l'ajouter à vos dépendances, dans la gradle, et augmentation de la version si il y a une nouvelle version là:
vous pouvez utiliser layout_constraintCircle pour le centre de la vue à l'intérieur de ConstraintLayout.
avec constraintCircle de parent et rayon de braquage nul, vous pouvez faire de votre point de vue, le centre de parent.