มุมโค้งมนสำหรับมุมมองข้อความใน Android


171

ฉันมีมุมมองข้อความและต้องการให้มุมของมันเป็นทรงกลม android:background="@drawable/somefile"ผมรู้อยู่แล้วว่ามันสามารถทำได้โดยใช้ ในกรณีของฉันแท็กนี้มีอยู่แล้วดังนั้นจึงไม่สามารถใช้งานได้อีก เช่นandroid:background="@drawable/mydialogbox"มีอยู่แล้วเพื่อสร้างภาพในพื้นหลัง

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="fill_parent"
    android:layout_gravity="top"
    android:background="@drawable/mydialogbox"
    android:orientation="horizontal" >

    <TextView
        android:id="@+id/textview_name"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true" />

    </LinearLayout>

</RelativeLayout>

ดังนั้นเมื่อฉันต้องการtextview(textview_name)ด้วยมุมมนวิธีนี้สามารถทำได้


4
ถ้าคุณได้รับคำตอบมากกว่ายอมรับคำตอบเพื่อที่คนอื่นจะได้รับความช่วยเหลือจากการมีส่วนร่วมของคุณ
MilapTank

คำตอบ:


438

1) สร้างrounded_corner.xmlในdrawableโฟลเดอร์และเพิ่มเนื้อหาต่อไปนี้

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >         
   <stroke
          android:width="1dp"
          android:color="@color/common_border_color" />

   <solid android:color="#ffffff" />

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

   <corners android:radius="5dp" />
</shape>

2) กำหนด drawable นี้ในTextViewคุณสมบัติพื้นหลังตัวอย่างเช่น:

android:background="@drawable/rounded_corner"

ฉันหวังว่านี่จะเป็นประโยชน์สำหรับคุณ


16
คำตอบนั้นถูกต้องเพียงแค่คนที่โพสต์นั้นไม่ได้อธิบายอย่างละเอียด คุณต้องสร้าง xml [เช่น round_view.xml] ในโฟลเดอร์ drawable ของคุณด้วยรหัสด้านบน และในเลย์เอาต์ของคุณที่ล้อมรอบ textview ของคุณทำให้สิ่งนี้เป็นพารามิเตอร์ android: background = "@ drawable / rounded_view"
Sharjeel Ahmed

4
android: background = "@ drawable / round_corner" อย่าใช้ส่วนขยายที่นี่!
Boris Gafurov

4
เพิ่มandroid:shape="rectangle"ถ้ามันไม่ได้ผลสำหรับคุณ
kristyna

และสร้างโครงการของคุณใหม่หากไม่ได้ทำงานโดยอัตโนมัติ
adek111

18

ข้างradiusมีคุณสมบัติการรอบมุมบางอย่างเช่นtopRightRadius, topLeftRadius, bottomRightRadius,bottomLeftRadius

ตัวอย่างที่TextViewมีพื้นหลังสีเทาของredเส้นขอบwith corner and

bg_rounded.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <stroke
        android:width="10dp"
        android:color="#f00" />

    <solid android:color="#aaa" />

    <corners
        android:radius="5dp"
        android:topRightRadius="100dp" />
</shape>

TextView

<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/bg_rounded"
    android:text="Text"
    android:padding="20dp"
    android:layout_margin="10dp"
    />

ผลลัพธ์

ป้อนคำอธิบายรูปภาพที่นี่


16

เนื่องจากมุมมองระดับบนสุดของคุณมีชุดคุณสมบัติพื้นหลังของ Android อยู่แล้วคุณสามารถใช้<layer-list>( ลิงก์ ) เพื่อสร้าง XML drawable ใหม่ที่รวมทั้งพื้นหลังเก่าและพื้นหลังมุมโค้งมนใหม่ของคุณ

แต่ละ<item>องค์ประกอบในรายการจะถูกวาดขึ้นมาถัดไปดังนั้นรายการสุดท้ายในรายการคือองค์ประกอบที่อยู่ด้านบน

<?xml version="1.0" encoding="utf-8"?>
<layer-list
    xmlns:android="http://schemas.android.com/apk/res/android" >
    <item>
        <bitmap android:src="@drawable/mydialogbox" />
    </item>
    <item>
        <shape>
            <stroke
                android:width="1dp"
                android:color="@color/common_border_color" />

            <solid android:color="#ffffff" />

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

            <corners android:radius="5dp" />
        </shape>
    </item>
</layer-list>

6

สร้างไฟล์ xml gradient.xml ภายใต้โฟลเดอร์ drawable

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle"  >
            <corners android:radius="50dip" />
            <stroke android:width="1dip" android:color="#667162" />
            <gradient android:angle="-90" android:startColor="#ffffff" android:endColor="#ffffff" />
        </shape>
    </item>
</selector>

จากนั้นเพิ่มสิ่งนี้ลงใน TextView ของคุณ

android:background="@drawable/gradient"

6
  1. คลิกขวาที่โฟลเดอร์Drawableและสร้างไฟล์ใหม่
  2. ชื่อแฟ้มตามที่คุณและเพิ่มส่วนขยายเป็น.xml
  3. เพิ่มรหัสต่อไปนี้ในไฟล์
  <?xml version="1.0" encoding="utf-8"?>
  <shape xmlns:android="http://schemas.android.com/apk/res/android"
      android:shape="rectangle">
      <corners android:radius="5dp" />
      <stroke android:width="1dp"  />
      <solid android:color="#1e90ff" />
  </shape>
  1. เพิ่มบรรทัดที่คุณต้องการให้ขอบมน android:background="@drawable/corner"

4

คุณสามารถใช้รูปร่างสี่เหลี่ยมผืนผ้าที่จัดเตรียมไว้ (โดยไม่มีการไล่ระดับสีเว้นแต่ว่าคุณต้องการรูป):

ในdrawable/rounded_rectangle.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="5dp" />
    <stroke android:width="1dp" android:color="#ff0000" />
    <solid android:color="#00ff00" />
</shape>

จากนั้นในมุมมองข้อความของคุณ:

android:background="@drawable/rounded_rectangle"

แน่นอนคุณจะต้องการปรับแต่งขนาดและสี


4

มีสองขั้นตอนคือ

1) สร้างไฟล์นี้ในโฟลเดอร์ drawable ของคุณ: - rounded_corner.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
         <corners android:radius="10dp" />  // set radius of corner
         <stroke android:width="2dp" android:color="#ff3478" /> // set color and width of border
         <solid android:color="#FFFFFF" /> // inner bgcolor
</shape>

2) ตั้งค่าไฟล์นี้TextViewเป็นคุณสมบัติพื้นหลังของคุณ

android:background="@drawable/rounded_corner"

คุณสามารถใช้ drawable นี้ในปุ่มหรือ Edittext ได้เช่นกัน


3
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:id="@android:id/background">
        <shape>
            <corners android:radius="5dp" />
            <solid android:color="#ffffff"/>

        </shape>
    </item>
</layer-list>

2

MaterialShapeDrawableกับห้องสมุดส่วนประกอบวัสดุคุณสามารถใช้

ด้วยTextView:

    <TextView
        android:id="@+id/textview"
        ../>

คุณสามารถใช้โปรแกรมโดยMaterialShapeDrawable:

float radius = getResources().getDimension(R.dimen.corner_radius);

TextView textView = findViewById(R.id.textview);
ShapeAppearanceModel shapeAppearanceModel = new ShapeAppearanceModel()
        .toBuilder()
        .setAllCorners(CornerFamily.ROUNDED,radius)
        .build();

MaterialShapeDrawable shapeDrawable = new MaterialShapeDrawable(shapeAppearanceModel);
ViewCompat.setBackground(textView,shapeDrawable);

ป้อนคำอธิบายรูปภาพที่นี่

หากคุณต้องการเปลี่ยนสีพื้นหลังและใช้เส้นขอบเพียง:

shapeDrawable.setFillColor(ContextCompat.getColorStateList(this,R.color.....));
shapeDrawable.setStroke(2.0f, ContextCompat.getColor(this,R.color....));

0

คุณสามารถใช้ SVG สำหรับการปัดเศษมุมและโหลดลงใน ImageView และใช้ ConstraintLayout เพื่อนำ ImageView บน TextView

ฉันใช้สำหรับการปัดเศษ ImageView และปัด TextView


0

เพียงใช้ภาพมุมโค้งมนเป็นพื้นหลังของมุมมองนั้นจะทำให้เป็นเช่นนั้น

android:background="@drawable/my_custom_image"
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.