it-swarm.com.ru

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, поэтому, если ширина изображения меньше 100px, то верхняя и нижняя границы будут выглядеть больше.

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

enter image description here

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

27
Andy Res

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

45
Christine

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

<!-- @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 с рамкой.

Example imageview with border 1dp black.

25
Ray Hunter

Если изображения имеют переменный размер, вы всегда получите такой эффект. Я предполагаю, что вам нужно установить фиксированный размер для 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 пикселей и различную высоту.

example

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

9
Paul D'Ambra

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

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);
    }
}
4
Shubham Kamlapuri

Просто добавьте свойство 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». 

3
rricarrdo

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

    <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"/>
3
Goran Horia Mihail

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

если layout_width и layout_height imageview не совпадают с родительским, чем использовать,

Android:adjustViewBounds = "true"

или же

Android:adjustViewBounds = "true"
Android:scaleType="fitXY"

или же 

Android:adjustViewBounds = "true"
Android:scaleType="centerCrop"
1
varotariya vajsi

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

Android: scaleType = "fitXY"

0
Shubham

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

<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's 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>

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

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

Ура!

0
Randika Vishman