Question

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

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

enter image description here

我想知道，按钮视图是否有某种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>

Answer 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个更多选项。

Answer 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>

Answer 3

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

SO！（看完图片后）你在谈论垂直对齐！

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

好吧，这是一个廉价而肮脏的伎俩，但是......

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

Answer 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>

没有图片的自定义箭头：Android

4 个答案: