ฉันต้องการวาดสี่เหลี่ยมมุมมนใน Android UI การมีสี่เหลี่ยมโค้งมนแบบเดียวกันสำหรับTextView
และEditText
จะเป็นประโยชน์เช่นกัน
ฉันต้องการวาดสี่เหลี่ยมมุมมนใน Android UI การมีสี่เหลี่ยมโค้งมนแบบเดียวกันสำหรับTextView
และEditText
จะเป็นประโยชน์เช่นกัน
คำตอบ:
ในเค้าโครง xml ของคุณทำสิ่งต่อไปนี้:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="@android:color/holo_red_dark" />
<corners android:radius="32dp" />
</shape>
โดยการเปลี่ยนandroid:radius
คุณสามารถเปลี่ยนจำนวนของ "รัศมี" ของมุม
<solid>
ใช้เพื่อกำหนดสีของ drawable
คุณสามารถใช้แทนที่android:radius
ด้วยandroid:bottomLeftRadius
, android:bottomRightRadius
, android:topLeftRadius
และandroid:topRightRadius
การกำหนดรัศมีสำหรับแต่ละมุม
ฉันคิดว่านี่คือสิ่งที่คุณต้องการอย่างแท้จริง
นี่วาดได้ (xml) ไฟล์ที่สร้างรูปสี่เหลี่ยมผืนผ้ามน round_rect_shape.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<solid android:color="#ffffff" />
<corners
android:bottomLeftRadius="8dp"
android:bottomRightRadius="8dp"
android:topLeftRadius="8dp"
android:topRightRadius="8dp" />
</shape>
นี่คือไฟล์เลย์เอาต์: my_layout.xml
<LinearLayout
android:id="@+id/linearLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/round_rect_shape"
android:orientation="vertical"
android:padding="5dp" >
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Something text"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#ff0000" />
<EditText
android:id="@+id/editText1"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<requestFocus />
</EditText>
</LinearLayout>
-> ในโค้ดด้านบน LinearLayout มีพื้นหลัง (นั่นคือบทบาทสำคัญในการสร้างสี่เหลี่ยมมุมมน) ดังนั้นคุณสามารถวางมุมมองใด ๆ เช่น TextView, EditText ... ใน LinearLayout นั้นเพื่อดูพื้นหลังเป็นสี่เหลี่ยมมุมฉากสำหรับทุกคน
android:background="@drawable/round_rect_shape"
ใน styles.xml ของฉัน แต่จะใช้สีพื้นหลังที่แตกต่างกันโดยการตั้งค่าคุณสมบัติอื่น มีตัวเลือกใดบ้างยกเว้นการสร้าง drawable ที่เหมือนกันสำหรับแต่ละสีหรือไม่
ในmonodroid
คุณสามารถทำสิ่งนี้เพื่อสี่เหลี่ยมผืนผ้าโค้งมนแล้วทำให้มันเป็นคลาสผู้ปกครองeditbox
และสามารถเพิ่มคุณสมบัติเค้าโครงอื่น ๆ
class CustomeView : TextView
{
public CustomeView (Context context, IAttributeSet ) : base (context, attrs)
{
}
public CustomeView(Context context, IAttributeSet attrs, int defStyle) : base(context, attrs, defStyle)
{
}
protected override void OnDraw(Android.Graphics.Canvas canvas)
{
base.OnDraw(canvas);
Paint p = new Paint();
p.Color = Color.White;
canvas.DrawColor(Color.DarkOrange);
Rect rect = new Rect(0,0,3,3);
RectF rectF = new RectF(rect);
canvas.DrawRoundRect( rectF, 1,1, p);
}
}
}
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:padding="10dp"
android:shape="rectangle">
<solid android:color="@color/colorAccent" />
<corners
android:bottomLeftRadius="500dp"
android:bottomRightRadius="500dp"
android:topLeftRadius="500dp"
android:topRightRadius="500dp" />
</shape>
ตอนนี้ในองค์ประกอบที่คุณต้องการใช้รูปร่างนี้เพียงแค่เพิ่ม:
android:background="@drawable/custom_round_ui_shape"
สร้าง XML ใหม่ในรูปวาดได้ชื่อว่า "custom_round_ui_shape"
ใช้CardViewสำหรับสี่เหลี่ยมผืนผ้ารอบ CardView ให้ฟังก์ชันการทำงานมากขึ้นเช่น cardCornerRadius, cardBackgroundColor, cardElevation และอีกมากมาย CardView ทำให้ UI มีความเหมาะสมยิ่งขึ้นจากนั้นกำหนดกรอบรูปสี่เหลี่ยมผืนผ้าเองได้
คุณสามารถกำหนดพื้นหลัง xml ใหม่ในโฟลเดอร์ drawable ได้
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="enter_your_desired_color_here" />
<corners android:radius="enter_your_desired_radius_the_corners" />
</shape>
หลังจากนี้เพียงรวมไว้ใน TextView หรือ EditText ของคุณโดยกำหนดไว้ในพื้นหลัง
<TextView
android:id="@+id/textView"
android:layout_width="0dp"
android:layout_height="80dp"
android:background="YOUR_FILE_HERE"
Android:layout_weight="1"
android:gravity="center"
android:text="TEXT_HERE"
android:textSize="40sp" />
คลิกขวาที่รูปวาดและสร้างไฟล์ xml เลย์เอาต์ใหม่ในชื่อตัวอย่างเช่น button_background.xml จากนั้นคัดลอกและวางรหัสต่อไปนี้ คุณสามารถเปลี่ยนได้ตามความต้องการของคุณ
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners
android:radius="14dp" />
<solid android:color="@color/colorButton" />
<padding
android:bottom="0dp"
android:left="0dp"
android:right="0dp"
android:top="0dp" />
<size
android:width="120dp"
android:height="40dp" />
</shape>
ตอนนี้คุณสามารถใช้มัน
<Button
android:background="@drawable/button_background"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="@android:color/white" />
<corners android:radius="4dp" />
</shape>