431

TextView があり、上下の境界線に沿って黒い境界線を追加したいと思います。TextView にandroid:drawableTopandを追加しようとしましたが、ビュー全体が黒くなるだけでした。android:drawableBottom

<TextView
    android:background="@android:color/green"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:drawableTop="@android:color/black"
    android:drawableBottom="@android:color/black"
    android:text="la la la" />

Android のビュー (特に TextView) に上下の境界線を簡単に追加する方法はありますか?

4

24 に答える 24

451

Android 2.2では、次のことができます。

/res/drawable/textlines.xml などの xml ドローアブルを作成し、これを TextView の background プロパティとして割り当てます。

<TextView
android:text="My text with lines above and below"
android:background="@drawable/textlines"
/>

/res/drawable/textlines.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item>
      <shape 
        android:shape="rectangle">
            <stroke android:width="1dp" android:color="#FF000000" />
            <solid android:color="#FFDDDDDD" />

        </shape>
   </item>

   <item android:top="1dp" android:bottom="1dp"> 
      <shape 
        android:shape="rectangle">
            <stroke android:width="1dp" android:color="#FFDDDDDD" />
            <solid android:color="#00000000" />
        </shape>
   </item>

</layer-list>

これの欠点は、透明度が機能しないため、不透明な背景色を指定する必要があることです。(少なくとも私はそう思っていましたが、私は間違っていました)。上記の例では、最初のシェイプ #FFdddddd の単色が 2 番目のシェイプのストローク カラーにコピーされていることがわかります。

于 2010-11-30T11:43:30.910 に答える
300

ボーダーがコンテナーの外側に表示されるようにトリックを使用しました。このトリックでは線のみが描画されるため、下にあるビューの背景が表示されます。

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item
        android:bottom="1dp"
        android:left="-2dp"
        android:right="-2dp"
        android:top="-2dp">
        <shape android:shape="rectangle" >
            <stroke
                android:width="1dp"
                android:color="#FF000000" />

            <solid android:color="#00FFFFFF" />

            <padding android:left="10dp"
                android:right="10dp"
                android:top="10dp"
                android:bottom="10dp" />
        </shape>
    </item>

</layer-list>
于 2012-05-24T07:26:40.430 に答える
114

下部のみに白い境界線を追加し、1dp背景を透明にするには、ここでのほとんどの回答よりも簡単な次を使用できます。

またはその他のビューの場合、TextView次を追加します。

android:background="@drawable/borderbottom"

ディレクトリにdrawable次の XML を追加します。borderbottom.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:top="-2dp" android:left="-2dp" android:right="-2dp">
        <shape android:shape="rectangle">
            <stroke android:width="1dp" android:color="#ffffffff" />
            <solid android:color="#00000000" />
        </shape>
    </item>
</layer-list>

上部に境界線が必要な場合は、をに変更android:top="-2dp"しますandroid:bottom="-2dp"

色は白である必要はなく、背景も透明である必要はありません。

このsolid要素は必須ではない場合があります。これはデザインによって異なります (V. Kalyuzhnyu に感謝します)。

基本的に、この XML は長方形の形状を使用して境界線を作成しますが、形状のレンダリング領域を超えて上、右、および左の側面を押し出します。これにより、下の境界線だけが表示されたままになります。

于 2015-06-23T04:37:33.477 に答える
100

オプション 1: Shape Drawable

背景を設定できるレイアウトまたはビューの周囲に境界線が必要な場合は、これが最も簡単なオプションです。drawable次のようなフォルダーに XML ファイルを作成します。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >

    <solid android:color="#8fff93" />

    <stroke
        android:width="1px"
        android:color="#000" />

</shape>

solid塗りつぶしたくない場合は削除できます。background="@drawable/your_shape_drawable"レイアウト/ビューのセット。

オプション 2: バックグラウンド ビュー

これは、私が で使用した小さなトリックRelativeLayoutです。基本的に、境界線を付けたいビューの下に黒い四角形があり、そのビューにパディング (余白ではありません!) を与えて、黒い四角形が端から見えるようにします。

明らかに、これはビューに透明な領域がない場合にのみ適切に機能します。その場合はBorderView、境界線のみを描画するカスタムを作成することをお勧めします。これは、数十行のコードである必要があります。

<View
    android:id="@+id/border"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignBottom="@+id/image"
    android:layout_alignLeft="@+id/image"
    android:layout_alignRight="@+id/image"
    android:layout_alignTop="@+id/main_image"
    android:background="#000" />

<ImageView
    android:id="@+id/image"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_...
    android:padding="1px"
    android:src="@drawable/..." />

あなたが疑問に思っているなら、それで動作しadjustViewBounds=trueます。RelativeLayoutただし、全体に背景が必要な場合は機能しません。これはRelativeLayout、 をView. その場合は、Shapedrawable をお勧めします。

オプション 3: 9 パッチ

最後のオプションは、次のような 9 パッチのドローアブルを使用することです。

を設定できる任意のビューで使用できますandroid:background="@drawable/..."。はい、6x6 である必要があります - 私は 5x5 を試しましたが、うまくいきませんでした。

この方法の欠点は、色を簡単に変更できないことですが、派手な境界線 (たとえば、この質問のように上下の境界線のみ) が必要な場合は、Shapedrawableでは変更できない可能性があります。 、あまり強力ではありません。

オプション 4: 追加のビュー

ビューの上下に境界線のみが必要な場合は、この非常に単純なオプションについて言及するのを忘れていました。ビューを垂直に配置しLinearLayout(まだない場合)、次Viewのように上下に空の sを追加できます。

<View android:background="#000" android:layout_width="match_parent" android:layout_height="1px"/>
于 2012-10-17T10:56:15.047 に答える
40

現在受け入れられている答えは機能しません。アンチエイリアシングの結果として、ビューの左右に細い垂直の境界線が作成されます。

このバージョンは完全に機能します。また、ボーダーの幅を個別に設定することもでき、必要に応じて左右にボーダーを追加することもできます。唯一の欠点は、透過性をサポートしていないことです。

以下のコードで名前を付けた xml ドローアブルを作成/res/drawable/top_bottom_borders.xmlし、TextView の background プロパティとして割り当てます。

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#DDDD00" /> <!-- border color -->
        </shape>
    </item>

    <item
        android:bottom="1dp" 
        android:top="1dp">   <!-- adjust borders width here -->
        <shape android:shape="rectangle">
            <solid android:color="#FFFFFF" />  <!-- background color -->
        </shape>
    </item>
</layer-list>

Marshmallow を介して Android KitKat でテスト済み

于 2016-06-10T00:36:06.033 に答える
36

だから私は少し違うことをしたいと思っていました.ListViewディバイダーをシミュレートするために、下部のみの境界線です。私はPiet Delportの答えを修正し、これを得ました:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
   <item>
      <shape 
        android:shape="rectangle">
            <solid android:color="@color/background_trans_light" />    

        </shape>
   </item>

    <!-- this mess is what we have to do to get a bottom border only. -->
   <item android:top="-2dp"
         android:left="-2dp"
         android:right="-2dp"
         android:bottom="1px"> 
      <shape 
        android:shape="rectangle">    
            <stroke android:width="1dp" android:color="@color/background_trans_mid" />
            <solid android:color="@null" />
        </shape>
   </item>

</layer-list>

dp の代わりに px を使用して、正確に 1 ピクセルの分割線を取得することに注意してください (一部の電話 DPI では 1 dp の線が消えます)。

于 2013-07-18T04:06:02.780 に答える
9

@Nic Hubbard が言ったように、境界線を追加する非常に簡単な方法があります。

<View
    android:layout_width="match_parent"
    android:layout_height="2dp"
    android:background="#000000" >
</View>

高さと背景色を好きなように変更できます。

于 2014-11-23T14:22:00.187 に答える
8

私の答えは @Emile バージョンに基づいていますが、単色ではなく透明色を使用しています。
この例では、2 dp の下枠を描画します。

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item>
        <shape android:shape="rectangle" >
            <stroke  android:width="2dp"
                     android:color="#50C0E9" />
            <solid android:color="@android:color/transparent" />
        </shape>
    </item>
    <item  android:bottom="2dp" >
        <shape android:shape="rectangle" >
            <stroke  android:width="2dp"
                     android:color="@color/bgcolor" />
            <solid android:color="@android:color/transparent" />
        </shape>
    </item>
</layer-list>

@color/bgcolorは、境界線でビューを描画する背景の色です。

ボーダーの位置を変更したい場合は、次のいずれかでオフセットを変更します。

android:bottom="2dp"
android:top="2dp"
android:right="2dp"
android:left="2dp"

または、それらを組み合わせて 2 つ以上の境界線を作成します。

android:bottom="2dp" android:top="2dp"
于 2013-06-01T10:37:32.237 に答える
8

ビューを FrameLayout でラップしてから、フレームの背景色とパディングを必要なものに設定することもできます。ただし、デフォルトではテキストビューの背景は「透明」なので、テキストビューの背景色も変更する必要があります。

于 2010-09-30T00:17:04.373 に答える
5

背景色で 1 dp の高さのビューを作成しないのはなぜですか? その後、好きな場所に簡単に配置できます。

于 2013-09-30T20:40:59.853 に答える
5

これを変更するには:

<TextView
    android:text="My text"
    android:background="@drawable/top_bottom_border"/>

「drawable/top_bottom_border.xml」でこのアプローチを好みます。

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <gradient
                android:angle="270"
                android:startColor="#000"
                android:centerColor="@android:color/transparent"
                android:centerX="0.01" />
        </shape>
    </item>
    <item>
        <shape>
            <gradient
                android:angle="90"
                android:startColor="#000"
                android:centerColor="@android:color/transparent"
                android:centerX="0.01" />
        </shape>
    </item>
</layer-list>

これは、背景に色がある場合に表示される長方形ではなく、境界線のみを作成します。

于 2016-03-28T16:40:21.837 に答える
4

まず、以下の内容の xml ファイルを作成し、border.xml という名前を付けて、res ディレクトリ内の layout フォルダー内に配置します。

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <stroke android:width="1dp" android:color="#0000" />
    <padding android:left="0dp" android:top="1dp" android:right="0dp"
        android:bottom="1dp" />
</shape>

その後、コード内で使用します

TextView tv = (TextView)findElementById(R.id.yourTextView);
tv.setBackgroundResource(R.layout.border);

これにより、TextView の上下に黒い線が作成されます。

于 2012-03-13T05:28:16.190 に答える
4

私のソリューションをリストに追加するだけです..

元の形状を超えて伸びる半透明の下部境界線が必要でした (したがって、半透明の境界線は親の四角形の外側にありました)。

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
  <item>
    <shape android:shape="rectangle" >      
      <solid android:color="#33000000" /> <!-- Border colour -->
    </shape>
  </item>
  <item  android:bottom="2dp" >
    <shape android:shape="rectangle" >     
      <solid android:color="#164586" />
    </shape>
  </item>
</layer-list>

それは私に与えます。

ここに画像の説明を入力

于 2015-02-25T16:07:56.840 に答える
4

の上部と下部にビューを追加するだけです。View

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="@color/your_color"
        app:layout_constraintBottom_toTopOf="@+id/textView"
        app:layout_constraintEnd_toEndOf="@+id/textView"
        app:layout_constraintStart_toStartOf="@+id/textView" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="32dp"
        android:gravity="center"
        android:text="Testing"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="@color/your_color"
        app:layout_constraintEnd_toEndOf="@+id/textView"
        app:layout_constraintStart_toStartOf="@+id/textView"
        app:layout_constraintTop_toBottomOf="@+id/textView" />

</android.support.constraint.ConstraintLayout>
于 2019-01-23T23:10:51.347 に答える
3

以下のコードを書き留めます

<View
    android:layout_width="wrap_content"
    android:layout_height="2dip"
    android:layout_below="@+id/topics_text"
    android:layout_marginTop="7dp"
    android:layout_margin="10dp"
    android:background="#ffffff" />
于 2015-02-17T08:28:44.780 に答える
1

画像をlinearlayoutでラップしてみて、その背景をテキストの周りに必要な境界線の色に設定してください. 次に、テキストビューのパディングを境界線に必要な太さに設定します。

于 2011-03-20T00:22:54.383 に答える
1

9 パスを使用してジョブを実行することもできます。色付きのピクセルは高さを増やさず、透明ピクセルだけ増やせるように作成します。

于 2012-04-17T16:20:39.127 に答える
-1
<TextView
    android:id="@+id/textView3"
    android:layout_width="match_parent"
    android:layout_height="2dp"
    android:background="#72cdf4"
    android:text=" aa" />

境界線を追加するテキストの下にこの TextView を追加するだけです

于 2013-06-20T07:31:34.053 に答える