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

Question

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

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

1. 我是否在xml中添加代码？类似于android：layout_height =“@ id/textView”

2. 在UI中执行xml中的相对约束或约束会更好吗？

3. 在xml中，我如何对其他孩子做相对约束？我知道像android：layout_alignParentTop，android：layout_alignChildTop这样的代码，但是如何设置与孩子的距离？

Answer 1

如果我读这正确的，你想要的中心图像与文本视图基于文本的高度来调整高度。最简单的方法是将中间图像用作文本视图的可伸缩背景，对于页眉和页脚视图也是如此，最好使用9修补的PNG图像。

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

下面是一个例子XML与9补丁来说明其工作原理。

N.B.该示例包含两个布局，每个布局包含一个带有页眉和页脚视图的单个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：

middle.9.png：

bottom.9.png：

使用 <shape>和 <layer-list>绘图资源，而不是9补丁PNG所有XML

或者，你可以做到这一切在XML：

示例输出

解决方案2图片。以上是使用XML可绘制工作的上述修改版本。

此示例显示了边框上的圆角作为额外的好处，但要注意，使用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/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 /布局/ 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> 

输出示例：