Есть ли простой способ добавить границу к верхней и нижней части Android View?
У меня есть 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?
Ответы
Ответ 1
В Android 2.2 вы можете сделать следующее.
Создайте xml drawable, например /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
Я использовал трюк, чтобы граница отображалась вне контейнера. С помощью этого трюка будет выведена только линия, поэтому фон будет показан для основного представления.
<?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>
Ответ 3
Вариант 1: Форма для рисования
Это самый простой вариант, если вам нужна рамка вокруг макета или представления, в котором вы можете установить фон. Создайте 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. В основном у вас есть черный квадрат под видом, который вы хотите дать границе, а затем дайте этому виду некоторое дополнение (не margin!), Чтобы черный квадрат показывался по краям.
Очевидно, что это работает только в том случае, если в представлении нет прозрачных областей. Если это так, я бы порекомендовал вам написать пользовательский 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-патч, как показано на рисунке:
![6hQyT.png]()
Вы можете использовать его в любом представлении, где вы можете установить android:background="@drawable/...". И да, это должно быть 6x6 - я пробовал 5x5, и это не сработало.
Недостаток этого метода заключается в том, что вы не можете легко изменить цвета, но если вам нужны фантастические границы (например, только граница сверху и снизу, как в этом вопросе), вы, возможно, не сможете их сделать с Shape drawable, что не очень сильно.
Вариант 4: Дополнительные виды
Я забыл упомянуть этот очень простой вариант, если вам нужны только границы выше и ниже вашего представления. Вы можете поместить свое представление в вертикальное LinearLayout (если оно еще не), а затем добавить пустой View выше и ниже его следующим образом:
<View android:background="#000" android:layout_width="match_parent" android:layout_height="1px"/>
Ответ 4
Чтобы добавить только 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 будет создавать границу с использованием формы прямоугольника, но затем толкает верхнюю, правую и левую стороны за область визуализации для фигуры. Это оставляет видимость нижней границы.
Ответ 5
Итак, я хотел сделать что-то немного другое: только на нижней границе, чтобы имитировать разделитель ListView. Я изменил ответ Piet Delport и получил следующее:
<?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).
Ответ 6
Текущий принятый ответ не работает. Он создает тонкие вертикальные границы с левой и правой сторон изображения в результате сглаживания.
Эта версия работает отлично. Он также позволяет вам устанавливать ширину границы независимо друг от друга, и вы также можете добавить границы слева и справа, если хотите. Единственным недостатком является то, что он НЕ поддерживает прозрачность.
Создайте xml drawable с именем /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 через Marshmallow
Ответ 7
Так же, как @Nic Hubbard сказал, есть очень простой способ добавить границу.
<View
android:layout_width="match_parent"
android:layout_height="2dp"
android:background="#000000" >
</View>
Вы можете изменить высоту и цвет фона на то, что вы хотите.
Ответ 8
Вы также можете обернуть представление в FrameLayout, а затем установить цвет фона фона и дополнение к тому, что вы хотите; Тем не менее, textview по умолчанию имеет "прозрачный" фон, поэтому вам также нужно будет изменить цвет фона textview.
Ответ 9
Мои ответы основаны на версии @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"
или объединить их в две или более границы:
android:bottom="2dp" android:top="2dp"
Ответ 10
Почему бы просто не создать вид с разрешением 1 дп с цветом фона? Затем его можно легко разместить там, где вы хотите.
Ответ 11
Сначала создайте 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.
Ответ 12
Просто добавьте мое решение в список.
Мне нужна полупрозрачная нижняя граница, которая проходит мимо исходной формы (Итак, полупрозрачная рамка была вне родительского прямоугольника).
<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]()
Ответ 13
Чтобы изменить это:
<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>
Это только делает границы, а не прямоугольник, который будет отображаться, если ваш фон имеет цвет.
Ответ 14
Запишите ниже код
<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" />
Ответ 15
InsetDrawable способ добавить границы для вставки границ, используя 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>
Ответ 16
Попробуйте обернуть изображение с помощью функции linearlayout и установите для него цвет фона границы, который вы хотите по тексту. Затем установите для прописной буквы текст в виде текста, который вы хотите использовать для своей границы.
Ответ 17
Вы также можете использовать 9-путь для выполнения своей работы. Создайте его так, чтобы цветной пиксель не умножался по высоте, а только прозрачный пиксель.
Ответ 18
Просто добавьте Просмотров в верхней и нижней части View
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="@color/your_color"
app:layout_constraintBottom_toTopOf="@+id/textView"
app:layout_constraintEnd_toEndOf="@+id/textView"
app:layout_constraintStart_toStartOf="@+id/textView" />
<TextView
android:id="@+id/textView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="32dp"
android:gravity="center"
android:text="Testing"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="@color/your_color"
app:layout_constraintEnd_toEndOf="@+id/textView"
app:layout_constraintStart_toStartOf="@+id/textView"
app:layout_constraintTop_toBottomOf="@+id/textView" />
</android.support.constraint.ConstraintLayout>
Ответ 19
// 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
Ответ 20
<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>
Ответ 21
Вот способ достичь этого.
<?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>
Первый элемент для обводки и второй для сплошного фона. Скрытие левой и правой границ.
Ответ 22
<TextView
android:id="@+id/textView3"
android:layout_width="match_parent"
android:layout_height="2dp"
android:background="#72cdf4"
android:text=" aa" />
Просто добавьте этот TextView под текстом, в который вы хотите добавить границу
Ответ 23
Просто для принудительного применения ответов @phreakhead и user1051892, <item android:bottom|android:left|android:right|android:top> если отрицательный, должен быть больше, чем <stroke android:width>. Если нет, то рисование элемента будет смешано с рисованием мазка, и вы можете подумать, что эти значения не работают.
