Двухцветная горизонтальная линия в Android

Question

графический дизайнер приложения Android, которое я сейчас создаю, предложил двухцветную линию в качестве разделителя между элементами в поле макета:

двухцветная разделительная линия http://img7.imageshack.us/img7/3351/twocolorline.png

Если вы внимательно посмотрите на изображение, вы увидите темно-серую линию, сразу за которой - очень светло-серая (почти белая) линия. Размеры строк должны соответствовать ширине контейнера.

Каков наилучший способ реализовать это в пользовательском интерфейсе?

Answer 1

Лучший подход здесь - преобразовать изображение, которое вы показали, как 9-patch , добавить его в папку res / drawable в качестве ресурса и отобразить его в макете, используя ImageView настройка android:width="fill_parent".

Изображения с 9 участками позволяют указать область изображения, растягиваемую при изменении размера изображения (в данном случае всего изображения - хотя вам может потребоваться «затухание» линии по ее краям, чтобы соответствовать некоторым из родные стили Android).

В вашем файле макета определение ImageView будет выглядеть примерно так:

<ImageView
  android:src="@drawable/my_separater_nine_patch"
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:scaleType="fitXY"
/>

Answer 2

Если вы не хотите использовать 9-патч, вы можете попробовать LayerList.

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item>
        <shape >
            <solid android:color="#ffffff" />
        </shape>
    </item>
    <item android:bottom="1px">
        <shape >
            <solid android:color="#252525" />
        </shape>
    </item>

</layer-list>

Answer 3

<ImageView android:layout_width="match_parent" android:id="@+id/line1"
            android:layout_height="1dp" android:background="#FFFFFF"
            android:layout_weight="1" android:layout_marginTop="5dp"
            android:layout_marginBottom="5dp" android:layout_marginLeft="5dp"
        android:layout_marginRight="5dp"/>

вставка в представлении LinearLayout

Answer 4

Вы можете создать 2 вида, по одному для каждой строки, установить цвет фона этого вида на любой желаемый цвет, а затем установить высоту в 1 пиксель и ширину в «fill_parent». Преимущество этого подхода по сравнению с подходом 9 патчей заключается в том, что вам не нужно загружать ресурс, и вы можете динамически изменять цвета в соответствии с пожеланиями пользователя. Недостатком является то, что вы создаете еще несколько объектов макета.