【已解决】swift中如何让一个图片和文字在一个矩形区域内水平居中对齐

【背景】

xcode中,已经通过swift代码:

(下面代码已经被修改了,不是原先的了。。。)

let ownedSchoolCoinBgView =UIImageView(image:UIImage(named:"school_coin_top_bg.png"))

let ownedSchoolCoinTxtView =UIView(frame:CGRectMake(20,40,100,40))
let myCoinImage =UIImageView(image:UIImage(named:"school_coin_my_coin.png"))
ownedSchoolCoinTxtView.addSubview(myCoinImage)
ownedSchoolCoinBgView.addSubview(ownedSchoolCoinTxtView)

let ownedSchoolCoinValueView =UITextView(frame:CGRectMake(20+20,40,100,40))
ownedSchoolCoinValueView.text ="拥有的时酷币"
 ownedSchoolCoinValueView.textColor =UIColor.whiteColor()
 ownedSchoolCoinValueView.backgroundColor =UIColor.clearColor()
 ownedSchoolCoinValueView.textAlignment =NSTextAlignment.Center
 ownedSchoolCoinBgView.addSubview(ownedSchoolCoinValueView)
 
 self.view.addSubview(ownedSchoolCoinBgView)

实现了效果:

left icon image right text almost align horizontal center

 

但是很明显:

本身设置了一个矩形区域,然后左边一个图片,右边一个文字

然后调节了半天,还是没有实现我所希望的:

先是让图片和文字,垂直方向,居中对齐

然后再去让右边的文字,显示的水平的x轴坐标值是左边图片的宽度,再加一点间隔

就类似于:

myCoinImage.frame.width + 5

myCoinImage.frame.size.width + 5

 

【解决过程】

1.搜:

swift UIView hirozontal center inside rectangle 

swift UIView align horizontal center inside rectangle

参考:

ios – Center align Labels and images inside UIView programatically with Swift – Stack Overflow

objective c – how to align my image in the center IOS horizontally – Stack Overflow

iphone – How to center a subview of UIView – Stack Overflow

暂时用代码:

let ownedSchoolCoinTxtView =UIView(frame:CGRectMake(20,40,100,24))
ownedSchoolCoinTxtView.backgroundColor =UIColor.blueColor()

let myCoinImage =UIImageView(image:UIImage(named:"school_coin_my_coin.png"))
//myCoinImage.center.y = ownedSchoolCoinTxtView.center.y

let ownedSchoolCoinValueView =UITextView(frame:CGRectMake(20+20,40,100,24))
ownedSchoolCoinValueView.text ="拥有的时酷币"
ownedSchoolCoinValueView.textColor =UIColor.whiteColor()
ownedSchoolCoinValueView.backgroundColor =UIColor.clearColor()
//ownedSchoolCoinValueView.textAlignment = NSTextAlignment.Center
ownedSchoolCoinValueView.center.y = ownedSchoolCoinTxtView.center.y

ownedSchoolCoinTxtView.addSubview(myCoinImage)
ownedSchoolCoinTxtView.addSubview(ownedSchoolCoinValueView)

效果:

add blue background align still not good

基本满意,但是还是不精确。

2.搜:

swift image horizontal center inside rectangle

参考:

后来自己加了背景色后:

add both background color for image and text

可以看出:

是右边的text没有上下垂直方向,居中对齐。

 

期间遇到:

【未解决】Swift中的offsetInPlace的含义和用法

3.搜:

swift UITextView vertical alignment

参考:

UITextView vertical center text alignment in Swift · GitHub

Example of vertical alignment for UITextView · GitHub

iOS: Vertical aligning text in a UITextView | Imagineric

A UITextView subclass that supports vertical text alignment

好像是 垂直方式显示的text,不是我要的。

4.官网:

Aligning Views with Auto Layout – NSView Class Reference

中的很多属性,比如:

alignmentRectForFrame

不知道具体啥意思,去搜索:

swift alignmentRectForFrame

 

5.去研究研究:

【已解决】swift中的UITextView、UITextField、UILabel的区别

6.参考:

swift – NSTextAlignment.Justified for UILabel does not work – Stack Overflow

 

7.然后去整理:

【整理】iOS中的UIView的基础知识

再去试试:把image的center.y赋值给text的center.y看看是否可以水平居中对齐

ownedSchoolCoinText.center.y = myCoinImage.center.y

结果:

还是不能对齐。

目前调试了半天的代码:

        let ownedSchoolCoinUpperLeftTextView = UIView(frame: CGRectMake(20, 40, 120, 24))
        ownedSchoolCoinUpperLeftTextView.backgroundColor = UIColor.blueColor()
       
        let myCoinImage = UIImageView(image: UIImage(named:"school_coin_my_coin.png"))
        //myCoinImage.center.y = ownedSchoolCoinUpperLeftTextView.center.y
        myCoinImage.backgroundColor = UIColor.cyanColor()
       
        print("myCoinImage.frame.size=\(myCoinImage.frame.size)") //myCoinImage.frame.size=(24.0, 24.0)
        print("myCoinImage.bounds=\(myCoinImage.bounds)") //myCoinImage.bounds=(0.0, 0.0, 24.0, 24.0)
       
        let ownedSchoolCoinText = UITextView(frame: CGRectMake(myCoinImage.frame.size.width, 0, 100, myCoinImage.frame.size.height))

        //let ownedSchoolCoinText = UITextView()
        ownedSchoolCoinText.text = "拥有的时酷币"
        ownedSchoolCoinText.textColor = UIColor.whiteColor()
        //ownedSchoolCoinText.backgroundColor = UIColor.clearColor()
        ownedSchoolCoinText.backgroundColor = UIColor.brownColor()
        //ownedSchoolCoinText.font = UIFont.boldSystemFontOfSize(13)
        //ownedSchoolCoinText.textAlignment = NSTextAlignment.Center
        //ownedSchoolCoinText.center.y = ownedSchoolCoinUpperLeftTextView.center.y

        print("ownedSchoolCoinUpperLeftTextView.center=\(ownedSchoolCoinUpperLeftTextView.center)") //ownedSchoolCoinUpperLeftTextView.center=(80.0, 52.0)
        print("ownedSchoolCoinText.center=\(ownedSchoolCoinText.center)") //ownedSchoolCoinText.center=(74.0, 12.0)
        print("myCoinImage.center=\(myCoinImage.center)") //myCoinImage.center=(12.0, 12.0)
       
        //ownedSchoolCoinText.center.y = myCoinImage.center.y - 1
        //ownedSchoolCoinText.center.y = myCoinImage.center.y
        //ownedSchoolCoinText.center.y = ownedSchoolCoinUpperLeftTextView.center.y
       
        ownedSchoolCoinUpperLeftTextView.addSubview(myCoinImage)
        ownedSchoolCoinUpperLeftTextView.addSubview(ownedSchoolCoinText)

效果还是和之前一样。

 

8.有空去换用UILabel去试试,或许会y轴方向能居中。

然后试了试UILable的代码:

        //let ownedSchoolCoinText = UITextView(frame: CGRectMake(myCoinImage.frame.size.width, 0, 100, myCoinImage.frame.size.height))

        //let ownedSchoolCoinText = UITextView()
        let ownedSchoolCoinText = UILabel(frame: CGRectMake(myCoinImage.frame.size.width, 0, 100, myCoinImage.frame.size.height))
        ownedSchoolCoinText.text = "拥有的时酷币"
        ownedSchoolCoinText.textColor = UIColor.whiteColor()
        ownedSchoolCoinText.backgroundColor = UIColor.brownColor()
        ownedSchoolCoinText.font = UIFont.boldSystemFontOfSize(13)

        ownedSchoolCoinUpperLeftTextView.addSubview(myCoinImage)
        ownedSchoolCoinUpperLeftTextView.addSubview(ownedSchoolCoinText)

结果很明显能看出来,文字和图标,是水平线居中对齐的。

change to uilabel then easy make horizontal align center

 

【总结】

之前用UITextView,结果无论如何配置text的属性,如何设置对齐,始终无法实现水平线的居中对齐,费劲千辛万苦,最后换了UILabel后,结果立刻可以居中对齐了。

所用代码如下:

//let ownedSchoolCoinText = UITextView(frame: CGRectMake(myCoinImage.frame.size.width, 0, 100, myCoinImage.frame.size.height))

//let ownedSchoolCoinText = UITextView()
let ownedSchoolCoinText = UILabel(frame: CGRectMake(myCoinImage.frame.size.width, 0, 100, myCoinImage.frame.size.height))
ownedSchoolCoinText.text = "拥有的时酷币"
ownedSchoolCoinText.textColor = UIColor.whiteColor()
ownedSchoolCoinText.backgroundColor = UIColor.brownColor()
ownedSchoolCoinText.font = UIFont.boldSystemFontOfSize(13)

ownedSchoolCoinUpperLeftTextView.addSubview(myCoinImage)
ownedSchoolCoinUpperLeftTextView.addSubview(ownedSchoolCoinText)

供参考。



发表评论

电子邮件地址不会被公开。 必填项已用*标注

无觅相关文章插件,快速提升流量