如何设置约束并以编程方式增加图像与文本大小成比例？

问题描述 投票：0回答：1

这可能有点难以解释，所以我加了一张图片来告诉你我的意思。

我在Android Studio中有三个图像。它们应该全部匹配，中间部分应该随着图形顶部的文本扩展而扩展（中间高度应该等于我想象的文本高度）。一直坐在这一段时间但是没有到达任何地方。

  1. 我在xml中添加代码吗？像android这样的东西：layout_height =“@ id / textView”
  2. 在xml或UI中的约束中做相对约束是否更好？
  3. 在xml中，我如何对其他孩子做相对约束？我知道像android：layout_alignParentTop，android：layout_alignChildTop这样的代码，但是如何设置与孩子的距离？

enter image description here

java android xml image constraints
1个回答
1
投票

如果我正确读取，您希望中​​心图像和文本视图根据文本的高度调整高度。最简单的方法是使用中间图像作为文本视图的可伸缩背景，类似于页眉和页脚视图，最好使用9-patch PNG图像。

解决方案1：使用9补丁PNG图像

这是一个带有9个补丁的示例XML，以显示其工作原理。

注：该示例包含两个布局，每个布局包含一个带有页眉和页脚视图的TextView。第一个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>

九补丁

top.9.png：

Top

middle.9.png：

Middle

bottom.9.png：

Bottom

示例输出

Example output

Solloy 2：Al CML

或者，您可以使用<shape>和<layer-list> drawables而不是9-patch PNG图像以XML格式完成所有操作。以下是使用XML drawables的上述修改版本。

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

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

RES /值/ 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 /抽拉-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 /抽拉-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 /抽拉-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 /布局/ 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>

示例输出：

XML example output

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.