2010-02-08 87 views
17

我正在創建自定義進度欄(位於WebView下),我想繪製的是WebViewProgressBar之間的1dp寬的線。我修改現有的繪製,即progress_horizontal.xml,並試圖像這樣:在Android上的形狀上繪製頂部邊框

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

此行不過是垂直居中,但我想它要在繪製的頂部繪製。我能想出的唯一的想法就是用低於這個「哈克」梯度:

<?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定義的上方設置了一個線的形狀?

回答

47

抵消它,我花了一段時間試圖弄清楚這一點爲好。希望有一個更好的方法來做到這一點,但這裏是我使用的方法,這也是一種駭人聽聞,但如果它幫助某人,我想我會分享。

圖層列表中的第一項應該是任何想要成爲邊框顏色的實體。接下來就是你想要邊框的東西,在你想要邊框的任何一邊填充邊框。

例如:

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

的想法是,關於該項目的填充揭示其背後的固體形狀,使邊框的外觀。您可以在任何一邊添加填充以添加邊框。我想你可能會變得更復雜,並且有不同的彩色邊框。

看起來像一個黑客,但它爲我工作。

編輯:我說「填充」,但在層列表中它是更多的偏移量。

+0

它的工作原理!謝謝 – Kevin 2011-07-13 11:30:55

+9

這顯然不適用於透明的「THING」。 – Kenneth 2012-09-20 06:37:51

+0

謝謝你。 :)我添加了一個額外的圖層以擁有我需要的底部邊框。 – KarenAnne 2013-07-08 08:28:00

12

我正在瀏覽所有相關主題,但沒有人能解決我的問題。但其中一些對於瞭解圖層列表或形狀參數的工作方式非常有用。

我的問題是定義一個線性漸變按鈕,並繪製不同顏色的頂部和底部線。畢竟我砍了這個解決方案。我保存的文件的Unter RES /繪製/ 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> 
0

我的解決辦法是增加9補丁作爲最後一層項目:

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