พื้นหลังของปุ่มเป็นแบบโปร่งใส


177

ฉันมีปุ่ม เมื่อฉันกดปุ่มฉันต้องทำให้ข้อความเป็นตัวหนาอย่างอื่นปกติ ดังนั้นฉันจึงเขียนรูปแบบสำหรับตัวหนา & ปกติ

<style name="textbold" parent="@android:style/TextAppearance">
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:textStyle">bold</item>
</style>
<style name="textregular" parent="@android:style/TextAppearance">
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:textStyle">normal</item>
</style>

ตอนนี้ฉันมี button_states.xml เป็น:

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

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true" android:state_pressed="true"
    style="@style/textbold" />
<item android:state_focused="false" android:state_pressed="true"
    style="@style/textregular" />

<item style="@style/textregular" />
</selector> 

ในเลย์เอาต์ของฉันสำหรับปุ่มนี้ฉันต้องทำให้พื้นหลังโปร่งใสด้วย ... ฉันจะทำอย่างไร รหัสรูปแบบของฉันคือ:

<Button android:id="@+id/Btn" android:background="@drawable/button_states" />

ฉันจะใส่พื้นหลังให้โปร่งใสในสไตล์ของฉันได้อย่างไร


3
ดังนั้นคำตอบที่ดีเหล่านี้จึงเป็นที่ยอมรับได้ในขณะนี้ ...
QED

ลองดูคำตอบที่นี่ เพื่อสร้างปุ่มโปร่งใสที่มีเส้นขอบ
Basheer AL-MOMANI

'ทำไมคุณไม่ใช้ TextView และเรียกใช้แอคชั่นบนคลิก?
Dula wnRp

คำตอบ:


360

android:background="@android:color/transparent"จะทำให้พื้นหลังโปร่งใสเพียงแค่ทำ

อย่างไรก็ตามดูเหมือนว่าปัญหาของคุณจะลึกซึ้งขึ้นเล็กน้อยเนื่องจากคุณใช้เครื่องมือเลือกอย่างแปลก ๆ วิธีที่คุณกำลังใช้มันดูเหมือนว่าผิด <item/>แต่ถ้ามันใช้งานได้จริงคุณควรจะใส่ภาพพื้นหลังในรูปแบบเป็น

ดูวิธีการใช้สไตล์ในแหล่ง Android อย่างละเอียด แม้ว่าพวกเขาจะไม่เปลี่ยนรูปแบบข้อความเมื่อคลิกปุ่ม แต่ก็มีความคิดที่ดีมากมายเกี่ยวกับวิธีการบรรลุเป้าหมายของคุณที่นั่น


1
ลองดูคำตอบที่ชัดเจนของฉัน ฉันอ่านผิดปัญหาของคุณเพื่อเริ่มต้น พื้นหลังได้รับการตั้งค่าในสไตล์
Steve Pomeroy

ขออภัยฉันยังไม่ชัดเจนในการแก้ปัญหา เพียงแค่ตั้งค่า @android: สี / โปร่งใสไม่รองรับรูปแบบการสัมผัสที่ปุ่มปกติมี (และเทียบเท่ากับการตั้งค่าพื้นหลังเป็น @null)
gatoatigrado

@gatoatigrado: คุณหมายถึงว่าคุณต้องการให้พื้นที่โปร่งใสถูกระบุด้วยสีส้มหรือสีเทาในบางสิ่งหรือไม่ ถ้าเป็นเช่นนั้นคุณจะต้องสร้างอิมเมจ 9 แพทช์ที่กำหนดเองสำหรับสิ่งนั้น
Steve Pomeroy

@StevePomeroy ใช่แล้วปุ่มเอฟเฟกต์เริ่มต้นบน Android 4.1 ใช้สำหรับ [กดปุ่ม] พื้นหลังเป็นสีน้ำเงินโดยมีเค้าโครงสีน้ำเงินที่เบากว่า
gatoatigrado

@gatoatigrado: ตกลง หากคุณต้องการสิ่งนั้นคุณจะไม่สามารถใช้ปุ่มโปร่งใสได้ ฉันไม่แน่ใจว่าคุณกำลังพยายามทำอะไรที่นั่น
Steve Pomeroy

121

ลองวิธีใหม่ในการตั้งค่าพื้นหลังโปร่งใส

    android:background="?android:attr/selectableItemBackground"

9
นี่คือสิ่งที่ฉันอยากจะแนะนำให้ใช้ ด้วยวิธีนี้คุณจะได้เก็บภาพเคลื่อนไหวการออกแบบวัสดุที่สวยงามสำหรับปุ่มของคุณ =)
Ryan Newsom

นี่เป็นคำตอบที่ดีกว่า
Marcos Dávalos

35

ใช้#0000(เพียงสี่ศูนย์มิฉะนั้นจะถือว่าเป็นblack) นี่คือรหัสสีสำหรับโปร่งใส คุณสามารถใช้งานได้โดยตรง แต่ฉันแนะนำให้คุณกำหนดสีเป็น color.xml เพื่อให้คุณสามารถเพลิดเพลินกับการใช้งานโค้ดได้อีกครั้ง


9
โชคดีที่สิ่งนี้ได้ถูกกำหนดไว้แล้วสำหรับเราในฐานะ@android:color/transparent
Richard Le Mesurier

34

เพิ่มสิ่งนี้ในXmlของคุณ-android:background="@android:color/transparent"

        <Button
            android:id="@+id/button1"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="Button"
            android:background="@android:color/transparent"
            android:textStyle="bold"/>

32

คุณอาจใช้: ใน xml ของคุณ:

android:background="@null"

หรือในรหัส:

buttonVariable.setBackgroundColor(Color.TRANSPARENT);

โหวตขึ้นเพื่อให้ทางเลือกชอบที่จะเห็นตัวเลือกทั้งหมด!
Burkely91



8

Selectors ทำงานได้เฉพาะกับ drawable ไม่ใช่สไตล์ การอ้างอิง


ขั้นแรกเพื่อทำให้พื้นหลังปุ่มโปร่งใสใช้แอตทริบิวต์ต่อไปนี้เนื่องจากจะไม่มีผลกับภาพเคลื่อนไหวการออกแบบวัสดุ:

style="?attr/buttonBarButtonStyle"

มีหลายวิธีในการจัดสไตล์ปุ่มของคุณ ลองดูบทช่วยสอนนี้

ประการที่สองเพื่อให้ข้อความกดหนาให้ใช้รหัส java นี้:

btn.setOnTouchListener(new View.OnTouchListener() {
    @Override
    public boolean onTouch(View v, MotionEvent event) {

        switch (event.getAction()) {
            // When the user clicks the Button
            case MotionEvent.ACTION_DOWN:
                btn.setTypeface(Typeface.DEFAULT_BOLD);
                break;

            // When the user releases the Button
            case MotionEvent.ACTION_UP:
                btn.setTypeface(Typeface.DEFAULT);
                break;
        }
        return false;
    }
});

1

คุณสามารถทำได้โดยการตั้งค่าสีช่องอัลฟา

โทนสีเป็นแบบนี้ #AARRGGBB ที่นั่น A หมายถึงช่องอัลฟา (โปร่งใส) R หมายถึงสีแดง G สำหรับสีเขียวและ B สำหรับสีฟ้า


1

ขั้นตอนที่ 1: สร้างไฟล์ทรัพยากรใหม่ในรูปวาดได้และคัดลอกวาง

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

    <stroke android:color="#fff" android:width="2dp"/>
    <corners android:radius="25dp"/>
    <padding android:right="15dp" android:top="15dp" android:bottom="15dp" android:left="15dp"/>
</shape>

บันทึกเป็น ButtonUI (สมมุติว่า)

ขั้นตอนที่ 2:ใช้ UI กับปุ่ม xml

<Button
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:text="join the crew"
  android:background="@drawable/ButtonUI"
  android:textColor="#fff"/>


0

เราสามารถใช้แอตทริบิวต์android: backgroundในButton xml เหมือนด้านล่าง

android:background="?android:attr/selectableItemBackground"

หรือเราสามารถใช้สไตล์

style="?android:attr/borderlessButtonStyle" สำหรับพื้นหลังที่โปร่งใสและเงาน้อยลง


-2

คุณใช้สีพื้นหลังtransparent(light gray)เมื่อคุณคลิกปุ่ม

ButtonName.setOnClickListener()

ในวิธีการข้างต้นคุณตั้งค่าสีพื้นหลังของปุ่ม


6
กังวลว่าสิ่งนี้ถูกโหวตขึ้น กรุณาอย่าทำเช่นนี้ ผู้ดูแลในอนาคตจะสาปแช่งชื่อของคุณ ตั้งพื้นหลังด้วยตัวเลือกและมีหนึ่งสี / drawable สำหรับการกดและหนึ่งสำหรับไม่ อย่าเขียนรหัสเพื่อเปลี่ยนในฟัง - นั่นไม่ใช่วิธีการนี้จะทำ
themightyjon

-2

คุณสามารถทำได้โดยเพิ่มแอตทริบิวต์ด้านล่างในไฟล์ xml รหัสนี้มีการทดสอบเวลาอีกมาก

android:background="@android:color/transparent"

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