วิธีทำปุ่มกลม


141

ฉันพยายามสร้างปุ่มกลม แต่ฉันไม่รู้ว่าฉันจะทำได้อย่างไร ฉันสามารถสร้างปุ่มที่มีมุมโค้งมน แต่ฉันจะวนวงกลมได้อย่างไร มันไม่เหมือนกัน กรุณาบอกฉันเป็นไปได้บน Android? ขอบคุณ.


1
มีคำอธิบายที่ดีที่นี่stackoverflow.com/questions/9884202/custom-circle-button
Milon

คำตอบ:


265

สร้างไฟล์ xml ชื่อroundedbutton.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="#eeffffff" />
    <corners android:bottomRightRadius="8dp"
        android:bottomLeftRadius="8dp"  
        android:topRightRadius="8dp"
        android:topLeftRadius="8dp"/>
</shape>

ในที่สุดก็กำหนดให้เป็นพื้นหลังของคุณButtonเป็นandroid:background = "@drawable/roundedbutton"

หากคุณต้องการทำให้มันโค้งมนอย่างสมบูรณ์ให้เปลี่ยนรัศมีและหาบางอย่างที่ใช้ได้สำหรับคุณ


คุณต้องการคำต่อท้าย. xml หรือไม่ ฉันเคยเห็นตัวอย่างโดยไม่ต้อง
Neil

@ ถึงตอนนี้คุณไม่จำเป็นต้องเพิ่มคำต่อท้าย xml ฉันใช้เพื่อจุดประสงค์ในการสาธิตและเข้าใจแนวคิดอย่างชัดเจนเพื่อให้ผู้อ่านไม่ได้ใช้ตัวอย่างผิด eclipse auto-help ควรช่วยคุณหาถ้าจำเป็นต้องใช้. xml หรือไม่ฉันมีนิสัยชอบใช้ ctrl + space บนเครื่อง windows ของฉันเพื่อทำคำสั่ง xml ให้อัตโนมัติ
Arif Nadeem

2
คุณไม่จำเป็นต้องมีสัญลักษณ์ '@' ก่อนที่จะทำการดึงคำได้
ชิม

โซลูชันนี้มีผลลัพธ์ที่แตกต่างจากการใช้ภาพกลมเป็นพื้นหลังหรือไม่?
Siavash

6
นอกจากนี้ทำไมไม่ใช้ android: รูปร่าง = "รูปไข่"
Siavash

39

หากใช้ Android Studio คุณสามารถใช้:

<?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="ring">
        <solid android:color="#FFFFFF"/>

    </shape>

มันใช้งานได้ดีสำหรับฉันหวังว่าจะช่วยให้ใครบางคน


2
นั่นควรเป็นคำตอบที่ยอมรับได้การใช้ค่ามุมไม่ได้เกินกว่ามุมมนและคำถามนี้เกี่ยวกับวงกลม ขอบคุณ Shaun สำหรับคำตอบนี้
Don

12
การใช้ringไม่แสดงอะไรเลย ovalดีกว่าที่จะใช้
CopsOnRoad

31
  1. สร้างไฟล์ drawable / button_states.xml ที่มี:

    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:state_pressed="false"> 
            <shape android:shape="rectangle">
            <corners android:radius="1000dp" />
            <solid android:color="#41ba7a" />
            <stroke
                android:width="2dip"
                android:color="#03ae3c" />
            <padding
                android:bottom="4dp"
                android:left="4dp"
                android:right="4dp"
                android:top="4dp" />
            </shape>
        </item>
        <item android:state_pressed="true"> 
            <shape android:shape="rectangle">
            <corners android:radius="1000dp" />
            <solid android:color="#3AA76D" />
            <stroke
                android:width="2dip"
                android:color="#03ae3c" />
            <padding
                android:bottom="4dp"
                android:left="4dp"
                android:right="4dp"
                android:top="4dp" />
            </shape>
        </item>
    </selector>
  2. ใช้ในแท็กปุ่มในไฟล์เค้าโครงใด ๆ

    <Button
        android:layout_width="220dp"
        android:layout_height="220dp"
        android:background="@drawable/button_states"
        android:text="@string/btn_scan_qr"
        android:id="@+id/btn_scan_qr"
        android:textSize="15dp"
    />

มันทำงานได้อย่างสมบูรณ์แบบขอบคุณ คุณช่วยฉันวาดสี่เหลี่ยมจากกึ่งกลางถึงด้านนอกของวงกลมได้ไหม 'Q'
CLIFFORD PY

ทำงานได้ดี แต่ทำไมเราเพิ่มรัศมีถึง 1,000 dp คุณช่วยอธิบายได้ไหม
Jamshaid Kamran

@JamshaidKamran 1,000dp เป็นขนาดที่ใหญ่พอที่จะทำให้รอบปุ่มได้
rraallvv

มีทรัพยากรมิติ Android ที่เราสามารถใช้แทน 1,000dp ได้หรือไม่?
rraallvv


6

<corners android:bottomRightRadius="180dip"
    android:bottomLeftRadius="180dip"
    android:topRightRadius="180dip"
    android:topLeftRadius="180dip"/>

<solid android:color="#6E6E6E"/> <!-- this one is ths color of the Rounded Button -->

และเพิ่มลงในรหัสปุ่ม

    android:layout_width="50dp"
    android:layout_height="50dp"

5

ใช้รูปร่างเป็นวงรี ทำให้ปุ่มรูปวงรี

<item>
    <shape android:shape="oval" >
        <stroke
            android:height="1.0dip"
            android:width="1.0dip"
            android:color="#ffee82ee" />

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

        <corners
            android:bottomLeftRadius="12.0dip"
            android:bottomRightRadius="12.0dip"
            android:radius="12.0dip"
            android:topLeftRadius="12.0dip"
            android:topRightRadius="12.0dip" />
    </shape>
</item>


5
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid
    android:color="#ffffff"
    />
</shape>

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



3

ใช้ImageButtonแทนปุ่ม ....

และทำให้ภาพกลมที่มีพื้นหลังโปร่งใส


3

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

<com.google.android.material.button.MaterialButton
    style="@style/Widget.MaterialComponents.ExtendedFloatingActionButton"
    app:cornerRadius="28dp"
    android:layout_width="56dp"
    android:layout_height="56dp"
    android:text="1" />

ผลลัพธ์:

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

app:cornerRadiusหากคุณเปลี่ยนขนาดของปุ่มเพียงแค่ต้องระวังในการใช้ครึ่งหนึ่งของขนาดปุ่มเป็น


2

สำหรับปุ่มกลมสร้างรูปร่าง:

<?xml version="1.0" encoding="utf-8"?>

<stroke
    android:width="8dp"
    android:color="#FFFFFF" />

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


<corners
    android:bottomLeftRadius="45dp"
    android:bottomRightRadius="45dp"
    android:topLeftRadius="45dp"
    android:topRightRadius="45dp" />

ใช้เป็นพื้นหลังของลิงก์ปุ่มของคุณ




0

คุณสามารถใช้ FloatingActionButton ของ Google ได้

XML:

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@android:drawable/ic_dialog_email" />

Java:

  @Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    FloatingActionButton bold = (FloatingActionButton) findViewById(R.id.fab);
    bold.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
        // Do Stuff
        }
    });
}

Gradle:

    compile 'com.android.support:design:23.4.0'

0
  1. ใช้ปุ่มภาพและทำให้พื้นหลังเป็นภาพที่คุณต้องการ
  2. สร้างภาพจากลิงค์สินทรัพย์ของ android android -

" https://romannurik.github.io/AndroidAssetStudio/icons-launcher.html#foreground.type=image&foreground.space.trim=0&foreground.space.pad=0.25&foreColor=rgba(94%2C%20142% 2C% 200) และ BackColor = rgb (96% 2C% 20125% 2C% 20139) และพืช = 1 & backgroundShape = วงกลมและผลกระทบที่ไม่มี = & name = ic_home "

และดาวน์โหลดเพิ่มมันเข้าไปด้านในซึ่งมองหาโฟลเดอร์ mipmap-hdpi

  1. คัดลอกรูปภาพจากโฟลเดอร์ mipmap-hdpi และวางลงในโฟลเดอร์ drwable ของโครงการ Android ของคุณ

  2. ตอนนี้ตั้งค่าพื้นหลังเป็นภาพนั้น

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