0

Добрый день. Есть размета

<ImageView
    android:id="@+id/imageView4"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    myapp:srcCompat="@mipmap/ic_launcher"
    android:layout_weight="9" />

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_gravity="center_horizontal"
    android:layout_weight="1"
    android:orientation="horizontal">

    <Button
        android:id="@+id/button"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="OK" />

    <Button
        android:id="@+id/button2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="Отмена" />
</LinearLayout>

На этой разметке используется layout_weight для разделения экрана в отношении 90% (картинка) и 10% (панель с кнопками). Я использую layout_weight, как подобие процентных величин в css

Как сделать так, чтобы под панель с кнопками все так же выделялось 10% от высоты экрана, но при этом чтобы ImageView не присутствовал на макете (если его убрать из разметки выше, то панель с кнопками займет весь экран)? введите сюда описание изображения

Зачем мне это нужно: Я хочу сверстать вот такой вот элемент для своего списка введите сюда описание изображения

Мне кажется, что это дело делается так: картинка растягивается по ширине и высоте экрана (не забываем, что верстаем только ЭЛЕМЕНТ из списка), снизу добавляется FrameLayout, в котором в качестве параметра background задается прозрачная картинка. А потом на FrameLayout помещается TextView

введите сюда описание изображения

Я не хочу задавать высоту FrameLayout в конкретных числах, потому что как мне кажется, это повлияет на внешний вид приложения на маленьком экране. А способ, который я использовал в самом начале не подходит, т.к. картинка отображается и под FrameLayout. Как мне задать в процентах высоту FrameLayout, когда над ним нет элемента? И что вы вообще думаете о таком подходе? Я дизайне и создании макетов новичок, так что буду рад услышать ваши замечания и советы.

Заранее спасибо!

2
  • Ваша задача сверстать разметку для элемента списка, аналогичную скриншоту с суши?
    – pavlofff
    Commented 23 мар. 2017 в 10:26
  • Да, именно! Я никогда еще не занимался разметкой без мануалов, поэтому и решил посоветоваться с ru-OS как лучше сделать.
    – RareScrap
    Commented 24 мар. 2017 в 0:50

3 ответа 3

2

Предлагаю слишком не мудрить и использовать такую разметку:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="4dp">


    <ImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:scaleType="centerCrop"
        android:src="@drawable/sushi" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:background="@color/backgraundAlpha"
        android:paddingBottom="20dp"
        android:paddingLeft="8dp"
        android:paddingRight="8dp"
        android:paddingTop="20dp"
        android:text="Loren Ipsum" />
</RelativeLayout>

файл res/values/colors.xml:

<resources>

    <color name="backgraundAlpha">#50000000</color>
</resources>

ImageView занимает всю доступную ширину и необходимое место по высоте с заполнением CenterCrop и определяет собой размер родительского контейнера (его высота wrap_content).
TextView привязывается нижним краем к нижнему краю контейнера и имеет полупрозрачный бэкграунд и паддинги для увеличения высоты. Они будут не именно 10%, но всегда гармонично смотрется с текстом. Конкретное значение (у меня 20dp) вы можете подобрать сами.

Вместо TextView можно использовать горизонтальный LinearLayout, например, если требуется в нижней части раположить несколько элементов

Вот что получается в итоге:

введите сюда описание изображения

2
  • Спасибо вам большое за развернутый ответ. Пока возьму ваш пример и попробую определить, подходит ли он под мои нужды.
    – RareScrap
    Commented 24 мар. 2017 в 1:51
  • Да, ваш подход идеально подошел. Спасибо.
    – RareScrap
    Commented 22 июл. 2017 в 1:46
1

Для относительной вёрстки в процентах отлично подходит библиотека Android support percent от Google. Пример работы с ней можно найти на habrahabr.ru

6
  • Просто факт того, что подобный функционал вынесен в отдельную библиотеку заставляет меня думать, что существуют более предпочтительные способы верстки, чем при помощи процентов. Такое чувство, что эта библиотека выпущена специально для таких как я которые не осилили другие приемы верстки.
    – RareScrap
    Commented 23 мар. 2017 в 9:52
  • 1
    @RareScrap проследив логику создания их библиотек, можно понять, что создаются они, чаще всего, в тех случаях, когда конкретный функционал упрощает разработку, но нужен далеко не каждому. Обычное модулирование решений. Если вас смущает Android support percent, как вариант можно посмотреть в сторону ConstraintLayout.
    – zTrap
    Commented 23 мар. 2017 в 9:57
  • 1
    ... который тоже внешняя библиотека поддержки :)
    – pavlofff
    Commented 23 мар. 2017 в 10:05
  • Окей, понял. Но что вы двое думаете о том, как лучше решить такую задачу? Использовать Android support percent, ConstraintLayout или возиться с layout_weight?
    – RareScrap
    Commented 23 мар. 2017 в 10:07
  • 1
    @RareScrap библиотеки поддержки разрабатываются не для неудачников верстки или программирования, а из желания разработчиков платформы предоставить удобные инструменты для уже выпущенных API, а не только в последнее. То есть, например ConstraintLayout появился в этом году и разработчики могли просто включить его а текущее API 24 и использовать этот замечательный инструмент вы могли бы только в приложениях с минимальной версией Android 6.0, вместо этого они сделали библиотеку поддержки и теперь вы используете этот контейнер для приложений от Android 4.0
    – pavlofff
    Commented 23 мар. 2017 в 10:14
1

Я конечно извиняюсь за такой варварский подход но почему бы просто не заменить ImageView на space чтобы не заморачиваться с сторонними библиотеками и не сталкиваться с вытекающими из них проблемами. space легковесный элемент разметки предназначенный для заполнения пустого пространства в случаях вроде вашего.

< android.support.v4.widget.Space

android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="9" />
1
  • Я тоже думал не заморачиваться и использовать элемент-заполнитель, но не знал что такой элемент уже есть. Спасибо, теперь буду знать про Space
    – RareScrap
    Commented 26 мар. 2017 в 0:46

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.