Как поставить рамку вокруг текстового представления Android? - PullRequest
668 голосов
/ 16 августа 2010

Можно ли нарисовать границу вокруг текстового представления?

Ответы [ 17 ]

1183 голосов
/ 16 августа 2010

Вы можете установить форму для рисования (прямоугольник) в качестве фона для представления.

<TextView android:text="Some text" android:background="@drawable/back"/>

И для рисования прямоугольника 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

162 голосов
/ 04 апреля 2015

Позвольте мне обобщить несколько различных (непрограммных) методов.

Использование нарисованной фигуры

Сохранить следующее как файл 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" />

Дополнительная справка:

Использование 9-патчей

A9-патч растягивается фоновое изображение.Если вы создадите изображение с рамкой, тогда оно даст вашему TextView рамку.Все, что вам нужно сделать, это сделать изображение, а затем установить его в качестве фона в вашем TextView.

<TextView
    android:id="@+id/textview1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/my_ninepatch_image" />

Вот несколько ссылок, которые покажут, как сделать изображение с 9 патчами:

Что если я просто хочу верхнюю границу?

Использование списка слоев

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

<?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 было сделано выше.

Вот еще несколько ссылок о списках слоев:

Использование 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>

Вот еще несколько ссылок:

46 голосов
/ 22 ноября 2012

Простой способ - добавить представление для вашего 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>

Для других границ направления, пожалуйста, отрегулируйте расположение вида разделителя.

30 голосов
/ 18 июля 2013

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

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;
    }
}

Надеюсь, это кому-нибудь поможет:)

13 голосов
/ 16 августа 2010

Я только что посмотрел на похожий ответ - это можно сделать с помощью 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); 
}
11 голосов
/ 11 сентября 2015

Вы можете установить границу двумя способами.Один из них можно рисовать, а второй - программно.

Используя 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;
}
10 голосов
/ 04 апреля 2018

Самое простое решение, которое я нашел (и которое действительно работает):

<TextView
    ...
    android:background="@android:drawable/editbox_background" />
10 голосов
/ 13 мая 2014

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

<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>
10 голосов
/ 25 февраля 2012

Я нашел лучший способ поставить рамку вокруг TextView.

Используйте изображение из девяти пятен для фона. Это довольно просто, SDK поставляется с инструментом для создания изображения из 9 патчей и включает в себя абсолютно нет кодирование.

Ссылка http://developer.android.com/guide/topics/graphics/2d-graphics.html#nine-patch.

9 голосов
/ 06 апреля 2014

Проверьте приведенную ниже ссылку, чтобы сделать закругленные углы http://androidcookbook.com/Recipe.seam?recipeId=2318

Переносимая папка под res в проекте Android не ограничивается растровыми изображениями (файлы PNG или JPG), но также может содержать формы, определенныев файлах XML.

Эти фигуры затем могут быть повторно использованы в проекте.Форма может быть использована для наложения границы вокруг макета.В этом примере показана прямоугольная граница с изогнутыми углами.Новый файл с именем customborder.xml создается в папке drawable (в Eclipse используйте меню «Файл» и выберите «New», затем «File», с выбранной папкой «drawable», введите имя файла и нажмите «Finish»).

Определение 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#Shape.

Углы элементов задают скругленные углы прямоугольника.Можно установить разные радиусы для каждого угла (см. Ссылку на 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...