Когда я впервые столкнулся с разметкой макетов в Android, со всеми этими FrameLayout, LinearLayout, RelativeLayout. С понятиями веса и гравитации для элементов интерфейса. Я недоумевал, почему нельзя было сделать так, как давно уже делается в html. Где есть возможность указать разметку в процентах? И вот, наконец такая возможность появилась. Появилась она конечно не вчера, но я на нее наткнулся только сейчас, и статей на хабре, с чем это едят не нашел.

image

Итак, что же нужно для того, чтобы пощупать это счастье? Нужно совсем немного, открыть build.gradle своего приложения, добавить туда строку

dependencies {
    compile 'com.android.support:percent:23.4.0'
}

и выполнить синхронизацию.

Всё, все прелести разметки в процентах вам доступны, по крайней мере для minSDK 14 (меньше я не проверял).

Пустой макет у нас будет выглядеть так:

<android.support.percent.PercentRelativeLayout
    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"
    android:theme="@android:style/Theme.Black">

</android.support.percent.PercentRelativeLayout>

Для указания размеров и положения дочерних элементов мы можем использовать следующие атрибуты

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

При этом нужно указывать префикс не android:layout_widthPercent, а app:layout_widthPercent, в соответствии с указанным в заголовке макета пространством имен. Значения этим атрибутам назначаются в процентах, с обязательным указанием знака %.

Собственно назначение почти всех атрибутов интуитивно понятно, ширина, высота и отступы в процентах от родительского макета.

Уточнить стоит пожалуй только layout_aspectRatio. Этот атрибут даёт вам возможность задавать соотношение сторон элемента. Например, вы хотите создать квадратную кнопку, которая занимает 15% от ширины экрана. Вы указываете layout_widthPercent = «15%», если вы укажете layout_heightPercent = «15%» то кнопка у вас получится прямоугольная. Поэтому, нужно layout_heightPercent не указывать, а указать layout_aspectRatio = «100%». В этом случае ширина будет вычисляться по формуле: layout_heightPercent * layout_aspectRatio /100.

Еще может возникнуть вопрос, чем layout_marginStartPercent отличается от layout_marginLeftPercent, и layout_marginEndPercent от layout_marginRightPercent соответственно? Тут все просто, это для обеспечения локализации интерфейса, для тех языков, которые читаются слева на право, Start = Left, а для тех которые справа налево Start = Right.

PercentRelativeLayout является наследником RelativeLayout, поэтому наряду с Percent-атрибутами, вы можете использовать атрибуты RelativeLayout, например можно указать высоту кнопки как android:layout_height=«wrap_content» а ширину app:layout_heightPercent = «25%».

Конечно PercentRelativeLayout не является панацеей, например при переворачивании экрана могут получатся интересные, и не приятные спецэффекты. Поэкспериментируйте сами, а я для себя сделал вывод, что при использовании PercentRelativeLayout, обязательно нужно делать Landscape версию макета.
Поделиться с друзьями
-->

Комментарии (3)


  1. arturdumchev
    20.08.2016 14:25
    +1

    Его удобно с RecyclerView использовать. Например, если нужно, чтобы скролилось горизонтально, а на весь экран помещались 2 квадратные ячейки за раз, просто ставишь для RecyclerView

    app:layout_widthPercent="100%"
    app:layout_aspectRatio="200%"
    

    И для CardView:
    app:layout_aspectRatio="100%"
    app:layout_heightPercent="100%"
    


  1. skatset
    20.08.2016 18:17
    +5

    Если вам так понравился PercentRelativeLayout, то попробуйте новый ConstraintLayout. Чтобы его использовать нужно установить Android Studio 2.2 Preview и сделать импорт библиотеки 'com.android.support.constraint:constraint-layout:1.0.0-alpha5'.

    Данный ConstraintLayout позволяет более гибко работать с процентным положением, а также содержит множество дополнительных возможностей (относительная привязка к другим элементам, автопривязка и т.д.). Почитать по этому поводу можно здесь и здесь и посмотреть официальное видео с конференции Google IO 2016


    1. sys_int64
      21.08.2016 19:46

      Уау, это просто фантастика!