Изображение Android с правильным соотношением сторон и границей

Я хочу иметь фиксированный размер окна 120×180 dp, который содержит изображение с правильным соотношением сторон и границей, нарисованной вокруг него.

XML:

<android.support.constraint.ConstraintLayout android:layout_width="120dp" android:layout_height="180dp" app:layout_gravity="center"> <ImageView android:id="@+id/picture" android:layout_width="0dp" android:layout_height="0dp" android:background="@drawable/game_border" app:srcCompat="@drawable/pic_lion" android:scaleType="centerInside" /> 

Раскладка Game_border:

 <layer-list xmlns:android="http://schemas.android.com/apk/res/android" > <item> <shape android:shape="rectangle" > <solid android:color="#55111111" /> <padding android:bottom="4dp" android:left="4dp" android:right="4dp" android:top="4dp" /> <corners android:radius="6dp" /> </shape> </item> </layer-list> 

Эта настройка scaleType работает отлично, потому что она заполняет полную внутреннюю часть плитки, а фон не переоценивается. Но чтобы продемонстрировать неправильное соотношение сторон, я увеличил максимальный запас. См. Рисунок ниже. Я попробовал оставшиеся значения, но они либо красят границу, либо не заполняют полную внутреннюю часть.

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

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

FitXY деформирует изображение:

Плохой аспект

Изображение, нарисованное вручную, когда я обрезал изображение, сохраняя соотношение сторон. Извините, это выглядит уродливо, но щедрость заканчивается очень скоро.

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

Ответ Бьорна:

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

Ответ Рахула не имеет нижней границы

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

Используйте простой Framelayout для фона и используйте centerCrop для ImageView:

 <FrameLayout android:layout_width="120dp" android:layout_height="180dp" android:background="@drawable/background_with_rounded_corners" android:padding="4dp"> <ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:scaleType="centerCrop"/> </FrameLayout> 

И переместите прокладку в FrameLayout, поэтому для вашего файла фонового ресурса вам нужны только цвета и углы:

 <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item> <shape android:shape="rectangle"> <solid android:color="#55111111" /> <corners android:radius="6dp" /> </shape> </item> </layer-list> 
 <ImageView android:id="@id/img" android:layout_width="match_parent" android:layout_height="match_parent" android:adjustViewBounds="true" android:scaleType="fitCenter" /> 

ScaleType = "fitCenter" (по умолчанию при пропуске)

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

    scaleType = "centerInside"

  • Если внутренняя ширина src меньше, чем ширина родителя, будет центрировать изображение горизонтально

  • F внутренняя ширина src больше, чем ширина родительской, сделает ее такой же широкой, как родительская, и уменьшает пропорции.

Не имеет значения, используете ли вы android:src или ImageView.setImage* .key – android: adjustViewBounds

Или, используя CardView, вы также можете создавать закругленные углы для ImageView.

  <android.support.v7.widget.CardView android:layout_width="120dp" android:layout_height="180dp" android:layout_gravity="center" android:layout_marginLeft="6dp" android:layout_marginRight="6dp" android:layout_marginTop="6dp" app:cardCornerRadius="@dimen/_5dp" app:cardBackgroundColor="#D3D3D3" app:cardPreventCornerOverlap="false" card_view:cardPreventCornerOverlap="false"> <ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:layout_margin="3dp" android:background="@drawable/image" android:scaleType="fitXY" /> </android.support.v7.widget.CardView> 

Скругленный угол ImageView может быть немного болезненной задачей. Вы можете использовать библиотеку, которая поддерживает как закругленные углы, так и границы. Например

https://github.com/vinc3m1/RoundedImageView

Если вы понимаете, что он делает, вы можете легко создать свой собственный ImageView. Хитрость заключается в переопределении метода onDraw ImageView и клипа с использованием путей. Вы можете найти статьи, связанные с этой темой.

Вы можете использовать два отдельных ImageViews: один для фрейма и еще один для изображения. Таким образом вы можете использовать ScaleType «centerCrop» на изображении ImageView, и итоговое изображение всегда будет в желаемом соотношении сторон с рамкой вокруг него.

Просто убедитесь, что ограничения для обоих ImageViews установлены так, чтобы оба ImageViews охватывали родителя.

Код:

 <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="120dp" android:layout_height="180dp"> <ImageView android:layout_width="0dp" android:layout_height="0dp" app:srcCompat="@drawable/game_border" android:id="@+id/frame" app:layout_constraintTop_toTopOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintBottom_toBottomOf="parent"/> <ImageView android:layout_width="0dp" android:layout_height="0dp" app:srcCompat="@drawable/lion" android:id="@+id/picture" android:scaleType="centerCrop" app:layout_constraintTop_toTopOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintBottom_toBottomOf="parent" android:layout_marginTop="4dp" android:layout_marginStart="4dp" android:layout_marginLeft="4dp" android:layout_marginEnd="4dp" android:layout_marginRight="4dp" android:layout_marginBottom="4dp" /> 

Результат: Picture_with_border

Поскольку вы уже используете ConstraintLayout , есть это удобное приложение- атрибут : layout_constraintDimensionRatio, который позволяет вам указать размеры формата. Вот код макета для рисунка ниже.

 <?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/picture" android:layout_width="120dp" android:layout_height="0dp" android:background="@drawable/game_border" android:scaleType="centerInside" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintDimensionRatio="h, 2:3" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" app:srcCompat="@drawable/vertical_deploy" /> </android.support.constraint.ConstraintLayout> 

пример

Попробуй это:

 <LinearLayout android:layout_width="120dp" android:layout_height="180dp" android:background="@drawable/game_border"> <ImageView android:id="@+id/picture" android:layout_width="match_parent" android:layout_height="match_parent" app:srcCompat="@drawable/pic_lion" android:scaleType="centerCrop" /> </LinearLayout> 

Надежда поможет вам!