Як встановити межу навколо текстового перегляду Android?

Чи можна намалювати межу навколо перегляду тексту?

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

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

І прямокутник, який малюється back.xml (поміщається в папку res / dravable):

<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/dravable-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" />

Довідка:

• Форма малювання (документи для Android)
• Поради та рекомендації для розробників Android: Малюнки XML (частина 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-латне зображення:

• Намалюйте 9-патч
• Простий генератор дев'яти патчів
• Просте керівництво 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було зроблено малювання вище.

Ось ще кілька посилань про списки шарів:

• Ознайомлення з <layer-list> Android
• Як зробити нижню межу в XML-селекторі, що малюється?
• Створіть рамки для андроїдного виду в драйвовому XML на трьох сторонах?

Використання 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>

Ось ще кілька посилань:

• Як намалювати лінію в Android
• Як розмістити горизонтальну лінію поділки між редагуванням тексту в діяльності
• Як додати горизонтальну лінію 1px над поданням зображення у відносному макеті?

Найпростіший спосіб - додати перегляд для 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;
    }
}

Сподіваюсь, це комусь допоможе :)

Я просто дивився на аналогічну відповідь - це можна зробити за допомогою обведення та наступного виправлення:

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

Межу можна встановити двома методами. Одне - за малюнком, а друге - програмне.

Використання Dravable

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

Найпростіше рішення, яке я знайшов (і яке насправді працює):

<TextView
    ...
    android:background="@android:drawable/editbox_background" />

Я знайшов кращий спосіб встановити межу навколо TextView.

Використовуйте зображення дев'яти патчів для фону. Це досить просто, SDK поставляється з інструментом для створення 9-патч-зображення, а в ньому зовсім немає кодування.

Посилання http://developer.android.com/guide/topics/graphics/2d-graphics.html#nine-patch .

Ви можете додати щось подібне у свій код:

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

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

Папка, що витягується, в розділі res, для проекту 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встановлений у прямокутник (файли форм також підтримують овал, лінію та кільце). Прямокутник - це значення за замовчуванням, тому цей атрибут може бути залишений, якщо це визначений прямокутник. Детальну інформацію про файл форми див. У документації на Android щодо форм на веб-сторінці http://developer.android.com/guide/topics/resources/dravable-resource.html#Shape .

Куточки елементів задають кути прямокутника, які повинні бути закругленими. На кожному куті можна встановити різний радіус (див. Посилання на Android).

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

Колір кордону тут встановлений на світло-сірий (значення шістнадцяткового значення RGB CCCCCC).

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

У межах макета інші види можна додавати як звичайні. У цьому прикладі додано єдиний TextView, а текст - білий (шістнадцятковий RGB) FFFFFF. Фон встановлений у синій колір, плюс деяка прозорість для зменшення яскравості (шістнадцяткове значення A00000FF у альфа-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>

У мене є спосіб зробити це дуже просто, і я хотів би поділитися цим.

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

Зміна відповіді Костянтина Бурова, оскільки в моєму випадку не працює:

<?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', оцінка: 4.1

Ви можете створити спеціальний фон для перегляду тексту. Етапи 1. Перейдіть до свого проекту. 2. Перейдіть до ресурсів і клацніть правою кнопкою миші, щоб перетягнути. 3. Клацніть на Створити -> Файл Drawable Resource 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" />

6. Для перегляду тексту, де ви хочете використовувати його як backgroud,

   android: background = "@ dravable / your_fileName"

Ось мій «простий» клас помічників, який повертає 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;
    }
}

Це може вам допомогти.

<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

Створіть подання рамки з кольором фону як кольором рамки та розміром тексту. встановити прокладку для виду кордону як ширину рамки. Встановіть колір тла перегляду тексту як потрібний колір для перегляду тексту. Тепер додайте свій текстовий вигляд всередині вікна рамки.

Спробуйте це:

<shape>
    <solid android:color="@color/txt_white"/>
    <stroke android:width="1dip" android:color="@color/border_black"/>
</shape>

Існує маса способів додати рамку до 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>

  <View
    android:layout_width="match_parent"
    android:layout_height="2dp"
    android:background="@android:color/black" />

цього коду достатньо, щоб його можна було розмістити куди завгодно

setBackground на вашому перегляді тексту 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"/>