ขอบสำหรับการดูภาพใน Android?

ฉันจะกำหนดเส้นขอบสำหรับImageViewและเปลี่ยนสีใน Android ได้อย่างไร

ฉันตั้ง 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

ต่อไปนี้เป็นรหัสที่ฉันเคยมีขอบสีดำ โปรดทราบว่าฉันไม่ได้ใช้ไฟล์ xml พิเศษสำหรับเส้นขอบ

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

นี่เป็นโพสต์เก่าที่ฉันรู้ แต่ฉันคิดว่านี่อาจจะช่วยให้ใครบางคนที่นั่น

หากคุณต้องการจำลองเส้นขอบโปร่งแสงที่ไม่ทับซ้อนกับสี "ทึบ" ของรูปร่างให้ใช้สีนี้ใน 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>

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

สร้างเส้นขอบ

สร้างไฟล์ xml (เช่น "frame_image_view.xml") ด้วยเนื้อหาดังต่อไปนี้ในโฟลเดอร์ drawable ของคุณ:

<?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สิ่งที่คุณต้องการหรือเพิ่ม Dimen / สีที่สอดคล้องกัน

เพิ่ม 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อย่าลืมที่จะกำหนดของคุณ

เพิ่มพื้นหลัง 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);

หากเป็นจริงรูปภาพจะถูกครอบตัดเพื่อให้พอดีกับช่องว่างภายใน

สิ่งนี้จะทำให้ImageViewแหล่งที่มาให้พอดีกับการเพิ่มของ padding ในพื้นหลัง

ผ่าน 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"

โชคไม่ดีที่มันทำให้ฉัน "ไม่ดี" มุมชายแดนเหมือนภาพด้านล่าง:

ฉันพบว่าทำสิ่งนี้ได้ง่ายกว่ามาก:

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>

ก่อนอื่นให้เพิ่มสีพื้นหลังที่คุณต้องการให้เป็นสีของเส้นขอบจากนั้น

เปลี่ยน cropToPadding เป็นจริงและหลังจากนั้นเพิ่มการเติม

จากนั้นคุณจะมีเส้นขอบสำหรับภาพมุมมองของคุณ