web-dev-qa-db-ja.com

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

私は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のView(特にTextView)に上下の境界線を簡単に追加する方法はありますか?

369
emmby

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>

これのマイナス面は、OHPフィルムが機能しないため、不透明な背景色を指定する必要があることです。 (少なくとも私は彼らがしたと思ったが、私は間違っていた)。上の例では、最初の図形#FFddddddの単色が2番目の図形のストローク色でコピーされていることがわかります。

399
Emile

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

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

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

背景を設定できるレイアウトやビューの周囲に境界線を付ける場合は、これが最も簡単な方法です。このようなXMLファイルをdrawableフォルダーに作成します。

<?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全体をバックグラウンドにしたい場合は、RelativeLayoutViewで埋めるのをやめるバグがあるため、機能しません。その場合はShapeというドロウアブルをお勧めします。

オプション3:9パッチ

最後の選択肢は、このような9パッチのドロアブルを使うことです。

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

この方法の不利な点は色を簡単に変えることができないということですが、あなたが空想の境界線(例えばこの質問のように上下の境界線だけ)が欲しいならばShapeでそれらをすることができないかもしれませんそれは非常に強力ではありません。

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

私はあなたがあなたの視野の上と下の境界線だけが欲しいならば、この本当に簡単なオプションを述べるのを忘れていました。ビューを垂直方向のLinearLayoutに配置し(まだ行っていない場合)、次にこのように上下に空のViewsを追加することができます。

<View Android:background="#000" Android:layout_width="match_parent" Android:layout_height="1px"/>
94
Timmmm

一番下にのみ1dpという白いボーダーを追加し、背景を透明にするには、次のようにします。これは、ここでのほとんどの答えよりも簡単です。

TextViewまたは他のビューの場合:

Android:background="@drawable/borderbottom"

drawableディレクトリに、borderbottom.xmlという次の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は長方形の形状を使用して境界線を作成しますが、その形状のレンダリング領域を超えて上下左右の辺を押します。これにより、下の境界線だけが表示されます。

74
Tigger

それで、私は少し違ったことをしたいと思いました:リストビューディバイダをシミュレートするために底の境界線だけ。私は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>

ちょうど1ピクセルの仕切りを得るためにdpの代わりにpxを使うことに注意してください(いくつかの電話DPIは1dpラインを消すでしょう)。

35
phreakhead

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

このバージョンは完璧に動作します。それはまたあなたが独自にボーダー幅を設定することを可能にし、あなたが望むならあなたは左/右サイドにボーダーを追加することもできます。唯一の欠点は、透明性がサポートされていないことです。

以下のコードで/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でテスト

34
gregschlom

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

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

あなたはあなたが望むものに高さと背景色を変えることができます。

8
MattZ

私の答えは@エミールバージョンに基づいていますが、私は純色の代わりに透明色を使います。
この例は、2dpの下の境界線を引きます。

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

FrameLayoutでビューを折り返してから、フレームの背景色と余白を好きなように設定することもできます。ただし、デフォルトではテキストビューの背景は「透明」であるため、テキストビューの背景色も変更する必要があります。

7
okaram

背景色で1dpの高さのビューを作成しないのはなぜですか。それからそれはあなたがほしいところに容易に置くことができます。

5
Nic Hubbard

私の解決策をリストに追加するためだけに..

私は元の形を越えて伸びる半透明の下の境界線が欲しかった(だから半透明の境界線は 外側 親の長方形だった)。

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

それは私に与えます。

enter image description here

4
Cadab

これを変更するには:

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

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

4
Dinidiniz

まず、以下に示す内容の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の上下に黒い線が表示されます。

4
Nikhil Dinesh

以下のコードを書き留めてください

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

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

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>
1
Levon Petrosyan

画像をリニアレイアウトで折り返して、背景をテキストの周囲の枠線の色に設定します。次に、テキストビューの余白を境界線の太さに設定します。

1
Matt

9パスを使って仕事をすることもできます。色付きのピクセルの高さが増えるのではなく、透明なピクセルだけが増えるように作成します。

1
Kowlown

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

    <?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番目の項目。左右の境界線を隠す.

0
Kavya Shravan
// 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
0
Vinod Joshi
<TextView
    Android:id="@+id/textView3"
    Android:layout_width="match_parent"
    Android:layout_height="2dp"
    Android:background="#72cdf4"
    Android:text=" aa" />

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

0
Aquib Maniyar
<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>
0
Vinoj Vetha