線形レイアウトの片側だけに境界線を描く方法は?


185

直線レイアウトに境界線を描画することはできますが、すべての側面に描画されています。CSSの場合と同様に、右側のみに制限したい(border-right:1px赤一色;)。

私はこれを試しましたが、それでもすべての面で描画されます:

<?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:height="2dp"
            android:width="2dp"
            android:color="#FF0000" />

        <solid android:color="#000000" />

        <padding
            android:bottom="0dp"
            android:left="0dp"
            android:right="1dp"
            android:top="0dp" />

        <corners
            android:bottomLeftRadius="0dp"
            android:bottomRightRadius="5dp"
            android:radius="1dp"
            android:topLeftRadius="5dp"
            android:topRightRadius="0dp" />
    </shape>
</item>

これを達成する方法に関する提案はありますか?

ところで、必要な側に幅1 dpのビューを配置するハックは使いたくありません。


レイアウトで
drawableLeft

回答:


358

これを使用して、片側の境界線を取得できます

<?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="#FF0000" />
    </shape>
</item>
<item android:left="5dp">
    <shape android:shape="rectangle">
        <solid android:color="#000000" />
    </shape>
</item>
</layer-list>

編集済み

私を含む多くの人が透明な背景の片側の境界線を望んでいたので、BorderDrawablecssを使用するのと同じ方法で、異なるサイズと色の境界線を与えることができるを実装しました。しかし、これはxml経由では使用できませんでした。XMLをサポートするためにBorderFrameLayout、レイアウトをラップできるを追加しました。

完全なソースについては、私のgithubを参照してください。


5
下枠付きのアルファベースの単色が必要な場合はどうしますか?私はAndroid Drawable XML APIでその解決策を考えていましたが、理解できません。
Mario Lenci

これは私にとってはうまくいきませんでした-奇妙なことに、内側に暗い色が欲しかったものの逆で、ボーダーのために灰色のグラデーションを重ねました。長方形を特定のサイズで描画可能にして、アイテムにdrawableLeftとして配置することを検討しています。これは合理化されていないようです。
jbenowitz 2013年

@jbenowitz:レイヤーリスト内のアイテムの順序がより重要です。あなたが逆の場合、あなたはそれらの結果を得るでしょう。
Vivek Khandelwal 2013年

境界線の色とボタンの色を維持する形状にストロークを追加することで、これを修正しました。これでうまくいきました。
jbenowitz 2013年

242

パイのように簡単で、透明なbgが可能です。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:angle="0"
        android:startColor="#f00"
        android:centerColor="@android:color/transparent"
        android:centerX="0.01" />
</shape>

角度を変更して境界線の位置を変更します。

  • 0 =左
  • 90 =下
  • 180 =右
  • 270 =上

19
これは断然最高の答えですが、あまりにも悪いので、賛成されていません
mittelmania 14

11
いいですが、「パイのように簡単」とは言えません。
funkybro

7
太い境界線が必要な場合、または複数の辺に境界線が必要な場合、これは機能しません。
ホログラフィック原理

1
@codeman-これをビューの背景として使用すると、高さが継承されます。
Oded Breiner、2015年

2
ストロークまたは境界線の幅を調整する方法は?
Ruturaj Patil 2017

101

単一のレイヤーを使用して必要なものを実装することも可能です

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

    <item
        android:bottom="-5dp"
        android:right="-5dp"
        android:top="-5dp">
        <shape android:shape="rectangle" >
            <solid android:color="@color/color_of_the_background" />

            <stroke
                android:width="5dp"
                android:color="@color/color_of_the_border" />
        </shape>
    </item>

</layer-list>

この方法は、唯一の左の境界線が表示されていますが、一緒に遊んでお好きな組み合わせを実現することができbottomleftrighttopの属性item要素


3
これは、他の背景色があり、この描画可能なbgをボーダーでオーバーレイしたい場合に非常に便利です。(y)
Aung Pyae 2014

3
まさに私が必要とするものですが、負のパディングを使用することは正しいですか?
IlyaEremin

1
これが最良の解決策です。-5dpで何ができるのか気になります。
Amit Kumar

1
負のパディングはHTML / CSSで一般的です。それは単に物事を他の方向に動かします。私の経験では、Androidでも完全に有効なようです。
spaaarky21

レイアウトにclipChildren = falseまたはclipToPadding = falseがある場合、負のマージンを使用した実装はうまく機能しません。この場合のVivek Khandelwalが提案したように、あなたは、2つのオーバーラップの長方形でソリューションを使用することができます
ヘスス・バレラ

79

ドローアブルの片側だけに境界線を取得するinsetには、他の3 つの側にネガを適用します(これらの境界線が画面外に描画されるようにします)。

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

    <shape android:shape="rectangle">
        <stroke android:width="2dp" android:color="#FF0000" />
        <solid android:color="#000000" />
    </shape>

</inset>

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

このアプローチはナイカーの回答に似ていますが、を使用しませんlayer-list


4
これが最良の回答ですIMO
James

非常に良い答えです。幅とインセットを10 dpに変更するだけです:)さらに、左側に境界線が必要なので、android:insetLeftをandroid:insetRightに変更します。とても簡単!マテリアルボタンのクリックを維持:D
Phuong

正確に私が必要insertXとするもの、上部を変更して、表示する境界線と表示しない境界線を決定します。
CularBytes

@nullの単色を使用することもできますが、この方法では上書きされません。天才。ありがとうございました!
Unknownweirdo 2016

2
注意:これにより、ビューのコンテンツがシフトし、サイズも変更されます。注意して使用してください。
vovahost 2017年

7

別の方法として(バックグラウンドを使用したくない場合)、次のようにビューを作成することで簡単に実行できます。

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

右のボーダーのみを使用する場合は、これをレイアウトの後に配置します(ボーダーを配置する場所):

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

左ボーダーのみを使用する場合は、これをレイアウトの前(ボーダーを配置する場所)に配置します。

私のために働いた...いくつかの助けが欲しい...


6

私は次のコードで効果を達成することができました

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

変位の方向を変更することにより、境界位置のニーズに合わせて調整できます


5
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" >
        <shape>
            <solid
                android:color="#f28b24" />
            <stroke
                android:width="1dp"
                android:color="#f28b24" />
            <corners
                android:radius="0dp"/>
            <padding
                android:left="0dp"
                android:top="0dp"
                android:right="0dp"
                android:bottom="0dp" />
        </shape>
    </item>
    <item>
        <shape>
            <gradient
                android:startColor="#f28b24"
                android:endColor="#f28b24"
                android:angle="270" />
            <stroke
                android:width="0dp"
                android:color="#f28b24" />
            <corners
                android:bottomLeftRadius="8dp"
                android:bottomRightRadius="0dp"
                android:topLeftRadius="0dp"
                android:topRightRadius="0dp"/>
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>
</selector>

4

他の素晴らしい例 例

<?xml version="1.0" encoding="UTF-8" standalone="no"?> 
<inset xmlns:android="http://schemas.android.com/apk/res/android"
     android:insetRight="-2dp">

     <shape android:shape="rectangle">
         <corners
             android:bottomLeftRadius="4dp"
             android:bottomRightRadius="0dp"
             android:topLeftRadius="4dp"
             android:topRightRadius="0dp" />
         <stroke
             android:width="1dp"
             android:color="@color/nasty_green" />
         <solid android:color="@android:color/transparent" />
     </shape>

</inset>

2

ここでは9パッチファイルについての言及はありません。はい、ファイルを作成する必要がありますが、それは非常に簡単な仕事であり、それは本当に「クロスバージョンと透過性をサポートする」ソリューションです。ファイルがdrawable-nodpiディレクトリに配置されている場合、ファイルはpxベースで動作し、drawable-mdpiほぼdpベースとして動作します(リサンプリングのおかげです)。

元の質問のサンプルファイル(border-right:1px実線の赤;)は次のとおりです。

http://ge.tt/517ZIFC2/v/3?c

drawable-nodpiディレクトリに配置するだけです。


1

異なる色のボーダー。3点使いました。

<?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/colorAccent" />
        </shape>
    </item>
    <item android:top="3dp">
        <shape android:shape="rectangle">
            <solid android:color="@color/light_grey" />
        </shape>
    </item>
    <item
        android:bottom="1dp"
        android:left="1dp"
        android:right="1dp"
        android:top="3dp">
        <shape android:shape="rectangle">
            <solid android:color="@color/colorPrimary" />
        </shape>
    </item>
</layer-list>
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.