2010-02-08 94 views
17

Tôi đang tạo thanh tiến trình tùy chỉnh (được đặt trong một số WebView) và thứ tôi muốn vẽ là đường rộng 1dp giữa WebViewProgressBar. Tôi đang sửa đổi drawable hiện hữu bao gồm progress_horizontal.xml, và cố gắng một cái gì đó như thế này:Vẽ đường viền trên hình dạng trên 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> 

Dòng này tuy nhiên tập trung theo chiều dọc nhưng tôi muốn nó được rút ra trên đầu trang của drawable. Ý tưởng duy nhất tôi có thể đưa ra là sử dụng này "hacky" độ dốc dưới đây:

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

Bạn có những ý tưởng tốt hơn làm thế nào để vẽ một hình dạng dòng liên kết để phía trên cùng của drawable định nghĩa với layer-list?

Trả lời

47

tôi đã dành một thời gian cố gắng để con số này ra là tốt. Hy vọng rằng có một cách tốt hơn để làm điều đó nhưng đây là phương pháp tôi sử dụng, cũng là loại hackish, nhưng trong trường hợp nó giúp một ai đó, tôi nghĩ rằng tôi sẽ chia sẻ.

Mục đầu tiên trong danh sách lớp của bạn phải là một vật thể rắn bất kỳ màu nào bạn muốn làm viền. Sau đó sẽ là điều bạn muốn có đường viền, với phần đệm trên bất kỳ phía nào bạn muốn viền được bật lên.

Ví dụ:

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

Ý tưởng là padding vào mục tiết lộ hình dạng rắn đằng sau nó, cho sự xuất hiện biên giới. Bạn có thể thêm phần đệm vào bất kỳ bên nào để thêm đường viền. Tôi tưởng tượng bạn có thể trở nên phức tạp hơn và có đường viền màu khác nhau theo cách này.

Có vẻ như là một hack nhưng nó làm việc cho tôi.

CHỈNH SỬA: Tôi đã nói "đệm" nhưng trong các danh sách lớp, nó sẽ được bù đắp nhiều hơn.

+0

Nó hoạt động! Cảm ơn bạn – Kevin

+9

Điều này rõ ràng không hoạt động với "THING" trong suốt. – Kenneth

+0

Cảm ơn bạn vì điều này. :) Tôi đã thêm một lớp bổ sung để có đường viền dưới cùng mà tôi cần. – KarenAnne

12

tôi đã thực hiện tất cả các chủ đề liên quan nhưng không ai có thể giải quyết được vấn đề của tôi. Nhưng một số người trong số họ rất hữu ích để hiểu cách các tham số lớp hoặc hình dạng hoạt động.

Vấn đề của tôi là xác định nút có độ dốc tuyến tính và vẽ một đường trên cùng và dưới cùng bằng các màu khác nhau. Sau khi tất cả tôi đã hack giải pháp này. Tôi đã lưu tập tin res unter/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> 
0

Giải pháp của tôi là thêm 9 vá như mục lớp cuối cùng:

<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> 
Các vấn đề liên quan