2013-08-06 3 views
14

Ich möchte die linke und rechte Seite (nicht die Ecken) des Rechtecks ​​gekrümmt sein. Oder sagen die oberen und unteren Seiten einer ovalen Form gerade.Wie kann ich ein Rechteck mit zwei gekrümmten Seiten in XML-Zeichen erstellen?

Wie kann ich so etwas erreichen?

enter image description here

+0

Ist das feste Höhe und Breite? –

+0

@TedHopp nicht unbedingt –

+0

Ich wäre versucht, mit einer Ebenenliste zu experimentieren, die drei Elemente hat: zwei Kreise links und rechts und ein Rechteck in der Mitte. Ich bin mir nicht sicher, wie ich es richtig skalieren kann. Lassen Sie mich auch die frühere Frage umformulieren: Ist das eine _bekannte_ Höhe? (Es könnte bekannt sein, aber nicht behoben, wenn beispielsweise die Höhe an eine Ressource gebunden war, die mit der Gerätekonfiguration variiert.) –

Antwort

0

Versuchen den Grenzradius zu der Hälfte der Höhe einstellen. In CSS, border-radius:50% erstellt eine Ellipse, also würde ich vermuten, dass, wenn es nur 50% der Höhe ist, Sie so etwas bekommen würden.

0

Die einfache Methode ist die Verwendung eines 9-patch image (ein PNG-Bild, das in image.9.png endet) und einen zusätzlichen Pixelrahmen, der definiert, wie das Bild skaliert wird.

Eine andere Möglichkeit besteht darin, eine Shape-Datei im res/drawable-Ordner zu erstellen.

<?xml version="1.0" encoding="utf-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval"> 
    <solid android:color="#ff0000"/> 
</shape> 

weitere Informationen über Formen here

+0

Wie werden Sie ein 9-Patch definieren, das sich vertikal so erstreckt, dass die abgerundeten Enden erhalten bleiben? Ich glaube auch nicht, dass ein Oval eine flache Ober- und Unterseite haben wird. Es wird eine Ellipse mit großen und kleinen Durchmessern sein, die nur die Box füllen, was OP ausdrücklich gesagt hat, war unerwünscht. –

1

Ich denke, einer der besten Idee ist, erstellen Form xml Fiel verwenden.

erstellen Drawable-> ovalshape.xml

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

    <solid android:color="#ff0000" /> 

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

    <padding 
     android:bottom="5dip" 
     android:left="10dip" 
     android:right="10dip" 
     android:top="5dip" /> 

</shape> 

Jetzt können Sie verwendet, um dieses xml instead of image easily.Itll denke, das für you and new SO user hilfreich.

+0

Dies kurvt nur die Ecken und nicht die gesamte linke und rechte Kante –

9

Versuchen Sie dies auf Textview, für einzelne Zeichen wird es einen Kreis zeigen, für mehrere Ziffern wird es automatisch in die Form erweitern Sie oben gezeigt, aber wenn man genau über Form wollen nur größere Polster geben auf der linken und rechten

<shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="rectangle" > 

    <padding 
     android:top="3dp" 
     android:left="8dp" 
     android:right="8dp" 
     android:bottom="3dp"/> 

    <solid android:color="#E6121A" /> 

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

</shape> 
5

Ich komme ein bisschen spät, und die Antwort muss nicht vollständig sein (ich denke nicht flexible Höhen), aber zumindest, wenn wir im Voraus wissen, die Höhe in dp ist der Trick, den Radius als die Hälfte der Höhe des Knopfes. Zum Beispiel, wenn die Höhe 48dp wäre, könnten wir so etwas wie:

<?xml version="1.0" encoding="utf-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> 
    <solid android:color="#ff0000"/> 
    <corners android:radius="24dp" /> 
</shape> 
+0

Beste Antwort. Wenn Sie eine große Höhe haben, müssen Sie nur den Radius vergrößern. – IlyaEremin

0

Es scheint, dass das Maximum in der Form erlaubt Radius die Hälfte der Gesamthöhe ist in der Form unten, so dass Sie es verwenden können, haben eine Form mit flexibler Höhe, die das Wunschverhältnis hält:

<?xml version="1.0" encoding="utf-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
     android:shape="rectangle"> 
    <solid android:color="#ffffff" /> 
    <size android:height="@dimen/height" /> 
    <corners 
     android:radius="@dimen/height" 
     /> 
</shape> 
0

Definieren Sie die Höhe und machen Sie den Radius die Hälfte der Höhe.

0

Es hat gut funktioniert!

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

    <solid 
     android:color="@color/color_red"/> 
    <corners 
     android:radius="10000dp" /> 
</shape> 
0

Sie können den Radius vergrößern Hintergrund der ziehbar zu Textview ist auf 200dp und setzen

<solid android:color="#E6121A" /> 

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

0

Um die Seiten immer bleiben kurvige mit jeder Höhe zu machen, habe ich am Ende up muss die Form programmgesteuert wie folgt erstellen (Code in Kotlin)

class CurvedSidesShape : RectShape() { 
    override fun draw(canvas: Canvas, paint: Paint?) { 
     var path = Path() 
     path.addRoundRect(rect(), rect().height(), rect().height(), Path.Direction.CW) 
     canvas.drawPath(path, paint) 
    } 
} 

und hier ist, wie ich die Form als Schaltfläche Hintergrund verwenden

class CurvedSidesButton : Button { 
    private var mHeight: Int = 0 

    constructor(context: Context?) : super(context) { 
     init(context, null, 0, 0) 
    } 

    . 
    . 
    . 

    override fun draw(canvas: Canvas?) { 
     setCurvedSidesBackground(height) 
     super.draw(canvas) 
    } 

    private fun setCurvedSidesBackground(height: Int) { 
     if (height != mHeight) { 
      val curvedSidesShape = ShapeDrawable(CurvedSidesShape()) 
      curvedSidesShape.intrinsicWidth = width 
      curvedSidesShape.intrinsicHeight = height 
      curvedSidesShape.paint.color = Color.RED 
      background = curvedSidesShape 
      mHeight = height 
     } 
    } 
} 
Verwandte Themen