web-dev-qa-db-ja.com

Androidのテキストビューの周囲に境界線を付けるにはどうすればよいですか。

テキストビューの周囲に境界線を引くことは可能ですか？

androidandroid-layouttextview
659
yamspog

ビューの背景として、描画可能な図形（長方形）を設定できます。

<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

1170
Konstantin Burov

いくつかの異なる（プログラム的でない）方法を要約しましょう。

シェイプドロウアブルを使う

次のファイルを描画可能なフォルダーに保存します（たとえば、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パッチのイメージを作成する方法を示すリンクがいくつかあります。

一番上の境界線だけが必要な場合はどうすればよいですか。

レイヤーリストを使う

レイヤーリストを使用して、2つの長方形を重ねることができます。 2番目の四角形を最初の四角形よりほんの少し小さくすることで、ボーダー効果を作り出すことができます。最初の（下の）長方形は境界色で、2番目の長方形は背景色です。

<?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オフセットされます（小さくなります）。これにより、最初の（下の）長方形が透けて見え、ボーダー効果が得られます。 shapeドロウアブルが上で行われたのと同じ方法でTextView背景にこれを適用することができます。

これがレイヤリストについてのリンクです。

9パッチを使う

あなたはただ一つのボーダーで9パッチのイメージを作ることができます。他のすべては上で論じたものと同じです。

ビューを使う

これは一種のトリックですが、1つのTextViewに2つのビュー間の境界線または境界線を追加する必要がある場合にはうまくいきます。

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

ここにいくつかのさらなるリンクがあります：

158
Suragch

簡単な方法は、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>

それ以外の方向の境界線については、セパレータビューの位置を調整してください。

46
Young Gu

私はこの問題をテキストビューを拡張して手動でボーダーを引くことによって解決しました。境界線が点線か破線かを選択できるようにしました。

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

これが誰かに役立つことを願っています:)

30
Bojan Jovanovic

私はちょうど同じような答えを見ていました - それはストロークと以下のオーバーライドでされることができます：

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

境界線は2つの方法で設定できます。一つはdrawableによるもので、もう一つはプログラムによるものです。

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;
}
11
Maulik Santoki

私はTextViewの周りに境界線を引くためのより良い方法を見つけました。

背景に9パッチの画像を使用してください。それは非常に簡単です、SDKは9パッチのイメージを作るためのツールを持っています、そしてそれは絶対に no コーディングを含みます。

リンクは http://developer.Android.com/guide/topics/graphics/2d-graphics.html#nine-patch です。

10
Nick

あなたのコードにこのようなものを追加することができます。

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

丸みを帯びた角を作るために下のリンクをチェックしてください http://androidcookbook.com/Recipe.seam?recipeId=2318

Androidプロジェクトのresの下のdrawableフォルダは、ビットマップ（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は長方形に設定されています（シェイプファイルは楕円、線、およびリングもサポートします）。長方形はデフォルト値なので、定義されている長方形の場合はこの属性を省略することができます。シェイプファイルの詳細については、 http://developer.Android.com/guide/topics/resources/drawable-resource.html#Shape で、シェイプに関するAndroidのドキュメントを参照してください。

要素の角は四角形の角を丸く設定します。角ごとに異なる半径を設定することができます（Androidのリファレンスを参照）。

パディング属性は、形状が適用されるビューの内容を移動して内容が境界線と重ならないようにするために使用されます。

ここでの境界色は、薄い灰色（CCCCCCの16進数のRGB値）に設定されています。

図形もグラデーションをサポートしますが、それはここでは使用されていません。繰り返しになりますが、Androidリソースを見て、グラデーションの定義方法を確認してください。形状はAndroid:background="@drawable/customborder"を使ってレイアウトに適用されます。

レイアウト内に他のビューを通常どおりに追加できます。この例では、単一のTextViewが追加されており、テキストは白です（FFFFFF 16進数RGB）。背景は青に設定され、明るさを減らすための透明度（A00000FFの16進アルファ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>
9
Bahaa Hany

私が見つけた（そして実際にはうまくいく）最も簡単な解決策：

<TextView
    ...
    Android:background="@Android:drawable/editbox_background" />
8
Protean

私はそれを非常に簡単にする方法があり、それを共有したいと思います。

私がTextViewsを二乗したいとき、私はそれらをLinearLayoutに入れるだけです。 LinearLayoutの背景色を設定し、TextViewに余白を追加します。結果は、まるであなたがTextViewを二乗したようになります。

7
Roman Panaget

私の場合はうまくいかないので、Konstantin Burovの回答を変更します。

<?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'、gradle：4.1

1
Ejrr1085

これが私の 'simple'ヘルパークラスで、枠付きの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

背景色を境界の色とし、テキストビューのサイズを指定して境界ビューを作成します。ボーダーの幅としてボーダービューのパディングを設定します。テキストビューの背景色をテキストビューの色として設定します。次に、ボーダービュー内にテキストビューを追加します。

0
praveen agrawal

TextViewに境界線を追加する方法はたくさんあります。最も簡単な方法は、カスタムDrawableを作成し、textViewのAndroid:background="@drawable/textview_bg"として設定することです。

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>
0
Akanshi Srivastava

これを試して：

<shape>
    <solid Android:color="@color/txt_white"/>
    <stroke Android:width="1dip" Android:color="@color/border_black"/>
</shape>
0
mohamad sheikhi

これはあなたを助けるかもしれません。

<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