2016-07-11 6 views
1

私のアプリで右または左を指して、この形のボタンを使用したいと思います。ボタンを右または左に向けるにはどうすればいいですか?

ボタンの2つの角は丸められ、もう一方の側面は三角形です。

これは、バックグラウンドとしてpngイメージを使用してこれをやや実現することができましたが、私はxmlでそれを行う方法を知りたいと思います。

enter image description here

+0

描画可能な図形を作成し、背景として使用できます。または単にGitHubでライブラリを探す –

答えて

1

わからないが、あなたは常に増加する可能性がのとbottomLeftまたは半角のポインティングエンドを得るには最大から最大。 これは私があなたがレイヤーリストhereについての詳細を読み、レイヤーリストを使用してそのような形状を作ることができ、それを

<?xml version="1.0" encoding="utf-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
android:shape="rectangle" > 
<corners 
android:topLeftRadius="100dp" 
android:topRightRadius="31dp" 
android:bottomLeftRadius="100dp" 
android:bottomRightRadius="31dp" 
/> 
<gradient 
android:angle="45" 
android:centerX="35%" 
android:centerColor="#7995A8" 
android:startColor="#E8E8E8" 
android:endColor="#000000" 
android:type="linear" 
/> 
<size 
android:width="172dp" 
android:height="60dp" 
/> 
<stroke 
android:width="3dp" 
android:color="#878787" 
/> 
</shape> 

This is how it looks..

+0

私が探していたものではありません。しかし、今のところそれで動作する可能性があります。 –

+0

なぜパッディングを使用しましたか? – sushildlh

1

通常の練習は、複雑な形状のために画像を使用することです。あなたは、アプリケーションのサイズを制御しようとしている場合は、一方向を指す画像を1つ使用し、drawable xmlでそれを逆向きに回転させることができます。

しかし、これをxmlで実際に実装したい場合は、左下の三角形があります。あなたの要件に合わせてこれを改善することができます。

右向き、

<?xml version="1.0" encoding="utf-8"?> 
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"> 
<item> 
    <rotate 
     android:fromDegrees="45" 
     android:pivotX="0%" 
     android:pivotY="0%" 
     android:toDegrees="0"> 
     <shape android:shape="rectangle"> 

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

Right pointing sample image

左向き、それを行うための正確な方法について

<?xml version="1.0" encoding="utf-8"?> 
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"> 
<item> 
    <rotate 
     android:fromDegrees="-45" 
     android:pivotX="100%" 
     android:pivotY="0%" 
     android:toDegrees="0"> 
     <shape android:shape="rectangle"> 

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

Left point sample image

0

を実行しようとしました方法です。これはあなたに所望の出力を与える必要があります。

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

    <item> 
     <shape android:shape="rectangle"> 
      <size 
       android:width="100dp" 
       android:height="40dp" /> 
      <solid android:color="#5e88b8" /> 
      <corners android:topRightRadius="3dp" android:bottomRightRadius="3dp" android:radius="0dp"/> 
     </shape> 
    </item> 

    <item 
     android:top="-40dp" 
     android:bottom="65dp" 
     android:left="-30dp"> 
     <rotate 
      android:fromDegrees="-45"> 
      <shape android:shape="rectangle"> 
       <solid android:color="#ffffff" /> 
      </shape> 
     </rotate> 
    </item> 

    <item 
     android:top="65dp" 
     android:bottom="-40dp" 
     android:left="-30dp"> 
     <rotate 
      android:fromDegrees="45"> 
      <shape android:shape="rectangle"> 
       <solid android:color="#ffffff" /> 
      </shape> 
     </rotate> 
    </item> 

</layer-list> 

し、ボタンの背景として設定:

<Button 
    android:id="@+id/button" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:background="@drawable/button_background" 
    android:text="button" /> 

OUTPUT:

Check here

UPDATE

コーナーの半径を変更して、目的のコーナーの外観にします。

関連する問題