Android - Как показать вертикальную линию на фоне ListView (и в соответствии с высотой строки)?

Как отобразить вертикальную линию на фоне, например, выделенную синим цветом на изображении ниже?

В этом примере у меня есть элементы ListView с ImageView (и TextView, но они не связаны с линией), и я хочу, чтобы вертикальная линия на фоне этих элементов чувствовала, что они "подключены" к каждому один.

Кроме того, обратите внимание, что вертикальная линия не заполняет весь фон.

Вертикальная линия находится слева, и она не равна для всех случаев. Иногда он заполняет всю высоту строки (в большинстве строк ListView), а иногда просто заполняет половину высоты строки (в последнем элементе ListView и за пределами ListView вверху, где мы видим большой ImageView с значок звезды).

Я попробовал предложение, предложенное Hellboy, и он почти отлично работает. Я изменил предложенный код для моего случая:

RelativeLayout с шириной = "40dp" (то же, что и с исходным ImageView, с которым я работал), height = "match_parent (так же, как он сказал), gravity =" center "(чтобы позволить им в центре высота строки) и layout_marginLeft =" 15dp "(чтобы оставить пробел в левом поле). В ImageView я добавил marginTop =" 10dp "и marginBottom =" 10dp", а вместе с ним появляется синяя вертикальная линия. У меня есть другие элементы в одной строке, поэтому у меня есть родительский макет (линейный макет). Мой родительский макет:

Итак, этот родительский макет выше, имеет описанные RelativeLayout и другие LinearLayout с другими элементами строки. Но в результате кода сглаженные изображения. Почему это происходит?! Похоже, что RelativeLayout рассматривает его высоту как высоту ImageView (40dp) и рассматривает ее marginTop и marginBottom, и при этом изображение сглаживается.

Ожидание большего количества ответов на эту проблему. Я попробую другие варианты.

Ответы

Ответ 1

Вы можете заменить свой ImageView на что-то вроде этого:

<RelativeLayout 
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <View
        android:layout_width="4dp"
        android:layout_height="match_parent"
        android:background="@color/navy_blue"
        android:layout_centerHorizontal="true"/>

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:src="@drawable/image"/>
</RelativeLayout>

и, конечно же, в вашем первом и последнем элементе вам нужно будет управлять высотой View и выровнять его с верхним или нижним

Ответ 2

Вы можете использовать прозрачное изображение с 9 патчами в качестве фона для просмотра списка.

Для создания изображения с девятью патчами выполните следующие действия: http://developer.android.com/tools/help/draw9patch.html

Ответ 3

Я ПОЛУЧИЛ ЭТО!!!

Привет, ребята, я упорствовал в попытке решить проблему раздела Обновлено моего вопроса (на основе решения, первоначально предложенного @Hellboy), и я получил результаты! Итак, как я получил ответ на свой вопрос, я решил ответить в качестве ответа.

Первым шагом было настроить XML файл, например, код ниже.

Часть финального XML, соответствующего макете строк:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    android:gravity="center"
    android:id="@+id/linearlayoutservicerow">

    <RelativeLayout 
        android:layout_width="40dp"
        android:layout_height="match_parent"
        android:gravity="center"
        android:layout_marginLeft="15dp">

        <View
            android:layout_width="4dp"
            android:id="@+id/verticallineview"
            android:layout_height="match_parent"
            android:background="#3399CC"
            android:gravity="center"
            android:layout_centerHorizontal="true"/>

        <RelativeLayout 
        android:layout_width="40dp"
        android:layout_height="match_parent"
        android:gravity="center"
        android:paddingBottom="10dp"
        android:paddingTop="10dp">

            <ImageView
                android:id="@+id/user_image"
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:gravity="center"
                android:background="@android:color/holo_blue_light" >
            </ImageView>

        </RelativeLayout>
    </RelativeLayout>

    <LinearLayout
        android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/layoutotherrowelements">
    </LinearLayout>

</LinearLayout>

Объяснение XML:

Здесь у нас есть родительский макет (linearlayoutserverer) и внутри него: RelativeLayout (предложенный @HellBoym, со структурированным обсуждением в финале моего вопроса) и LinearLayout для других элементов строки (layoutotherrowelements). Подведение итогов... Что я изменил?

Исходный код привел к сглаживанию изображений, потому что RelativeLayout (родительский) не рассматривал ImageView marginTop и marginBottom, поэтому изображение было сплющено вертикально. (И если мы допустим без поля, RelativeLayout будет иметь такой же размер, и вертикальная линия не будет отображаться сверху и снизу изображения.) У нас должно быть пространство между ImageView и RelativeLayout, изначально предложенным, чтобы показать строку, но если она не распознает маржу, как создать это пространство?

Я просто "инкапсулировал" ImageView в другой RelativeLayout (внутри этого родительского RelativeLayout) и изменил параметры поля ImageView на параметры заполнения этой капсулы RelativeLayout.

Проблема последней строки

В результате получается макет с фоном линии, но у нас все еще есть проблема с последней строкой. Фактически, эта строка отличается, и в этом случае она должна иметь свою высоту, измененную, чтобы не иметь одну и ту же родительскую высоту. Я решил поставить хотя бы высоту ImageView, и это сработало! Не забудьте преобразовать значение в dp в пиксель, потому что функция getLayoutParams имеет все параметры, выраженные в пикселях.

Итак, в Адаптере мы добавим следующий код:

if(position==(getCount()-1)){
View my_line = (View)
    row.findViewById(R.id.verticallineview);
    //40dp, this is the ImageView height
    int dpsize = 40;
    //convert the height in dp unit to pixel (because the parameter is in px)
    int px = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dpsize, context.getResources().getDisplayMetrics()); 
    my_line.getLayoutParams().height = px;
}

И это все!!!

Стоит отметить, что @dinesh sharma предложила другую интересную альтернативу с использованием 9-патча, которую я попробую позже.

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

Спасибо за вашу помощь, ребята! Вы мне очень помогли!!! В моем текущем решении я использовал ключ @Hellboy, используя RelativeLayout и View, и ключ @dinesh sharma, чтобы проверить, является ли это последней строкой ListView. Я надеюсь, что этот ответ и другие помогут большему числу людей с аналогичными проблемами.

Ответ 4

Теперь подтвержденный ответ

ваше изображение в макете элементов:

<RelativeLayout
    android:id="@+id/rl"
    android:layout_width="60dp"
    android:layout_height="60dp"
    android:background="@drawable/m"
    android:paddingBottom="10dp"
    android:paddingTop="10dp" >

    <ImageView
        android:id="@+id/grid_item_image"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_centerInParent="true"
        android:src="@drawable/ic_launcher" />

</RelativeLayout>

три bg девять патч-изображений для рисования

Обработка в адаптере:

    if(position==0)
        holder.rl.setBackgroundResource(R.drawable.b);
    if(position==(getCount()-1))
        holder.rl.setBackgroundResource(R.drawable.t);

Окончательный результат: