Android - zeichnbar mit abgerundeten Ecken nur oben


151

Ich hatte dieses Zeichen, um ein abgerundetes Rechteck als Hintergrund zu haben:

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/white" />
    <stroke android:width="1dp" android:color="@color/light_gray" />
    <padding android:left="10dp" android:top="10dp" android:right="10dp" android:bottom="10dp" />
    <corners android:radius="6dp" />
</shape>

Dies funktioniert erwartungsgemäß einwandfrei.

Jetzt möchte ich dies so ändern, dass es nur die oberen Ecken abrundet, also ändere ich es wie folgt:

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/white" />
    <stroke android:width="1dp" android:color="@color/light_gray" />
    <padding android:left="10dp" android:top="10dp" android:right="10dp" android:bottom="10dp" />
    <corners android:topLeftRadius="6dp" android:topRightRadius="6dp"
             android:bottomLeftRadius="0dp" android:bottomRightRadius="0dp"/>
</shape>

Aber jetzt ist keine der Ecken abgerundet und ich bekomme ein einfaches Rechteck. Was fehlt mir hier?


Dies ist wirklich keine Lösung, aber ich glaube, ich hatte einmal ein ähnliches Problem. Das Erhöhen des Hubs auf 2 Pixel hat geholfen, aber Sie wissen, das ist keine Lösung.
Code Poet

Hier ist ein Problem mit Formecken
Knickedi

Antworten:


303

Versuchen Sie, diese Werte anzugeben:

 <corners android:topLeftRadius="6dp" android:topRightRadius="6dp"
         android:bottomLeftRadius="0.1dp" android:bottomRightRadius="0.1dp"/>

Beachten Sie, dass ich zu geändert 0dphabe 0.1dp.

BEARBEITEN: Siehe Aleks G Kommentar unten für eine sauberere Version


131
Als ich dies weiter untersuchte, fand ich eine noch bessere Lösung: <corners android:radius="1dp" android:topLeftRadius="6dp" android:topRightRadius="6dp" android:bottomLeftRadius="0dp" android:bottomRightRadius="0dp"/>- Dies erzeugt perfekt quadratische untere Ecken ohne einen Hauch von Rundung. Ihre Lösung funktioniert jedoch ziemlich gut.
Aleks G

Wie geht das im Code mit einer Bitmap? Und wie fügt man einen Umriss (AKA-Strich) hinzu?
Android-Entwickler

@Aleks G Ich sehe nicht, dass es notwendig ist anzugebenandroid:radius="1dp"
hmac

@hmac ist es notwendig. Lesen Sie die Dokumentation, es macht es klar.
Aleks G

@AleksG Ja, die Dokumentation ist falsch. Beim Testen auf Samsung 10, Android 9: "Jede Ecke muss (anfangs) einen Eckenradius von mehr als 1 haben, sonst werden keine Ecken abgerundet. Wenn bestimmte Ecken nicht abgerundet werden sollen, a Umgehung ist die Verwendung von android: radius, um einen Standard-Eckenradius größer als 1 festzulegen, aber dann zu überschreiben "- nicht wahr, ich gebe unten rechts, oben rechts, oben links als Null und unten links + ve und unten links ist korrekt gekrümmt an
hmac

14

Versuchen Sie so etwas zu tun:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:bottom="-20dp" android:left="-20dp">
        <shape android:shape="rectangle">
            <solid android:color="@color/white" />

            <corners android:radius="20dp" />
        </shape>
    </item>
</layer-list>

Es scheint nicht geeignet zu sein, einen anderen Eckenradius des Rechtecks ​​festzulegen. Sie können diesen Hack also verwenden.


Siehe meine eigene Antwort - es ist durchaus akzeptabel, unterschiedliche Radien für unterschiedliche Ecken zu haben.
Aleks G

Ich habe diesen Ansatz ausprobiert, es ist nicht akzeptabel, ide sagt, dass es nicht angemessen ist, einen anderen Rsdius zu haben, und ignoriert ihn
busylee

11

In meinem Fall unten Code

    <?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:top="10dp" android:bottom="-10dp"
        >

        <shape android:shape="rectangle">
            <solid android:color="@color/maincolor" />

            <corners
                android:topLeftRadius="10dp"
                android:topRightRadius="10dp"
                android:bottomLeftRadius="0dp"
                android:bottomRightRadius="0dp"
            />
        </shape>

    </item>
    </layer-list>

1
Die oberen und unteren Eigenschaften des Elements werden nur benötigt, wenn Sie eine Auffüllung in der Ansicht wünschen. Andernfalls funktioniert dies.
RominaV

9

Aufbauend auf der Antwort von Busylee können Sie auf diese Weise eine erstellendrawable , die nur eine nicht abgerundete Ecke hat (in diesem Beispiel oben links):

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="@color/white" />
            <!-- A numeric value is specified in "radius" for demonstrative purposes only,
                  it should be @dimen/val_name -->
            <corners android:radius="10dp" />
        </shape>
    </item>
    <!-- To keep the TOP-LEFT corner UNROUNDED set both OPPOSITE offsets (bottom+right): -->
    <item
        android:bottom="10dp"
        android:right="10dp">
        <shape android:shape="rectangle">
            <solid android:color="@color/white" />
        </shape>
    </item>
</layer-list>

Bitte beachten Sie, dass die oben drawableist nicht korrekt im Android Studio - Vorschau angezeigt (2.0.0p7). Um es trotzdem in der Vorschau anzuzeigen, erstellen Sie eine andere Ansicht und verwenden Sie diese als android:background="@drawable/...".


6
@AleksG - Natürlich. Es ist heute so relevant wie damals (als Beweis - ich brauchte so etwas). Sie müssen wissen, dass im Laufe der Jahre einige Methoden veraltet sind und möglicherweise durch modernere ersetzt werden müssen. Wie bereits erwähnt, beschwert sich die IDE bei der Definition unterschiedlicher Eckradien , was bei der vorliegenden Methode nicht der Fall ist. Da diese Frage mein erster Treffer bei Google (iirc) war, war es für mich außerdem sinnvoll, sie zu aktualisieren. Wie auch immer, ich bin sicher, SO macht es nichts aus, noch ein paar KB Code zu haben ... :)
Dev-iL

2

Ich habe Ihren Code ausprobiert und einen oberen abgerundeten Eckknopf erhalten. Ich gab die Farben @ffffffund den Strich, den ich gab #C0C0C0.

Versuchen

  1. Android geben: bottomLeftRadius = "0.1dp" anstelle von 0. wenn es nicht funktioniert
  2. Überprüfen Sie, was gezeichnet werden kann und welche Auflösung der Emulator hat. Ich habe einen zeichnbaren Ordner unter res erstellt und ihn verwendet. (hdpi, mdpi ldpi) der Ordner, in dem Sie diese XML haben. Das ist meine Ausgabe.

Geben Sie hier die Bildbeschreibung ein


Welche Android-Version ist das? Meine App muss auf 1.6 laufen - und der Emulator 1.6 hatte das Problem.
Aleks G

1

Möglicherweise müssen Sie diese https://developer.android.com/guide/topics/resources/drawable-resource.html#Shape lesen

und unten gibt es einen Hinweis.

Hinweis Jede Ecke muss (anfangs) einen Eckenradius von mehr als 1 haben, sonst sind keine Ecken abgerundet. Wenn Sie möchten, dass bestimmte Ecken nicht abgerundet werden, verwenden Sie android: radius, um einen Standard-Eckenradius größer als 1 festzulegen. Überschreiben Sie dann jede einzelne Ecke mit den gewünschten Werten und geben Sie Null an ("0dp"). ) wo Sie keine abgerundeten Ecken wollen.


1

Erstellen Sie roung_top_corners.xml auf drawable und kopieren Sie den folgenden Code

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<corners
    android:topLeftRadius="22dp"
    android:topRightRadius="22dp"
    android:bottomLeftRadius="0dp"
    android:bottomRightRadius="0dp"
    />
<gradient
    android:angle="180"
    android:startColor="#1d2b32"
    android:centerColor="#465059"
    android:endColor="#687079"
    android:type="linear" />
<padding
    android:left="0dp"
    android:top="0dp"
    android:right="0dp"
    android:bottom="0dp"
    />
<size
    android:width="270dp"
    android:height="60dp"
    /></shape>
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.