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


回答:


1274

ドローアブル(長方形)をビューの背景として設定できます。

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

長方形のドローアブル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を参照してください。


83
上部の境界線だけが必要な場合はどうなりますか?
happyhardik

19
@whyoz彼の方法は、ビュー階層に不要な複雑さを追加します。彼のメソッドを使用するには、2つの追加ビュー(レイアウトコンテナーとボーダービュー)が必要です。したがって、ボーダーを追加する必要のあるビューが多数ある場合、ビューツリーは管理できなくなります。
Konstantin Burov 2013年

5
@whyozまだこのメソッドはスタイルとテーマを介して適用される可能性がありますが、YongGuのメソッドはこの方法では使用できません。
Konstantin Burov 2013年

12
以下のためにのみ上部の境界線を参照してくださいこの質問を
2014

7
このツールhttp://shapes.softartstudio.comを使用して、ドローアブルを生成できます。
Arda Basoglu 2015年

187

いくつかの異なる(プログラムではない)メソッドを要約します。

ドローアブルを使用する

以下を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パッチイメージの作成方法を示すリンクです。

上部の境界線だけが必要な場合はどうなりますか?

レイヤーリストの使用

レイヤーリストを使用して、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パッチの使用

境界線が1つしかない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>

ここにいくつかのリンクがあります:


24
ああ、これは複雑なborder: 1px solid #999;ことではありません。
Achshar 2018

シャドウとリップル効果もあるtextviewの境界線が必要な場合はどうなりますか?
Akash Dubey

@AkashDubey、申し訳ありません、私は前にそれをしていません。それぞれを個別に試し、それらを組み合わせることをお勧めします。行き詰まった場合は、Stack Overflowで新しい質問をしてください。
Suragch 2018年

49

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

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


3
私の経験では、このソリューションは古いデバイスで、アプリのパフォーマンスに目に見える静かな影響を与えます。
Roberto Lombardini

43
これはインフレの観点からすると恐ろしい解決策です。3つの新しいビュー要素を作成し、ビュー階層の深さにもう1つのレベルを追加します
フィリップ2013年

フィリップが言ったようにインフレ見通しの観点から最悪の解決策。textViewにはそれを行うための特定のxmlタグがあることをご存知ですか。TextViewの左/右/上/下に描画する画像を定義します。それらはandroid:
drawable

32

この問題を解決するには、textviewを拡張し、境界線を手動で描画します。ボーダーが点線か破線かを選択できるように追加しました。

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

これが誰かを助けることを願っています:)


境界線を初期化するには?
zionpi

コードは、定義された値の半分のサイズで境界線を描画することをコードが示しているため、正しく機能しません
ucMedia

14

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

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

すごい!私の唯一の懸念は、電話とエミュレーターの両方でdrawRoundRectを使用すると、ストロークが隅で醜いことです。
erdomester

1
@erdomesterたぶんペイントStrokePaint = new Paint(Paint.ANTI_ALIAS_FLAG); 「隅の醜い」問題を解決します
P-RAD

14

ボーダーは2つの方法で設定できます。1つはドローアブルによるもので、もう1つはプログラムによるものです。

ドローアブルの使用

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

その形状XMLは、textViewとどのように関連しますか?
Neo42、2018年

14

私が見つけた(そして実際に機能する)最も簡単な解決策:

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

これを1つの場所からすべてのテキストビューに適用することは可能ですか?
Ian Warburton、2018

手っ取り早くいいね。ただし、実行中のデバイスのバージョンによっては、非常に異常な影響が出る可能性があります。これは、GoogleがEditTextの外観を常に変更しているためです(流行りのままにしましょう!)
Scott Biggs

11

TextViewの周囲に境界線を配置するより良い方法を見つけました。

背景には9パッチ画像を使用します。とてもシンプルで、SDKには9パッチイメージを作成するツールが付属しており、コーディングは一切必要ありません

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


2
はい、便利ですが、これはどのように優れていますか?
aggregate116​​6877

2
受け入れられた答えが言うように形状を使用することは9パッチよりも優れており、XMLファイルはグラフィックアセットよりも柔軟性があります
Jose_GD

もちろん、プログラムで必要なグラフィックの作成に限定したい場合は、より柔軟です。
Nick

2
形状のアプローチは役に立たない。おそらく「透明」に設定されているかどうかに関係なく、タグ「固体」が常に処理されることを経験している唯一の人はおそらく私だけだ。そして、BORDERを作成したい場合は、内側が色付きで、境界線が色付きの長方形。そしてそれは決して透明な固体ではありません。それは常に色を乱します。また、別のクラスを継承するクラスも、継承されるため、すべての機能を備えている必要があります。基本的なOO-design-guidelinesがandroidによって壊れている理由は、本当に理解できません。たとえば、私はボタンから継承しました。すべての機能がなくなりました。どうして ?
icbytes 2014年

2
@ジェレミー目に見えて遅い?それをどのように観察しますか?
IgorGanapolsky 2014

11

コードに次のようなものを追加できます。

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

なぜ脳卒中が必要なのですか?
IgorGanapolsky 2014

@IgorGanapolsky、ストロークは実際の境界線を作成しますか?
Tash Pemhiwa 16

10

以下のリンクをチェックして、角を丸くして くださいhttp://androidcookbook.com/Recipe.seam?recipeId=2318

Androidプロジェクトのresの下にあるドローアブルフォルダーは、ビットマップ(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"ます。

レイアウト内には、他のビューを通常どおり追加できます。この例では、1つの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>

リンクは将来のある時点で壊れる傾向があるため、リンクのみの回答はお勧めしません。リンクの関連部分をこの回答に追加して、リンクが利用できない場合でも情報を利用できるようにします。
アンディ

8

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

TextViewをmiで四角にしたい場合は、それらをLinearLayoutに配置します。LinearLayoutの背景色を設定し、TextViewにマージンを追加します。結果は、TextViewを二乗した場合とまったく同じです。


2

私の場合はうまくいかないのでコンスタンチン・ブロフの答えを変える:

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


2

テキストビューのカスタム背景を作成できます。手順1.プロジェクトに移動します。2.リソースに移動し、右クリックして描画可能にします。3. [新規]-> [描画可能リソースファイル]をクリックします。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" />

  1. バックグラウンドとして使用するテキストビューの場合、

    android:background = "@ drawable / your_fileName"


1

これは、ボーダー付きの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;
    }
}

どうやって使うのselectionBorder
Tash Pemhiwa 16

@TashPemhiwa Button.setBackgroundDrawable();
NinjaOnSafari 2017

0

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

<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

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


0

これを試して:

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

0

textViewにボーダーを追加する方法はたくさんあります。最も簡単な方法は、カスタムドローアブルを作成して、 android:background="@drawable/textview_bg"て、textViewにです。

textview_bg.xmlはDrawablesの下にあり、このようなものにすることができます。あなたが持つことができるsolidgradient(必須ではありません場合または何も)、背景を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
  <View
    android:layout_width="match_parent"
    android:layout_height="2dp"
    android:background="@android:color/black" />

このコードで、どこにでも配置できます


0

xmlテキストビューのsetBackground、

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バックグラウンドで設定します。


-1

実際、それはとても簡単です。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"/>

彼は完全な背景ではなく境界線を求めます。
ガイ
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.