内容对齐 TextAlignment & VerticalAlignment & HorizontalAlignment & contentMode

本文详细解读了iOS开发中容易混淆的五个属性:textAligment、contentVerticalAlignment、contentHorizontalAlignment、contentMode和他们各自的用法。通过具体实例,帮助开发者更好地理解和应用这些属性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

四个容易混淆的属性:

1.textAligment: 文字的水平方向的对齐方式

   1> 取值

   NSTextAlignmentLeft      = 0,    // 左对齐
   NSTextAlignmentCenter    = 1,    // 居中对齐
   NSTextAlignmentRight    = 2,    // 右对齐

   2> 哪些控件有这个属性 : 一般能够显示文字的控件都有这个属性

   * UITextField
   * UILabel
   * UITextView

2.contentVerticalAlignment: 内容的垂直方向的对齐方式

   1> 取值

   UIControlContentVerticalAlignmentCenter  = 0, // 居中对齐
   UIControlContentVerticalAlignmentTop     = 1, // 顶部对齐
   UIControlContentVerticalAlignmentBottom  = 2, // 底部对齐

   2> 哪些控件有这个属性 : 继承自UIControl的控件或者UIControl本身

   * UIControl
   * UIButton
   * UITextField
   * ...

3.contentHorizontalAlignment : 内容的水平方向的对齐方式

   1> 取值

   UIControlContentHorizontalAlignmentCenter = 0, // 居中对齐
   UIControlContentHorizontalAlignmentLeft   = 1, // 左对齐
   UIControlContentHorizontalAlignmentRight  = 2, // 右对齐

   2> 哪些控件有这个属性 : 继承自UIControl的控件或者UIControl本身

   * UIControl
   * UIButton
   * UITextField
   * ...

4.contentMode : 内容模式(控制内容的对齐方式), 一般对UIImageView很有用

   1> 取值

   /*
   规律:
   1.Scale : 图片会拉伸
   2.Aspect : 图片会保持原来的宽高比
   */
   // 前3个情况, 图片都会拉伸
   // (默认)拉伸图片至填充整个UIImageView(图片的显示尺寸会跟UIImageView的尺寸一样)
   UIViewContentModeScaleToFill,
   // 按照图片原来的宽高比进行伸缩, 伸缩至适应整个UIImageView(图片的内容不能超出UIImageView的尺寸范围)
   UIViewContentModeScaleAspectFit,
   // 按照图片原来的宽高比进行伸缩, 伸缩至 图片的 宽度 和UIImageView的宽度一样 或者 图片的高度和UIImageView的高度一样
   UIViewContentModeScaleAspectFill,

   // 后面的所有情况, 都会按照图片的原来尺寸显示, 不会进行拉伸
   UIViewContentModeRedraw,  // 当控件的尺寸改变了, 就会重绘一次(重新调用setNeedsDisplay, 调用drawRect:)
   UIViewContentModeCenter,
   UIViewContentModeTop,
   UIViewContentModeBottom,
   UIViewContentModeLeft,
   UIViewContentModeRight,
   UIViewContentModeTopLeft,
   UIViewContentModeTopRight,
   UIViewContentModeBottomLeft,
   UIViewContentModeBottomRight,

   2> 哪些控件有这个属性 : 

   所有UI控件都有


5. 如果有多个属性的作用冲突了, 只有1个属性有效(就近原则)



在 QML 中,可以使用 Text 控件的 horizontalAlignmentverticalAlignment 属性来实现字体横向居中和竖向居中的效果。 1. 实现字体横向居中 要实现字体横向居中,可以将 Text 控件的 horizontalAlignment 属性设置为 Text.AlignHCenter。例如,如果想要一个 Text 控件中的字体横向居中,可以这样写: ``` Text { text: "Hello, World!" font.pixelSize: 24 horizontalAlignment: Text.AlignHCenter } ``` 在上面的例子中,我们将 Text 控件的 horizontalAlignment 属性设置为 Text.AlignHCenter,即可实现字体横向居中的效果。 2. 实现字体竖向居中 要实现字体竖向居中,可以将 Text 控件的 verticalAlignment 属性设置为 Text.AlignVCenter,同时使用 RotationTransform 和 TranslateTransform 组件来实现。具体步骤如下: - 使用 RotationTransform 组件将 Text 控件旋转 90 度,使其变为竖向显示。 - 使用 TranslateTransform 组件将 Text 控件向上平移半个控件高度,从而实现字体竖向居中效果。 示例代码如下: ``` Text { text: "Hello, World!" font.pixelSize: 24 verticalAlignment: Text.AlignVCenter transform: [ Rotation { origin.x: width/2 origin.y: height/2 angle: -90 }, Translate { y: width/2 - font.pixelSize/2 } ] } ``` 在上面的例子中,我们使用了 RotationTransform 组件将 Text 控件旋转了 -90 度,然后使用了 TranslateTransform 组件将 Text 控件向上平移了半个控件高度,从而实现了字体竖向居中的效果。同时,我们将 Text 控件的 verticalAlignment 属性设置为 Text.AlignVCenter,使其在竖向上居中。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值