android - Androidテキストビューの周りに境界線を引くにはどうすればよいですか?

Question

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

score 1377 · Accepted Answer

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

<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を参照してください。

score 219 · Accepted Answer

いくつかの異なる (非プログラム的な) メソッドを要約してみましょう。

シェイプドローアブルの使用

以下を 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"すると、上部が 2 dp オフセットされます (小さくなります)。これにより、最初の (下の) 長方形が透けて見えるようになり、境界線効果が得られます。shape上でドローアブルを行ったのと同じ方法で、これを TextView バックグラウンドに適用できます。

レイヤーリストに関するその他のリンクを次に示します。

9 パッチの使用

単一の境界線で 9 パッチの画像を作成できます。他のすべては、上記で説明したものと同じです。

ビューの使用

これは一種のトリックですが、2 つのビューの間の区切り記号または単一の 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>

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

score 50 · Accepted Answer

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

他の方向の境界については、区切りビューの位置を調整してください。

score 16 · Accepted Answer

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

ドローアブルの使用

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

score 15 · Accepted Answer

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

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

score 12 · Accepted Answer

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

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

score 11 · Accepted Answer

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

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

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

score 1 · Accepted Answer

これは、境界線を含む 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;
    }
}

score 0 · Accepted Answer

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

<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

score 0 · Accepted Answer

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

score -2 · Accepted Answer

実際、それは非常に簡単です。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"/>

android - Androidテキストビューの周りに境界線を引くにはどうすればよいですか?

23 に答える 23

シェイプ ドローアブルの使用

9 パッチの使用

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

ドローアブルの使用

Related

Reference

シェイプドローアブルの使用