2017-12-27 891 views
0

我需要用下面的形状,我想在一个Android应用程序使用一个按钮的帮助: enter image description here特殊按钮形状(稍微旋转箭头)

我试图创建一个自定义XML的背景,并用它来一个按钮,但这不是我所希望的。

什么是最优雅的方式来实现这个? 我在想像这样的事情。

enter image description here

+1

看看这个:: https://stackoverflow.com/questions/26143905/android-make-an-arrow-shape-with-xml - 你也许能够给整个箭头旋转你需要。您也可以应用渐变来获取您希望实现的着色着色。 – Barns

+0

你能发布你的布局xml文件吗? – petey

+0

@Barns,感谢您的输入。在发布之前,我已经查看了该线程,但是解决方案(在两个其他矩形的帮助下切割矩形)在我的情况下没有用处,因为我将有背景作为背景,而不仅仅是简单的颜色。 –

回答

0

有很多方法可以获得您的目标。在这里我的解决方案,也许不是最好的,但它是你可以从开始:

主要布局

<?xml version="1.0" encoding="utf-8"?> 
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"> 

    <LinearLayout 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:layout_marginLeft="40dp" 
     android:layout_marginRight="40dp" 
     android:layout_marginTop="10dp" 
     android:layout_marginBottom="10dp" 
     android:background="@android:color/holo_orange_light"> 

    </LinearLayout> 

    <LinearLayout 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:orientation="vertical"> 

     <include layout="@layout/arrow_button_layout" 
      android:layout_width="match_parent" 
      android:layout_height="40dp" 
      android:layout_marginTop="40dp" /> 

     <include layout="@layout/arrow_button_layout" 
      android:layout_width="match_parent" 
      android:layout_height="40dp" 
      android:layout_marginTop="40dp" /> 

     <include layout="@layout/arrow_button_layout" 
      android:layout_width="match_parent" 
      android:layout_height="40dp" 
      android:layout_marginTop="40dp" /> 

    </LinearLayout> 

</FrameLayout> 

arrow_button_layout.xml

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout 
    android:layout_width="match_parent" 
    android:layout_height="40dp" 
    android:rotation="-30" 
    android:orientation="horizontal" 
    xmlns:android="http://schemas.android.com/apk/res/android"> 

    <FrameLayout 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_toRightOf="@+id/button_tv" 
     android:layout_centerVertical="true" 
     android:layout_marginLeft="-22dp" 
     android:rotation="-45"> 

     <View 
      android:layout_width="35dp" 
      android:layout_height="36dp" 
      android:background="@drawable/right"/> 
     <View 
      android:layout_width="33dp" 
      android:layout_height="36dp" 
      android:background="@drawable/bottom"/> 
    </FrameLayout> 

    <FrameLayout 
     android:layout_width="90dp" 
     android:layout_height="match_parent" 
     android:orientation="vertical" 
     android:id="@id/button_tv"> 

     <TextView 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:paddingLeft="20dp" 
      android:paddingRight="20dp" 
      android:textColor="@android:color/white" 
      android:background="@android:color/holo_red_dark" 
      android:text="Button" 
      android:layout_centerVertical="true" 
      android:gravity="center" 
      android:layout_gravity="center_vertical"/> 

     <View 
      android:layout_width="match_parent" 
      android:layout_height="2dp" 
      android:layout_gravity="top" 
      android:background="@android:color/black"/> 

     <View 
      android:layout_width="match_parent" 
      android:layout_height="2dp" 
      android:layout_gravity="bottom" 
      android:background="@android:color/black"/> 

     <View 
      android:layout_width="2dp" 
      android:layout_height="match_parent" 
      android:background="@android:color/black" /> 

    </FrameLayout> 

</RelativeLayout> 

而且这里是我用于箭头的两个形状:

绘制right.xml

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

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

    <item android:right="2dp"> 
     <shape android:shape="rectangle"> 
      <solid android:color="@android:color/holo_red_dark" /> 
     </shape> 
    </item> 
</layer-list> 

绘制bottom.xml

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

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

    <item android:bottom="2dp"> 
     <shape android:shape="rectangle"> 
      <solid android:color="@android:color/holo_red_dark" /> 
     </shape> 
    </item> 
</layer-list> 

这里怎么它看起来像:

UPDATE

修改主要布局,简单地增加阴性切缘(根据自己的喜好)的按钮,你可以达到你想要的替代布局:

主要布局修改

<?xml version="1.0" encoding="utf-8"?> 
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:background="@android:color/holo_orange_light"> 

<LinearLayout 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:orientation="vertical"> 

    <include layout="@layout/arrow_button_layout" 
     android:layout_width="match_parent" 
     android:layout_height="40dp" 
     android:layout_marginLeft="-40dp" 
     android:layout_marginTop="40dp" /> 

    <include layout="@layout/arrow_button_layout" 
     android:layout_width="match_parent" 
     android:layout_height="40dp" 
     android:layout_marginLeft="-40dp" 
     android:layout_marginTop="40dp" /> 

    <include layout="@layout/arrow_button_layout" 
     android:layout_width="match_parent" 
     android:layout_height="40dp" 
     android:layout_marginLeft="-40dp" 
     android:layout_marginTop="40dp" /> 

    </LinearLayout> 

</FrameLayout> 

这是结果:

enter image description here

+0

如果我想要像第一张图片(https://i.stack.imgur.com/Il0re.jpg)那样的格式,那么我必须创建一个全新的“形状”? 我想要实现的是让按钮来自屏幕的左侧。第二张照片是我想象它会起作用的。 –

+0

我用第二种格式的更改更新了答案。这只是利润率的问题。你不需要一个新的布局。 –

0

使用的图像与你所说的相同的背景颜色。