Отображайте изображения в точности так, как они были задуманы
Этот пост касается важного и полезного атрибута ConstraintLayout, известного как constraintDimensionRatio. Прежде чем исследовать это, мы должны узнать о соотношении сторон и ConstraintLayout.
Соотношение сторон - это термин, используемый для описания размеров представления путем сравнения ширины с высотой и выражения их в форме соотношения. Соотношение сторон измеряется в соответствии с шириной: высотой. Если соотношение сторон 4: 3, ширина должна быть 4, а высота должна быть 3. Это соотношение устанавливает изображение соответственно.
В разработке Android до ConstraintLayout мы использовали формулу соотношения сторон, фиксируя либо ширину, либо высоту, чтобы получить идеальный вид изображения. После введения ConstraintLayout многие вещи стали легко работать в XML.
Чтобы узнать больше о ConstraintLayout, прочтите Основные компоненты ConstraintLayout. Соотношение сторон - это одна из особенностей ConstraintLayout, которая помогает немного сократить накладные расходы, связанные с программной настройкой соотношения сторон.
Давайте лучше разберемся на примере
При использовании атрибута constraintDimensionRatio нам нужно иметь хотя бы одно ограниченное измерение, равное 0dp (например, MATCH_CONSTRAINT), и нам нужно установить атрибут layout_constraintDimensionRatio в требуемое соотношение. Например, посмотрите следующий фрагмент:
<Button
android:layout_width="wrap_content"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="1:1"/>
В приведенном выше XML-коде высота кнопки будет равна ширине.
Отношение может быть выражено одним из этих двух способов:
- значение с плавающей запятой, представляющее соотношение ширины и высоты.
- Соотношение в форме «ширина: высота»
Мы также можем использовать соотношение, если оба измерения установлены на 0dp. В этом случае система устанавливает самые большие размеры, которые удовлетворяют всем упомянутым ограничениям, сохраняя при этом заданное соотношение сторон.
Давайте возьмем ImageView и применим атрибут constraintDimensionRatio со значением 16: 9 и посмотрим, как это выглядит.
Это установит высоту ImageView в соответствии с соотношением 16: 9, а ширина ImageView будет соответствовать ограничениям родителя. Изображение будет выглядеть следующим образом:
И если мы изменим соотношение на ImageView, то оно будет выглядеть иначе.
Добавление отношения с помощью «W» или «H»
Соотношение также может применяться, когда оба измерения настроены в соответствии с ограничением, как показано выше.
Чтобы ограничить одну конкретную сторону на основе размеров другой, мы можем добавить W или H, чтобы ограничить ширину или высоту, соответственно.
Например, если одно измерение ограничено двумя целями (например, ширина равна 0dp и центрирована по родительскому элементу), вы можете указать, какая сторона должна быть ограничена, добавив букву W (для ограничения ширины) или H (для ограничения высоты ) перед соотношением через запятую.
<ImageView
android:layout_width="0dp"
android:layout_height="0dp"
android:id="@+id/imageView"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintDimensionRatio="W,1:3" />
В приведенном выше примере высота будет определяться с учетом примененных к ней ограничений.
В этом случае ограничения были настроены таким образом, что он был прикреплен к верхней и нижней части родительского представления, по существу, расширяя виджет, чтобы заполнить всю высоту родительского представления.
С другой стороны, ширина была ограничена одной третью высоты ImageView.
Следовательно, независимо от размера экрана или ориентации макета, ImageView всегда будет той же высоты, что и родительский, а ширина будет составлять одну треть этой высоты.
Установка разных соотношений для разных экранов
Поскольку Android имеет переменные размеры экрана, у нас есть возможность настраивать разные соотношения для разных экранов в зависимости от требований. Мы можем определить строки отношения в разных файлах размеров и получить к ним доступ в XML, чтобы получить доступ к измерению, зависящему от экрана.
Например:
res / values / sizes.xml
<string name="section_image_ratio">16:9</string>
res / values-large / sizes.xml
<string name="section_image_ratio">12:8</string>
Чтобы соотношение сторон изображения менялось в зависимости от размеров устройства, нам просто нужно обратиться к section_image_ratio из ресурсов.
app:layout_constraintDimensionRatio="@string/section_image_ratio"
Заключение
На этом пока все. Надеюсь, вам понравилась эта статья.
Спасибо за прочтение!
