• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

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

java 来源:Joakim Sjöstedt 4次浏览

这可能有点难以解释,所以我附上了一张照片来向你展示我的意思。如何设置约束并以编程方式按比例增加图像的文字大小?

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

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

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

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

enter image description here

===========解决方案如下:

如果我读这正确的,你想要的中心图像与文本视图基于文本的高度来调整高度。最简单的方法是将中间图像用作文本视图的可伸缩背景,对于页眉和页脚视图也是如此,最好使用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:

Top

middle.9.png:

Middle

bottom.9.png:

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

或者,你可以做到这一切在XML:

Bottom

示例输出

Example output

解决方案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> 

输出示例:

XML example output


版权声明:本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系管理员进行删除。
喜欢 (0)