如何裁剪子布局的边框?

发布于 2024-12-13 12:03:40 字数 1412 浏览 6 评论 0原文

我有 LinearLayout ,其中有 shape 背景和 WebView 。如何沿着形状的边框剪切WebView?

我希望 WebView 适合形状,因此 WebView 不会有任何锐角。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    android:padding="5dip" >

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@drawable/bg_border"
    android:orientation="vertical" >

    <WebView android:id="@+id/webview" 
        android:layout_width="fill_parent" 
        android:layout_height="fill_parent" />

    </LinearLayout>
</LinearLayout>

bg_border.xml

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

<corners
    android:radius="5dp"
    android:bottomRightRadius="5dp"
    android:bottomLeftRadius="5dp"
    android:topLeftRadius="5dp"
    android:topRightRadius="5dp" />

在此处输入图像描述

I have LinearLayout with shape background and WebView inside. How to cut WebView along the border of the shape?

I want WebView fit in the shape and so WebView will not have any acute angles.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    android:padding="5dip" >

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@drawable/bg_border"
    android:orientation="vertical" >

    <WebView android:id="@+id/webview" 
        android:layout_width="fill_parent" 
        android:layout_height="fill_parent" />

    </LinearLayout>
</LinearLayout>

bg_border.xml

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

<corners
    android:radius="5dp"
    android:bottomRightRadius="5dp"
    android:bottomLeftRadius="5dp"
    android:topLeftRadius="5dp"
    android:topRightRadius="5dp" />

enter image description here

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

舂唻埖巳落 2024-12-20 12:03:40

我敢打赌你只能模拟它。创建另一个具有(较小)半径的形状,并将其设置为白色。将其放在您的网络视图中。如果您正在查看的页面不是白色的,这显然不起作用。

另外,如果您已经定义了“半径”并且所有值都相同,则无需定义 topLeft/bottomRight/etc。

更新
想法。它们都涉及像这样的源图像: http://www.noiseindustries.com/downloads/misc/FxFactoryHelp/pluginguide/generators/roundedrectangle/files/ni-rounded-rectangle.jpg

只需确保边框小得多。 3-5 像素。白色中心应该是透明的,而不是白色的。

1)创建一个RelativeLayout,并为边和角创建图像。通过布局和图像,基本上可以对图像进行布局,以便“绘制”边框。不要在中心放置任何东西。创建一个FrameLayout,把webview放进去,然后把RelativeLayout放在上面。希望中心的触摸事件能够传递到网络视图,但仍然会给你一个边缘的软边框。

2) 创建一个 9 块图像,其外观与 1 中描述的边框基本相同。执行与 1 中描述的相同的 FrameLayout,并添加 Webview。最重要的是,添加一个自定义视图。将背景设置为 9-patch,并确保自定义视图传递其所有触摸事件。

我怀疑#1 会更容易实现,但谁知道呢?

I would bet you can only simulate that. Create another shape with a (smaller) radius, and make it white. Put that around your web view. This obviously won't work if the page you're looking at is not white.

Also, you don't need to define topLeft/bottomRight/etc if you already define "radius" and all the values are the same.

UPDATE
Ideas. Both of them involve a source image LIKE this: http://www.noiseindustries.com/downloads/misc/FxFactoryHelp/pluginguide/generators/roundedrectangle/files/ni-rounded-rectangle.jpg

Just make sure the border is MUCH smaller. 3-5 pixels. The white center should be transparent, not white.

1) Create a RelativeLayout, and create images for the sides and corners. With the layout and images, basically lay out the images so you "draw" a border. Don't put anything in the center. Create a FrameLayout, put the webview in, then put the RelativeLayout on top. Hopefully, the touch events in the center will fall through to the webview, but still give you a soft border around the edges.

2) Create a 9-patch image that basically looks the same as the border described in 1. Do the same FrameLayout described in 1, and add the Webview. On top of that, add a CUSTOM view. Set the background to the 9-patch, and make sure the custom view passes on all of its touch events.

I suspect #1 would be easier to implement, but who knows?

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文