Как установить границу для ImageView
и изменить ее цвет в Android?
Граница для представления изображения в Android?
Ответы (17)
Я установил указанный ниже 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
android:background="@drawable/yourXmlFileName"
к ImageView
- person Mithun Sreedharan; 07.04.2011
<solid>
на прозрачный или что-то еще, как хотите.
- person Praveen; 22.07.2011
<stroke>
на красный (# FF0000). тогда вы получите некоторое представление.
- person Praveen; 22.07.2011
android:background="@drawable/yourXmlFileName"
в ImageView.» ПРИМЕЧАНИЕ: минус .xml. И не используйте '-' в имени файла (как правило, с ресурсами). (Мне потребовалось несколько перекомпиляций, чтобы выяснить это.)
- person Sz.; 18.01.2014
#FFFFFF
на @android:color/transparent
или #00000000
.
- person ; 28.01.2017
Ниже приведен код, который у меня был с черной рамкой. Обратите внимание, что я не использовал дополнительный XML-файл для границы.
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/red_minus_icon"
android:background="#000000"
android:padding="1dp"/>
android:scaleType="centerCrop"
.
- person Silox; 24.02.2013
scaleType="centerCrop"
, обязательно добавьте cropToPadding="true"
- person Adam Johns; 28.04.2016
scaleType="centerCrop"
с cropToPadding="true"
, но в редких случаях все еще не показывает закругленный угол
- person mochadwi; 20.01.2020
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
, и он должен быть в папке с возможностью переноса
<?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" />
Это старый пост, который я знаю, но я подумал, что это может кому-то помочь.
Если вы хотите смоделировать полупрозрачную границу, которая не перекрывает «сплошной» цвет фигуры, используйте это в своем 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>
Создать границу
Создайте 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
or
ImageView img = findViewById(R.id.my_image_view);
img.setBackgroundTintList(getColorStateList(R.color.newColor));
Не забудьте определить свой newColor
.
Добавьте фон 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 отображался поверх фона.
Это использовалось выше, но не упомянуто исключительно.
setCropToPadding(boolean);
Если true, изображение будет обрезано по размеру отступа.
Это заставит ImageView
источник вписаться в дополнение, добавленное к его фону.
Через XML это можно сделать, как показано ниже:
android:cropToPadding="true"
вы должны создать 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>
Для тех, кто ищет пользовательские границы и форму 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"/>
Я почти разочаровался в этом.
Это мое состояние при использовании скольжения для загрузки изображения, см. подробную информацию о скругленном угле здесь. преобразования и здесь
У меня такие же атрибуты для моего 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"
к сожалению, это дает мне "неприятный" угол границы, как на изображении ниже:
Просто добавьте этот код в свой ImageView:
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid
android:color="@color/white"/>
<size
android:width="20dp"
android:height="20dp"/>
<stroke
android:width="4dp" android:color="@android:color/black"/>
<padding android:left="1dp" android:top="1dp" android:right="1dp"
android:bottom="1dp" />
</shape>
Мне стало намного проще сделать это:
1) Отредактируйте фрейм, чтобы внутри было содержимое (с помощью инструмента 9patch).
2) Поместите ImageView
внутрь Linearlayout
и установите желаемый фон рамки или цвет в качестве фона для Linearlayout
. Когда вы устанавливаете во фрейме содержимое внутри себя, ваш ImageView
будет внутри фрейма (именно там, где вы устанавливаете контент с помощью инструмента 9patch).
Ниже приводится мое самое простое решение этой долгой проблемы.
<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>
В следующем ответе я объяснил это достаточно хорошо, пожалуйста, взгляните и на это!
Я надеюсь, что это будет полезно для кого-то еще!
В том же 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>
Добавьте к фигуре следующий код:
<gradient
android:angle="135"
android:endColor="#FF444444"
android:centerColor="#FFAAAAAA"
android:startColor="#FFFFFFFF"/>
ét voila, у вас есть (более или менее) отступ границы, с источником света, установленным в левом верхнем углу. Поиграйте с размером растрового изображения (в отношении размера изображения я использовал изображение 200dp x 200dp и растровое изображение 196dp x 196dp в примере с радиусом 14dp для углов) и отступы, чтобы получить лучший результат. Переключите конечный и начальный цвета для эффекта скошенной кромки.
Вот полный код формы, которую вы видите на изображении (сохраните его в res / drawable, например, border_shape.xml):
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:angle="135"
android:endColor="#FF444444"
android:centerColor="#FFAAAAAA"
android:startColor="#FFFFFFFF"/>
<padding
android:top="2dp"
android:left="2dp"
android:right="2dp"
android:bottom="2dp"/>
<corners
android:radius="30dp"/>
</shape>
И назовите это в вашем изображении следующим образом:
android:scaleType="center"
android:background="@drawable/border_shape"
android:cropToPadding="true"
android:adjustViewBounds="true"
А вот код растрового изображения с закругленными углами:
Bitmap getRoundedRectBitmap(Bitmap bitmap, float radius) {
Paint paint = new Paint();
PorterDuffXfermode pdmode = new PorterDuffXfermode(PorterDuff.Mode.SRC_IN);
Bitmap bm = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight(), Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(bm);
Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());
RectF rectF = new RectF(rect);
canvas.drawARGB(0, 0, 0, 0);
paint.setColor(0xff424242);
canvas.drawRoundRect(rectF, radius, radius, paint);
paint.setXfermode(pdmode);
canvas.drawBitmap(bitmap, rect, rect, paint);
return bm;
}
Вы можете использовать патч 9 в Android Studio для создания границ!
Я искал решение, но не нашел, поэтому пропустил эту часть.
Затем я обратился к изображениям ресурсов Firebase в Google и случайно обнаружил, что они используют 9patch.
Вот ссылка: https://developer.android.com/studio/write/draw9patch
Вам просто нужно перетащить туда, где есть края.
Это как граница границы в Unity.