在Android上给一个形状绘制顶部边框

Question

我正在创建一个自定义进度条（位于WebView下方），我想绘制的是WebView和ProgressBar之间的1dp宽的线。我修改了现有的可绘制对象，即progress_horizontal.xml，并尝试了以下内容：

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

  (...)

  <item>
    <shape android:shape="line">
      <stroke android:width="1dp" android:color="#FF000000" />
    </shape>
  </item>

</layer-list>

然而，这一行文本是垂直居中的，但我希望它绘制在可绘制对象顶部。我能想到的唯一主意是使用下面这个“hacky”渐变：

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

  (...)

  <item>
    <shape>
      <gradient
          android:startColor="#FF000000"
          android:centerColor="#00000000"
          android:centerY="0.01"
          android:endColor="#00000000"
          android:angle="270"
      />
    </shape>
  </item>

</layer-list>

你有更好的想法如何绘制与使用layer-list定义的可绘制对象顶部对齐的单线形状吗？

- Marek Stój

Answer 1

我也花了一段时间来解决这个问题。希望有更好的方法，不过以下是我使用的方法，虽然还有些取巧，但如果有帮助的话，我想分享一下。

你的图层列表中第一项应该是一个固体颜色，颜色必须是你想要的边框颜色。接下来是你想要加上边框的事物，具体哪一侧需要边框则在该侧添加填充。

例如：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="YOUR BORDER COLOR" />
        </shape>
    </item>
    <item android:top="YOUR TOP BORDER THICKNESS">
        THE THING YOU WANT A BORDER ON
    </item>
</layer-list>

这个想法是通过在元素周围添加内边距来展现其后面的实心形状，从而实现边框外观。你可以在任何一侧添加内边距来实现边框效果。我想你还可以通过这种方式创建具有不同颜色的边框。

看起来像是一个hack，但对我很有效。

注：我说的是“内边距”，但在层列表中更多的是一种偏移。

- cottonBallPaws

---

谢谢您。 :) 我添加了一个额外的层来获得我需要的底部边框。 - KarenAnne

重要提示是，当您使用layer-list时，在背景替换后，元素的所有填充都会消失，因为layerlist不实现任何填充...因此使用此列表会导致UI出现裂缝。 - Alexander.Iljushkin

Answer 2

我浏览了所有相关的主题，但没有人能够解决我的问题。但其中一些对于理解图层列表或形状参数非常有用。

我的问题是定义一个带有线性渐变的按钮，并以不同颜色绘制顶部和底部线条。最终，我通过一些技巧找到了解决方案。我将文件保存在res/drawable/blue_btn.xml下。

    <?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
   <item android:state_pressed="true" >        
        <shape android:shape="rectangle">
            <solid android:color="@color/blue_end" />
            <padding 
                   android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
            <stroke   
                android:width="1dp"
                android:color="@color/bottomline_btn" />                        
        </shape>    
    </item>
    <item>
        <layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
           <item>
                <shape android:shape="rectangle">
                    <solid android:color="@color/blue" />
                    <gradient
                        android:startColor="@color/blue"
                        android:endColor="@color/blue_end"
                        android:angle="270" />
                </shape>
            </item>
            <item android:top="0dp" android:bottom="-1dp" android:left="-1dp" android:right="-1dp">
                <shape android:shape="rectangle">
                    <stroke   
                        android:width="1dp"
                        android:color="@color/topline_btn" />                       
                    <solid android:color="#00000000" />
                    <corners android:radius="0dp" />
                </shape>
            </item>
            <item android:top="-1dp" android:bottom="0dp" android:left="-1dp" android:right="-1dp">
                <shape android:shape="rectangle">
                    <stroke   
                        android:width="1dp"
                        android:color="@color/bottomline_btn" />                        
                    <solid android:color="#00000000" />
                    <corners android:radius="0dp" />
                </shape>
            </item>         
        </layer-list>
    </item>  
</selector>


<color name="topline_btn">#31ffffff</color>
<color name="bottomline_btn">#31000000</color>

<color name="blue">#449def</color>
<color name="blue_end">#2f6699</color>

- Şükriye

Answer 3

你尝试过像这样偏移它吗？

http://android.amberfog.com/?p=9

- Bo.

---

链接已失效。 - Zain

Answer 4

我的解决方案是将9-patch添加为最后一层项目：

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item>
        <shape>
            <solid android:color="@color/tab_button_active_layer2" />
        </shape>
    </item>
    <item android:bottom="@dimen/tab_button_active_bottom_bar_width">
        <shape>
            <solid android:color="@color/tab_button_active_layer1" />
        </shape>
    </item>
    <!-- 9-patch drawable -->
    <item android:drawable="@drawable/tab_button_border_top"/>
</layer-list>

- Mickey Tin