Граница для просмотра изображений в Android?


338

Как я могу установить границу для ImageViewи изменить его цвет в Android?


1
У меня есть ответ на изменение цвета ImageView, надеюсь, может помочь.
ruidge

Ответы:


568

Я установил ниже xml на фон просмотра изображений как Drawable. Оно работает.

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#FFFFFF" />
    <stroke android:width="1dp" android:color="#000000" />
    <padding android:left="1dp" android:top="1dp" android:right="1dp"
        android:bottom="1dp" />
</shape>

А потом добавь android:background="@drawable/yourXmlFileName"в свойImageView


112
А затем добавить android:background="@drawable/yourXmlFileName"кImageView
Mithun Sreedharan

10
Граница работает как слева, так и справа, но сверху и снизу она заполняет родительский элемент сверху.
Морис

3
О, хорошо, это то, что я тоже хочу. Не забудьте установить отступы для вашего ImageView.
Изумрудный

5
@Maurice Вы можете установить cropToPadding в true.
MikkoP

4
не забудьте установить cropToPadding = "true"
ландри

164

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

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/red_minus_icon"
    android:background="#000000"
    android:padding="1dp"/>

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

19
Да! но у вас есть границы без создания другого XML-файла.
user609239

7
Это не работает, когда вы изменяете размер изображения с помощью android:scaleType="centerCrop".
Silox

8
это плохо, потому что создает ненужный оверлей
Джей Сойер,

1
@ Silox для scaleType="centerCrop", не забудьте также добавитьcropToPadding="true"
Адам Джонс

24

Это старый пост, который я знаю, но я подумал, что это может кому-то помочь.

Если вы хотите смоделировать полупрозрачную границу, которая не перекрывает «сплошной» цвет фигуры, используйте это в своем XML. Обратите внимание, что я здесь вообще не использую тег «штрих», так как кажется, что он всегда перекрывает фактическую нарисованную форму.

  <?xml version="1.0" encoding="utf-8"?>
    <layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <item>
        <shape android:shape="rectangle" >
            <solid android:color="#55111111" />

            <padding
                android:bottom="10dp"
                android:left="10dp"
                android:right="10dp"
                android:top="10dp" />

            <corners android:radius="5dp" />
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle" >
            <padding
                android:bottom="5dp"
                android:left="5dp"
                android:right="5dp"
                android:top="5dp" />

            <solid android:color="#ff252525" />
        </shape>
    </item>
</layer-list>

Мне это тоже нравится, но если вы сделаете внешние края слишком маленькими, углы будут пустыми. Это работает хорошо с чем-нибудь 2dp и выше.
Джон Стэк,

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

24

ImageView в файле XML

<ImageView
            android:id="@+id/myImage"
            android:layout_width="100dp"
            android:layout_height="100dp"

            android:padding="1dp"
            android:scaleType="centerCrop"
            android:cropToPadding="true"
            android:background="@drawable/border_image"

            android:src="@drawable/ic_launcher" />

сохраните ниже код с именем border_image.xmlи он должен быть в папке drawable

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <gradient
        android:angle="270"
        android:endColor="#ffffff"
        android:startColor="#ffffff" />

    <corners android:radius="0dp" />

    <stroke
        android:width="0.7dp"
        android:color="#b4b4b4" />
</shape>

если вы хотите задать закругленный угол для границы изображения, вы можете изменить строку в файле border.xml

<corners android:radius="4dp" />

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

4

Создать границу

Создайте XML-файл (например, «frame_image_view.xml») со следующим содержимым в папке для рисования:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <stroke
        android:width="@dimen/borderThickness"
        android:color="@color/borderColor" />
    <padding
        android:bottom="@dimen/borderThickness"
        android:left="@dimen/borderThickness"
        android:right="@dimen/borderThickness"
        android:top="@dimen/borderThickness" />
    <corners android:radius="1dp" /> <!-- remove line to get sharp corners -->
</shape>

Замените @dimen/borderThicknessи @color/borderColorна что хотите или добавьте соответствующий размер / цвет.

Добавьте Drawable в качестве фона для вашего ImageView:

<ImageView
        android:id="@+id/my_image_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/frame_image_view"
        android:cropToPadding="true"
        android:adjustViewBounds="true"
        android:scaleType="fitCenter" />

Вы должны использовать android:cropToPadding="true", иначе определенный отступ не имеет никакого эффекта. В качестве альтернативы используйте android:padding="@dimen/borderThickness"в вашем ImageView для достижения того же. Если граница обрамляет родителя вместо вашего ImageView, попробуйте использовать android:adjustViewBounds="true".

Изменить цвет границы

Самый простой способ изменить цвет границы в коде - использовать атрибут tintBackgound.

ImageView img = findViewById(R.id.my_image_view);
img.setBackgroundTintList(ColorStateList.valueOf(Color.RED); // changes border color to red

или

ImageView img = findViewById(R.id.my_image_view);
img.setBackgroundTintList(getColorStateList(R.color.newColor));

Не забудьте определить свой newColor.


3

Добавьте фон Drawable, как res / drawables / background.xml:

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
  <solid android:color="@android:color/white" />
  <stroke android:width="1dp" android:color="@android:color/black" />
</shape>

Обновите фон ImageView в res / layout / foo.xml:

...
<ImageView
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:padding="1dp"
  android:background="@drawable/background"
  android:src="@drawable/bar" />
...

Исключите заполнение ImageView, если вы хотите, чтобы src рисовал поверх фона.


3

Это было использовано выше, но не упоминается исключительно.

setCropToPadding(boolean);

Если это правда , изображение будет обрезано, чтобы соответствовать его отступам.

Это сделает ImageViewисходный текст внутри отступа добавленным к его фону.

С помощью XML это можно сделать, как показано ниже:

android:cropToPadding="true"

2

Вы должны создать background.xml в Res / Drawable этот код

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#FFFFFF" />
<corners android:radius="6dp" />
<stroke
    android:width="6dp"
    android:color="@android:color/white" />
<padding
    android:bottom="6dp"
    android:left="6dp"
    android:right="6dp"
    android:top="6dp" />
</shape>

2

Для тех, кто ищет пользовательские границы и форму ImageView. Вы можете использовать android-shape-imageview

образ

Просто добавь compile 'com.github.siyamed:android-shape-imageview:0.9.+@aar'в свой build.gradle.

И использовать в вашем макете.

<com.github.siyamed.shapeimageview.BubbleImageView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:src="@drawable/neo"
    app:siArrowPosition="right"
    app:siSquare="true"/>

1

Я почти сдался по этому поводу.

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

У меня также есть те же атрибуты для моего ImageView, для всех здесь ответить 1 , здесь 2 и здесь 3

android:cropToPadding="true"
android:adjustViewBounds="true"
android:scaleType="fitCenter"`
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/path_to_rounded_drawable"

Но все равно безуспешно.

После изучения в течение некоторого времени, использование foregroundатрибутов из этого ответа SO дает здесь результатandroid:foreground="@drawable/all_round_border_white"

к сожалению, это дает мне «нехороший» угол границы, как на картинке ниже:

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


0

Мне было гораздо проще сделать это:

1) Отредактируйте рамку, чтобы содержимое находилось внутри (с помощью инструмента 9patch).

2) Поместите ImageViewвнутрь a Linearlayout, и установите фон рамки или цвет, который вы хотите, в качестве фона Linearlayout. Когда вы устанавливаете рамку так, чтобы содержимое было внутри себя, вы ImageViewбудете внутри рамки (именно там, где вы устанавливаете контент с помощью инструмента 9patch).


0

Следующее - мое самое простое решение этой долгой проблемы.

<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

В том же XML я использовал следующее:

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#ffffff" <!-- border color -->
        android:padding="3dp"> <!-- border width -->

        <ImageView
            android:layout_width="160dp"
            android:layout_height="120dp"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true"
            android:scaleType="centerCrop" />
    </RelativeLayout>

0

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

измените cropToPadding на true и после этого добавьте отступ.

Тогда у вас будет граница для вашего imageView.

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.