Как поместить рамку вокруг текстового представления Android?
Можно ли нарисовать границу вокруг текстового представления?
23 ответа
Вы можете установить форму для рисования (прямоугольник) в качестве фона для вида.
<TextView android:text="Some text" android:background="@drawable/back"/>
И прямоугольник drawable back.xml (помещается в папку res / drawable):
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<solid android:color="@android:color/white" />
<stroke android:width="1dip" android:color="#4fa5d5"/>
</shape>
Ты можешь использовать @android:color/transparent для сплошного цвета иметь прозрачный фон. Вы также можете использовать отступы, чтобы отделить текст от границы. Для получения дополнительной информации см.: http://developer.android.com/guide/topics/resources/drawable-resource.html
Позвольте мне обобщить несколько различных (непрограммных) методов.
Использование формы для рисования
Сохраните следующее в виде XML-файла в папке для рисования (например, my_border.xml):
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<!-- View background color -->
<solid
android:color="@color/background_color" >
</solid>
<!-- View border color and width -->
<stroke
android:width="1dp"
android:color="@color/border_color" >
</stroke>
<!-- The radius makes the corners rounded -->
<corners
android:radius="2dp" >
</corners>
</shape>
Затем просто установите его в качестве фона для вашего TextView:
<TextView
android:id="@+id/textview1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/my_border" />
Дополнительная помощь:
- Shape Drawable (документы для Android)
- Советы и рекомендации для разработчиков Android: XML Drawables (Часть I)
Использование 9-патча
9-патч растягивается фоновое изображение. Если вы создадите изображение с рамкой, тогда оно даст вашему TextView рамку. Все, что вам нужно сделать, это сделать изображение, а затем установить его в качестве фона в вашем TextView.
<TextView
android:id="@+id/textview1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/my_ninepatch_image" />
Вот несколько ссылок, которые покажут, как сделать изображение из 9 патчей:
- Draw 9-patch
- Простой генератор Nine-patch
- Простое руководство по 9-патчу для пользовательского интерфейса Android
- Создание и использование 9-патч-изображений в Android
Что если я просто хочу верхнюю границу?
Использование списка слоев
Вы можете использовать список слоев, чтобы сложить два прямоугольника друг на друга. Сделав второй прямоугольник чуть меньше первого, вы можете создать эффект границы. Первый (нижний) прямоугольник - это цвет границы, а второй прямоугольник - это цвет фона.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Lower rectangle (border color) -->
<item>
<shape android:shape="rectangle">
<solid android:color="@color/border_color" />
</shape>
</item>
<!-- Upper rectangle (background color) -->
<item android:top="2dp">
<shape android:shape="rectangle">
<solid android:color="@color/background_color" />
</shape>
</item>
</layer-list>
настройка android:top="2dp" смещает вершину (делает ее меньше) на 2dp. Это позволяет первому (нижнему) прямоугольнику просвечивать, создавая эффект границы. Вы можете применить это к фону TextView так же, как shape рисование было сделано выше.
Вот еще несколько ссылок о списках слоев:
- Понимание Android
; - Как сделать нижнюю границу в прорисовываемом XML-селекторе?
- Создать границы на андроид вид в прорисовываемых XML, с 3 сторон?
Использование 9-патча
Вы можете просто сделать 9-патч изображение с одной границей. Все остальное так же, как обсуждалось выше.
Используя представление
Это своего рода хитрость, но она хорошо работает, если вам нужно добавить разделитель между двумя представлениями или границу для одного TextView.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:id="@+id/textview1"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<!-- This adds a border between the TextViews -->
<View
android:layout_width="match_parent"
android:layout_height="2dp"
android:background="@android:color/black" />
<TextView
android:id="@+id/textview2"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
Вот еще несколько ссылок:
Самый простой способ - добавить представление для вашего TextView. Пример для нижней границы:
<LinearLayout android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_marginLeft="10dp"
android:text="@string/title"
android:id="@+id/title_label"
android:gravity="center_vertical"/>
<View
android:layout_width="fill_parent"
android:layout_height="0.2dp"
android:id="@+id/separator"
android:visibility="visible"
android:background="@android:color/darker_gray"/>
</LinearLayout>
Для других границ направления, пожалуйста, отрегулируйте расположение вида разделителя.
Я решил эту проблему, расширив текстовое представление и нарисовав границу вручную. Я даже добавил, чтобы вы могли выбрать, если граница пунктирная или пунктирная.
public class BorderedTextView extends TextView {
private Paint paint = new Paint();
public static final int BORDER_TOP = 0x00000001;
public static final int BORDER_RIGHT = 0x00000002;
public static final int BORDER_BOTTOM = 0x00000004;
public static final int BORDER_LEFT = 0x00000008;
private Border[] borders;
public BorderedTextView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
init();
}
public BorderedTextView(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public BorderedTextView(Context context) {
super(context);
init();
}
private void init(){
paint.setStyle(Paint.Style.STROKE);
paint.setColor(Color.BLACK);
paint.setStrokeWidth(4);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
if(borders == null) return;
for(Border border : borders){
paint.setColor(border.getColor());
paint.setStrokeWidth(border.getWidth());
if(border.getStyle() == BORDER_TOP){
canvas.drawLine(0, 0, getWidth(), 0, paint);
} else
if(border.getStyle() == BORDER_RIGHT){
canvas.drawLine(getWidth(), 0, getWidth(), getHeight(), paint);
} else
if(border.getStyle() == BORDER_BOTTOM){
canvas.drawLine(0, getHeight(), getWidth(), getHeight(), paint);
} else
if(border.getStyle() == BORDER_LEFT){
canvas.drawLine(0, 0, 0, getHeight(), paint);
}
}
}
public Border[] getBorders() {
return borders;
}
public void setBorders(Border[] borders) {
this.borders = borders;
}
}
И пограничный класс:
public class Border {
private int orientation;
private int width;
private int color = Color.BLACK;
private int style;
public int getWidth() {
return width;
}
public void setWidth(int width) {
this.width = width;
}
public int getColor() {
return color;
}
public void setColor(int color) {
this.color = color;
}
public int getStyle() {
return style;
}
public void setStyle(int style) {
this.style = style;
}
public int getOrientation() {
return orientation;
}
public void setOrientation(int orientation) {
this.orientation = orientation;
}
public Border(int Style) {
this.style = Style;
}
}
Надеюсь, это поможет кому-то:)
Самое простое решение, которое я нашел (и которое на самом деле работает):
<TextView
...
android:background="@android:drawable/editbox_background" />
Вы можете установить границу двумя способами. Один отрисовывается, а второй - программный.
Используя Drawable
<shape>
<solid android:color="@color/txt_white"/>
<stroke android:width="1dip" android:color="@color/border_gray"/>
<corners android:bottomLeftRadius="10dp"
android:bottomRightRadius="0dp"
android:topLeftRadius="10dp"
android:topRightRadius="0dp"/>
<padding android:bottom="0dip"
android:left="0dip"
android:right="0dip"
android:top="0dip"/>
</shape>
программный
public static GradientDrawable backgroundWithoutBorder(int color) {
GradientDrawable gdDefault = new GradientDrawable();
gdDefault.setColor(color);
gdDefault.setCornerRadii(new float[] { radius, radius, 0, 0, 0, 0,
radius, radius });
return gdDefault;
}
С библиотекой компонентов материала вы можете использовать MaterialShapeDrawable.
<TextView
android:id="@+id/textview"
.../>
Затем вы можете программно применить MaterialShapeDrawable:
TextView textView = findViewById(R.id.textview);
MaterialShapeDrawable shapeDrawable = new MaterialShapeDrawable();
shapeDrawable.setFillColor(ContextCompat.getColorStateList(this,android.R.color.transparent));
shapeDrawable.setStroke(1.0f, ContextCompat.getColor(this,R.color....));
ViewCompat.setBackground(textView,shapeDrawable);
h ttps:https://stackru.com/images/a40b76e2b7dc48e5db34fd67d0989734ecddaf93.png
Я просто смотрел на похожий ответ - это можно сделать с помощью Stroke и следующего переопределения:
@Override
public void draw(Canvas canvas, MapView mapView, boolean shadow) {
Paint strokePaint = new Paint();
strokePaint.setARGB(255, 0, 0, 0);
strokePaint.setTextAlign(Paint.Align.CENTER);
strokePaint.setTextSize(16);
strokePaint.setTypeface(Typeface.DEFAULT_BOLD);
strokePaint.setStyle(Paint.Style.STROKE);
strokePaint.setStrokeWidth(2);
Paint textPaint = new Paint();
textPaint.setARGB(255, 255, 255, 255);
textPaint.setTextAlign(Paint.Align.CENTER);
textPaint.setTextSize(16);
textPaint.setTypeface(Typeface.DEFAULT_BOLD);
canvas.drawText("Some Text", 100, 100, strokePaint);
canvas.drawText("Some Text", 100, 100, textPaint);
super.draw(canvas, mapView, shadow);
}
Вы можете добавить что-то вроде этого в свой код:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<solid android:color="#ffffff" />
<stroke android:width="1dip" android:color="#4fa5d5"/>
</shape>
Вы можете установить фигуру, которую можно рисовать (прямоугольник с углами), в качестве фона для представления.
<TextView android:background="@drawable/frame"/>
И прямоугольник drawable frame.xml (поместите в папку res / drawable):
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<solid android:color="@android:color/white" />
<stroke android:width="1dip"
android:color="#3d4caf"/>
<corners android:radius="50dp"/>
</shape>
Я нашел лучший способ поместить границу вокруг TextView.
Используйте изображение из девяти пятен для фона. Это довольно просто, SDK поставляется с инструментом для создания изображения из 9 патчей и абсолютно не требует кодирования.
Ссылка находится на http://developer.android.com/guide/topics/graphics/2d-graphics.html.
Проверьте ссылку ниже, чтобы сделать закругленные углы http://androidcookbook.com/Recipe.seam?recipeId=2318
Папка для рисования в разделе res в проекте Android не ограничивается растровыми изображениями (файлы PNG или JPG), но также может содержать формы, определенные в файлах XML.
Эти формы затем могут быть повторно использованы в проекте. Форма может быть использована для наложения границы вокруг макета. В этом примере показана прямоугольная граница с изогнутыми углами. В папке drawable создается новый файл customborder.xml (в Eclipse используйте меню "Файл" и выберите "Создать", затем "Файл", в выбранной папке для рисования введите имя файла и нажмите "Готово").
XML, определяющий форму границы, вводится:
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<corners android:radius="20dp"/>
<padding android:left="10dp" android:right="10dp" android:top="10dp" android:bottom="10dp"/>
<solid android:color="#CCCCCC"/>
</shape>
Атрибут android:shape установлен на прямоугольник (файлы формы также поддерживают овал, линию и кольцо). Прямоугольник является значением по умолчанию, поэтому этот атрибут можно было бы опустить, если он является определяемым прямоугольником. Обратитесь к документации Android по фигурам по адресу http://developer.android.com/guide/topics/resources/drawable-resource.html для получения подробной информации о файле фигур.
Углы элемента задают скругленные углы прямоугольника. Можно установить разные радиусы на каждом углу (см. Ссылку на Android).
Атрибуты заполнения используются для перемещения содержимого представления, к которому применяется форма, для предотвращения перекрытия границы содержимым.
Цвет границы здесь установлен в светло-серый (шестнадцатеричное значение RGB).
Фигуры также поддерживают градиенты, но здесь они не используются. Снова, посмотрите ресурсы Android, чтобы увидеть, как определяется градиент. Форма применяется к макету с помощью android:background="@drawable/customborder",
В макете другие виды могут быть добавлены как обычно. В этом примере был добавлен один TextView, а текст белый (шестнадцатеричный RGB FFFFFF). Фон установлен на синий, плюс некоторая прозрачность для уменьшения яркости (шестнадцатеричное альфа-RGB-значение A00000FF). Наконец, макет смещается от края экрана, помещая его в другой макет с небольшим количеством отступов. Полный файл макета, таким образом:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="5dp">
<LinearLayout android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@drawable/customborder">
<TextView android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="Text View"
android:textSize="20dp"
android:textColor="#FFFFFF"
android:gravity="center_horizontal"
android:background="#A00000FF" />
</LinearLayout>
</LinearLayout>
У меня есть способ сделать это очень просто, и я хотел бы поделиться им.
Когда я хочу поставить квадратные значения в TextViews, я просто помещаю их в LinearLayout. Я устанавливаю цвет фона моего LinearLayout и добавляю отступ к моему TextView. Результат точно такой, как если бы вы поместили квадрат в TextView.
Вы можете создать собственный фон для текстового представления. Шаги 1. Зайдите в свой проект. 2. Перейдите к ресурсам и щелкните правой кнопкой мыши, чтобы выделить. 3. Щелкните New -> Drawable Resource File 4. Дайте имя вашему файлу 5. Вставьте следующий код в файл.
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<stroke android:width="1dp" android:color="@color/colorBlack" />
<padding android:left="1dp"
android:top="1dp"
android:right="1dp"
android:bottom="1dp" />
<corners android:radius="6dp" />
<solid android:color="#ffffffff" />
Для вашего текстового представления, где вы хотите использовать его в качестве фона,
android: background = "@ drawable / your_fileName"
Меняется ответ Константина Бурова, потому что не работают в моем случае:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="@android:color/white" />
<stroke android:width="2dip" android:color="#4fa5d5"/>
<corners android:radius="7dp"/>
</shape>
</item>
</selector>
compileSdkVersion 26 (Android 8.0), minSdkVersion 21 (Android 5.0), targetSdkVersion 26, реализация 'com.android.support:appcompat-v7:26.1.0', gradle:4.1
Вот мой "простой" вспомогательный класс, который возвращает ImageView с границей. Просто поместите это в папку утилит и назовите это так:
ImageView selectionBorder = BorderDrawer.generateBorderImageView(context, borderWidth, borderHeight, thickness, Color.Blue);
Вот код
/**
* Because creating a border is Rocket Science in Android.
*/
public class BorderDrawer
{
public static ImageView generateBorderImageView(Context context, int borderWidth, int borderHeight, int borderThickness, int color)
{
ImageView mask = new ImageView(context);
// Create the square to serve as the mask
Bitmap squareMask = Bitmap.createBitmap(borderWidth - (borderThickness*2), borderHeight - (borderThickness*2), Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(squareMask);
Paint paint = new Paint();
paint.setStyle(Paint.Style.FILL);
paint.setColor(color);
canvas.drawRect(0.0f, 0.0f, (float)borderWidth, (float)borderHeight, paint);
// Create the darkness bitmap
Bitmap solidColor = Bitmap.createBitmap(borderWidth, borderHeight, Bitmap.Config.ARGB_8888);
canvas = new Canvas(solidColor);
paint.setStyle(Paint.Style.FILL);
paint.setColor(color);
canvas.drawRect(0.0f, 0.0f, borderWidth, borderHeight, paint);
// Create the masked version of the darknessView
Bitmap borderBitmap = Bitmap.createBitmap(borderWidth, borderHeight, Bitmap.Config.ARGB_8888);
canvas = new Canvas(borderBitmap);
Paint clearPaint = new Paint();
clearPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
canvas.drawBitmap(solidColor, 0, 0, null);
canvas.drawBitmap(squareMask, borderThickness, borderThickness, clearPaint);
clearPaint.setXfermode(null);
ImageView borderView = new ImageView(context);
borderView.setImageBitmap(borderBitmap);
return borderView;
}
}
Есть много способов добавить границу в textView. Самый простой - создать настраиваемый объект для рисования и установить его как android:background="@drawable/textview_bg" для вашего textView.
Textview_bg.xml будет находиться в разделе Drawables и может быть примерно таким. Вы можете иметьsolid или gradient фон (или ничего, если не требуется), corners чтобы добавить радиус угла и stroke добавить границу.
textview_bg.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners
android:radius="@dimen/dp_10"/>
<gradient
android:angle="225"
android:endColor="#FFFFFF"
android:startColor="#E0E0E0" />
<stroke
android:width="2dp"
android:color="#000000"/>
</shape>
Попробуй это:
<shape>
<solid android:color="@color/txt_white"/>
<stroke android:width="1dip" android:color="@color/border_black"/>
</shape>
Создайте вид границы с цветом фона в качестве цвета границы и размера вашего текстового представления. установить заполнение вида границы как ширину границы. Установите цвет фона текстового представления как цвет, который вы хотите для текстового представления. Теперь добавьте ваш текстовый вид внутри вид границы.
Это может помочь вам.
<RelativeLayout
android:id="@+id/textbox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:background="@android:color/darker_gray" >
<TextView
android:id="@+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:layout_margin="3dp"
android:background="@android:color/white"
android:gravity="center"
android:text="@string/app_name"
android:textSize="20dp" />
</RelativeLayout
<View
android:layout_width="match_parent"
android:layout_height="2dp"
android:background="@android:color/black" />
этого кода достаточно, вы можете разместить где угодно
Set Background в текстовом окне xml,
добавьте файл rounded_textview.xml в свой каталог с возможностью рисования.
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<solid android:color="@android:color/white" />
<stroke android:width="2dip" android:color="#4f5g52"/>
</shape>
установить файл с возможностью рисования в фоновом режиме textView.
На самом деле, это очень просто. Если вы хотите простой черный прямоугольник за Textview, просто добавьте android:background="@android:color/black" внутри тегов TextView. Как это:
<TextView
android:textSize="15pt" android:textColor="#ffa7ff04"
android:layout_alignBottom="@+id/webView1"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:background="@android:color/black"/>