Как разместить рамку вокруг текстового вида Android?

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

540
задан yamspog 16 авг. '10 в 21:50
источник поделиться
13 ответов

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

<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

981
ответ дан Konstantin Burov 16 авг. '10 в 21:56
источник поделиться

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

Используя форму, пригодную для рисования

Сохраните следующее в виде 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-патча

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-патч-образ:

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

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

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

<?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 drawable.

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

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

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

Использование представления

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

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

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

107
ответ дан Suragch 04 апр. '15 в 13:02
источник поделиться

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

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

41
ответ дан Young Gu 22 нояб. '12 в 4:59
источник поделиться

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

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

И класс border:

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

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

25
ответ дан Bojan Jovanovic 17 июля '13 в 23:25
источник поделиться

Я просто смотрел на похожий ответ - он мог быть выполнен с помощью 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
ответ дан sdtechcomm 16 авг. '10 в 21:56
источник поделиться

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

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

Programmatic


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;
}
9
ответ дан Maulik Santoki 11 сент. '15 в 22:19
источник поделиться

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

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

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

9
ответ дан Nick 25 февр. '12 в 7:28
источник поделиться

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

<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>
8
ответ дан newbie 13 мая '14 в 7:39
источник поделиться

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

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

Эти формы затем могут быть повторно использованы в проекте. Форма может быть использована для размещения границы вокруг макета. В этом примере показана прямоугольная рамка с изогнутыми углами. В выпадающей папке создается новый файл 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 установлен в прямоугольник (файлы формы также поддерживают овал, линию и кольцо). Rectangle - значение по умолчанию, поэтому этот атрибут может быть опущен, если он определен как прямоугольник. Подробную информацию о файле формы см. В документации по форматам на http://developer.android.com/guide/topics/resources/drawable-resource.html#Shape.

Углы элементов устанавливают углы прямоугольника для округления. На каждом углу можно задать другой радиус (см. Ссылку на Android).

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

Цвет рамки здесь установлен на светло-серый (CXCCC шестнадцатеричное значение RGB).

Формы также поддерживают градиенты, но здесь они не используются. Опять же, просмотрите ресурсы Android, чтобы узнать, как определяется градиент. Форма применяется к простыне с помощью android:background="@drawable/customborder".

В макете могут быть добавлены другие представления как обычно. В этом примере был добавлен один TextView, а текст белый (FFFFFF шестнадцатеричный RGB). Фон установлен на синий, плюс прозрачность, чтобы уменьшить яркость (значение A00000FF hexadecimal alpha RGB). Наконец, макет смещается с края экрана, помещая его в другой макет с небольшим количеством отступов. Таким образом, полный файл макета:

<?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>
8
ответ дан Bahaa Hany 06 апр. '14 в 21:13
источник поделиться

У меня есть способ сделать это очень просто, и я хотел бы поделиться им.

Когда я хочу квадрат mi TextViews, я просто помещаю их в LinearLayout. Я установил цвет фона моего LinearLayout, и я добавляю дополнение к моему TextView. Результат в точности соответствует квадрату TextView.

5
ответ дан Roman Panaget 14 авг. '15 в 21:13
источник поделиться

Вот мой "простой" вспомогательный класс, который возвращает ImageView с границей. Просто отбросьте это в своей папке utils и назовите его следующим образом:

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;
    }
}
1
ответ дан Aggressor 18 авг. '15 в 21:26
источник поделиться

Это может вам помочь.

<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
0
ответ дан Mete 21 июня '14 в 21:17
источник поделиться

На самом деле, это очень просто. Если вам нужен простой черный прямоугольник за 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"/>
-2
ответ дан user3631822 14 июля '14 в 16:39
источник поделиться

Другие вопросы по меткам или Задайте вопрос