Android - установка рамки вокруг ImageView

У меня есть ячейка с фиксированной шириной и высотой, пусть она будет 100x100px. Внутри этой ячейки я хочу отобразить ImageView с рамкой.
Моя первая идея заключалась в том, чтобы поместить фоновый ресурс в ImageView и добавить дополнение 1dp для создания эффекта границы:

<LinearLayout
        android:layout_width="100dp"
        android:layout_height="100dp" >

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/image_border"
        android:padding="1dp"
        android:src="@drawable/test_image" />

</LinearLayout>

По-видимому, это должно работать, но это не так или, по крайней мере, не так, как ожидалось.
Проблема в том, что фон ImageView заполняет все пространство ячейки 100x100px, поэтому, если ширина изображения меньше 100 пикселей, верхняя и нижняя границы будут больше.

Обратите внимание на желтую рамку, мне нужно, чтобы она была ровно 1 пиксель вокруг ImageView:

Любая помощь, идея, предложение любого рода очень ценится.

Ответ 1

Если вы положите padding = 1 и цвет фона в LinearLayout, у вас будет желтая рамка 1px.

Ответ 2

Вот что сработало для меня...

<!-- @drawable/image_border -->
<shape xmlns:android="http://schemas.android.com/apk/res/android">
  <solid android:color="@color/colorPrimary"/>
  <stroke android:width="1dp" android:color="#000000"/>
  <padding android:left="1dp" android:top="1dp" android:right="1dp" android:bottom="1dp"/>
</shape>

<ImageView
  android:layout_width="300dp"
  android:layout_height="300dp"
  android:layout_gravity="center"
  android:padding="1dp"
  android:cropToPadding="true"
  android:scaleType="centerCrop"
  android:background="@drawable/image_border"/>

Здесь это результат, который я получаю с помощью viewpager и imageview с рамкой.

Ответ 3

Если изображения имеют переменный размер, вы всегда получите этот эффект. Думаю, вам нужно установить фиксированный размер для ImageView и дать ему заданный цвет фона - от внешнего вида вашего примера черный будет иметь смысл. Оберните изображение в FrameLayout или просто изображение с желтым фоном и отступом 1px.

ИЗМЕНИТЬ

Я подумал об этом, и мой ответ не чувствовал себя так...

Если вы установите каждый ImageView с фиксированным размером, отступом и запасом. а затем установите цвет фона по мере необходимости, вы можете получить необходимый эффект.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="fill_parent" >


        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:background="#52D017"
            android:padding="1dp"
            android:layout_margin="5dp"
            android:src="@drawable/test1"
            tools:ignore="ContentDescription" />

        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_margin="5dp"
            android:background="#52D017"
            android:padding="1dp"
            android:src="@drawable/test2"
            tools:ignore="ContentDescription" />

</LinearLayout>

На скриншоте оба отображаемых изображения имеют ширину менее 100 пикселей и разные высоты.

Это не обрабатывает изображения с прозрачным фоном, а затем (в этом случае) проходит желтый зеленый цвет. Вы можете решить эту проблему, обернув каждый ImageView в FrameLayout. Создание черного фона ImageView и установка FrameLayout на WrapContent с требуемым заполнением (я думаю)

Ответ 4

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

public class FreeCollage extends ImageView {

    private static final int PADDING = 8;
    private static final float STROKE_WIDTH = 5.0f;

    private Paint mBorderPaint;

    public FreeCollage(Context context) {
        this(context, null);
    }

    public FreeCollage(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
        setPadding(PADDING, PADDING, PADDING, PADDING);
    }

    public FreeCollage(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        initBorderPaint();
    }

    private void initBorderPaint() {
        mBorderPaint = new Paint();
        mBorderPaint.setAntiAlias(true);
        mBorderPaint.setStyle(Paint.Style.STROKE);
        mBorderPaint.setColor(Color.WHITE);
        mBorderPaint.setStrokeWidth(STROKE_WIDTH);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawRect(PADDING, PADDING, getWidth() - PADDING, getHeight() - PADDING, mBorderPaint);
    }
}

Ответ 5

Просто добавьте свойство adjustViewBounds в ImageView.

<ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/image_border"
        android:padding="1dp"
        android:adjustViewBounds="true"
        android:src="@drawable/test_image" />

Обратите внимание, что android:adjustViewBounds="true" работает только с android:layout_width и android:layout_height, установленным в "wrap_content".

Ответ 6

Это то, что сработало для меня:

    <ImageView
        android:id="@+id/dialpad_phone_country_flag"
        android:layout_width="22dp"
        android:layout_height="15dp"
        android:scaleType="fitXY"
        android:background="@color/gen_black"
        android:padding="1px"/>

Ответ 7

просто добавьте строку ниже в макет ImageView

если layout_width и layout_height изображения не совпадают с использованием,

android:adjustViewBounds = "true"

или

android:adjustViewBounds = "true"
android:scaleType="fitXY"

или

android:adjustViewBounds = "true"
android:scaleType="centerCrop"

Ответ 8

Ниже приведен фрагмент кода, который я использовал в своем простейшем решении.

<FrameLayout
    android:layout_width="112dp"
    android:layout_height="112dp"
    android:layout_marginLeft="16dp" <!-- May vary according to your needs -->
    android:layout_marginRight="16dp" <!-- May vary according to your needs -->
    android:layout_centerVertical="true">
    <!-- following imageView acts as the boarder which sitting in the background of our main container ImageView -->
    <ImageView
        android:layout_width="112dp"
        android:layout_height="112dp"
        android:background="#000"/>
    <!-- following imageView holds the image as the container to our image -->
    <!-- layout_margin defines the width of our boarder, here it 1dp -->
    <ImageView
        android:layout_width="110dp"
        android:layout_height="110dp"
        android:layout_margin="1dp"
        android:id="@+id/itemImageThumbnailImgVw"
        android:src="@drawable/banana"
        android:background="#FFF"/>
</FrameLayout>

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

Надеюсь, это может быть полезно для вас, кто там!

Ура!

Ответ 9

Вам нужно добавить scalylele в ваше изображение. После этого ваше изображение будет соответствовать.

Android: scaleType = "fitXY"