java - 如何设置约束并以编程方式按文本大小的比例增大图像？

这可能有点难以解释，所以我附上了一张图片来向您展示我的意思。

我在 Android Studio 中有三个图像。它们应该全部对齐以匹配，并且中间部分应该随着图形顶部的文本扩展而扩展(中间高度应该等于我认为的文本高度)。已经坐了一段时间了，但没有任何进展。

我要在 xml 中添加代码吗？类似于 android:layout_height="@id/textView"
在 xml 中进行相对约束还是在 UI 中进行相对约束更好？
在xml中，如何对其他 child 进行相对约束？我知道像 android:layout_alignParentTop、android:layout_alignChildTop 这样的代码，但是如何设置与子项的距离？

最佳答案

如果我没看错的话，您希望中心图像和 TextView 根据文本的高度调整高度。最简单的方法是使用中间图像作为 TextView 的可拉伸(stretch)背景，页眉和页脚 View 也类似，最好使用 9 block PNG 图像。

解决方案 1:使用 9 block PNG 图像

下面是一个包含 9 个补丁的 XML 示例，展示了其工作原理。

注意该示例包含两个布局，每个布局包含一个 TextView具有页眉和页脚 View 。第一个TextView有一行文本，第二个有两行。

<LinearLayout
    android:layout_width="320dp"
    android:layout_height="wrap_content"
    android:orientation="vertical" >

    <View
        android:layout_width="match_parent"
        android:layout_height="10dp"
        android:background="@drawable/top" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:textSize="32sp"
        android:padding="5dp"
        android:gravity="center_horizontal"
        android:text="A line of text" 
        android:background="@drawable/middle" />
    <View
        android:layout_width="match_parent"
        android:layout_height="10dp"
        android:background="@drawable/bottom" />
</LinearLayout>

<Space
    android:layout_width="match_parent"
    android:layout_height="10dp" />

<LinearLayout
    android:layout_width="320dp"
    android:layout_height="wrap_content"
    android:orientation="vertical" >

    <View
        android:layout_width="match_parent"
        android:layout_height="10dp"
        android:background="@drawable/top" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:textSize="32sp"
        android:padding="5dp"
        android:gravity="center_horizontal"
        android:text="A line of text\nAnother line of text" 
        android:background="@drawable/middle" />
    <View
        android:layout_width="match_parent"
        android:layout_height="10dp"
        android:background="@drawable/bottom" />
</LinearLayout>

9-patch

top.9.png:

middle.9.png:

底部.9.png:

输出示例

解决方案 2:所有 XML

或者，您可以使用 <shape> 在 XML 中完成这一切和<layer-list>可绘制的图像而不是 9 block PNG 图像。这是上述内容的修改版本，用于使用 XML 可绘制对象。

此示例显示边框上的圆角作为额外的好处，但请注意，使用 XML 绘制复杂的复合形状可能会很棘手，因为您只能使用少量的原始形状。

另请注意，此版本依赖于添加维度资源来确保所有内容都匹配。

res/values/dimens.xml

<resources xmlns:android="http://schemas.android.com/apk/res/android" >
    <dimen name="layout_width">320dp</dimen>
    <dimen name="header_height">15dp</dimen>
    <dimen name="header_inset_height">5dp</dimen>
    <dimen name="inset">5dp</dimen>
    <dimen name="inset_width">310dp</dimen>
    <dimen name="footer_height">15dp</dimen>
    <dimen name="corner_radius">10dp</dimen>
    <dimen name="inset_radius">5dp</dimen>
</resources>

res/drawable-nodpi/header.xml

<?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="#ffff00ff" />
            <corners 
                android:radius="@dimen/corner_radius" 
                android:bottomLeftRadius="0dp" 
                android:bottomRightRadius="0dp" />
            <size 
                android:width="@dimen/layout_width" 
                android:height="@dimen/header_height" />
        </shape>
    </item>
    <item
        android:top="@dimen/inset"
        android:left="@dimen/inset"
        android:right="@dimen/inset">
        <shape android:shape="rectangle">
            <solid android:color="#ffffff00" />
            <corners 
                android:radius="@dimen/inset_radius" 
                android:bottomLeftRadius="0dp" 
                android:bottomRightRadius="0dp" />
            <size 
                android:width="@dimen/inset_width" 
                android:height="@dimen/header_inset_height" />            
        </shape>        
    </item>

</layer-list>

res/drawable-nodpi/body.xml

<?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="#ffff00ff" />
            <size android:width="@dimen/layout_width"/>
        </shape>
    </item>
    <item
        android:left="@dimen/inset"
        android:right="@dimen/inset">
        <shape android:shape="rectangle">
            <solid android:color="#ffffff00" />
            <size android:width="@dimen/inset_width" />            
        </shape>        
    </item>

</layer-list>

res/drawable-nodpi/footer.xml

<?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="#ffff00ff" />
            <corners 
                android:radius="@dimen/corner_radius"
                android:topLeftRadius="0dp"
                android:topRightRadius="0dp" />
            <size 
                android:width="@dimen/layout_width" 
                android:height="@dimen/footer_height" />
        </shape>
    </item>
    <item
        android:bottom="@dimen/inset"
        android:left="@dimen/inset"
        android:right="@dimen/inset">
        <shape android:shape="rectangle">
            <solid android:color="#ffffff00" />
            <corners 
                android:radius="@dimen/inset_radius"
                android:topLeftRadius="0dp"
                android:topRightRadius="0dp" />
            <size 
                android:width="@dimen/inset_width" 
                android:height="@dimen/header_inset_height" />            
        </shape>        
    </item>

</layer-list>

res/layout/activity_main.xml:

<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:fitsSystemWindows="true"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="@dimen/layout_width"
        android:layout_height="wrap_content"
        android:orientation="vertical" >

        <View
            android:layout_width="match_parent"
            android:layout_height="@dimen/header_height"
            android:background="@drawable/header" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:textSize="32sp"
            android:padding="5dp"
            android:gravity="center_horizontal"
            android:text="A line of text" 
            android:background="@drawable/body" />
        <View
            android:layout_width="match_parent"
            android:layout_height="@dimen/footer_height"
            android:background="@drawable/footer" />
    </LinearLayout>

    <Space
        android:layout_width="match_parent"
        android:layout_height="10dp" />

    <LinearLayout
        android:layout_width="@dimen/layout_width"
        android:layout_height="wrap_content"
        android:orientation="vertical" >

        <View
            android:layout_width="match_parent"
            android:layout_height="@dimen/header_height"
            android:background="@drawable/header" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:textSize="32sp"
            android:padding="5dp"
            android:gravity="center_horizontal"
            android:text="A line of text\nAnother line of text" 
            android:background="@drawable/body" />
        <View
            android:layout_width="match_parent"
            android:layout_height="@dimen/footer_height"
            android:background="@drawable/footer" />
    </LinearLayout>

</LinearLayout>

示例输出:

关于java - 如何设置约束并以编程方式按文本大小的比例增大图像？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47867208/

java - 如何设置约束并以编程方式按文本大小的比例增大图像？

上一篇：java - JSP 迭代未显示

下一篇：java - 如何在 Intellij 构建上生成 jaxb2 类？