Как отобразить границу для просмотра изображений?
Друзья Как отобразить границу для просмотра изображений?
Я хочу, чтобы в результате, как Mobile Gallery все изображения отображаются с рамкой.
Пожалуйста, дайте мне ответ и спасибо за продвижение....
3 ответа
Вы можете создать ресурс (слой Drawable XML) для вашего ImageView
'границы' (на самом деле фон), и объявить в вашем theme
что ImageView
фоновым ресурсом является нарисованный XML.
Если вам нужно изменить эту "границу" на основе ImageView
государство (focused
, selected
и т. д.), затем вы должны создать больше слоев для рисования и соединить их в селектор xml (состояние рисования).
Тогда в вашей теме вы должны установить ImageView
фон, чтобы быть этим selector.xml
,
Обновить
Ниже приведен пример того, как задать простую рамку для ваших изображений, которая приведет к
Ты должен
- создайте новый файл для рисования слоя (
image_border.xml
), - изменить / создать свой
styles.xml
файл - изменить / создать свой
colors.xml
файл - изменить XML-файл макета (или ваш код), чтобы применить стиль к
ImageView
,
Рез / рисуем /image_border.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<gradient android:angle="90"
android:startColor="@color/image_border_start"
android:centerColor="@color/image_border_center"
android:endColor="@color/image_border_end" />
</shape>
</item>
<item android:top="2dp" android:left="2dp"
android:right="2dp" android:bottom="2dp">
<shape android:shape="rectangle">
<solid android:color="@color/default_back_color" />
</shape>
</item>
</layer-list>
RES / значения /styles.xml
Добавьте следующие строки:
<style name="myImageView">
<!-- 3dp so the background border to be visible -->
<item name="android:padding">3dp</item>
<item name="android:background">@drawable/image_border</item>
<item name="android:scaleType">fitCenter</item>
</style>
RES / значения /colors.xml
Добавьте следующие строки:
<color name="image_border_start">#40990000</color>
<color name="image_border_end">#FF660000</color>
<color name="image_border_center">#FFFF3333</color>
И, наконец, укажите свой стиль ImageView
в вашем макете XML:
<ImageView android:id="@+id/my_image"
android:layout_width="100dp" android:layout_height="100dp"
android:src="@drawable/efteling"
style="@style/myImageView" />
Этот XML-файл можно использовать вместо нескольких файлов, но этот файл помещается в папку для рисования. В ImageView используйте этот XML-файл в качестве фона для рисования, например: android:background="@drawable/following code file
name"
,
Я надеюсь, что это полезно для вас.
<?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>
Я перепробовал все вышеперечисленные решения, но они не сработали для меня! Так что я нашел простое решение для этого!:-)
Я помню, что читал о FrameLayout для Android в следующей статье, говоря, что это помогает нам размещать наши элементы пользовательского интерфейса друг над другом в том же порядке, в котором мы их добавляем.
Решение:
<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>
Предварительный просмотр:
И это все. Вы получите следующее, как imageView!
Плюсы и минусы:
Я думаю, что это довольно простое решение для использования в любом другом месте, и все, что вы делаете, находится в одном месте, так что его легче изменить. Однако я не люблю добавлять два ImageViews.