Рисование верхней границы фигуры на Android - PullRequest
Новая
       65

Рисование верхней границы фигуры на Android

17 голосов
/ 08 февраля 2010

Я создаю пользовательский индикатор выполнения (расположенный под WebView), и я хотел бы нарисовать линию шириной 1dp между WebView и ProgressBar. Я изменяю существующий Drawable, а именно 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>

Эта линия, однако, расположена вертикально по центру, но я хочу, чтобы она была нарисована поверх рисованного элемента. Единственная идея, которую я могу придумать, - использовать этот «хакерский» градиент ниже: 

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

Ответы [ 4 ]

47 голосов
/ 24 октября 2010

Я потратил некоторое время, пытаясь понять это. Надеюсь, есть лучший способ сделать это, но вот метод, который я использовал, который также немного хакерский, но в случае, если он кому-то поможет, я подумаю, что поделюсь

Первый элемент в вашем списке слоев должен быть сплошным, любого цвета, который вы хотите использовать в качестве границы. После этого вам нужно иметь границу с отступом с любой стороны, на которой вы хотите, чтобы граница была.

Например: 

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

Идея состоит в том, что отступы на предмете показывают сплошную форму позади него, создавая вид границы. Вы можете добавить отступы к любой стороне, чтобы добавить границу. Я полагаю, что таким образом вы могли бы стать более сложными и иметь разные цветные границы.

Похоже на хак, но у меня это сработало.

РЕДАКТИРОВАТЬ: я сказал "padding", но в списках слоев это больше смещение.

12 голосов
/ 31 мая 2012

Я просматривал все связанные темы, но никто не мог решить мою проблему. Но некоторые из них были очень полезны, чтобы понять, как работают список слоев или параметры формы.

Моя проблема заключалась в том, чтобы определить кнопку с линейным градиентом и нарисовать верхнюю и нижнюю линию разными цветами. Ведь я взломал это решение. Я сохранил файл unter 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>
1 голос
/ 27 апреля 2010

Вы пытались компенсировать это чем-то вроде этого

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

0 голосов
/ 25 февраля 2014

Мое решение - добавить 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>
...