【问题标题】:Vertical centering of two text parts两个文本部分的垂直居中
【发布时间】:2021-01-08 06:17:31
【问题描述】:

我在 EDC 中有一个基本布局:

group { "sample";
  parts {
     text { "text0";
        desc { "default";
           rel1.relative: 0 0;
           rel2.relative: 1 0.5;
           color: 255 0 0 255;
           text {
              text: "Title";
              font: "Tizen:style=Regular";
              size: 30;;
              align: 0.5 1;
           }
        }
     }
     text { "text1";
        desc { "default";
           rel1.relative: 0 0.5;
           rel2.relative: 1 1;
           color: 255 0 255 255;
           text {
              text: "SubTitle";
              font: "Tizen:style=Regular";
              size: 14;
              align: 0.5 0;
           }
        }
     }         
  }
}

这是按预期工作的:

但是我想将这两个文本放在垂直中间:

我画了两条绿线,文本应位于它们之间(垂直)。

如何使用 EDC 实现这一目标?

额外信息:我需要这两个文本,一个还不够。

【问题讨论】:

  • SWALLOW 部分创建另一个组可以工作,但似乎有点浪费内存和资源。

标签: tizen tizen-native-app


【解决方案1】:

EDC image

你想要这个吗?请参考下文。

collections {
   group { "sample";
      parts {
         spacer { "base";
            desc { "default";
               min: 400 120;
               max: 400 120;
            }
         }
         rect { "bg";
            desc { "default";
               rel.to: "base";
               color: 255 255 255 255;
            }
         }
         text { "text0";
            desc { "default";
               rel1.to: "rect0";
               rel2.to_x: "rect0";
               rel2.to_y: "rect_middle";
               rel1.relative: 0.5 1;
               rel2.relative: 0.5 0;
               align: 0.5 0.5;
               color: 255 0 0 255;
               text {
                  text: "Title";
                  font: "Tizen:style=Regular";
                  size: 30;;
                  align: 0.5 1;
                  min: 1 1;
               }
            }
         }
         text { "text1";
            desc { "default";
               rel1.to_x: "rect1";
               rel1.to_y: "rect_middle";
               rel2.to: "rect1";
               rel1.relative: 0.5 1;
               rel2.relative: 0.5 0;
               align: 0.5 0.5;
               color: 255 0 255 255;
               text {
                  text: "SubTitle";
                  font: "Tizen:style=Regular";
                  size: 14;
                  align: 0.5 0;
                  min: 1 1;
               }
            }
         }
         rect { "rect_middle";
            desc { "default";
               color: 0 0 255 255;
               rel.to: "base";
               align: 0.5 0.5;
               min: 0 2;
               max: -1 2;
            }
         }   
         rect { "rect0";
            desc { "default";
               color: 0 255 0 255;
               rel.to: "base";
               align: 0.4 0;
               min: 2 30;
               max: 2 30;
            }
         }
         rect { "rect1";
            desc { "default";
               color: 0 255 0 255;
               rel.to: "base";
               align: 0.4 1;
               min: 2 30;
               max: 2 30;
            }
         }
      }
   }
}

【讨论】:

  • 实际上,EDC 中不需要这两条绿线,它们只是显示文本应该放置在哪里。您的解决方案似乎并不完美,对我来说,这两个文本似乎有点错位。
  • imgur.com/a/nLLgd5z:文本和矩形之间有 2 个像素的顶部和 11 个像素的底部差异。如果您从远处看到它,它会感觉中心没有垂直对齐 - 无论如何,谢谢! (我知道可能会有像“y”这样的字母会向下,但肯定不是 11px)
猜你喜欢
  • 2013-10-15
  • 2019-12-30
  • 2015-09-16
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2015-06-06
相关资源
最近更新 更多