半楕円形を作成する方法（線を曲げる）

Question

私はNavigationViewフッターのカスタムシェイプを背景として作成しようとしています。それはとても清潔ではありません。これは私がやっていることです：

そして、これは私が必要なものである：

コード：

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

    android:gravity="bottom|center_horizontal" 
    android:top="50dp"> 
    <!--android:top="-40dp"--> 

    <shape android:shape="oval"> 
     <solid android:color="#ffffffff" /> 
    </shape> 
</item> 
<item 

    android:bottom="30dp" 
    android:gravity="bottom"> 
    <shape android:shape="rectangle"> 
     <solid android:color="#ffffffff" /> 
    </shape> 
</item> 

は、あなたが私を助けることができます、お願いします？

Answer 1

＃。

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

    <!-- Container GRAY rectangle --> 
    <item> 
     <shape android:shape="rectangle"> 

      <size 
       android:width="250dp" 
       android:height="100dp" /> 

      <solid 
       android:color="@android:color/darker_gray" /> 
     </shape> 
    </item> 

    <!-- Top WHITE oval shape --> 
    <item 
     android:left="-25dp" 
     android:right="-25dp" 
     android:top="-50dp" 
     android:bottom="50dp"> 

     <shape android:shape="oval"> 

      <solid 
       android:color="@android:color/white" /> 
     </shape> 
    </item> 
</layer-list> 

PREVIEW：

＃カスタム以下のようにdrawable XMLを更新します。以下のように自分のレイアウトでこのカスタムdrawableを使用していない：は

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:orientation="vertical" 
    android:gravity="center_horizontal" 
    android:background="@android:color/black" 
    android:padding="16dp"> 

    <!-- Custom Footer --> 
    <LinearLayout 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:background="@drawable/custom_shape"> 

    </LinearLayout> 
</LinearLayout> 

OUTPUT：これは〜するのに役立ちます

ホープ

Answer 2

これを達成するために、私はベクトル描画可能オブジェクトを使用します。

<vector 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:width="24dp" 
    android:height="8dp" 
    android:viewportWidth="24.0" 
    android:viewportHeight="24.0"> 

    <path 
     android:pathData="M0 -5.4a13 7 0 1 0 24 0V24H0z" 
     android:fillColor="#FF000000"/> 

</vector> 

ここpathData属性は比較的簡単です：

• は右下隅に右上隅に左上隅に
• ラインを
• アークをカーソルを移動します
• 左下隅への線
• パスを閉じる

「a」の後の最初の2つの数字を使用して、カーブの外観を調整することができます。 a13 7）;これらはx半径とy半径です。 xの半径が大きいほど全体的にフラットになり、yの半径が大きくなると、曲線は正方形にさらに遠ざかります。

パスは、形状の半分よりも大きいx-半径を使用しているため、y軸の値が負の値から開始されるため、円弧はヒットするように調整する必要があります（0,0 ）が最初に表示されます。したがって、x-radiusを変更する場合は、パスの原点（最初の "M"の後の数字、つまりM0 -5.4）も変更する必要があります。