Perbatasan untuk tampilan gambar di Android?


338

Bagaimana cara menetapkan batas untuk ImageViewdan mengubah warnanya di Android?


1
Saya punya jawaban untuk mengubah warna ImageView, semoga dapat membantu.
ruidge

Jawaban:


568

Saya mengatur xml di bawah ini ke latar belakang Tampilan Gambar sebagai Gambar. Berhasil.

<?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>

Dan kemudian tambahkan android:background="@drawable/yourXmlFileName"keImageView


112
Dan kemudian tambahkan android:background="@drawable/yourXmlFileName"keImageView
Mithun Sreedharan

10
Perbatasan berfungsi baik kiri dan kanan, tetapi untuk atas dan bawah mengisi orangtua ke atas.
Maurice

3
Oh bagus, itulah yang saya inginkan juga. Ingatlah untuk mengatur padding untuk ImageView Anda.
emeraldhieu

5
@Maurice Anda dapat mengatur cropToPadding menjadi true.
MikkoP

4
jangan lupa atur cropToPadding = "true"
landry

164

Berikut ini adalah kode yang saya gunakan untuk memiliki batas hitam. Perhatikan bahwa saya belum menggunakan file xml tambahan untuk perbatasan.

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

29
ya .. sepertinya perbatasan. Tetapi ketika Anda menggunakan gambar yang dapat digambar dengan latar belakang transparan, maka gambar Anda dengan batas tidak akan ditampilkan dengan benar. itu menunjukkan warna hitam di mana pun Anda memiliki transparan. Jadi jawaban Anda bukanlah pendekatan terbaik.
Praveen

19
Ya! tetapi Anda memiliki perbatasan tanpa membuat file xml lain.
user609239

7
Ini tidak berfungsi saat Anda mengubah ukuran gambar menggunakan android:scaleType="centerCrop".
Silox

8
ini buruk karena itu menciptakan penarikan berlebih yang tidak perlu
Jay Soyer

1
@ Silox untuk scaleType="centerCrop", pastikan juga menambahkancropToPadding="true"
Adam Johns

24

Ini adalah pos lama yang saya tahu, tetapi saya pikir ini mungkin dapat membantu seseorang di luar sana.

Jika Anda ingin mensimulasikan batas tembus pandang yang tidak tumpang tindih dengan warna "solid" bentuk, gunakan ini di xml Anda. Perhatikan bahwa saya tidak menggunakan tag "stroke" di sini sama sekali karena tampaknya selalu tumpang tindih dengan bentuk gambar yang sebenarnya.

  <?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>

Saya suka ini juga, tetapi jika Anda membuat tepi luar terlalu kecil, sudutnya kosong. Ini berfungsi baik dengan apa pun 2dp dan di atasnya.
John Stack

Manfaat dari metode ini adalah memungkinkan untuk sudut yang membulat. Jika Anda tidak ingin batas dari jawaban sebelumnya tumpang tindih, tambahkan padding ke tag ImageView. Kelemahan dari metode ini adalah bahwa batas akan berdarah ke area gambar jika menggunakan latar belakang transparan. Jadi saya memilih metode sebelumnya karena saya suka latar belakang yang tembus lebih baik daripada sudut yang membulat.
Leo Landau

24

ImageView dalam file 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" />

simpan kode di bawah ini dengan nama border_image.xmldan itu harus dalam folder yang dapat digambar

<?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>

jika Anda ingin memberikan sudut bulat ke batas gambar maka Anda dapat mengubah baris dalam file border.xml

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

2
hanya catatan tentang ini, jika gambar diatur secara dinamis maka perbatasan perlu diatur lagi dalam kode lain yang bijak gambar di atas perbatasan.
Rob85

4

Buat Perbatasan

Buat file xml (mis. "Frame_image_view.xml") dengan konten berikut di folder yang dapat digambar:

<?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>

Ganti @dimen/borderThicknessdan @color/borderColordengan apa pun yang Anda inginkan atau tambahkan dimen / warna yang sesuai.

Tambahkan Drawable as background ke ImageView Anda:

<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" />

Anda harus menggunakan android:cropToPadding="true", jika bantalan yang ditentukan tidak memiliki efek. Atau gunakan android:padding="@dimen/borderThickness"di ImageView Anda untuk mencapai hal yang sama. Jika perbatasan membingkai induk alih-alih ImageView Anda, coba gunakan android:adjustViewBounds="true".

Ubah Warna Batas

Cara termudah untuk mengubah warna batas Anda dalam kode menggunakan atribut tintBackgound.

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

atau

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

Jangan lupa untuk mendefinisikan newColor.


3

Tambahkan latar belakang Drawable like 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>

Perbarui latar belakang ImageView di 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" />
...

Kecualikan pad ImageView jika Anda ingin src untuk menggambar di atas latar belakang.


3

Ini telah digunakan di atas tetapi tidak disebutkan secara eksklusif.

setCropToPadding(boolean);

Jika benar , gambar akan dipotong agar pas dengan padding-nya.

Ini akan membuat ImageViewsumber agar sesuai dengan padding yang ditambahkan ke latar belakangnya.

Melalui XML dapat dilakukan sebagai berikut-

android:cropToPadding="true"

2

Anda harus membuat background.xml dalam res / drawable code ini

<?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

Bagi mereka yang mencari batas kustom dan bentuk ImageView. Anda dapat menggunakan android-shape-imageview

gambar

Tambahkan saja compile 'com.github.siyamed:android-shape-imageview:0.9.+@aar'kebuild.gradle .

Dan gunakan dalam tata letak Anda.

<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

Saya hampir menyerah tentang ini.

Ini adalah kondisi saya menggunakan luncuran untuk memuat gambar, lihat masalah luncuran terperinci di sini tentang transformasi sudut bulat dan di sini

Saya juga memiliki atribut yang sama untuk saya ImageView, untuk semua orang yang menjawab di sini 1 , di sini 2 & di sini 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"

Namun tetap tidak berhasil.

Setelah meneliti sebentar, menggunakan foregroundatribut dari jawaban SO ini di sini memberikan hasilandroid:foreground="@drawable/all_round_border_white"

sayangnya itu memberi saya sudut perbatasan "tidak baik" seperti gambar di bawah ini:

masukkan deskripsi gambar di sini


0

Saya merasa jauh lebih mudah untuk melakukan ini:

1) Edit bingkai untuk memiliki konten di dalamnya (dengan alat 9patch).

2) Tempatkan bagian ImageViewdalam a Linearlayout, dan atur latar belakang bingkai atau warna yang Anda inginkan sebagai latar belakang Linearlayout. Saat Anda mengatur bingkai untuk memiliki konten di dalamnya, Anda ImageViewakan berada di dalam bingkai (tepat di mana Anda mengatur konten dengan alat 9patch).


0

Berikut ini adalah solusi paling sederhana saya untuk masalah yang panjang ini.

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

Dalam jawaban berikut saya sudah menjelaskannya dengan cukup baik, silakan lihat juga!

Saya harap ini akan membantu orang lain di luar sana!


0

Dalam xml yang sama saya gunakan selanjutnya:

    <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

Pertama menambahkan warna latar yang Anda inginkan sebagai warna perbatasan Anda, lalu masukkan deskripsi gambar di sini

ubah cropToPadding menjadi true dan setelah itu tambahkan padding.

Maka Anda akan memiliki batas untuk imageView Anda.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.