Android UIで角丸長方形を描画する方法は?


141

Android UIで角丸四角形を描画する必要があります。とで同じ角丸長方形を使用するTextViewEditText便利です。



少なくともあなたは写真を入れるべきです。誰かが同じ質問を探しているなら、それは理解しやすいからです。
森Himanshu Mori

回答:


215

レイアウトxmlで以下を実行します。

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

    <solid android:color="@android:color/holo_red_dark" />

    <corners android:radius="32dp" />

</shape>

を変更するandroid:radiusことで、コーナーの「半径」の量を変更できます。

<solid> ドローアブルの色を定義するために使用されます。

あなたは置き換える使用することができandroid:radiusandroid:bottomLeftRadiusandroid:bottomRightRadiusandroid:topLeftRadiusおよびandroid:topRightRadius各コーナーの半径を定義します。


彼らは勾配を要求しなかった。なぜこれが受け入れられた答えなのかわからない。
Jerry Destremps

他のほとんどの回答の数か月前にあったため、受け入れられたと思います。私は何年もAndroid開発を行っていないので、グラデーションを削除するために答えをどのように変更または更新できるかわかりませんが、以下のNoundla Sandeepの返信で使用されている「solid」タグはおそらくそうなると思いますトリック。
Andreass

125

これはまさにあなたが必要としていることだと思います。

ここでは、角丸長方形を作成するdrawable(xml)ファイル。 round_rect_shape.xml

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

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

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

</shape>

ここにレイアウトファイル:my_layout.xml

<LinearLayout
    android:id="@+id/linearLayout1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/round_rect_shape"
    android:orientation="vertical"
    android:padding="5dp" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Something text"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:textColor="#ff0000" />

    <EditText
        android:id="@+id/editText1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

        <requestFocus />
    </EditText>
</LinearLayout>

->上記のコードでは、LinearLayoutに背景があります(これが角丸四角形を作成するために配置する重要な役割です)。したがって、TextView、EditText ...などのビューをそのLinearLayoutに配置して、背景をすべての長方形として表示できます。


1
これを抽象化する方法はありますか?私android:background="@drawable/round_rect_shape"は自分のstyles.xmlで使用できるようにしたいが、別のプロパティを設定して異なる背景色を使用したい。各色に同じドローアブルを作成する以外にオプションはありますか?
karl

このようにして丸みを帯びた形状を作ることができます!
SabriMeviş18年

22

ではmonodroid、角丸長方形に対してこのようにして、これを親クラスとして保持しeditbox、他のレイアウト機能を追加できます。

 class CustomeView : TextView
    {
       public CustomeView (Context context, IAttributeSet ) : base (context, attrs)  
        {  
        }
       public CustomeView(Context context, IAttributeSet attrs, int defStyle) : base(context, attrs, defStyle)  
        {  
        }
       protected override void OnDraw(Android.Graphics.Canvas canvas)
       {
           base.OnDraw(canvas);
           Paint p = new Paint();
           p.Color = Color.White;
           canvas.DrawColor(Color.DarkOrange);

           Rect rect = new Rect(0,0,3,3);

           RectF rectF = new RectF(rect);


           canvas.DrawRoundRect( rectF, 1,1, p);



       }  
    }
}

4
<shape xmlns:android="http://schemas.android.com/apk/res/android"
  android:padding="10dp"
  android:shape="rectangle">
    <solid android:color="@color/colorAccent" /> 
    <corners
      android:bottomLeftRadius="500dp"
      android:bottomRightRadius="500dp"
      android:topLeftRadius="500dp"
      android:topRightRadius="500dp" />
</shape>

次に、この図形を使用する要素に追加するだけです。 android:background="@drawable/custom_round_ui_shape"

「custom_round_ui_shape」という名前のドローアブルで新しいXMLを作成します


1

丸い長方形にはCardViewを使用します。CardViewは、cardCornerRadius、cardBackgroundColor、cardElevationなどの機能を提供します。CardViewは、UIをカスタムラウンド四角形のドローアブルよりも適切にします。


1

ドローアブルフォルダーに新しいxml背景を定義するだけです。

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

この後、それをバックグラウンドで定義して、TextViewまたはEditTextに含めます。

<TextView
 android:id="@+id/textView"
 android:layout_width="0dp"
 android:layout_height="80dp"
 android:background="YOUR_FILE_HERE"
 Android:layout_weight="1"
 android:gravity="center"
 android:text="TEXT_HERE"
 android:textSize="40sp" />

0

ドローアブルを右クリックして、たとえばbutton_background.xmlという名前で新しいレイアウトxmlファイルを作成します。次に、次のコードをコピーして貼り付けます。必要に応じて変更できます。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners
android:radius="14dp" />
<solid android:color="@color/colorButton" />
<padding
android:bottom="0dp"
android:left="0dp"
android:right="0dp"
android:top="0dp" />
<size
android:width="120dp"
android:height="40dp" />
</shape>

これで使用できます。

<Button
android:background="@drawable/button_background"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>

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

回答について説明してください
実行可能
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.