Androidビューの上部と下部に境界線を追加する簡単な方法はありますか?


407

TextViewがあり、その上部と下部の境界線に沿って黒い境界線を追加したいと思います。TextViewにを追加android:drawableTopandroid: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)に上部と下部の境界を簡単に追加する方法はありますか?


2
だれもdividerVerticalについて言及していないのは驚くべきことです!これは、Androidが垂直分割線を実現するために作成したものです。簡単なことではなく、Android Studioの「デザイン」WYSIWYGパネルですべてを行います。
Fattie 2014年

ノートdividerVerticalは、API 11に実装されました
JPM

1
多分あなたはdividerVerticalの使い方を示すことができますか?
androidguy 2017

回答:


430

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番目のシェイプのストロークカラーにコピーされていることがわかります。


11
:また、あなたはすべての周りに境界線をしたい場合にも、TextViewsのために働く、このソリューションを参照してくださいstackoverflow.com/questions/3263611/...
emmby

26
android:color="@null"不透明な背景の問題を回避するために使用してみてください。
MattBriançon、2011

@emmby:このコードをタブレットでテストする場合、スクロールすると1秒後に境界線が表示された後、画面に表示されるまでに時間がかかります
Chetan

5
android:color = "@ null"トリックでは、透明度を維持し、ビューの片側に境界線を表示するだけのトリックはありませんでした。以下のuser1051892からの回答で仕事が完了しました!
Rick Pastoor 2013

8
このソリューションは、左右に境界線を作成しましたが、薄いものです。
AlikElzin-kilaka 2013

279

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

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

3
これは私にとってはうまくいき、ラインを少し細くするためにいくつかの調整を行いました。
ジェフ

1
非常に素晴らしいトリックですが、物事を成し遂げるためにコンピューターをだます必要がない場合は、もっと良いかもしれません。
福沢幸夫2013年

よくできました!注目すべきは、アイテムの左、上、右、下です-(ストロークの幅)dp
asakura89

境界線を表示しませんでした-ビューのコンテンツを小さく見せました:(
AlikElzin-kilaka '30 / 07/30

1
上手くやった、透明な背景で働いた。2.2と4.4.2でテスト済み。その間のすべてをカバーする必要があります:)
HumaN 2013

97

オプション1:描画可能な形状

これは、背景を設定できるレイアウトまたはビューの周囲に境界線が必要な場合に最も簡単なオプションです。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。その場合は、Shapeドローアブルをお勧めします。

オプション3:9パッチ

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

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

この方法の欠点は、色を簡単に変更できないことですが、派手な境界線が必要な場合(たとえば、この質問のように上部と下部の境界線のみ)、Shapeドローアブルでそれらを実行できない場合があります。、それほど強力ではありません。

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

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

<View android:background="#000" android:layout_width="match_parent" android:layout_height="1px"/>

4
9パッチと形状ドローアブルは大丈夫ですが、そのような問題を解決するためにビューやイメージビューを追加しないことをお勧めします。その理由は、レイアウトの再描画とアニメーションを改善するために、そのような<elements>をレイアウトから削除する必要があるためです。私はすぐにこれらを取り除くと、オプション1または2にいくつかの類似したを実装するだろう
エミール・

2
@Emileそれは本当ですが、仕切りをサポートしないカスタムListViewを使用している場合は、単純なビューで問題ありません。パフォーマンスへの影響は、特にレイアウトの奥行きを低く保つことが確実である場合は、nilの次です。また、デバイスをまたがるリストビューディバイダーのバグを回避します(このプロパティを無視するデバイスをいくつか見ました)。
トム・

リストビューで効率的なビューホルダーパターンを使用して、リストのパフォーマンスの低下の原因となることが多いfindViewByIDの呼び出し回数を確実に減らすこともできます。
2013年

iOSでは、その方法は1つしかありません。Androidでは、少なくとも4つをテストする必要があります。私の場合は、オプション4を選択しました。時々、背景としてのドローアブルがレンダリングにハングアップすることに注意してください。
Ratata Tata

1
なぜアンドロイドはそのようなもののための最も簡単な解決策を持っていなかったのですか?HTML、CSS、またはJavaFX、WPFなどの他の言語と同様に
Asif Mushtaq

95

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は長方形の形状を使用して境界線を作成しますが、形状のレンダリング領域を超えて上部、右側、左側を押し出します。これにより、下の境界線のみが表示されます。


8
他のようにオーバードローが発生しないため、これが最良のソリューションです
グレッグエニス

負の位置が(-2dpvs 1dp)でストロークの2倍になる理由はありますか?量が同じ場合に機能するようです(-1および1)。
Denis Kniazhev

@DenisKniazhev:-2dp結果はいつもきれいだった。結果がきれいでないテストケースがあったと思います。それが低密度画面か高密度画面か、Androidの古いバージョン(2.xかもしれません)であったか思い出せません。
Tigger

面白い。これが一般的なケースであるかどうか、たとえば4dp、ストローク幅に使用する場合-8dp、配置に使用する必要がありますか?
Denis Kniazhev

1
@DenisKniazhev:(メモリから)それは浮動小数点計算のようで、少しだけ大きいか小さいかのように見えました。これは、の-5dp幅の値で必要なのはの値だけであることを意味します4pd。浮動小数点値の不正確さを克服するには、少し大きくする必要があるだけです。
Tigger

36

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

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

/res/drawable/top_bottom_borders.xml以下のコードで名前が付けられた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>

マシュマロを介してAndroid KitKatでテスト済み


内部を透明にする方法は?
Hitesh Sahu 2016

1
@HiteshSahuこれの欠点は、レイアウトの背景をここのウィジェットの背景と一致させる必要があることです
chntgomez

35

だから少し違うことをしたかった:下のボーダーのみ、ListViewディバイダーをシミュレートしたかった。私はピエット・デルポートの答えを修正してこれを得ました:

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

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


2
親愛な!の価値は"@color/background_trans_light"何ですか?
Shajeel Afzal 2013

乾杯@phreakhead、これは実際に私のために働く!上、左、右の境界線なし。本当に必要なもの、ありがとう!
shanehoban 2014

2
-2dpを入れても消えてしまい、-1dpを入れてもまだ見えるのはなぜですか?ありがとう!
フランシスコロメロ

9

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

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

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


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"

7

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


ものすごく単純。内側のビューのマージンによって、アウトラインのサイズと方向を制御します。ありがとう。
Scott Biggs

5

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


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>

それは私に与える;

ここに画像の説明を入力してください


4

これを変更するには:

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

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


3

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

<?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の上下に黒い線が表示されます。


はい、動作します。確認しました。ボタンbutton =(ボタン)findViewById(R.id.button); button.setBackgroundResource(R.layout.border);
Nikhil Dinesh

上記のxmlファイルで黒色を使用しました。背景色が黒色である可能性があります。他の色を使用してみてください。間違いなく動作します<?xml version = "1.0" encoding = "UTF-8"?> <shape xmlns:android = " schemas.android.com/apk/res/android "> <solid android:color = "#474848 "/> <stroke android:width =" 1dp "android:color ="#ffff00 "/> <padding android:left =" 1dp "android:top =" 1dp "android:right =" 1dp "android:bottom =" 1dp "/> </ shape>
Nikhil Dinesh、

1
私のために働いていませんでした。境界線は、テキストビューの中央に水平に描かれました。
AlikElzin-kilaka 2013

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

2

これを実現する方法は次のとおりです。

    <?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="@color/grey_coaching_text" />
            </shape>
        </item>

        <item
            android:bottom="1dp"
            android:top="1dp">
            <shape android:shape="rectangle">
                <solid android:color="@color/white" />
            </shape>
        </item>
    </layer-list>

ストロークの最初の項目と無地の背景の2番目の項目。左と右の境界線を非表示にします。


2

を使用して境界線を挿入するための境界線を追加する最も簡単な方法はInsetDrawable、次のように上部の境界線のみを表示します。

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

        <solid android:color="@color/light_gray" />
        <stroke
            android:width=".5dp"
            android:color="@color/dark_gray" />
    </shape>
</inset>

2

res / drawableにファイルを追加

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

このファイルのリンクを背景プロパティに追加します


1

画像をlinearlayoutでラップしてみて、背景をテキストの周りに必要な境界線の色に設定します。次に、textviewのパディングを境界線に必要な厚さに設定します。


1

9パスを使用して作業を行うこともできます。色付きのピクセルの高さが増加せず、透明なピクセルのみが増加するように作成します。


1
<shape xmlns:android="http://schemas.android.com/apk/res/android">

<solid android:color="@color/light_grey1" />
<stroke
    android:width="1dip"
    android:color="@color/light_grey1" />

<corners
    android:bottomLeftRadius="0dp"
    android:bottomRightRadius="0dp"
    android:topLeftRadius="5dp"
    android:topRightRadius="5dp" />

    </shape>

1

上部と下部にビューを追加するだけです 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>

0
// Just simply add border around the image view or view

<ImageView
                android:id="@+id/imageView2"
                android:layout_width="90dp"
                android:layout_height="70dp"
                android:layout_centerVertical="true"
                android:layout_marginRight="10dp"
                android:layout_toLeftOf="@+id/imageView1"
                android:background="@android:color/white"
                android:padding="5dip" />

// After that dynamically put color into your view or image view object

objView.setBackgroundColor(Color.GREEN);

//VinodJ/Abhishek

-1
<TextView
    android:id="@+id/textView3"
    android:layout_width="match_parent"
    android:layout_height="2dp"
    android:background="#72cdf4"
    android:text=" aa" />

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


-1

@phreakheaduser1051892の回答を強制するためだけに、<item android:bottom|android:left|android:right|android:top>否定の場合、回答はより大きい必要があります<stroke android:width>。そうでない場合、アイテムのペイントはストロークのペイントと混合され、これらの値が機能していないと思うかもしれません。

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