Jak umieścić ramkę wokół widoku tekstu Androida?

Czy można narysować ramkę wokół widoku tekstu?

Można ustawić rysowany kształt (prostokąt) jako tło widoku.

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

I prostokąt rysowany back.xml (umieszczony w folderze 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>

Możesz użyć @android:color/transparentjednolitego koloru, aby mieć przezroczyste tło. Możesz także użyć dopełnienia, aby oddzielić tekst od ramki. Aby uzyskać więcej informacji, zobacz: http://developer.android.com/guide/topics/resources/drawable-resource.html

Pozwól, że streszczę kilka różnych (nieprogramowych) metod.

Używanie kształtu do rysowania

Zapisz następujące pliki 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 dla TextView:

<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 (dokumenty Android)
• Porady i wskazówki dla programistów Androida: Drawable XML (część I)

Korzystanie z 9 łatek

9-łatka to rozciągliwy obraz tła. Jeśli utworzysz obraz z ramką, wówczas ramka TextView doda ramkę. Wszystko, co musisz zrobić, to zrobić obraz, a następnie ustawić go jako tło w TextView.

<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ć obraz z 9 łatami:

• Narysuj 9 łatek
• Prosty generator dziewięciu łat
• Prosty przewodnik po 9-patch dla interfejsu użytkownika Androida
• Tworzenie i używanie 9-łatkowych obrazów w systemie Android

Co jeśli chcę tylko górną ramkę?

Korzystanie z listy warstw

Możesz użyć listy warstw, aby ułożyć dwa prostokąty jeden na drugim. Ustawiając drugi prostokąt nieco mniejszy niż pierwszy prostokąt, można uzyskać 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"powoduje przesunięcie góry (zmniejsza) o 2dp. Pozwala to na przejście pierwszego (dolnego) prostokąta, dając efekt obramowania. Możesz zastosować to do tła shapeTextView w taki sam sposób, jak powyżej.

Oto kilka linków na temat list warstw:

• Zrozumienie <listy graczy> Androida
• Jak zrobić dolną ramkę w selektorze XML kształtu do rysowania?
• Czy tworzysz obramowania w widoku Androida w xml do rysowania z 3 stron?

Korzystanie z 9 łatek

Możesz po prostu zrobić obraz z 9 łatami z pojedynczą ramką. Cała reszta jest taka sama, jak omówiono powyżej.

Korzystanie z widoku

Jest to pewien podstęp, ale działa dobrze, jeśli chcesz dodać separator między dwoma widokami lub ramką do pojedynczego 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>

Oto kilka innych linków:

• Jak narysować linię w Androidzie
• Jak umieścić poziomą linię podziału między edycją tekstu w działaniu
• Jak dodać poziomą linię 1px nad widokiem obrazu w układzie względnym?

Prostym sposobem jest dodanie widoku do TextView. 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>

Dla pozostałych granic kierunku zmień położenie widoku separatora.

Rozwiązałem ten problem, rozszerzając widok tekstu i ręcznie rysując ramkę. Dodałem nawet, abyś mógł wybrać, czy ramka ma być kropkowana czy przerywana.

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

A 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ź - można to zrobić za pomocą pociągnięcia i następującego zastąpienia:

@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ć granicę na dwa sposoby. Jeden jest możliwy do rysowania, a drugi programowy.

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

Programowy

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

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

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

Znalazłem lepszy sposób na umieszczenie ramki wokół TextView.

Jako tło użyj obrazu z dziewięcioma łatami. To dość proste, zestaw SDK jest wyposażony w narzędzie do tworzenia obrazu z 9 łatkami i nie wymaga absolutnie żadnego kodowania.

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

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>

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

Folder rysowany, w res, w projekcie Androida nie jest ograniczony do map bitowych (plików PNG lub JPG), ale może także przechowywać kształty zdefiniowane w plikach XML.

Kształty te można następnie ponownie wykorzystać w projekcie. Za pomocą kształtu można umieścić ramkę wokół układu. Ten przykład pokazuje prostokątną ramkę z zakrzywionymi narożnikami. Nowy plik o nazwie customborder.xml zostanie utworzony w folderze wysuwnym (w Eclipse skorzystaj z menu Plik i wybierz Nowy, a następnie Plik, z zaznaczonym folderem rozwijalnym wpisz nazwę pliku i kliknij przycisk Zakończ).

Wprowadzono XML definiujący kształt obramowania:

<?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:shapejest 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żna pominąć, jeśli jest definiowany prostokąt. Szczegółowe informacje na temat pliku kształtu można znaleźć w dokumentacji Androida dotyczącej kształtów na stronie http://developer.android.com/guide/topics/resources/drawable-resource.html#Shape .

Narożniki elementu ustawiają narożniki prostokąta do zaokrąglenia. Możliwe jest ustawienie innego promienia w każdym rogu (patrz odniesienie do Androida).

Atrybuty wypełnienia służą do przenoszenia zawartości Widoku, do którego zastosowano kształt, aby zapobiec nakładaniu się zawartości na ramkę.

Kolor obramowania jest tutaj ustawiony na jasnoszary (szesnastkowa wartość CCCCCC RGB).

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

W obrębie układu inne widoki można dodać normalnie. W tym przykładzie dodano pojedynczy TextView, a tekst jest biały (szesnastkowy FFFFFF RGB). Tło jest ustawione na niebiesko, a także na pewien stopień przezroczystości w celu zmniejszenia jasności (wartość szesnastkowa alfa RGB A00000FF). Wreszcie układ jest odsunięty od krawędzi ekranu, umieszczając go w innym układzie z niewielką ilością wypełnienia. Pełny plik układu jest zatem:

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

Mam sposób, aby to zrobić bardzo prosto i chciałbym się tym podzielić.

Kiedy chcę wyrównać mi TextViews, po prostu umieszczam je w LinearLayout. Ustawiam kolor tła mojego LinearLayout i dodam margines do TextView. Rezultat jest dokładnie tak, jakbyś wyprostował TextView.

Zmiana odpowiedzi Konstantina Burowa, ponieważ 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, implementacja „com.android.support:appcompat-v7:26.1.0”, stopień: 4.1

Możesz utworzyć niestandardowe tło dla widoku tekstu. Kroki 1. Przejdź do swojego projektu. 2. Przejdź do zasobów i kliknij prawym przyciskiem myszy, aby wyświetlić. 3. Kliknij Nowy -> Plik zasobów do rysowania 4. Podaj nazwę pliku 5. Wklej następujący kod w pliku

<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. W widoku tekstu, w którym chcesz go użyć jako tła,

   android: background = "@ drawable / your_fileName"

Oto moja „prosta” klasa pomocnicza, która zwraca ImageView z ramką. Po prostu upuść to w folderze utils i nazwij 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 dopełnienie widoku ramki jako szerokość ramki. Ustaw kolor tła widoku tekstu jako żądany kolor dla widoku tekstu. Teraz dodaj widok tekstu do widoku obramowania.

Spróbuj tego:

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

Istnieje wiele sposobów dodawania ramki do textView. Najprostszy polega na utworzeniu niestandardowego rysunku i ustawieniu go tak, jak w android:background="@drawable/textview_bg"przypadku textView.

Textview_bg.xml przejdzie pod Drawables i może być coś takiego. Możesz mieć tło solidlub gradienttło (lub nic, jeśli nie jest to wymagane), cornersaby dodać promień narożnika istroke dodać ramkę.

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

ten kod wystarczy, aby umieścić go w dowolnym miejscu

setBackground w widoku tekstowym xml,

dodaj plik rounded_textview.xml do swojego katalogu do rysowania.

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

ustaw plik do rysowania w tle tekstu.

W rzeczywistości jest to bardzo proste. Jeśli chcesz mieć prosty czarny prostokąt za Textview, po prostu dodaj android:background="@android:color/black"wewnątrz tagów TextView . Lubię to:

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