消除可绘制形状线中的间隙

Question

我正在尝试消除如下所示的差距。 View 彼此相对，因此它似乎是可绘制对象中的东西。我可以看到它与 stroke 的 width 有关，但我怎样才能消除这种影响？

请注意，这只是一个 MVCE，实际用例要求我使用小于 View 的行。

为了消除疑问，我只接受在drawable中修复它的答案xml。我不希望布局驱动变通，提供的布局只是为了暴露问题。

drawable/line.xml

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

layout/example.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="match_parent">
    <View
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="@drawable/line">
    </View>

    <View
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="@drawable/line">
    </View>
</LinearLayout>

Answer 1

两种解决方案：

1) 将XML中声明的形状更改为矩形

<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">

    <solid android:color="#ff0000"/>
    <size android:width="100dp" android:height="1dp"/>

</shape>

然后在你的布局中

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

    <View
        android:layout_width="0dp"
        android:layout_height="5dp"
        android:layout_weight="1"
        android:background="@drawable/line">
    </View>

    <View
        android:layout_width="0dp"
        android:layout_height="5dp"
        android:layout_weight="1"
        android:background="@drawable/line">
    </View>
</LinearLayout>

2) 采取不同的方法，不为线

创建 XML 可绘制对象

<View
    android:layout_width="match_parent"
    android:layout_height="5dp"
    android:background="@android:color/holo_red_light"/>

编辑

你说你需要视图的高度大于线条的大小。您可以结合使用图像视图和 src 属性以及矩形 XML 形状来获得此效果：

<ImageView
    android:layout_width="0dp"
    android:layout_height="50dp"
    android:layout_weight="1"
    android:src="@drawable/line">
</ImageView>

<ImageView
    android:layout_width="0dp"
    android:layout_height="50dp"
    android:layout_weight="1"
    android:src="@drawable/line">
</ImageView>

Answer 2

Where does this gap come from in Drawable Shape line?

负责创建形状可绘制对象的 class 是 GradientDrawable.java

我们来看看源码

在draw(Canvas canvas)方法中：

switch (st.mShape) {
case LINE: {
        RectF r = mRect;
        float y = r.centerY();
        if (haveStroke) {
            canvas.drawLine(r.left, y, r.right, y, mStrokePaint);
        }
        break;
    }
}

一条线从mRect.left画到mRect.right

现在看看mRect修改的地方

在ensureValidRect()方法中：

Rect bounds = getBounds();
float inset = 0;
if (mStrokePaint != null) {
    inset = mStrokePaint.getStrokeWidth() * 0.5f;
}
final GradientState st = mGradientState;
mRect.set(bounds.left + inset, bounds.top + inset, bounds.right - inset, bounds.bottom - inset);

如您所见，添加了等于笔划宽度一半的 inset。

这就是你的差距所在。

how can I eliminate this effect?

您可以添加自己的负插图（应该是笔画宽度的一半）

drawable/line_inset.xml

<?xml version="1.0" encoding="utf-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
   android:drawable="@drawable/line"
   android:insetLeft="-2.5dp"
   android:insetRight="-2.5dp"/>

考虑使用 9 补丁可绘制对象

顶部和左侧的线条定义了拉伸区域。你可以看到我只是在拉伸空 space。右边和底部的行定义了内容区域，在本例中，所有 space.

Answer 3

如果我包装在图层列表和项目中，我可以扩展 left 和 right。我不需要担心他们走得比需要的更远，他们仍然会裁剪到边缘。这与效果作斗争。

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

消除可绘制形状线中的间隙

Eliminate gap in Drawable Shape line

android

android-layout

android-drawable