พื้นหลังไล่ระดับสี LinearLayout ของ Android

ฉันมีปัญหาในการใช้พื้นหลังไล่ระดับสีกับ LinearLayout

สิ่งนี้ควรจะค่อนข้างง่ายจากสิ่งที่ฉันได้อ่าน แต่ดูเหมือนจะไม่ทำงาน สำหรับการอ้างอิงฉันกำลังพัฒนาใน 2.1-update1

header_bg.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:angle="90"
        android:startColor="#FFFF0000"
        android:endColor="#FF00FF00"
        android:type="linear"/>
</shape>

main_header.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="50dip"
    android:orientation="horizontal"
    android:background="@drawable/header_bg">
</LinearLayout>

ถ้าฉันเปลี่ยน @ drawable / header_bg เป็นสี - เช่น # FF0000 มันทำงานได้อย่างสมบูรณ์แบบ ฉันขาดอะไรบางอย่างชัดเจนที่นี่?

ตกลงฉันมีการจัดการเพื่อแก้ปัญหานี้โดยใช้ตัวเลือก ดูรหัสด้านล่าง:

main_header.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="50dip"
    android:orientation="horizontal"
    android:background="@drawable/main_header_selector">
</LinearLayout>

main_header_selector.xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <shape>
        <gradient
            android:angle="90"
            android:startColor="#FFFF0000"
            android:endColor="#FF00FF00"
            android:type="linear" />
    </shape>
</item>
</selector>

หวังว่านี่จะช่วยคนที่มีปัญหาเดียวกัน

นอกจากนี้ยังเป็นไปได้ที่จะมีสีที่สาม (กลาง) และรูปร่างต่าง ๆ

ตัวอย่างเช่นใน drawable / gradient.xml:

<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:startColor="#000000"
        android:centerColor="#5b5b5b"
        android:endColor="#000000"
        android:angle="0" />
</shape>

มันให้สีดำ - เทา - ดำ (จากซ้ายไปขวา) ซึ่งเป็นพื้นหลังสีดำที่ฉันโปรดปราน

อย่าลืมเพิ่ม gradient.xml เป็นพื้นหลังในเลย์เอาต์ xml ของคุณ:

android:background="@drawable/gradient"

นอกจากนี้ยังเป็นไปได้ที่จะหมุนด้วย:

มุม = "0"

ช่วยให้คุณมีเส้นแนวตั้ง

และด้วย

มุม = "90"

ช่วยให้คุณมีเส้นแนวนอน

มุมที่เป็นไปได้คือ:

0, 90, 180, 270

นอกจากนี้ยังมีรูปร่างที่แตกต่างกันเล็กน้อย:

หุ่นยนต์รูปร่าง = "สี่เหลี่ยม"

รูปร่างโค้งมน:

หุ่นยนต์รูปร่าง = "ไข่"

และอาจจะอีกไม่กี่

หวังว่ามันจะช่วยไชโย!

ในไฟล์ XML Drawable:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <gradient android:angle="90"
                android:endColor="#9b0493"
                android:startColor="#38068f"
                android:type="linear" />
        </shape>
    </item>
</selector>

ในไฟล์เลย์เอาต์ของคุณ: android: background = "@ drawable / gradient_background"

  <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/gradient_background"
        android:orientation="vertical"
        android:padding="20dp">
        .....

</LinearLayout>

ลองลบ android: gradientRadius = "90" นี่คือสิ่งที่เหมาะกับฉัน:

<shape 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
>
    <gradient
        android:startColor="@color/purple"
        android:endColor="@color/pink"
        android:angle="270" />
</shape>

ปัญหาของฉันคือส่วนขยาย. xml ไม่ได้ถูกเพิ่มเข้าไปในชื่อไฟล์ของไฟล์ XML ที่สร้างขึ้นใหม่ การเพิ่มนามสกุล. xml ช่วยแก้ไขปัญหาของฉันได้

ด้วย Kotlin คุณสามารถทำได้เพียง 2 บรรทัด

เปลี่ยนค่าสีในอาเรย์

                  val gradientDrawable = GradientDrawable(
                        GradientDrawable.Orientation.TOP_BOTTOM,
                        intArrayOf(Color.parseColor("#008000"),
                                   Color.parseColor("#ADFF2F"))
                    );
                    gradientDrawable.cornerRadius = 0f;

                   //Set Gradient
                   linearLayout.setBackground(gradientDrawable);

ผลลัพธ์

ฉันไม่ทราบว่าสิ่งนี้จะช่วยใครได้หรือไม่ แต่ปัญหาของฉันคือฉันพยายามตั้งค่า gradient เป็นคุณสมบัติ "src" ของ ImageView เช่น:

<ImageView 
    android:id="@+id/imgToast"
    android:layout_width="wrap_content"
    android:layout_height="60dp"
    android:src="@drawable/toast_bg"
    android:adjustViewBounds="true"
    android:scaleType="fitXY"/>

ไม่แน่ใจ 100% ว่าทำไมถึงใช้งานไม่ได้ แต่ตอนนี้ฉันเปลี่ยนและวาง drawable ในคุณสมบัติ "พื้นหลัง" ของผู้ปกครองของ ImageView ซึ่งเป็น RelativeLayout ในกรณีของฉันดังนี้: (ทำงานได้สำเร็จ)

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:id="@+id/custom_toast_layout_id"
    android:layout_height="match_parent"
    android:background="@drawable/toast_bg">

ฉันจะตรวจสอบช่องอัลฟาของคุณเกี่ยวกับการไล่ระดับสีของคุณ สำหรับฉันเมื่อฉันทดสอบโค้ดของฉันฉันได้ตั้งช่องอัลฟ่าผิดกับสีและมันไม่ได้ผลสำหรับฉัน เมื่อฉันได้รับช่องอัลฟาตั้งมันทำงานทั้งหมด!

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

class GradientView(context: Context, attrs: AttributeSet) : View(context, attrs) {

    // Properties
    private val paint: Paint = Paint()
    private val rect = Rect()

    //region Attributes
    var start: Int = Color.WHITE
    var end: Int = Color.WHITE
    //endregion

    override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
        super.onSizeChanged(w, h, oldw, oldh)
        // Update Size
        val usableWidth = width - (paddingLeft + paddingRight)
        val usableHeight = height - (paddingTop + paddingBottom)
        rect.right = usableWidth
        rect.bottom = usableHeight
        // Update Color
        paint.shader = LinearGradient(0f, 0f, width.toFloat(), 0f,
                start, end, Shader.TileMode.CLAMP)
        // ReDraw
        invalidate()
    }

    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)
        canvas.drawRect(rect, paint)
    }

}

ฉันยังสร้างโครงการโอเพนซอร์สGradientViewด้วยมุมมองที่กำหนดเองนี้:

https://github.com/lopspower/GradientView

implementation 'com.mikhaellopez:gradientview:1.1.0'