ฉันจะสร้างเส้นขอบรอบ ๆ LinearLayout ของ Android ได้อย่างไร


113

ฉันมีเลย์เอาต์ขนาดใหญ่หนึ่งเลย์เอาต์และอีกหนึ่งเลย์เอาต์ที่เล็กกว่าอยู่ข้างใน

ฉันจะสร้างเส้นขอบรอบเลย์เอาต์ขนาดเล็กได้อย่างไร


คุณลองstackoverflow.com/questions/3496269/…หรือยัง?
sandrstar

คำตอบ:


241

แน่นอน คุณสามารถเพิ่มเส้นขอบให้กับเค้าโครงใดก็ได้ที่คุณต้องการ โดยทั่วไปคุณต้องสร้าง drawable ที่กำหนดเองและเพิ่มเป็นพื้นหลังให้กับเค้าโครงของคุณ ตัวอย่าง:

สร้างไฟล์ที่เรียกว่าcustomborder.xmlในโฟลเดอร์ที่วาดได้ของคุณ:

<?xml version="1.0" encoding="UTF-8"?>
 <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
   <corners android:radius="20dp"/> 
   <padding android:left="10dp" android:right="10dp" android:top="10dp" android:bottom="10dp"/>
   <stroke android:width="1dp" android:color="#CCCCCC"/>
 </shape>

ตอนนี้ใช้เป็นพื้นหลังกับเค้าโครงขนาดเล็กของคุณ:

<LinearLayout android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@drawable/customborder">

ที่ควรทำเคล็ดลับ

ดูเพิ่มเติมที่:


29
<solid> จะเติมสีลงในสี่เหลี่ยมผืนผ้า คุณต้องใช้ <stroke> แทนเพื่อวาดเส้นขอบเท่านั้น
NightFury

1
เคล็ดลับตรงนี้คือ <padding> ใช้เวลาสักพักเพื่อค้นหาว่าทำไมรูปร่างของฉันถึงไม่ได้ผล ด้วยการเพิ่มช่องว่างจะใช้งานได้ดี
John

3
ทั้งสอง<solid/>และ<stroke/>เติมสี่เหลี่ยมทั้งหมด? นี่คือบั๊กในโค้ดของฉันหรือไม่?
mr5

13
เพิ่ม <stroke android: width = "1dip" android: color = "# CCCCCC" /> ก็ใช้ได้ดี
Pierry

1
ความคิดเห็นของ Pierry ทำให้คำตอบนี้ถูกต้อง มิฉะนั้นคุณจะได้รับพื้นหลังแบบเต็มเท่านั้น
kagkar

25

สร้าง XML ที่เรียกว่า 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">
      <solid android:color="#FF0000" /> 
    </shape>
  </item>   
    <item android:left="5dp" android:right="5dp"  android:top="5dp" >  
     <shape android:shape="rectangle"> 
      <solid android:color="#000000" />
    </shape>
   </item>    
 </layer-list>

จากนั้นเพิ่มสิ่งนี้ในเลย์เอาต์เชิงเส้นเป็นแบ็คกราวด์ดังนี้:

     android:background="@drawable/border"

11

ลองสิ่งนี้:

ตัวอย่างเช่นกำหนด res / drawable / my_custom_background.xml เป็น:

(สร้างโครงร่างนี้ในโฟลเดอร์ที่วาดได้ของคุณ) layout_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">
            <stroke android:width="2dp" android:height="2dp"
                android:color="#FF0000" />
            <solid android:color="#000000" />
            <padding android:left="1dp" android:top="1dp" android:right="1dp"
                android:bottom="1dp" />

            <corners android:radius="1dp" android:bottomRightRadius="5dp"
                android:bottomLeftRadius="0dp" android:topLeftRadius="5dp"
                android:topRightRadius="0dp" />
        </shape>
    </item>

</layer-list>

main.xml

<LinearLayout 
    android:layout_gravity="center"
    android:layout_width="200dp" 
    android:layout_height="200dp"   
    android:background="@drawable/layout_border" />
</LinearLayout>

11

สร้างไฟล์ xml หนึ่งไฟล์ในโฟลเดอร์ที่วาดได้

<stroke
    android:width="2dp"
    android:color="#B40404" />

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

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

ตอนนี้เรียก xml นี้เป็นพื้นหลังเค้าโครงขนาดเล็กของคุณ

android: background = "@ drawable / yourxml"


ที่นี่ไม่อนุญาตให้ใช้จังหวะองค์ประกอบ
hdavidzhu

3

โซลูชันนี้จะเพิ่มเส้นขอบเท่านั้นเนื้อหาของ LinearLayout จะโปร่งใส

ขั้นแรกให้สร้างเส้นขอบนี้ที่วาดได้ในโฟลเดอร์ที่วาดได้ border.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android= "http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <stroke android:width="2dp" android:color="#ec0606"/>
    <corners android:radius="10dp"/>
</shape>

จากนั้นใน LinearLayout View ให้เพิ่ม border.xml เป็นพื้นหลังแบบนี้

<LinearLayout 
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="@drawable/border">

3

คุณสามารถทำได้ในทางปฏิบัติด้วย

  GradientDrawable gradientDrawable=new GradientDrawable();
   gradientDrawable.setStroke(4,getResources().getColor(R.color.line_Input));

จากนั้นตั้งค่าพื้นหลังของเค้าโครงเป็น:

LinearLayout layout = (LinearLayout ) findViewById(R.id.ayout); layout .setBackground(gradientDrawable);

3

ฉันจะเพิ่มลิงก์เอกสาร Android ไปยังคำตอบอื่น ๆ

https://developer.android.com/guide/topics/resources/drawable-resource.html#Shape

มันอธิบายคุณลักษณะทั้งหมดของ Shape Drawable และstrokeในหมู่พวกเขาเพื่อตั้งค่าเส้นขอบ

ตัวอย่าง:

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
  <stroke android:width="1dp" android:color="#F00"/>
  <solid android:color="#0000"/>
</shape>

ขอบสีแดงพื้นหลังโปร่งใส


ส่วนทึบอนุญาตให้ตั้งค่าสีเป็นเส้นขอบเท่านั้น +1
aksh1618

0

ไม่ต้องการสร้างทรัพยากรที่เบิกได้?

  <FrameLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@android:color/black"
    android:minHeight="128dp">

    <FrameLayout
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:layout_margin="1dp"
      android:background="@android:color/white">

      <TextView ... />
    </FrameLayout>
  </FrameLayout>

0

ลองใช้ใน res / drawable ของคุณ

    <?xml version="1.0" encoding="UTF-8"?><layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
  <shape
    android:shape="rectangle">
    <padding android:left="15dp"
        android:right="15dp"
        android:top="15dp"
        android:bottom="15dp"/>
    <stroke android:width="10dp"
        android:color="@color/colorPrimary"/>
  </shape>
</item><item android:left="-5dp"
        android:right="-5dp"
        android:top="-5dp"
        android:bottom="-5dp">
  <shape android:shape="rectangle">
    <solid android:color="@color/background" />
  </shape></item></layer-list>
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.