ขยายศูนย์กลางของการไล่ระดับสีของ Android ที่วาดได้

สำหรับโซลูชัน XML เท่านั้น คุณสามารถสร้าง layer-list ด้วยอ็อบเจ็กต์ gradient แยกกันสองอ็อบเจ็กต์

รหัสต่อไปนี้สร้างวัตถุ gradient สองรายการที่ทับซ้อนกัน และใช้ centerY กับ centerColor เพื่อชดเชยส่วนสีดำ ในที่นี้ แอตทริบิวต์ centerY ถูกตั้งค่าเป็น 0.9 และ 0.1 ดังนั้นสีดำจึงถูกจำกัดอยู่ที่ด้านบนและด้านล่าง 10% ของความสูงของมุมมอง

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <gradient
                android:angle="90"
                android:centerColor="@android:color/transparent"
                android:centerY="0.9"
                android:endColor="@android:color/black"
                android:startColor="@android:color/transparent" />
        </shape>
    </item>

    <item>
        <shape>
            <gradient
                android:angle="90"
                android:centerColor="@android:color/transparent"
                android:centerY="0.1"
                android:endColor="@android:color/transparent"
                android:startColor="@android:color/black" />
        </shape>
    </item>
</layer-list>

สำหรับ API ระดับ 23 หรือสูงกว่า โซลูชันต่อไปนี้จะใช้งานได้โดยใช้ android:height วิธีนี้สามารถใช้ได้แม้ว่าคุณจะไม่ทราบความสูงรวมของมุมมอง ตราบใดที่คุณรู้ว่าคุณต้องการไล่ระดับสีใหญ่แค่ไหน

โค้ดนี้สร้างการไล่ระดับสีสองแบบแยกกัน โดยแต่ละแบบมีความสูง 60sp จากนั้นใช้ android:gravity เพื่อลอยการไล่ระดับสีไปที่ด้านบนและด้านล่างของมุมมอง

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:height="60sp"
        android:gravity="top">
        <shape android:shape="rectangle">
            <gradient
                android:angle="90"
                android:endColor="@android:color/black"
                android:startColor="@android:color/transparent" />
        </shape>
    </item>
    <item
        android:height="65sp"
        android:gravity="bottom">
        <shape android:shape="rectangle">
            <gradient
                android:angle="90"
                android:endColor="@android:color/transparent"
                android:startColor="@android:color/black" />
        </shape>
    </item>
</layer-list>

ขอบคุณ @Luksprog สำหรับความช่วยเหลือด้านโค้ด และ @thenaoh สำหรับการเริ่มต้นแนวคิด

โซลูชันข้างต้นใช้งานได้และเป็นเรื่องดีที่เป็น XML ล้วนๆ หากการไล่ระดับสีของคุณแสดงเป็นแถบ คุณอาจต้องการลองใช้โซลูชันแบบเป็นโปรแกรม เช่น ที่แสดงในคำตอบของ @lelloman's เพื่อสร้าง การไล่ระดับสีที่นุ่มนวลยิ่งขึ้น

ต่อไปนี้คือวิธีการดำเนินการด้วย Drawable ที่กำหนดเอง คุณสามารถปรับแต่ง LinearGradient ตามที่คุณต้องการ จากนั้นตั้งเป็นพื้นหลังของมุมมองด้วย view.setBackground(new CustomDrawable());

public class CustomDrawable extends Drawable {

    private Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
    private int[] colors;
    private float[] positions;

    public CustomDrawable() {
        paint.setStyle(Paint.Style.FILL);
        this.colors = new int[]{0xff000000, 0xffaaaaaa, 0xffffffff, 0xffaaaaaa, 0xff000000};
        this.positions = new float[]{.0f, .2f, .5f, .8f, 1.f};
    }

    @Override
    public void setBounds(int left, int top, int right, int bottom) {
        super.setBounds(left, top, right, bottom);    

        LinearGradient linearGradient = new LinearGradient(left, top,left, bottom, colors, positions, Shader.TileMode.CLAMP);
        paint.setShader(linearGradient);
    }

    @Override
    public void draw(@NonNull Canvas canvas) {    
        canvas.drawRect(getBounds(), paint);
    }

    @Override
    public void setAlpha(@IntRange(from = 0, to = 255) int alpha) {
        paint.setAlpha(alpha);
    }

    @Override
    public void setColorFilter(@Nullable ColorFilter colorFilter) {
        paint.setColorFilter(colorFilter);
    }

    @Override
    public int getOpacity() {
        return PixelFormat.TRANSPARENT;
    }
}

มีวิธีแก้ไข โดยสมมติว่าคุณรู้ล่วงหน้าถึงความสูงของมุมมองของคุณ (สมมติว่าที่นี่ 60dp):

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
    android:bottom="40dp">
    <shape android:shape="rectangle">
        <gradient
            android:type="linear"
            android:angle="90"
            android:startColor="#FFFFFF"
            android:endColor="#000000"/>
    </shape>
</item>
<item
    android:top="20dp"
    android:bottom="20dp"
    android:gravity="center_vertical">
    <shape android:shape="rectangle">
        <solid android:color="#FFFFFF"/>
    </shape>
</item>
<item
    android:top="40dp"
    android:gravity="bottom">
    <shape android:shape="rectangle">
        <gradient
            android:type="linear"
            android:angle="90"
            android:startColor="#000000"
            android:endColor="#FFFFFF"/>
    </shape>
</item>
</layer-list>

แต่ถ้าคุณไม่ทราบความสูงล่วงหน้า อีกวิธีหนึ่งคือสร้างมุมมองที่คุณกำหนดเอง เช่นนี้

public class MyView extends ImageView
{
    private Paint paint = null;

    public MyView(Context context, AttributeSet attrs)
    {
        super(context, attrs);
        paint = new Paint(Paint.ANTI_ALIAS_FLAG);
    }

    @Override
    protected void onDraw(Canvas canvas)
    {
        super.onDraw(canvas);
        paint.setShader(getLinearGradient(0, getHeight()));
        canvas.drawPaint(paint);
    }

    private LinearGradient getLinearGradient(float y0, float y1)
    {
        // colors :
        int[] listeColors = new int[3];
        listeColors[0] = 0xFF000000;
        listeColors[1] = 0xFFFFFFFF;
        listeColors[2] = 0xFFFFFFFF;

        // positions :
        float[] listPositions = new float[3];
        listPositions[0] = 0;
        listPositions[1] = 0.25F;
        listPositions[2] = 1;

        // gradient :
        return new LinearGradient(0, y0, 0, y0 + (y1 - y0) / 2, listeColors, listPositions, Shader.TileMode.MIRROR);
    }
}

หวังว่ามันจะช่วยได้