草庐IT

android - ConstraintLayout 链和文本省略号 + 右侧的图像

coder 2023-06-06 原文

2020 年 7 月更新:
在下面的答案中添加了信息以更详细地解释为什么/做什么 constrainedWidth/Height做什么以及何时适用于使用它们。
2018 年 7 月更新:
如果您正在使用 ConstraintLayout 1.1.0 ,要使用的正确属性是 app:layout_constrainedWidth="true"代替旧的app:layout_constraintWidth_default="wrap" (和高度对应)。请参阅更新的答案。
2017 年 11 月更新:
如果您正在使用 ConstraintLayout 1.0.0稳定(或更高版本)(此时为 1.0.2),请参阅更新的答案以获得更简单的解决方案,而无需嵌套布局。
原问题:
使用 ConstraintLayouts-Beta3 2016 年 11 月 3 日发布。 ( source )
我正在尝试执行以下操作:

|                                        |
|<-[TextView]<->[ImageView] -----------> |
|                                        |
我用这样的布局实现了:
  <TextView
      android:id="@+id/textView"
      android:layout_height="wrap_content"
      android:layout_width="wrap_content"

      app:layout_constraintHorizontal_chainStyle="packed"

      app:layout_constraintLeft_toLeftOf="parent"
      app:layout_constraintTop_toTopOf="parent"
      app:layout_constraintRight_toLeftOf="@+id/caret"
      app:layout_constraintHorizontal_bias="0.0"

      android:text="Some Text"
      android:textAlignment="viewStart"
      android:gravity="start" />

  <ImageView
      android:id="@+id/caret"
      android:layout_width="wrap_content"
      android:layout_height="8dp"
      app:layout_constraintDimensionRatio="1:1"

      app:layout_constraintLeft_toRightOf="@+id/textView"
      app:layout_constraintRight_toRightOf="parent"

      app:layout_constraintTop_toTopOf="@+id/textView"
      app:layout_constraintBottom_toBottomOf="@+id/textView"


      app:layout_constraintHorizontal_bias="0.0"

      android:contentDescription=""
      app:srcCompat="@drawable/ic_selection"
      android:layout_marginStart="8dp"/>
这看起来不错,但是当文本比可用空间长时......
|                                        |
|<-[TextView Larger Than The Space Avail]|
|                                        |
TextView 具有指定这些的样式:
<item name="android:lines">1</item>
<item name="android:maxLines">1</item>
<item name="android:ellipsize">end</item>
所以它应该可以工作,但我不确定我需要什么约束才能让图像滑动到右边然后停在那里让 TextView 理解没有更多空间。
我错过了什么?
注意:如果我将 textview 的宽度设置为 0dp,它可以工作,但是图像总是在右边(水平偏差似乎被忽略了)
注2:我也用beta2试过这个,事实上,看起来Beta3有一个bug in the visual editor .
更新 :我试图在 Xcode/AutoLayout 中复制这个:
这是短文本的外观

现在相同的布局,我只是在 TextView 中输入一个长文本......

正如您所看到的, ImageView 的尾迹(右)约束表示:您距右边距 8 个或更多点。
它也固定在标签的左侧(textView)。
从我刚刚从 Twitter 上了解到的,目前这在 Android 的 ConstraintLayout 上可能是不可能的:Source

最佳答案

2020 年 7 月更新:约束宽度/高度有什么作用?
很多人一直问我这到底是做什么的constrainedWidth/Height设置为 true 时执行(默认为 false)。
我终于有了答案(来自一位谷歌员工),所以为了消除人们对这篇文章的所有疑问,这里是我收集的(有些是我的话,有些是直接引用 from the original Google issue quoteConstraintLayout需要确定所涉及的每个 View 的维度,并且根据所述 View 的约束方式,它必须执行不同的计算。
给出一个观点:

  • 如果是固定维度,CL 将只使用该维度。
  • 如果是 match_parent , CL 将使用父级
  • 的精确维度
  • 如果是 wrap_content , CL 将询问小部件的大小,然后将其用作固定尺寸
  • 如果是 0dp , CL 将对维度
  • 应用约束

    1) 固定尺寸
    这是一个宽度/高度固定的 View ,比如 24dp .在这种情况下,CL 将简单地使用该值,该小部件不需要其他关于大小的计算。
    2) match_parent我一直认为这对 CL 无效,但事实证明它的行为与以前版本中的一样,它获取父级的尺寸并将其用作“固定”。与上面的 #1 不同,我认为这可能在计算上更昂贵,因为 CL 现在需要确保已知父维度能够在这里使用它们。我没有这方面的证据,也没有很多经验,因为我一直认为这不是真的有效,所以从未使用过。
    3) wrap_content正如预期的那样, View 必须确定它的“所需大小”,所以如果它是一个 ImageView,它会根据它的来源询问 imageView 的尺寸。获得所述数字后,将其用作固定大小,如#1。
    4) 0dp这就是 CL 发光的地方,它通过对每个维度(宽度和高度)应用约束,并让维度的值由算法的结果来确定。
    那么为什么需要这个(受约束的宽度/高度)?
    首先要明白的是0dp具有展开和包裹行为(和百分比);为了换行,引擎从 View 的 wrap_content 的维度开始(上面的#3)但是如果/在需要时等待约束来改变它。假设你使用 wrap 作为 TextView 的宽度,并且它的约束将它固定到屏幕的边缘(开始/结束到父级)。
    那些可以拉向不同的方向; TextView 可能希望很小以包裹文本,并且约束将拉动小部件的边缘以到达父级开始/结束。这里有一场战斗。 (如果文字大于空间,战斗仍然存在,但方向相反)。
    这个属性存在的原因,是因为一些小部件(_Like textView),走一些捷径,当有一个 0dp ,它们可能并不总是正确更新。重要的是要注意带有 0dp + 权重的 LinearLayouts 做了同样的事情(因此为什么这也是 LL 的问题);通过使用 constrainedWidth/Height ,像 TextView 这样的小部件可以在需要时正确使用 0dp 和包装行为;它使 View 有机会正确地重新测量自身。
    当您重用 TexViews 时,这个问题主要表现出来(我不知道哪些其他 View 会从中受益,但我假设任何有文本的东西都容易有计算快捷方式/黑客,可能需要这些额外的信息才能正确触发重新测量)。像 TextView 一样重用带有文本的小部件,这是最需要的地方,想想一个 RecyclerView,其中你的 ViewHolder 位于 ConstraintLayout(很常见),当你滚动时,ViewHolder 被重用并重新绑定(bind)到另一个“数据模型”如果没有此属性,TextView 将/可能无法为可能出现的新文本重新计算其大小。
    我希望这是有道理的。tl;dr :这是一种解决一些小部件在重用时无法重新计算其尺寸的潜在问题的解决方法,特别是在 RecyclerView 中,但很可能不限于此。
    你有它。 :)
    2018 年 7 月更新:
    如果您正在使用 ConstraintLayout 1.1.0 ,要使用的正确属性是 app:layout_constrainedWidth="true"代替旧的app:layout_constraintWidth_default="wrap" (和高度对应)
    2017 年 11 月更新
    我使用的是 Constraint Layouts 1.0.2,我发现了一个使用 app:layout_constraintWidth_default="wrap" 嵌套较少的解决方案(一个在 1.0.0 中引入的属性,但这篇文章使用的 Beta 没有)。
    而不是 FrameLayout包含 LinearLayout您现在可以删除所有这些并以这种方式拥有它:
        <android.support.constraint.ConstraintLayout
          android:id="@+id/new_way_container"
          android:layout_height="wrap_content"
          android:layout_width="0dp" // THIS GUY USES ALL THE WIDTH.
          app:layout_constraintEnd_toEndOf="parent"
          app:layout_constraintStart_toStartOf="parent"
          app:layout_constraintTop_toTopOf="parent">
    
          <TextView
            android:ellipsize="end"
            android:id="@+id/some_text"
            android:layout_height="wrap_content"
            android:layout_width="0dp" //NO WRAP CONTENT, USE CONSTRAINTS
            android:lines="1"
            android:maxLines="1"
            app:layout_constraintEnd_toStartOf="@+id/disclosure_arrow"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintHorizontal_chainStyle="packed" //CHAIN IT for biasing.
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintWidth_default="wrap" /> //THIS IS THE KEY THAT WILL CAUSE THIS TO WORK
    
          <ImageView
            android:id="@+id/disclosure_arrow"
            android:layout_height="wrap_content"
            android:layout_width="10dp"
            app:layout_constraintBottom_toTopOf="@id/some_text"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@id/some_text"
            app:layout_constraintTop_toBottomOf="@id/some_text"
            app:srcCompat="@drawable/your_vector_image" />
        </android.support.constraint.ConstraintLayout>
    
    这有效地完成了我想要的,没有黑客或指南或硬编码大小。
    TextView 将使用约束提供的大小(在正常情况下这意味着它要么是错误的,要么会超出“父”),但是由于新属性,如果内容更小/更大。
    我不得不说它比 iOS 优先级要好得多。 (至少对我来说更容易掌握)。在这一点上为 Google 竖起大拇指 :)
    旧答案(以防您仍然需要它)。
    根据 Nicolas Roard 的回答,我将创建一个自定义容器,该容器基本上可以计算可用空间,并以编程方式在 TextView 上设置 maxWidth。我没有在项目中添加另一个类、单元测试、可能的错误集等,而是尝试了一种效率稍低的嵌套布局的方法;考虑到我们从黎明时代就一直在嵌套布局,并且这不会出现在任何滚动 ListView 上或移动太多(或根本移动),并且我正在使用 ConstraintLayouts 来展平大部分层次结构(前所未有的) !),那么我不认为在得到更好的支持之前有点嵌套是那么糟糕。
    所以我所做的基本上是,使用 FrameLayout,这是设计优化(或认为)有一个 child (它可以包含更多)。这个 FrameLayout 是应用了 ConstraintLayout 规则的一个,如下所示:
      <FrameLayout
          android:id="@+id/hostTextWithCaretContainer"
          android:layout_width="0dp"
          android:layout_height="wrap_content"
          app:layout_constraintLeft_toLeftOf="parent"
          app:layout_constraintTop_toTopOf="parent"
          app:layout_constraintRight_toRightOf="parent">
    
          <!-- MY CONTENT GOES HERE -->
    
      </FrameLayout>
    
    所以在我的真实应用中,这个 FrameLayout 在另一个 ConstraintLayout 里面,它的左边有一个图标和一些其他的东西,但是为了这个例子,想象一下你必须把这个 FrameLayout 的左/右“固定”到你想要的任何空间想占。在这个例子中你可以看到我正在使用 parent在所有约束中,但此 FrameLayout 的左侧和右侧可能还有其他小部件;感谢 ConstraintLayout 的魔法,这将占据所有可用空间。
    现在是技巧的第二部分......因为 ConstraintLayout 保证 FrameLayout 将使用我们拥有的“所有空间”并且永远不会更多(或更少),我现在可以在里面使用 LinearLayout ......就像这样......
         <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal">
    
          <TextView
              android:id="@+id/textView"
              android:layout_height="wrap_content"
              android:layout_width="0dp"
              tools:text="Some Text"
              android:text="Some Text"
              android:textAlignment="viewStart"
              android:layout_gravity="center_vertical"
              android:gravity="start"
              android:ellipsize="end"
              android:maxLines="1"
              android:layout_weight="1"/>
    
          <ImageView
              android:id="@+id/caret"
              android:layout_width="8dp"
              android:layout_height="8dp"
              app:srcCompat="@drawable/ic_selection"
              android:contentDescription=""
              android:layout_gravity="center_vertical"
              android:layout_marginStart="8dp"
              android:layout_marginEnd="8dp" />
    
        </LinearLayout>
    
    细心的读者会注意到 LinearLayout 有 wrap_content就其宽度而言,这非常重要,因为子 TextView 可以具有 0dp 的宽度和 weight 1,这意味着在所有其他小部件计算其宽度后,它将占用所有可用空间。
    在这种特殊情况下,另一个 child (ImageView) caret没有指定权重和固定宽度,因此 TextView 不必与其他人共享/拆分可用空间,它可以全部使用(但只有可用空间,请记住其宽度为 0dp)。
    这种效率较低的方法,有效地实现了我想要的,尽管如果你愿意的话,它的 ConstraintLayout Magic 会更少。
    从好的方面来说,我不必创建自定义 View 、执行数学运算并发出 requestLayout()在我完成所有数学之后;这种效率较低的方法将/应该扩展,直到 ConstraintLayout 提供有效的替代方案,它可能就足够了。
    向在社交媒体上回复并最终花时间思考这个问题的 Google 工程师大喊大叫。也许在 future ,当他们在编写有关 ConstraintLayout 1.1 的任务和故事点时,他们会记住这一点并想出一个好的解决方案

    关于android - ConstraintLayout 链和文本省略号 + 右侧的图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40410786/

    有关android - ConstraintLayout 链和文本省略号 + 右侧的图像的更多相关文章

    1. ruby-on-rails - 如何优雅地重启 thin + nginx? - 2

      我的瘦服务器配置了nginx,我的ROR应用程序正在它们上运行。在我发布代码更新时运行thinrestart会给我的应用程序带来一些停机时间。我试图弄清楚如何优雅地重启正在运行的Thin实例,但找不到好的解决方案。有没有人能做到这一点? 最佳答案 #Restartjustthethinserverdescribedbythatconfigsudothin-C/etc/thin/mysite.ymlrestartNginx将继续运行并代理请求。如果您将Nginx设置为使用多个上游服务器,例如server{listen80;server

    2. ruby-on-rails - 简单的 Ruby on Rails 问题——如何将评论附加到用户和文章? - 2

      我意识到这可能是一个非常基本的问题,但我现在已经花了几天时间回过头来解决这个问题,但出于某种原因,Google就是没有帮助我。(我认为部分问题在于我是一个初学者,我不知道该问什么......)我也看过O'Reilly的RubyCookbook和RailsAPI,但我仍然停留在这个问题上.我找到了一些关于多态关系的信息,但它似乎不是我需要的(尽管如果我错了请告诉我)。我正在尝试调整MichaelHartl'stutorial创建一个包含用户、文章和评论的博客应用程序(不使用脚手架)。我希望评论既属于用户又属于文章。我的主要问题是:我不知道如何将当前文章的ID放入评论Controller。

    3. ruby-on-rails - 添加回形针新样式不影响旧上传的图像 - 2

      我有带有Logo图像的公司模型has_attached_file:logo我用他们的Logo创建了许多公司。现在,我需要添加新样式has_attached_file:logo,:styles=>{:small=>"30x15>",:medium=>"155x85>"}我是否应该重新上传所有旧数据以重新生成新样式?我不这么认为……或者有什么rake任务可以重新生成样式吗? 最佳答案 参见Thumbnail-Generation.如果rake任务不适合你,你应该能够在控制台中使用一个片段来调用重新处理!关于相关公司

    4. ruby - 使用 `+=` 和 `send` 方法 - 2

      如何将send与+=一起使用?a=20;a.send"+=",10undefinedmethod`+='for20:Fixnuma=20;a+=10=>30 最佳答案 恐怕你不能。+=不是方法,而是语法糖。参见http://www.ruby-doc.org/docs/ProgrammingRuby/html/tut_expressions.html它说Incommonwithmanyotherlanguages,Rubyhasasyntacticshortcut:a=a+2maybewrittenasa+=2.你能做的最好的事情是:

    5. ruby-on-rails - 在 Ruby (on Rails) 中使用 imgur API 获取图像 - 2

      我正在尝试使用Ruby2.0.0和Rails4.0.0提供的API从imgur中提取图像。我已尝试按照Ruby2.0.0文档中列出的各种方式构建http请求,但均无济于事。代码如下:require'net/http'require'net/https'defimgurheaders={"Authorization"=>"Client-ID"+my_client_id}path="/3/gallery/image/#{img_id}.json"uri=URI("https://api.imgur.com"+path)request,data=Net::HTTP::Get.new(path

    6. python ffmpeg 使用 pyav 转换 一组图像 到 视频 - 2

      2022/8/4更新支持加入水印水印必须包含透明图像,并且水印图像大小要等于原图像的大小pythonconvert_image_to_video.py-f30-mwatermark.pngim_dirout.mkv2022/6/21更新让命令行参数更加易用新的命令行使用方法pythonconvert_image_to_video.py-f30im_dirout.mkvFFMPEG命令行转换一组JPG图像到视频时,是将这组图像视为MJPG流。我需要转换一组PNG图像到视频,FFMPEG就不认了。pyav内置了ffmpeg库,不需要系统带有ffmpeg工具因此我使用ffmpeg的python包装p

    7. 安卓apk修改(Android反编译apk) - 2

      最近因为项目需要,需要将Android手机系统自带的某个系统软件反编译并更改里面某个资源,并重新打包,签名生成新的自定义的apk,下面我来介绍一下我的实现过程。APK修改,分为以下几步:反编译解包,修改,重打包,修改签名等步骤。安卓apk修改准备工作1.系统配置好JavaJDK环境变量2.需要root权限的手机(针对系统自带apk,其他软件免root)3.Auto-Sign签名工具4.apktool工具安卓apk修改开始反编译本文拿Android系统里面的Settings.apk做demo,具体如何将apk获取出来在此就不过多介绍了,直接进入主题:按键win+R输入cmd,打开命令窗口,并将路

    8. ruby - 如何计算 Liquid 中的变量 +1 - 2

      我对如何计算通过{%assignvar=0%}赋值的变量加一完全感到困惑。这应该是最简单的任务。到目前为止,这是我尝试过的:{%assignamount=0%}{%forvariantinproduct.variants%}{%assignamount=amount+1%}{%endfor%}Amount:{{amount}}结果总是0。也许我忽略了一些明显的东西。也许有更好的方法。我想要存档的只是获取运行的迭代次数。 最佳答案 因为{{incrementamount}}将输出您的变量值并且不会影响{%assign%}定义的变量,我

    9. ruby - 是否有将图像文件转换为 ASCII 艺术的命令行程序或库? - 2

      有这样的事吗?我想在Ruby程序中使用它。 最佳答案 试试这个http://csl.sublevel3.org/jp2a/此外,Imagemagick可能还有一些东西 关于ruby-是否有将图像文件转换为ASCII艺术的命令行程序或库?,我们在StackOverflow上找到一个类似的问题: https://stackoverflow.com/questions/6510445/

    10. ruby-on-rails - 使用 Dragonfly 从 URL 分配图像 - 2

      我正在使用Dragonfly在Rails3.1应用程序上处理图像。我正在努力通过url将图像分配给模型。我有一个很好的表格:{:multipart=>true}do|f|%>RemovePicture?Dragonfly的文档指出:Dragonfly提供了一个直接从url分配的访问器:@album.cover_image_url='http://some.url/file.jpg'但是当我在控制台中尝试时:=>#ruby-1.9.2-p290>picture.image_url="http://i.imgur.com/QQiMz.jpg"=>"http://i.imgur.com/QQ

    随机推荐