Android中的样式底线

Posted 2023-04-15

【中文标题】Android中的样式底线

【英文标题】：Style bottom Line in Android

【发布时间】：2013-10-14 20:19:32

【问题描述】：

我需要创建一个 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:
                android:color="#ababb2" />
        </shape>
    </item>

</layer-list>

【问题讨论】：

为什么我会为了这么简单的事情去看你的 git 项目？您正在寻找该项目的热门歌曲吗？

只是出于好奇，你为什么要使用 px 来指定破折号的大小？

【参考方案1】：

这是一种 hack，但我认为这可能是最好的方法。无论高度如何，虚线始终位于底部。

<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:
                android:color="#ababb2" />
        </shape>
    </item>

</layer-list>

解释：

第二个形状是带有虚线轮廓的透明矩形。使边框只出现在底部的关键在于设置其他边的负边距。这些负边距将虚线“推”到这些侧面的绘制区域之外，只留下底部的线。一个潜在的副作用（我没有尝试过）是，对于超出其自身边界的视图，负边距边框可能会变得可见。

【讨论】：

确实很聪明。我花了一些时间才弄清楚这项工作的原因是顶部、右侧和左侧之间的 1 dp（绝对值）与笔划宽度之间的差异 :)

这很好用，但是有人可以用数学的解释来补充答案（对于像我这样的可怜的灵魂和未来几天到达这里的任何人）:)

效果很好。您甚至可以使用一个选择器，根据状态指向层列表 xml。我必须弄清楚那个，它也有效。

不要引入不必要的透支。我认为@Anonan 解决方案更好。尝试根据您的需要进行修改。

【参考方案2】：

<?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:
                android:color="#FF000000"/>
        </shape>
    </item>
</layer-list>

【参考方案3】：

这就是诀窍...

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

【讨论】：

有两个矩形相互重叠并添加底部空间以将另一种颜色显示为一条线。所以，你可以应用它来做其他方式

好答案，但有多余的透支

当你有带 alpha 的颜色时也不会工作

【参考方案4】：

我觉得它很简单，没有所有这些负面的填充物或鹳。

<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:/>
            <solid android:color="@color/bottom_bar_color"/>
        </shape>
    </item>
</layer-list>

【讨论】：

如果不需要特殊背景，可以去掉<item android:drawable="@color/main_bg_color"/>

适用于 Android 27，不适用于 Android 19 ...未测试其他版本。

它需要 API 级别 23 (Marshmallow)。

【参考方案5】：

此答案适用于希望在此处显示EditText 的虚线底部边框的谷歌搜索者

在drawable 文件夹中创建dotted.xml 并粘贴这些

<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:
                android:color="@android:color/black" />    
            <solid android:color="#ffffff" />
            <stroke
                android:
                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_
    android:layout_
    android:text="Some Text"
    android:background="@drawable/dotted" />

【参考方案6】：

尝试下一个 xml 可绘制代码：

    <layer-list>
        <item android:top="-2dp" android:right="-2dp" android:left="-2dp">
            <shape>
                <solid android:color="@android:color/transparent" />
                <stroke
                    android:
                    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_
android:layout_ >

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

    <TextView
        android:layout_
        android:layout_
        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:
            android:color="#ababb2" />
    </shape>
</item>

</layer-list>

【讨论】：

我的笔划是虚线

这行得通，唯一需要注意的是当视图调整得太小，形状变得不可见

您应该始终注意不要引入不必要的透支。

【参考方案8】：

一个简单的解决方案：

在 drawable 文件夹中创建一个可绘制文件作为 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:
        android:color="@android:color/white" >
    </stroke>
</shape>

在布局文件中，将drawable添加到edittext as

android:drawableBottom="@drawable/edittext_stroke"

<EditText
      android:textColor="@android:color/white"
      android:layout_
      android:layout_
      android:drawableBottom="@drawable/edittext_stroke"
      />

【讨论】：

在这种情况下，您的行将位于中心，而不是底部

【参考方案9】：

通常用于类似的任务 - 我创建了像这样的可绘制图层列表：

<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:/>
</layer-list>

（如您在此处看到的，mainButtonColor 是透明的，而 white_box 只是一个简单的可绘制白色实体的矩形）

【参考方案10】：

最简单的方法是在你想要底部边框的那个视图之后放置

    <?xml version="1.0" encoding="utf-8"?>
    <View
    android:layout_
    android:layout_
    android:background="@color/colorPrimary" />

【参考方案11】：

使用此 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);

【参考方案12】：

这对我来说效果最好：

<?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: android:color="#ff0000"/>
        </shape>
    </item>
</layer-list>

仅显示底部的行。您可以轻松地将笔划宽度更改为您喜欢的大小，并相应地更新顶部、左侧、右侧。

【参考方案13】：

只需添加 -

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!--Minus (-) how much dp you gave in the stroke width from left right top-->
    <item android:left="-10dp" android:right="-10dp" android:top="-10dp">
        <shape
            android:shape="rectangle">
            <stroke
                android:dashGap="10dp"
                android:dashWidth="10dp"
                android:
                android:color="@android:color/holo_red_dark" />
              <!--This is the main background -->
            <solid android:color="#FFDDDDDD" />
        </shape>
    </item>
</layer-list>

预览 -

【参考方案14】：

它是透明背景的完全透明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:
            android:color="@color/bottomline" />
    </shape>
</item>

【参考方案15】：

一个简单的解决方案：

<?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:
                android:color="@android:color/red"
                android:dashWidth="10dp"
                android:dashGap="12dp" />

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

最后我们有了类似的东西:)

【参考方案16】：

这是带有底部笔划的矩形背景

    <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
     <item>
        <shape android:shape="rectangle">
            <corners android:radius="4dp" />
            <solid android:color="#f2f4f5" />
            <stroke
                android:
                android:color="#002f34" />
            <padding android:bottom="4dp" />
        </shape>
    </item>
 
    <item>
        <shape android:shape="rectangle">
            <corners android:radius="4dp" />
            <solid android:color="#f2f4f5" />
 
       </shape>
    </item>
</layer-list>