Есть ли простой способ добавить границы сверху и снизу представления Android?

У меня есть TextView, и я хотел бы добавить черную рамку вдоль его верхней и нижней границ. Я попытался добавить android:drawableTop и android:drawableBottom в TextView, но это только заставило весь вид стать черным.

<TextView
    android:background="@android:color/green"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:drawableTop="@android:color/black"
    android:drawableBottom="@android:color/black"
    android:text="la la la" />

Есть ли способ легко добавить верхнюю и нижнюю границу к представлению (в частности, к TextView) в Android?

384
задан 17.04.2020, 22:43

22 ответа

В Android 2.2 вы можете сделать следующее.

Создайте чертеж в формате xml, например /res/drawable/textlines.xml, и назначьте его в качестве свойства фона TextView.

<TextView
android:text="My text with lines above and below"
android:background="@drawable/textlines"
/>

/res/drawable/textlines.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item>
      <shape 
        android:shape="rectangle">
            <stroke android:width="1dp" android:color="#FF000000" />
            <solid android:color="#FFDDDDDD" />

        </shape>
   </item>

   <item android:top="1dp" android:bottom="1dp"> 
      <shape 
        android:shape="rectangle">
            <stroke android:width="1dp" android:color="#FFDDDDDD" />
            <solid android:color="#00000000" />
        </shape>
   </item>

</layer-list>

Обратной стороной этого является то, что вы должны указать непрозрачный цвет фона, так как прозрачные пленки не будут работать. (По крайней мере, я думал, что они сделали, но я ошибся). В приведенном выше примере вы можете видеть, что сплошной цвет первой фигуры #FFdddddd копируется в цвет обводки 2-й фигуры.

408
ответ дан 17.04.2020, 22:54
  • 1
    git svn скопирует по всем фиксациям? Наша история пересмотра довольно важна. – Nick Bolton 13.10.2019, 05:41
  • 2
    Также посмотрите это решение, которое также работает на TextViews, если Вы хотите границу все вокруг: stackoverflow.com/questions/3263611/… – emmby 17.04.2020, 22:55
  • 3
    Это решение сделало границу слева и право также - хотя более тонкое. – AlikElzin-kilaka 17.04.2020, 22:55
  • 4
    android:color =" @null" прием didn' t добиваются цели для меня для хранения прозрачности и просто отображения границы в одной стороне представления. Ответ от user1051892 ниже сделал задание! – Rick Pastoor 17.04.2020, 22:55
  • 5
    @emmby: при тестировании этого кода планшета это занимает время для рендеринга на экране, после того, как границы 1 секунды отображены, когда я прокручиваю – Chetan 17.04.2020, 22:56
  • 6
    Попытайтесь использовать android:color="@null" для предотвращения проблемы непрозрачного фона. – Matt Briançon 17.04.2020, 22:56

Просто чтобы добавить мое решение в список ..

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

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
  <item>
    <shape android:shape="rectangle" >      
      <solid android:color="#33000000" /> <!-- Border colour -->
    </shape>
  </item>
  <item  android:bottom="2dp" >
    <shape android:shape="rectangle" >     
      <solid android:color="#164586" />
    </shape>
  </item>
</layer-list>

Что дает мне;

enter image description here

4
ответ дан 17.04.2020, 22:44
  • 1
    Конечно, но я думаю, что OP хочет быстрый способ сравнить векторы, не точный путь, или является мной неправильно? – schnaader 08.10.2019, 09:38

Мои ответы основаны на версии @Emile, но я использую прозрачный цвет вместо сплошного.
Этот пример нарисует нижнюю границу 2dp.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item>
        <shape android:shape="rectangle" >
            <stroke  android:width="2dp"
                     android:color="#50C0E9" />
            <solid android:color="@android:color/transparent" />
        </shape>
    </item>
    <item  android:bottom="2dp" >
        <shape android:shape="rectangle" >
            <stroke  android:width="2dp"
                     android:color="@color/bgcolor" />
            <solid android:color="@android:color/transparent" />
        </shape>
    </item>
</layer-list>

@ color / bgcolor - это цвет фона, на котором вы рисуете свой вид с рамкой.

Если вы хотите изменить положение границы, измените смещение одним из:

android:bottom="2dp"
android:top="2dp"
android:right="2dp"
android:left="2dp"

или объедините их, чтобы иметь 2 или более границ:

android:bottom="2dp" android:top="2dp"
7
ответ дан 17.04.2020, 22:45
  • 1
    Это походит на мои точные первые шаги для взятия. Вопрос: объем EBS может быть смонтирован к нескольким экземплярам? I' m размышление я мог сохранить/var/www dir на апачском сервере на EBS и mysql данных по на mysql сервере на EBS. – Andy Baird 18.10.2019, 23:55

В настоящее время принятый ответ не работает. Это создает тонкие вертикальные границы на левой и правой сторонах вида в результате сглаживания.

Эта версия работает отлично. Это также позволяет вам устанавливать ширину границы независимо, и вы также можете добавить границы слева / справа, если хотите. Единственным недостатком является то, что он не поддерживает прозрачность.

Создайте отрисовываемый файл XML с именем /res/drawable/top_bottom_borders.xml с помощью приведенного ниже кода и назначьте его в качестве свойства фона TextView.

<?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="#DDDD00" /> <!-- border color -->
        </shape>
    </item>

    <item
        android:bottom="1dp" 
        android:top="1dp">   <!-- adjust borders width here -->
        <shape android:shape="rectangle">
            <solid android:color="#FFFFFF" />  <!-- background color -->
        </shape>
    </item>
</layer-list>

Проверено на Android KitKat через Зефир

36
ответ дан 17.04.2020, 22:45
  • 1
    Мы используем тот же подход в моей компании и it' s доказанный субоптимальный; у Вас есть отдельные ответвления для каждого из Ваших проектов, который делает обрабатывающие различные ответвления выпуска очень громоздкими (т.е. необходимо загрузить проект A для выпуска X и проект B для того же выпуска separatly). – Tomer Gabel 07.10.2019, 05:44

Чтобы добавить 1dp белую рамку только внизу и иметь прозрачный фон, вы можете использовать следующее, что проще, чем большинство ответов здесь.

Для TextView или другого представления добавьте:

android:background="@drawable/borderbottom"

И в каталоге drawable добавьте следующий XML-файл, который называется borderbottom.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:top="-2dp" android:left="-2dp" android:right="-2dp">
        <shape android:shape="rectangle">
            <stroke android:width="1dp" android:color="#ffffffff" />
            <solid android:color="#00000000" />
        </shape>
    </item>
</layer-list>

. границу сверху, замените android:top="-2dp" на android:bottom="-2dp"

Цвет не обязательно должен быть белым, а фон не должен быть прозрачным.

Элемент solid может не требоваться. Это будет зависеть от вашего замысла (спасибо В. Калюжню).

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

82
ответ дан 17.04.2020, 22:45
  • 1
    Гибкость прибывает в цену; мой опыт с этой схемой именования приводит меня полагать что стоимость в физическом труде и потенциале для ошибок просто isn' t стоящий проблемы. Так как SVN только на самом деле копирует файлы, по запросу, я предпочитаю расширяться своя вся рабочая область, а не отдельные проекты. – Tomer Gabel 07.10.2019, 05:44

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

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item
        android:bottom="1dp"
        android:left="-2dp"
        android:right="-2dp"
        android:top="-2dp">
        <shape android:shape="rectangle" >
            <stroke
                android:width="1dp"
                android:color="#FF000000" />

            <solid android:color="#00FFFFFF" />

            <padding android:left="10dp"
                android:right="10dp"
                android:top="10dp"
                android:bottom="10dp" />
        </shape>
    </item>

</layer-list>
264
ответ дан 17.04.2020, 22:46
  • 1
    Привет larf311, Вы сказали " Мы действительно регистрируемся в .project files". это относится к .classpath и .settings также? – Lena Schimmel 07.10.2019, 05:43
  • 2
    Это работало отлично для меня с несколькими тонкими настройками для создания строки немного более тонкой. – Jeff 17.04.2020, 22:46
  • 3
    Это работало на меня при сохранении фона прозрачным. – Rick Pastoor 17.04.2020, 22:47
  • 4
    приятно сделанный! то, что необходимо наблюдать, является item' s оставленный, вершина, право, нижняя часть должна - (stroke' s ширина) разность потенциалов – asakura89 17.04.2020, 22:47
  • 5
    Очень хороший прием, хотя это могло быть более хорошо если мы don' t должны обмануть компьютер для добиваний цели. – カオナシ 17.04.2020, 22:47
  • 6
    Хорошо сделанный, работал с прозрачным фоном. Протестированный в 2,2 и 4.4.2. Должен покрыть все промежуточные:) – HumaN 17.04.2020, 22:48

Как сказал @Nic Hubbard, существует очень простой способ добавить границу.

<View
    android:layout_width="match_parent"
    android:layout_height="2dp"
    android:background="#000000" >
</View>

Вы можете изменить высоту и цвет фона на любое другое.

8
ответ дан 17.04.2020, 22:46
  • 1
    Охладитесь довольный, что я мог помочь – patcoll 18.10.2019, 23:54

Сначала создайте XML-файл с содержимым, показанным ниже, назовите его border.xml и поместите его в папку макета в директории res

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <stroke android:width="1dp" android:color="#0000" />
    <padding android:left="0dp" android:top="1dp" android:right="0dp"
        android:bottom="1dp" />
</shape>

После этого в коде используйте

TextView tv = (TextView)findElementById(R.id.yourTextView);
tv.setBackgroundResource(R.layout.border);

Это сделает черную линию сверху и снизу TextView.

4
ответ дан 17.04.2020, 22:47
  • 1
    Да, это включает обоих. – larf311 07.10.2019, 05:43
  • 2
    doesn' t работает на кнопку – Dmitry Zaytsev 17.04.2020, 22:48
  • 3
    Да, Это будет Работать, я проверил. Кнопка Button = (Кнопка) findViewById (R.id.button); button.setBackgroundResource (R.layout.border); – Nikhil Dinesh 17.04.2020, 22:48
  • 4
    Я использовал черный цвет в вышеупомянутом xml файл, Ваш цвет фона мог бы быть черным, попробовать при помощи некоторого другого цвета. Это будет определенно работать <? версия xml =" 1.0" кодирование =" UTF-8"? > < сформируйте xmlns:android =" schemas.android.com/apk/res/android " > < тело android:color =" #474848"/> < перечеркните android:width =" 1dp" android:color =" #ffff00"/> < дополнение android:left =" 1dp" android:top =" 1dp" android:right =" 1dp" android:bottom =" 1dp"/> </shape> – Nikhil Dinesh 17.04.2020, 22:48
  • 5
    Didn' t работают на меня. Граница была нарисована посреди текстового представления - горизонтально. – AlikElzin-kilaka 17.04.2020, 22:49

Вы также можете использовать 9-дорожку для выполнения своей работы. Создайте его так, чтобы цветной пиксель не умножался по высоте, а только был прозрачным пикселем.

1
ответ дан 17.04.2020, 22:48
  • 1
    Да запись синтаксического анализатора C++ является огромным усилением времени......... – Virus721 13.11.2019, 02:11

Просто для обеспечения выполнения ответов @phreakhead ´ и user1051892 ´ , <item android:bottom|android:left|android:right|android:top>, если отрицательно, должно быть больше, чем <stroke android:width>. Если нет, то рисование элемента будет смешано с рисованием мазка, и вы можете подумать, что эти значения не работают.

-1
ответ дан 17.04.2020, 22:49
  • 1
    Код Google теперь также поддерживает Мерзавца. Я переместил свой проект Google Code от SVN до Мерзавца очень легко. Это был в основном вопрос изменения опции в предпочтениях. Единственный протест был связан с миграцией страниц Wiki, и это было полностью зарегистрировано и не привело ни к каким неприятным неожиданностям. Я казался бы, что GitHub является действительно превосходящей службой. Но мои потребности просты, и так Google Code так я won' t переключиться в слишком большую спешки. – John McFarlane 13.10.2019, 05:42

Самый простой способ добавить границы для вставки границ, используя InsetDrawable, ниже будет показана только верхняя граница:

<?xml version="1.0" encoding="utf-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
    android:insetBottom="-2dp"
    android:insetLeft="-2dp"
    android:insetRight="-2dp">
    <shape android:shape="rectangle">

        <solid android:color="@color/light_gray" />
        <stroke
            android:width=".5dp"
            android:color="@color/dark_gray" />
    </shape>
</inset>
2
ответ дан 17.04.2020, 22:49

Запишите ниже код

<View
    android:layout_width="wrap_content"
    android:layout_height="2dip"
    android:layout_below="@+id/topics_text"
    android:layout_marginTop="7dp"
    android:layout_margin="10dp"
    android:background="#ffffff" />
3
ответ дан 17.04.2020, 22:50
  • 1
    Просто исправленный формула для поддержки отрицательных величин, также. – schnaader 08.10.2019, 09:37

Почему бы просто не создать 1dp high view с цветом фона? Тогда его можно легко разместить там, где вы хотите.

5
ответ дан 17.04.2020, 22:50
  • 1
    А-ч, теперь я понимаю Вашу мысль. Вы can' t определяют некоторый " минимум тот же блок distance" для моего метода (f.e. говорят все векторы, которые только отличаются 1e-5, входят в тот же блок). – schnaader 08.10.2019, 09:39

Вы также можете обернуть вид в FrameLayout, а затем установить цвет фона рамки и отступа на то, что вы хотите; однако у textview по умолчанию имеется «прозрачный» фон, поэтому вам также придется изменить цвет фона textview.

7
ответ дан 17.04.2020, 22:51
  • 1
    Scalr выглядит очень интересным. It' s, вероятно, шаг выше потребностей, которые я имею, все же. I' ll, вероятно, запускаются с Вашей первой рекомендации и идут оттуда – Andy Baird 18.10.2019, 23:54

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

1
ответ дан 17.04.2020, 22:52
  • 1
    Это - точное замечание.спасибо. – shoosh 08.10.2019, 09:39
<shape xmlns:android="http://schemas.android.com/apk/res/android">

<solid android:color="@color/light_grey1" />
<stroke
    android:width="1dip"
    android:color="@color/light_grey1" />

<corners
    android:bottomLeftRadius="0dp"
    android:bottomRightRadius="0dp"
    android:topLeftRadius="5dp"
    android:topRightRadius="5dp" />

    </shape>
0
ответ дан 17.04.2020, 22:52

Чтобы изменить это:

<TextView
    android:text="My text"
    android:background="@drawable/top_bottom_border"/>

Я предпочитаю этот подход в "drawable / top_bottom_border.xml":

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <gradient
                android:angle="270"
                android:startColor="#000"
                android:centerColor="@android:color/transparent"
                android:centerX="0.01" />
        </shape>
    </item>
    <item>
        <shape>
            <gradient
                android:angle="90"
                android:startColor="#000"
                android:centerColor="@android:color/transparent"
                android:centerX="0.01" />
        </shape>
    </item>
</layer-list>

Это только создает границы, а не прямоугольник, который будет появляться если ваш фон имеет цвет.

4
ответ дан 17.04.2020, 22:53

Итак, я хотел сделать что-то немного другое: ТОЛЬКО границу снизу, чтобы имитировать разделитель ListView. Я изменил ответ Пита Дельпорта и получил следующее:

<?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="@color/background_trans_light" />    

        </shape>
   </item>

    <!-- this mess is what we have to do to get a bottom border only. -->
   <item android:top="-2dp"
         android:left="-2dp"
         android:right="-2dp"
         android:bottom="1px"> 
      <shape 
        android:shape="rectangle">    
            <stroke android:width="1dp" android:color="@color/background_trans_mid" />
            <solid android:color="@null" />
        </shape>
   </item>

</layer-list>

Обратите внимание, используя px вместо dp, чтобы получить ровно 1 пиксельный делитель (некоторые телефонные DPI приводят к исчезновению линии 1dp).

35
ответ дан 17.04.2020, 22:54
  • 1
    I' ll согласовывают это it' s не столь простой как наличие каждого проекта Eclipse в соответствии с единственным svn проектом, но it' s намного более гибкий. – Ickster 07.10.2019, 05:44
  • 2
    дорогой! каково значение "@color/background_trans_light"? – Shajeel Afzal 17.04.2020, 22:54
  • 3
    Аплодисменты @phreakhead, это на самом деле работает на меня! Никакая вершина, оставленная, или правильная граница. Точно, в чем я нуждался, Спасибо! – shanehoban 17.04.2020, 22:55

Вот способ достижения этого.

    <?xml version="1.0" encoding="utf-8"?>
    <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
        <item>
            <shape android:shape="rectangle">
                <stroke
                    android:width="1dp"
                    android:color="@color/grey_coaching_text" />
            </shape>
        </item>

        <item
            android:bottom="1dp"
            android:top="1dp">
            <shape android:shape="rectangle">
                <solid android:color="@color/white" />
            </shape>
        </item>
    </layer-list>

Первый элемент для обводки и второй для сплошного фона. Скрытие левой и правой границ.

1
ответ дан 17.04.2020, 22:54
  • 1
    Это только работает на JPGs? Поскольку, когда я попробовал его самостоятельно pdf' s это сразу остановился бы после отказа найти запуск. – Ivo Flipse 22.10.2019, 13:21
// Just simply add border around the image view or view

<ImageView
                android:id="@+id/imageView2"
                android:layout_width="90dp"
                android:layout_height="70dp"
                android:layout_centerVertical="true"
                android:layout_marginRight="10dp"
                android:layout_toLeftOf="@+id/imageView1"
                android:background="@android:color/white"
                android:padding="5dip" />

// After that dynamically put color into your view or image view object

objView.setBackgroundColor(Color.GREEN);

//VinodJ/Abhishek
0
ответ дан 17.04.2020, 22:55
<TextView
    android:id="@+id/textView3"
    android:layout_width="match_parent"
    android:layout_height="2dp"
    android:background="#72cdf4"
    android:text=" aa" />

Просто добавьте этот TextView под текстом, в который вы хотите добавить рамку

-1
ответ дан 17.04.2020, 22:56

Вариант 1: Shape Drawable

Это самый простой вариант, если вы хотите создать рамку вокруг макета или вида, в котором вы можете установить фон. Создайте файл XML в папке drawable, который выглядит примерно так:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >

    <solid android:color="#8fff93" />

    <stroke
        android:width="1px"
        android:color="#000" />

</shape>

Вы можете удалить solid, если не хотите заливки. Набор background="@drawable/your_shape_drawable" на вашем макете / представлении.

Вариант 2: Фоновый вид

Вот небольшой трюк, который я использовал в RelativeLayout. По сути, у вас есть черный квадрат под видом, который вы хотите задать рамку, а затем дать этому виду некоторый отступ (не отступ!), Чтобы черный квадрат просвечивал по краям.

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

<View
    android:id="@+id/border"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignBottom="@+id/image"
    android:layout_alignLeft="@+id/image"
    android:layout_alignRight="@+id/image"
    android:layout_alignTop="@+id/main_image"
    android:background="#000" />

<ImageView
    android:id="@+id/image"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_...
    android:padding="1px"
    android:src="@drawable/..." />

Если вам интересно, он работает с adjustViewBounds=true. Однако, это не работает, если вы хотите иметь фон в целом RelativeLayout, потому что есть ошибка, которая мешает вам заполнить RelativeLayout View. В этом случае я бы рекомендовал Shape drawable.

Вариант 3: 9-патч

И, наконец, последний вариант - использовать 9-патч, как этот:

Вы можете используйте его на любом экране, где вы можете установить android:background="@drawable/...". И да, это должно быть 6х6 - я пробовал 5х5, и это не сработало.

Недостаток этого метода в том, что вы не можете изменить цвета очень легко, но если вам нужны причудливые границы (например, только границы сверху и снизу, как в этом вопросе), то вы не сможете их сделать. с нарисованным Shape, который не очень мощный.

Вариант 4: дополнительные представления

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

<View android:background="#000" android:layout_width="match_parent" android:layout_height="1px"/>
96
ответ дан 17.04.2020, 22:57
  • 1
    Достаточно ярмарка; я вижу преимущества и недостатки к обоим методам, таким образом, это мог бы просто быть вопрос персонального предпочтения. – Ickster 07.10.2019, 05:43
  • 2
    @Emile That' s верный, но если you' ре с помощью пользовательского ListView это doesn' t делители поддержки простое Представление прекрасно. Влияние производительности рядом с нолем, особенно если you' ре, убеждающееся подавить Вашу глубину расположения. Это также обходит ошибки с делителями ListView через устройства (I' ve, замеченный некоторые устройства, которые игнорируют это свойство). – Tom 17.04.2020, 22:57
  • 3
    9 патчей и drawable форма в порядке, но я рекомендовал бы против добавления представлений или imageviews решить такую проблему. Причина, являющаяся, состоит в том, что необходимо удалять как много таких < elements> от Ваших разметок для улучшения перерисовки расположения и анимации. Я разделил бы их сразу же и реализовал бы некоторых подобных опции 1 или 2. – Emile 17.04.2020, 22:57
  • 4
    В iOS у Вас есть только один способ сделать это. На андроиде необходимо протестировать, по крайней мере четыре, в моей опции 4 случая были способом пойти. Иногда drawables как фон зависают, чтобы представить, знать о нем. – Ratata Tata 17.04.2020, 22:58
  • 5
    Можно также использовать эффективный viewholder шаблон с listviews, чтобы гарантировать, чтобы Вы сократили количество вызовов к findViewByID, который часто является причиной плохой производительности списка. – Emile 17.04.2020, 22:59

Теги

Похожие вопросы