Androidでスタイルの最下行


120

下部だけがストローク(破線)になるようにAndroidシェイプを作成する必要があります。次のことを試してみると、ストロークは中心を通り、シェイプを二等分します。誰かがそれを正しくする方法を知っていますか?ストロークは一番下の線/境界である必要があります。図形をTextViewの背景として使用しています。どうして必要なのか気にしないでください。

<?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="#1bd4f6" />
        </shape>
    </item>

    <item>
        <shape android:shape="line" >
            <padding android:bottom="1dp" />

            <stroke
                android:dashGap="10px"
                android:dashWidth="10px"
                android:width="1dp"
                android:color="#ababb2" />
        </shape>
    </item>

</layer-list>

2
なぜ私はあなたのgitプロジェクトをとてもシンプルなものに見に行くのですか?このプロジェクトのヒット作を探していますか?
Cote Mounyo 2013年

好奇心から、なぜpxを使用してダッシュのサイズを指定するのですか?
Jose_GD 2014年

回答:


313

これは一種のハックですが、おそらくこれが最善の方法だと思います。破線は、高さに関係なく常に下になります。

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item>
        <shape android:shape="rectangle" >
            <solid android:color="#1bd4f6" />
        </shape>
    </item>

    <item android:top="-2dp" android:right="-2dp" android:left="-2dp">
        <shape>
            <solid android:color="@android:color/transparent" />
            <stroke
                android:dashGap="10px"
                android:dashWidth="10px"
                android:width="1dp"
                android:color="#ababb2" />
        </shape>
    </item>

</layer-list>

説明:

2番目の形状は、破線の輪郭を持つ透明な長方形です。境界線を下部に沿ってのみ表示するための鍵は、反対側に設定された負のマージンにあります。これらの負のマージンは、破線をその両側の描画領域の外側に「押し込み」、下部に沿った線のみを残します。1つの潜在的な副作用(私は試していません)は、ビューの境界を超えて描画すると、負のマージンの境界線が表示される可能性があるということです。


5
確かに賢い。この作業の原因が上、右、左の1 dp(絶対値)とストローク幅の違いであることを理解するのに少し時間がかかりました:)
Jose_GD

5
これは完璧に機能しますが、誰かが答えを数学の説明で補足してください(私のような貧しい人や、これから数日でここに到着する他の誰にとっても):)
source.rar 2015年

よく働く。また、状態に応じてレイヤーリストxmlを指すセレクターを使用することもできます。私はそれを理解する必要があり、それもうまくいきました。
Dacker

不要なオーバードローを導入しないでください。@Anonanソリューションの方が良いと思います。必要に応じて変更してみてください。
Vlad 2017

44

これはトリックです...

<item >
    <shape android:shape="rectangle">
        <solid android:color="#YOUR_BOTTOM_LINE_COLOR"/>
    </shape>
</item>

<item android:bottom="1.5dp">
    <shape android:shape="rectangle">
        <solid android:color="#YOUR_BG_COLOR"/>
    </shape>
</item>

2つの長方形が重なり合っており、下のスペースを追加して別の色を線として表示します。したがって、これを他の方法で適用することができます
Jongz Puangput '18 / 06/18

3
良い答えですが、冗長なオーバードローがあります
レスター

アルファ付きの色がある場合にも機能しません
Dirk

43
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:top="-6dp"
        android:left="-6dp"
        android:right="-6dp"
        android:bottom="0dp">

        <shape android:shape="rectangle">
            <solid android:color="#88FFFF00"/>
            <stroke
                android:width="5dp"
                android:color="#FF000000"/>
        </shape>
    </item>
</layer-list>

私には完璧に働きました!ありがとう。
hetsgandhi

19

この回答は、EditTextここのような下の点線のボーダーを表示したいグーグル検索者向けです

サンプル

フォルダdotted.xml内に作成してdrawable貼り付けます

<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="0.5dp"
                android:color="@android:color/black" />    
            <solid android:color="#ffffff" />
            <stroke
                android:width="1dp"
                android:color="#030310"
                android:dashGap="5dp"
                android:dashWidth="5dp" />
            <padding
                android:bottom="5dp"
                android:left="5dp"
                android:right="5dp"
                android:top="5dp" />
        </shape>
    </item>
</layer-list>

次に、android:background属性をdotted.xml作成したばかりに設定します。あなたEditTextはこのように見えます。

<EditText
    android:id="@+id/editText"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Some Text"
    android:background="@drawable/dotted" />

13

このネガティブなパディングやコウノトリがなければ、それは簡単だと思います。

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@color/main_bg_color"/>
    <item android:gravity="bottom">
        <shape android:shape="rectangle">
            <size android:height="5dp"/>
            <solid android:color="@color/bottom_bar_color"/>
        </shape>
    </item>
</layer-list>

2
特別な背景が必要ない場合は、削除できます<item android:drawable="@color/main_bg_color"/>
Overclover

1
Android 27では動作しますが、Android 19では動作しません...他のバージョンはテストしていません。
Ridcully

10

次のXMLドローアブルコードを試してください:

    <layer-list>
        <item android:top="-2dp" android:right="-2dp" android:left="-2dp">
            <shape>
                <solid android:color="@android:color/transparent" />
                <stroke
                    android:width="1dp"
                    android:color="#fff" />
            </shape>
        </item>
    </layer-list>

7

私はあなたが理解していれば、形状を使用する必要はないと思います。

次の画像のように表示されている場合は、次のレイアウトを使用してください。

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

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent" >

<RelativeLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:background="#1bd4f6"
    android:paddingBottom="4dp" >

    <TextView
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:background="#ababb2"
        android:padding="5dp"
        android:text="Hello Android" />
 </RelativeLayout>

 </RelativeLayout>

編集

これらのプロパティを操作すると、結果が得られます

    android:top="dimension"
    android:right="dimension"
    android:bottom="dimension"
    android:left="dimension"

このようにしてみてください

<?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="#1bd4f6" />
    </shape>
</item>

<item android:top="20px"
    android:left="0px">
    <shape android:shape="line"  >
        <padding android:bottom="1dp" />

        <stroke
            android:dashGap="10px"
            android:dashWidth="10px"
            android:width="1dp"
            android:color="#ababb2" />
    </shape>
</item>

</layer-list>

私のストロークは破線
Cote Mounyo 2013年

これは機能しますが、唯一の注意点は、ビューのサイズが小さくなりすぎて形状が見えなくなることです
Jose_GD

不必要なオーバードローを導入しないように常に注意する必要があります。
Vlad 2017

5

シンプルなソリューション:

ドローアブルフォルダーにedittext_stroke.xmlとしてドローアブルファイルを作成します。以下のコードを追加します。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="line"
   >
    <stroke
        android:width="1dp"
        android:color="@android:color/white" >
    </stroke>
</shape>

レイアウトファイルで、編集可能テキストにドローアブルを追加します

android:drawableBottom = "@ drawable / edittext_stroke"

<EditText
      android:textColor="@android:color/white"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:drawableBottom="@drawable/edittext_stroke"
      />

この場合、ラインは下ではなく中央に配置されます
Sviatoslav Zaitsev

4

通常同様のタスクのために-私はこのようなレイヤーリストドローアブルを作成しました:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
        <solid android:color="@color/underlineColor"/>
        </shape>
    </item>
<item android:bottom="3dp">
    <shape android:shape="rectangle">
        <solid android:color="@color/buttonColor"/>
    </shape>
</item>

アイデアは、最初にunderlineColorで四角形を描画し、次にこの上に実際のbuttonColorを使用して別の四角形を描画し、bottomPaddingを適用するというものです。それは常に機能します。

しかし、buttonColorを透明にする必要がある場合、上記のドローアブルを使用できませんでした。私はもう一つの解決策を見つけました

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <shape android:shape="rectangle">
        <solid android:color="@android:color/transparent"/>
    </shape>
</item>

<item android:drawable="@drawable/white_box" android:gravity="bottom"     android:height="2dp"/>
</layer-list>

(ここを見るとわかるように、mainButtonColorは透明であり、white_boxは白いソリッドで描画可能な単純な長方形です)


2

このxmlを使用して、好みに応じて色を変更します。

<item>
    <layer-list>
        <item>
            <shape>
                <solid android:color="@color/gray_500" />

            </shape>
        </item>
        <!-- CONTENT LAYER -->
        <item android:bottom="2dp" >
            <shape>
                <solid android:color="#ffffff" />
            </shape>
        </item>
    </layer-list>
</item>

プログラムで必要な場合

public static Drawable getStorkLineDrawable(@ColorInt int colorStrok, int    iSize, int left, int top, int right, int bottom)

{
    GradientDrawable gradientDrawable = new GradientDrawable();
    gradientDrawable.setShape(GradientDrawable.RECTANGLE);
    gradientDrawable.setStroke(iSize, colorStrok);
    LayerDrawable layerDrawable = new LayerDrawable(new Drawable[]{gradientDrawable});
    layerDrawable.setLayerInset(0, left, top, right, bottom);
    return layerDrawable;
}

このメソッドを次のように呼び出します

  Drawable yourLineDrawable=  getStorkLineDrawable(yourColor, iSize, -iSize, -iSize, -iSize, 0);

2

これは私にとって最もうまくいきました:

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

下部のみに線を表示します。ストロークの幅を変更して好きなサイズに簡単に変更でき、それに応じて上、左、右も更新できます。


2

これを行う最も簡単な方法は、そのビューの後に下枠を配置する場所に置くことです

    <?xml version="1.0" encoding="utf-8"?>
    <View
    android:layout_width="match_parent"
    android:layout_height="1dp"
    android:background="@color/colorPrimary" />

0

完全に透明なEdittextで、背景は透明です。

<item>
    <shape android:shape="rectangle" >
        <solid android:color="@color/transparent" />
    </shape>
</item>

<item android:top="-3dp" android:right="-3dp" android:left="-3dp">
    <shape>
        <solid android:color="@android:color/transparent" />
        <stroke

            android:width="2dp"
            android:color="@color/bottomline" />
    </shape>
</item>


0

シンプルなソリューション

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:bottom="-1dp"
        android:left="-1dp"
        android:right="-1dp"
        android:top="-1dp">

        <shape android:shape="rectangle">

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

            <stroke
                android:width="5dp"
                android:color="@android:color/red"
                android:dashWidth="10dp"
                android:dashGap="12dp" />

        </shape>
    </item>
</layer-list>

そして最後に私たちはそのようなものを持っています:)

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

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