Как создать светоизлучающий фон в android? - PullRequest
0 голосов
/ 22 марта 2020

Я работаю над приложением, которое должно иметь фон, подобный этому:

enter image description here

Но я действительно не мог найти учебник, как это реализовать вид дизайна. Возможно, я использовал неправильные ключевые слова в своем поиске в Google, так как большинство из них приведут меня к фоновым учебникам Instagram.

Может ли кто-нибудь помочь мне в этом или сказать, с чего начать?

Ответы [ 2 ]

1 голос
/ 22 марта 2020

В файле xml, предназначенном для макета вашего приложения, просто установите изображение в качестве фона.

0 голосов
/ 23 марта 2020

После долгих поисков, я действительно не смог найти ничего на inte rnet. Поэтому я попытался нарисовать это с нуля. Это не идеально, поэтому я постараюсь сделать это лучше в будущем. Вам нужно сделать тригонометрию c по математике, чтобы нарисовать несколько секторов. Затем используйте градиент, чтобы создать эффект затухания. Вот мой код:

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.LinearGradient;
import android.graphics.Paint;
import android.graphics.Path;
import android.util.AttributeSet;
import android.view.View;

import androidx.annotation.Nullable;

public class SpotLightsView extends View {
    private static final String TAG = SpotLightsView.class.getSimpleName();
    private Paint mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);

    private double angleDegree = 10;
    private double angleRadian = Math.toRadians(angleDegree);
    private final double dTheta = angleRadian;
    private double WIDTH = 100;
    private double HEIGHT = 100;
    private double RADIUS = (1.4142*WIDTH/2); // r = a*sqrt(2);
    private double cx = WIDTH/2;
    private double cy = HEIGHT/2;

    public SpotLightsView(Context context) {
        super(context);
    }

    public SpotLightsView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
    }

    public SpotLightsView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        WIDTH = canvas.getWidth();
        HEIGHT = canvas.getHeight();

        cx = WIDTH/2;
        cy = HEIGHT/2;

        RADIUS = cy*1.4142;   // r = a*sqrt(2);
        drawSpotLights(canvas);
    }

    private void drawSpotLights(Canvas canvas) {
        double theta = 0;
        for(int i=0; i<360/angleDegree; i++){
            drawSpotLightOn(canvas, theta);
            theta+=dTheta;
        }
    }

    private void drawSpotLightOn(Canvas canvas, double theta){
        double x1, y1, x2, y2, x3, y3, sinTheta, cosTheta;
        double r = 50;
        sinTheta = Math.sin(theta);
        cosTheta = Math.cos(theta);

        x1 = cx + RADIUS*cosTheta;
        y1 = cy + RADIUS*sinTheta;

        x2 = x1 + r*sinTheta;
        y2 = y1 - r*cosTheta;

        x3 = x1 - r*sinTheta;
        y3 = y1 + r*cosTheta;

        LinearGradient linearGradient = new LinearGradient((float)cx,(float)cy,(float)x1,(float)y1, 0x88ffffff,
                0x00000000, android.graphics.Shader.TileMode.CLAMP);

        mPaint.setDither(true);
        mPaint.setShader(linearGradient);
        mPaint.setStyle(Paint.Style.FILL);

        Path path = new Path();
        path.moveTo((float)cx, (float)cy);
        path.lineTo((float)x3, (float)y3);
        path.quadTo((float)x1, (float)y1, (float)x2, (float)y2);
        path.lineTo((float)cx, (float)cy);

        canvas.drawPath(path, mPaint);
    }
}

А затем используйте его так в своем файле some_layout.xml:

<com.applications.customviews.demo.SpotLightsView
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>

Вывод выглядит так: enter image description here

краткое объяснение

Измените private double angleDegree = 10;, чтобы указать, на сколько градусов вы хотите прожектор. Затем мы увеличиваем углы в a для l oop и вызываем метод private void drawSpotLightOn(Canvas canvas, double theta). На 2-й строке есть значение double r=50. Он сообщает коду, насколько широким должен быть ar c в конечных точках. Измените эти 2 и посмотрите результаты, чтобы получить желаемый результат. Чтобы сделать эффект затухания, я использовал LinearGradient.

Остальная часть кода проста. Вы можете найти их в любом учебнике android Paint, CustomView.

...