Winkelattribut im Android-Gradienten

73

Ich gehe durch Testbeispiel. Wenn für einen Bildhintergrund ein Farbverlauf verwendet wird, sieht der Code folgendermaßen aus

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


  <shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:startColor="#ff0000"
        android:centerColor="#00ff00"
        android:endColor="#0000ff"
        android:angle="180"/>
    <corners android:radius="5dp" />
   </shape>

In der obigen XML habe ich kein angleAttribut erhalten. aber wenn ich den Wert von angleleicht ändere , neigt sich das Muster. Kann mir jemand erklären, wie genau es funktioniert?

android android-layout gradient android-shape Sharanabasu Angadi
quelle

Antworten:

164

Der Gradient repräsentiert im Wesentlichen die Variation des Raums (in einer Richtung) einer beliebigen Größe. Mit Farbe repräsentiert es die Variation der Farbintensität in einer Richtung, die durch den Winkel dargestellt wird. Hier sind einige Diagramme, die dieses Konzept darstellen:
Geben Sie hier die Bildbeschreibung ein

Hier zeigt die Abbildung die Farbabweichung in horizontaler Richtung (Winkel ist 0 eingestellt).
XML-Code:

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

Geben Sie hier die Bildbeschreibung ein

Hier zeigt die Abbildung die Farbabweichung in vertikaler Richtung (Winkel ist auf 90 eingestellt).
XML-Code:

<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
    android:startColor="#000000"
    android:angle="90"/>
 </shape>

Sie können auch verschiedene Farben als Start-, Mittel- und Endfarben verwenden. Der angehängte Code enthält alle diese Elemente.

Karn
quelle
29
Vielen Dank für die Antwort Karn, aber eine Sache, die ich gefunden habe, dass ich nur ein Vielfaches von 45 in
Winkelattribut
Es gibt viele Möglichkeiten, wie ein Gradient ausgedrückt werden kann. Hier verwenden wir tatsächlich einen linearen Gradienten (Steigung entlang einer geraden Steigung m = (y-y1) / (x-x1)). Wenn es ein Vielfaches von 45 ist, ist die Variation in x und y gleich. Kann aus diesem Grund sein. Ich weiß nicht viel
Karn
1
Die Starterfarbe ist schwarz (# 000000), da die Pfeile in die entgegengesetzte Richtung gehen, nicht wahr?
lm2a
7
@karn bin wirklich verwirrt mit deiner Antwort hier. Der Start erfolgt von links nach rechts gegen den Uhrzeigersinn. In Bild 1 erwarte ich, dass sich die Pfeile so bewegen -> -> -> ->. Ich bin auch verwirrt mit der Art und Weise, wie android:startColor="#000000"funktioniert. Wenn wir einen Startwinkel von 90 setzen, bedeutet dies, dass die Farbe von Winkel 90-270 schwarz ist? Was ist mit dem verbleibenden Winkel (0-90)?
Edijae Crusar
1
@gikarasojo kinene Die Antwort ist richtig. Aus trigonometrischer Sicht beginnt der Vektor, der einen Winkel beschreibt, vom Ursprung (Beginn der Koordinaten). Der Winkel wird gegen den Uhrzeigersinn gemessen. Wenn der Winkel also 90 (pi / 2) beträgt, sieht der ort-Vektor nach oben aus. Daher sind die Pfeile in der obigen Antwort falsch ausgerichtet. Das Gleiche gilt für das erste Bild.
CodeToLife
13

Gibt eine Verlaufsfarbe für die Form an. Attribute:

android: angle Integer. Der Winkel für den Gradienten in Grad. 0 ist von links nach rechts, 90 ist von unten nach oben. Es muss ein Vielfaches von 45 sein. Die Standardeinstellung ist 0.

Es scheint, dass die Beschreibung in der Dokumentation Karns Antwort widerspricht?

Weitere Details finden Sie in der Dokumentation

Passantwhu
quelle
3
Sie hatten mich beimust be a multiple of 45
Pierre
Ja, gibt es überhaupt eine Möglichkeit, diese 45-Grad-Winkelregel zu umgehen, ohne einen SWEEP_GRADIENT zu verwenden?
Mr.Drew
@ Mr.Drew Mit den ersten 4 Parametern von LinearGradient können Sie verschiedene Winkel erstellen, wie im Link beschrieben . Verwenden Sie linearGradient.setLocalMartix()diese Option, um sie anschließend auf die gewünschte Größe zu skalieren.
Julian Fisch
11

Möglicherweise möchten Sie einen diagonalen Verlauf aus Code erstellen. Es ist viel einfacher und Sie haben von dort aus viele Optionen offen. Dieser Ausschnitt hat mir geholfen

public void SetGradient(View view) {
        GradientDrawable gd = new GradientDrawable(
                GradientDrawable.Orientation.TL_BR,
                new int[]{0xFF141a24, 0xFF293f49, 0xFF72554c});
        view.setBackground(gd);
    }

verfügbare Anweisungen von der GradientDrawable-Klasse

/*public enum Orientation {
        *//** draw the gradient from the top to the bottom *//*
        TOP_BOTTOM,
        *//** draw the gradient from the top-right to the bottom-left *//*
        TR_BL,
        *//** draw the gradient from the right to the left *//*
        RIGHT_LEFT,
        *//** draw the gradient from the bottom-right to the top-left *//*
        BR_TL,
        *//** draw the gradient from the bottom to the top *//*
        BOTTOM_TOP,
        *//** draw the gradient from the bottom-left to the top-right *//*
        BL_TR,
        *//** draw the gradient from the left to the right *//*
        LEFT_RIGHT,
        *//** draw the gradient from the top-left to the bottom-right *//*
        TL_BR,
    }*/

und Sie rufen die Methode von onCreate oder onCreateView in Fragment auf und übergeben die übergeordnete Ansicht (in meinem Fall).

 @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.dialog_view_parent, container);           
        ...

        SetGradient(view);

        return view;
    }
Alex
quelle