Jak umieścić obramowanie wokół widoku tekstowego systemu Android?

Pozwolę sobie podsumować kilka różnych (Nie-programowych) metod.

Korzystanie z kształtu drawable

Zapisz następujące elementy jako plik XML w folderze do rysowania (na przykład 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>

Następnie ustaw go jako tło do widoku tekstu:

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

Więcej pomocy:

• Shape Drawable (Android docs)
• Android Developer Tips & Tricks: XML Drawables (Część I)

Używanie 9-plastra

A 9-patch to rozciągliwy obraz tła. Jeśli tworzysz obraz z obramowaniem, spowoduje to nadanie widoku TextView obramowania. Wszystko, co musisz zrobić, to zrobić obraz, a następnie ustawić go w tle w widoku tekstowym.

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

Oto kilka linków, które pokażą jak zrobić 9-patchowy obraz:

• Draw 9-patch
• Simple 9-patch Generator
• prosty przewodnik po 9-patch dla Android UI
• Tworzenie i używanie 9-patch obrazy w Androidzie

A jeśli chcę tylko górną granicę?

Korzystanie z listy warstw

Za pomocą listy warstw można układać dwa prostokąty jeden na drugim. Czyniąc drugi prostokąt nieco mniejszym niż pierwszy prostokąt, można utworzyć efekt obramowania. Pierwszy (dolny) prostokąt to kolor obramowania, a drugi prostokąt to kolor tła.

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

Ustawienie android:top="2dp" przesuwa górę (czyni ją mniejszą) o 2dp. Pozwala to na pierwszy (dolny) prostokąt do pokazania, dając efekt obramowania. Możesz zastosować to do tła TextView w ten sam sposób, w jaki shape drawable zostało wykonane powyżej.

Oto kilka linków na temat list warstw:

• zrozumienie Androida
• jak zrobić dolną obramowanie w drawable shape selector XML?
• Tworzenie obramowań na widoku Androida w rysowalnym xml, na 3 stronach?

Korzystanie z 9-patch

Możesz po prostu zrobić 9-patchowy obraz z pojedynczą ramką. Wszystko inne jest takie samo, jak omówione powyżej.

Korzystanie z widoku

Jest to rodzaj sztuczki, ale działa dobrze, jeśli chcesz dodać Oddzielacz między dwoma widokami lub obramowaniem do pojedynczego widoku tekstowego.

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

Oto jeszcze kilka linków:

• Jak narysować linię w Androidzie
• jak umieścić poziomą linię dzielnika między edytowanym tekstem w aktywność
• Jak dodać poziomą linię 1px nad widokiem obrazu w układzie względnym?

Prostym sposobem jest dodanie widoku dla widoku tekstowego. Przykład dolnej linii granicznej:

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

W przypadku obramowania drugiego kierunku należy dostosować położenie widoku separatora.

Rozwiązałem ten problem, rozszerzając widok tekstu i rysując ręcznie obramowanie. Dodałem nawet, dzięki czemu można wybrać, czy obramowanie jest przerywane lub przerywane.

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

I klasa graniczna:

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

Mam nadzieję, że to komuś pomoże:)

Właśnie patrzyłem na podobną odpowiedź - da się to zrobić za pomocą udaru i następującego obejścia:

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

Możesz ustawić obramowanie za pomocą dwóch metod. Jeden jest drawable, a drugi programmatic.

Użycie 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;
}

Znalazłem lepszy sposób na umieszczenie obramowania wokół widoku tekstowego.

Użyj obrazka z dziewięcioma łatkami dla tła. Jest to dość proste, SDK jest wyposażony w narzędzie do tworzenia obrazu 9-patch, i obejmuje absolutnie NIE kodowanie.

Link to http://developer.android.com/guide/topics/graphics/2d-graphics.html#nine-patch .

Sprawdź poniższy link, aby uzyskać zaokrąglone rogi http://androidcookbook.com/Recipe.seam?recipeId=2318

Drawable folder, w res, w projekcie Android nie jest ograniczony do bitmap (plików PNG lub JPG), ale może również zawierać kształty zdefiniowane w plikach XML.

Te kształty mogą być ponownie wykorzystane w projekcie. Kształt może być użyty do umieszczenia obramowania wokół układu. Ten przykład pokazuje prostokątną obramowanie z zakrzywionymi narożnikami. Nowy plik o nazwie customborder.XML jest tworzony w folderze drawable (w Eclipse użyj menu File i wybierz New then File, z folderem drawable wybierz typ w nazwie pliku i kliknij Finish).

XML definiujący kształt obramowania jest wprowadzany:

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

Atrybut android:shape jest ustawiony na prostokąt (pliki kształtów obsługują również owal, linię I Pierścień). Prostokąt jest wartością domyślną, więc ten atrybut może zostać pominięty, jeśli jest zdefiniowany prostokąt. Zobacz dokumentację Androida dotyczącą kształtów na http://developer.android.com/guide/topics/resources/drawable-resource.html#Shape aby uzyskać szczegółowe informacje na temat pliku kształtu.

Element corners ustawia zaokrąglone narożniki prostokąta. Można ustawić inny promień na każdym rogu (zobacz odniesienie do Androida).

Atrybuty padding są używane do przesuwania zawartości widoku, do którego został zastosowany kształt, aby zapobiec nakładaniu się zawartości granica.

Kolor obramowania jest tutaj ustawiony na światło szary (CCCCCC szesnastkowa wartość RGB).

Kształty również obsługują gradienty, ale nie jest to tutaj używane. Ponownie zobacz zasoby Androida, aby zobaczyć, jak zdefiniowano gradient. Kształt jest nakładany na układ za pomocą android:background="@drawable/customborder".

W układzie inne widoki mogą być dodawane normalnie. W tym przykładzie dodano pojedynczy widok tekstu, a tekst jest biały (ffffff szesnastkowy RGB). Tło jest ustawione na niebieski, plus trochę przezroczystości, aby zmniejszyć jasność (a00000ff szesnastkowy Alfa Wartość RGB). Na koniec układ jest przesunięty od krawędzi ekranu, umieszczając go w innym układzie z niewielką ilością wypełnienia. Pełny plik układu wygląda następująco:

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

Możesz dodać coś takiego w swoim kodzie:

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

Mam na to sposób bardzo prosty i chciałbym się nim podzielić.

Kiedy chcę ustawić mi TextViews, po prostu umieszczam je w LinearLayout. Ustawiam kolor tła LinearLayout i dodaję padding do widoku tekstu. Wynik jest dokładnie taki, jak w przypadku kwadratu widoku tekstu.

Najprostsze rozwiązanie jakie znalazłem (i które faktycznie działa):

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

Oto moja 'prosta' klasa pomocnicza, która zwraca ImageView z obramowaniem. Po prostu wrzuć to do folderu utils i nazwij to tak:

ImageView selectionBorder = BorderDrawer.generateBorderImageView(context, borderWidth, borderHeight, thickness, Color.Blue);

Oto kod.

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

To może Ci pomóc.

<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

Utwórz widok obramowania z kolorem tła jako kolorem obramowania i rozmiarem widoku tekstowego. Ustaw obramowanie jako szerokość obramowania. Ustaw kolor tła widoku tekstowego jako kolor, który chcesz dla widoku tekstowego. Teraz dodaj swój widok tekstowy wewnątrz widoku obramowania.

Zmiana odpowiedzi Konstantina Burowa, bo nie działa w moim przypadku:

<?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, realizacja " com.android.support:appcompat-v7: 26.1.0", gradle: 4.1

To bardzo proste. Jeśli chcesz mieć prosty czarny prostokąt za Textview, po prostu dodaj android:background="@android:color/black" wewnątrz znaczników TextView. TAK:

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