Графики макета андроида с процентом

Я хочу установить поля в процентах. У меня есть 4 изображения в линейном режиме и вы хотите установить по умолчанию левые, правые, верхние и нижние поля, которые сохраняют одинаковый процент для каждого размера экрана.

Возможно ли это?

вот демо, что я хочу..

И вот что я пробовал и не работает

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

Спасибо за помощь

Ответы

Ответ 1

Вы можете иметь невидимый View в ваших LinearLayout в качестве разделителей и использовать механизм layout_weight для назначения их относительного размера.

Пример:

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

Ответ 2

Добавлено 1 августа 2017 года:

Два макета из этого ответа теперь устарели, но есть описание, описывающее, как получить те же функции с помощью ConstraintLayout. Благодаря dpg для указания этого.

Если вы планируете использовать проценты с ресурсами, этот ответ может быть полезен.

Старый ответ:

Теперь есть лучший способ, который появился в библиотеке поддержки версии 23.0.0 (о времени, правда?). Теперь вы можете использовать PercentFrameLayout или PercentRelativeLayout. Оба они имеют следующие атрибуты:

layout_widthPercent
layout_heightPercent
layout_marginPercent
layout_marginLeftPercent
layout_marginTopPercent
layout_marginRightPercent
layout_marginBottomPercent
layout_marginStartPercent
layout_marginEndPercent

Вы также можете взглянуть на PercentLayoutHelper.PercentLayoutParams

Ответ 3

Глядя на ваше изображение, вы можете это сделать, использовать относительный макет и поместить в него линейный макет. вы также можете использовать weightSum, если хотите, чтобы изображения выглядели правильно.

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

Ответ 4

Вы можете установить поля с процентом, используя ConstraintLayout Guidelines.

Предположим, вы хотите определить следующие процентные значения для вашего макета:

Затем вы просто добавляете в свой макет следующие рекомендации:

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

В результате ваш макет выглядит примерно так: