没有图像的自定义箭头：Android答案

【问题标题】：Custom arrows without image: Android没有图像的自定义箭头：Android
【发布时间】：2014-01-15 08:22:00
【问题描述】：

我遵循了这个教程：http://looksok.wordpress.com/2013/08/24/android-triangle-arrow-defined-as-an-xml-shape/

本教程用于创建自定义箭头作为递增/递减按钮，而无需使用图像。箭头的形状很好，但是向上箭头的底部位于按钮视图的底部，向下箭头的底部位于按钮视图的顶部。换句话说，箭头没有正确对齐。

我想知道，按钮视图是否存在某种 y 轴偏移，可用于更好地定位箭头？我的代码是：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <Button
        android:id="@+id/arrow_up"
        android:layout_width="75dp"
        android:layout_height="75dp"
        android:background="@drawable/custom_arrow" />

    <Button
        android:id="@+id/arrow_down"
        android:layout_width="75dp"
        android:layout_height="75dp"
        android:rotation="180"
        android:layout_toRightOf="@id/arrow_up"
        android:background="@drawable/custom_arrow" /> 
</RelativeLayout>

custon_arrow.xml 是：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item>
        <!-- android:pivotX="-40%" -->
        <rotate 
            android:fromDegrees="45"
            android:toDegrees="45"
            android:pivotX="-20%"
            android:pivotY="88%" >
            <shape
                android:shape="rectangle" >
                <stroke android:color="@color/transparent" android:width="5dp"/> 
                <solid
                    android:color="@color/grey_shade" />
            </shape>
        </rotate>
    </item>
</layer-list>

【问题讨论】：

标签： android xml android-custom-view

【解决方案1】：

<TextView 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="▲"/>

或

<TextView 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="▼"/>

您可以获得here更多选项。

【讨论】：

我现在才看到这个，但这太棒了！很好的答案
你是MVP！

【解决方案2】：

可以使用路径轻松完成：

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="32dp"
        android:height="24dp"
        android:viewportWidth="32.0"
        android:viewportHeight="24.0">
    <path android:fillColor="#e4e4e8"
          android:pathData="M0 0 h32 l-16 24 Z"/>
</vector>

【讨论】：

【解决方案3】：

使您的 marginLeft 属性保持一致（一个是 3dp，另一个是 5dp）。

所以！（看到图片后）你说的是垂直对齐！

我认为您可以轻松地将一些 paddingBottom 添加到向上箭头并将 paddingTop 添加到向下箭头。

好吧，这是一个廉价而肮脏的把戏，但是......

...这个答案肯定更好：look

【讨论】：

好吧，marginLeft 属性是从左到右定位的。它不会影响按钮视图内部的形状。我想知道如何影响按钮。让我截图，也许会更好。
这也是我最初的想法，但对箭头形状没有影响。并且忽略边距属性，我只是快速复制粘贴。边距是相关的，只是不在我在这里介绍的上下文中。我的实际程序中有更多代码。对困惑感到抱歉。但边距也与形状定位无关。我尝试使用 20dp、10dp 和 70dp 添加 paddingTop 和 paddingBottom，以查看箭头是否会从视图中消失。这些都没有影响。还有其他想法吗？

【解决方案4】：

  <?xml version="1.0" encoding="utf-8"?>
        <vector xmlns:android="http://schemas.android.com/apk/res/android"
            android:width="12dp"
            android:height="10dp"
            android:viewportWidth="32.0"
            android:viewportHeight="24.0">
            <path android:fillColor="#707070"
                android:pathData="M0 0 h32 l-16 24 Z"/>
        </vector>

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:height="12dp"
    android:width="10dp"
    android:viewportHeight="100"
    android:viewportWidth="100" >
    <group
        android:name="triableGroup">
        <path
            android:name="triangle"
            android:fillColor="#707070"
            android:pathData="m 50,0 l 50,70 -100,0 z" />
    </group>
</vector>

【讨论】：