Радиус градиента в процентах от размера экрана

Question

Я пытаюсь создать форму, вытягиваемую с радиальным фоном градиента, с радиусом, который будет приспосабливаться к размеру экрана (см. Соответствующий documentation).

Это мой код:

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

    <gradient 
     android:endColor="#000" 
     android:gradientRadius="50%p" 
     android:startColor="#5d2456" 
     android:type="radial" /> 
</shape> 

Но doens't похоже на работу. если я удалю «% p», он работает, но тогда радиус будет статичным, поэтому не корректируется размер экрана ... Любая идея, что не так?

Answer 1

Вы можете создать форму вытяжку во время выполнения похоже на этот пост https://stackoverflow.com/a/4943888/604504

Таким образом, можно вычислить процент после получения размера экрана.

Answer 2

Я в конечном итоге создать пользовательский вид со следующими перекрываться OnDraw метод:

@Override 
protected void onDraw(Canvas canvas) { 
    Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG); 

    int maxSize = Math.max(getHeight(), getWidth()); 
    RadialGradient gradient = new RadialGradient(
      getWidth()/2, 
      getHeight()/2, 
      maxSize, 
      new int[] {Color.RED, Color.BLACK}, 
      new float[] {0, 1}, 
      android.graphics.Shader.TileMode.CLAMP); 

    paint.setDither(true); 
    paint.setShader(gradient); 

    canvas.drawRect(0, 0, getWidth(), getHeight(), paint); 
} 

В макете просто добавьте Вид:

<yourpackage.GradientView 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" /> 

Конечно можно было бы создать атрибуты для Просмотр, например. цвет, процент, позволяющий настраивать через XML.

Answer 3

От того, что я тестировал, % действительно работает, но не так, как вы ожидали.
Прежде всего

android:gradientRadius="50" 

, кажется, принимает значение в качестве пикселей 50px

android:gradientRadius="50%" 

преобразуется, как если бы 50% = 0,5 рх, попробуйте

android:gradientRadius="5000%" 

и вы увидите Радиус 50px.
Использование %p имеет аналогичный результат. Очевидно, это то, что, надеюсь, будет изменено в будущем, потому что оно не имеет большого смысла, как есть. Обычно ресурсы XML ShapeDrawable адаптируют свой размер к некоторому внешнему контейнеру, в этом случае gradientRadius устанавливает размер независимо от контейнера.

Answer 4

Обратите внимание, что процент градиента Radius действительно работает в Lollipop. Но если вам нужно поддерживать pre-Lollipop, я расширил ответ @ marnish, добавив атрибуты XML. Мой gradientRadius определяется как процент от ширины родительского вида в:

public class RadialGradientView extends View { 
    private final int endColor; 
    private final int startColor; 
    private final float gradientRadiusWidthPercent; 
    private final float centerY; 
    private final float centerX; 
    private Paint paint; 

    public RadialGradientView(Context context, AttributeSet attrs) { 
     super(context, attrs); 

     TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.RadialGradientView, 0, 0); 

     startColor = a.getColor(R.styleable.RadialGradientView_startColor, Color.RED); 
     endColor = a.getColor(R.styleable.RadialGradientView_endColor, Color.BLACK); 
     gradientRadiusWidthPercent = a.getFloat(R.styleable.RadialGradientView_gradientRadiusWidthPercent, 1); 
     centerX = a.getFloat(R.styleable.RadialGradientView_centerX, .5f); 
     centerY = a.getFloat(R.styleable.RadialGradientView_centerY, .5f); 

     a.recycle(); 
    } 

    @Override 
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { 
     super.onMeasure(widthMeasureSpec, heightMeasureSpec); 
     int parentWidth = MeasureSpec.getSize(widthMeasureSpec); 
     int parentHeight = MeasureSpec.getSize(heightMeasureSpec); 

     paint = new Paint(Paint.ANTI_ALIAS_FLAG); 
     RadialGradient gradient = new RadialGradient(
       parentWidth*centerX, 
       parentHeight*centerY, 
       parentWidth*gradientRadiusWidthPercent, 
       new int[] {startColor, endColor}, 
       null, 
       android.graphics.Shader.TileMode.CLAMP); 

     paint.setDither(true); 
     paint.setShader(gradient); 

    } 

    @Override 
    protected void onDraw(Canvas canvas) { 
     canvas.drawRect(0, 0, getWidth(), getHeight(), paint); 
    } 

} 

В attrs.xml:

<declare-styleable name="RadialGradientView"> 
    <attr name="startColor" format="color|reference"/> 
    <attr name="endColor" format="color|reference"/> 
    <attr name="gradientRadiusWidthPercent" format="float"/> 
    <attr name="centerX" format="float"/> 
    <attr name="centerY" format="float"/> 
</declare-styleable> 

К сожалению, вы не можете создать XML вытяжке из пользовательского класса, так что вы можете» t установите его как андроид вида: фон. Обходной путь заключается в использовании FrameLayout для выравнивания его в качестве фона.

<FrameLayout 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    android:layout_width="match_parent" 
    android:layout_height="100dp"> 

    <com.RadialGradientView 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     app:centerX=".3" 
     app:centerY=".5" 
     app:endColor="#0f0" 
     app:startColor="#f00" 
     app:gradientRadiusWidthPercent=".5" 
     /> 
    <TextView 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:gravity="center" 
     android:text="What's up world?"/> 
</FrameLayout>