web-dev-qa-db-fra.com

marges de mise en page android avec pourcentage

Je souhaite définir les marges en pourcentage. J'ai 4 vues d'image dans une reproduction linéaire et je souhaite définir les marges gauche, droite, supérieure et inférieure par défaut qui conservent le même pourcentage pour chaque taille d'écran.

c'est possible ?

voici une démo de ce que je veux ...enter image description here

Et voici ce que j'ai essayé et ne fonctionne pas

<LinearLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:orientation="vertical" >

    <LinearLayout
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        Android:layout_weight="1"
        Android:weightSum="10" >

        <Thumbnail
            Android:id="@+id/thumb1"
            Android:layout_width="0dp"
            Android:layout_height="match_parent"
            Android:layout_weight="4" />

        <Thumbnail
            Android:id="@+id/thumb2"
            Android:layout_width="0dp"
            Android:layout_height="match_parent"
            Android:layout_weight="4" />

    </LinearLayout>

    <LinearLayout
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        Android:layout_weight="1"
        Android:weightSum="10" >

         <Thumbnail
             Android:id="@+id/thumb3"
             Android:layout_width="0dp"
             Android:layout_height="match_parent"
             Android:layout_weight="4" >
         </Thumbnail>

        <Thumbnail
            Android:id="@+id/thumb4"
            Android:layout_width="0dp"
            Android:layout_height="match_parent"
            Android:layout_weight="4" />

    </LinearLayout>

</LinearLayout>

Merci de votre aide

androidandroid-linearlayout
24
dracula

Vous pouvez avoir Views invisible dans votre LinearLayouts en tant qu'entretoises et utiliser le mécanisme layout_weight pour leur attribuer une taille relative.

Exemple:

<LinearLayout
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:layout_weight="1">

    <Thumbnail
        Android:id="@+id/thumb1"
        Android:layout_width="0dp"
        Android:layout_height="match_parent"
        Android:layout_weight="4" />

    <View
        Android:layout_width="0dp"
        Android:layout_height="0dp"
        Android:layout_weight="2"
        Android:visibility="invisible"/>

    <Thumbnail
        Android:id="@+id/thumb2"
        Android:layout_width="0dp"
        Android:layout_height="match_parent"
        Android:layout_weight="4" />

</LinearLayout>
24
laalto

Ajouté le 1 août 2017: 

Les deux présentations de cette réponse sont maintenant obsolètes, mais une description est fournie pour savoir comment obtenir la même fonctionnalité avec ConstraintLayout. Merci à dpg pour le signaler.

Si vous envisagez d'utiliser les pourcentages avec des ressources, cette réponse pourrait être utile.

Ancienne réponse:

Il existe maintenant un meilleur moyen de sortir avec la version 23.0.0 de la bibliothèque de support (environ l'heure, non?). Vous pouvez maintenant utiliser PercentFrameLayout ou PercentRelativeLayout . Ils ont tous les deux les attributs suivants:

  • layout_widthPercent
  • layout_heightPercent
  • layout_marginPercent
  • layout_marginLeftPercent
  • layout_marginTopPercent
  • layout_marginRightPercent
  • layout_marginBottomPercent
  • layout_marginStartPercent
  • layout_marginEndPercent

Vous pouvez également consulter PercentLayoutHelper.PercentLayoutParams

19
neits

Vous pouvez définir des marges avec un pourcentage à l'aide de Instructions de ConstraintLayout .

Supposons que vous souhaitiez définir les valeurs de pourcentage suivantes pour votre mise en page:

 Requested percentage values

Ensuite, vous ajoutez simplement les directives suivantes à votre mise en page:

 Layout Editor 

<?xml version="1.0" encoding="utf-8"?>
<Android.support.constraint.ConstraintLayout 
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:app="http://schemas.Android.com/apk/res-auto"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent">

    <ImageView
        Android:id="@+id/imageView1"
        Android:layout_width="0dp"
        Android:layout_height="0dp"
        Android:scaleType="centerCrop"
        app:srcCompat="@drawable/ic_launcher_background"
        app:layout_constraintTop_toTopOf="@+id/horGuideline1"
        app:layout_constraintStart_toStartOf="@+id/verGuideline1"
        app:layout_constraintEnd_toStartOf="@+id/verGuideline2"
        app:layout_constraintBottom_toTopOf="@+id/horGuideline2" />

    <ImageView
        Android:id="@+id/imageView2"
        Android:layout_width="0dp"
        Android:layout_height="0dp"
        Android:scaleType="centerCrop"
        app:srcCompat="@drawable/ic_launcher_background"
        app:layout_constraintTop_toTopOf="@+id/horGuideline1"
        app:layout_constraintStart_toStartOf="@+id/verGuideline3"
        app:layout_constraintEnd_toStartOf="@+id/verGuideline4"
        app:layout_constraintBottom_toTopOf="@+id/horGuideline2" />

    <ImageView
        Android:id="@+id/imageView3"
        Android:layout_width="0dp"
        Android:layout_height="0dp"
        Android:scaleType="centerCrop"
        app:srcCompat="@drawable/ic_launcher_background"
        app:layout_constraintTop_toTopOf="@+id/horGuideline3"
        app:layout_constraintStart_toStartOf="@+id/verGuideline1"
        app:layout_constraintEnd_toStartOf="@+id/verGuideline2"
        app:layout_constraintBottom_toTopOf="@+id/horGuideline4" />

    <ImageView
        Android:id="@+id/imageView4"
        Android:layout_width="0dp"
        Android:layout_height="0dp"
        Android:scaleType="centerCrop"
        app:srcCompat="@drawable/ic_launcher_background"
        app:layout_constraintTop_toTopOf="@+id/horGuideline3"
        app:layout_constraintStart_toStartOf="@+id/verGuideline3"
        app:layout_constraintEnd_toStartOf="@+id/verGuideline4"
        app:layout_constraintBottom_toTopOf="@+id/horGuideline4" />

    <Android.support.constraint.Guideline
        Android:id="@+id/verGuideline1"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:orientation="vertical"
        app:layout_constraintGuide_percent="0.05" />

    <Android.support.constraint.Guideline
        Android:id="@+id/verGuideline2"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:orientation="vertical"
        app:layout_constraintGuide_percent="0.35" />

    <Android.support.constraint.Guideline
        Android:id="@+id/verGuideline3"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:orientation="vertical"
        app:layout_constraintGuide_percent="0.65" />

    <Android.support.constraint.Guideline
        Android:id="@+id/verGuideline4"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:orientation="vertical"
        app:layout_constraintGuide_percent="0.95" />

    <Android.support.constraint.Guideline
        Android:id="@+id/horGuideline1"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.12" />

    <Android.support.constraint.Guideline
        Android:id="@+id/horGuideline2"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.47" />

    <Android.support.constraint.Guideline
        Android:id="@+id/horGuideline3"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.53" />

    <Android.support.constraint.Guideline
        Android:id="@+id/horGuideline4"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.88" />

</Android.support.constraint.ConstraintLayout>

En conséquence, votre mise en page ressemble à ceci:

 Result view

5
Eugene Brusov

En regardant votre image, voici ce que vous pourriez faire, utilisez une disposition relative et insérez la disposition linéaire à l'intérieur. vous pouvez également utiliser weightSum si vous souhaitez que les vues d'image s'adaptent correctement.

<RelativeLayout
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:layout_marginLeft="5dp"
    Android:layout_marginLeft="5dp" >

    <LinearLayout
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_alignParentLeft="true"
        Android:orientation="vertical" >

        <ImageView
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content" />

        <ImageView
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content" />
    </LinearLayout>

    <LinearLayout
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_alignParentRight="true"
        Android:orientation="vertical" >

        <ImageView
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content" />

        <ImageView
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content" />
    </LinearLayout>

</RelativeLayout>
0
deepdroid