具有透明背景的 LinearLayout 上的顶部边框答案

【问题标题】：Top border on a LinearLayout with transparent background具有透明背景的 LinearLayout 上的顶部边框
【发布时间】：2014-07-17 02:53:00
【问题描述】：

我正在尝试为具有透明背景的 LinearLayout 添加顶部边框。

结果应如下图所示，其中边框为“Jp Project”LinearLayout 的上边框。背景颜色来自一个用作容器的 FrameLayout。

这是线性布局 XML：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/menuItem"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:orientation="horizontal">

    <ImageView
        android:id="@+id/icon"
        android:layout_width="45dp"
        android:layout_height="45dp"
        android:src="@drawable/notification_action"
        android:padding="10dp"/>

    <TextView
        android:id="@+id/menuItemName"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center_vertical"
        android:textSize="19sp"
        android:textColor="@color/white"/>

    <TextView android:id="@+id/counter"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center_vertical"
        android:textAppearance="@android:style/TextAppearance.Medium"
        android:textColor="@color/counter_text_color"
        android:background="@drawable/counter_bg"/>
</LinearLayout>

这是我目前使用的样式代码：

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="line">
    <stroke
        android:width="2dp"
        android:color="@color/base_app_color" />
    <solid android:color="@android:color/transparent"/>
</shape>

哪个抽奖：

你有什么办法只使用样式来解决它吗？

【问题讨论】：

标签： android android-layout

【解决方案1】：

使用以下代码将可绘制对象设置为 LinearLayout 背景：

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

    <item android:left="-2dp" android:bottom="-2dp" android:right="-2dp">
        <shape android:shape="rectangle">
            <stroke android:width="2dp" android:color="@color/borderColor" />
            <solid android:color="@color/backgroundColor" />
        </shape>
    </item>

</layer-list>

【讨论】：

不错的解决方案，它与透明背景完美搭配！

【解决方案2】：

因为该线应在 Workplaces 和 Project 菜单项之间垂直居中对齐。我将项目项标识为特殊菜单项并应用不同的布局。

布局代码为：

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:orientation="horizontal"
        android:background="@drawable/project_top_line">
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:orientation="horizontal">

        <ImageView
            android:id="@+id/icon"
            android:layout_width="45dp"
            android:layout_height="45dp"
            android:src="@drawable/notification_action"
            android:padding="10dp"/>

        <TextView
            android:id="@+id/menuItemName"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center_vertical"
            android:textSize="19sp"
            android:textColor="@color/white"/>

        <TextView android:id="@+id/counter"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center_vertical"
            android:textAppearance="@android:style/TextAppearance.Medium"
            android:textColor="@color/counter_text_color"
            android:background="@drawable/counter_bg"/>
    </LinearLayout>
</LinearLayout>

样式代码为：

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="line">
    <stroke
        android:width="2dp"
        android:color="@color/base_app_color" />
    <solid android:color="@android:color/transparent"/>
</shape>

在第一个线性布局的中间画一条线。

【讨论】：

【解决方案3】：

我认为您只需要一条蓝线，这样您就可以执行以下操作：

 <View
    android:layout_width="match_parent"
    android:layout_height="2dp"
    android:background="@android:color/holo_blue_dark" />

【讨论】：

它可以工作，但我决定使用我的解决方案更简单地组装菜单，并使工作场所和项目菜单项之间的线中间对齐。

【解决方案4】：

创建一个名为border.xml 的文件并将其添加到您的布局中，以便仅制作顶部边框。

<item
    android:left="-1dp"
    android:right="-1dp"
    android:bottom="-1dp"
    android:top="1dp">
    <shape
        android:shape="rectangle">
        <stroke
            android:width="0.5dp"
            android:color="@color/black" />
        <solid android:color="@android:color/transparent" />
    </shape>
</item>

像这样：

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignTop="@+id/kellton_logo"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true"
    android:background="@drawable/border"
    >

对我有帮助。

【讨论】：