The position adjustment of ImageView and Titlelabel in the 1:uibutton of lattice and knowledge

When using UIButton, it is sometimes necessary to adjust the position and size of the ImageView and Titlelabel inside the button. By default, the ImageView and Titlelabel of the buttons inside are displayed with the picture in the left text on the right, and then the two closely grouped together to form the center display. Such as:

We can use Setimageedgeinsets: and Settitleedgeinsets: Methods to adjust the position of both. Before using these two methods, we first need to position the ImageView and Titlelabel in the upper left corner of the UIButton to facilitate reference coordinates adjustment position. Use the following statement to locate (UIButton instance named BTN):

[Btn Setcontenthorizontalalignment:uicontrolcontenthorizontalalignmentleft]; [Btn Setcontentverticalalignment:uicontrolcontentverticalalignmenttop];

Also need to explain, btn height of 200, width for screen width, imageview picture of the original size for 150x150,titlelabel used SizeToFit: method. As defined, we discuss the location of ImageView and Titlelabel in a number of situations:

1. Normal situation:

After using the above statement, no action is made, the display and coordinates of the button are as follows:

imageview.x=0.000000, imageview.y=0.000000, imageview.width=150.000000, imageview.height=150.000000titlelabel.x=150.000000, titlelabel.y=0.000000, Titlelabel.width=180.500000, titlelabel.height=21.500000

You can see that the X value of the Titlelabel is 150, indicating that the origin of the Titlelabel is (150, 0) in the normal state.

2. Center The ImageView and move the Titlelabel left to the Welt:

Use the following statement to implement this scenario:

    [btn Setimageedgeinsets:uiedgeinsetsmake (0, (btn.bounds.size.width-btn.imageview.bounds.size.width) * 0.5 0 0 )];    [Btn settitleedgeinsets:uiedgeinsetsmake (000)];

The display and coordinates of this button are as follows:

imageview.x=112.500000, imageview.y=0.000000, imageview.width=150.000000, imageview.height=150.000000titlelabel.x=0.000000, titlelabel.y=0.000000, Titlelabel.width=180.500000, titlelabel.height=21.500000

As you can see, ImageView and Titlelabel are likely to overlap, and the X value of Titlelabel is indeed the width of the imageview.

3, so that ImageView and Titlelabel are centered:

Use the following statement to implement this scenario:

    [btn Setimageedgeinsets:uiedgeinsetsmake (0, (btn.bounds.size.width-btn.imageview.bounds.size.width) * 0.5 0 0 )];    [Btn Settitleedgeinsets:uiedgeinsetsmake (Btn.imageView.bounds.size.height, (Btn.bounds.size.width- Btn.titleLabel.bounds.size.width) *0.500)];

The display and coordinates of this button are as follows:

imageview.x=112.500000, imageview.y=0.000000, imageview.width=150.000000, imageview.height=150.000000titlelabel.x=97.250000, titlelabel.y=150.000000, Titlelabel.width=180.500000, titlelabel.height=21.500000

At this point everything is normal, in line with conjecture.

4, if the size of the ImageView is compressed:

Use the following statement to compress the ImageView into 100x100:

#define kimagewidth 100.     [btn setimageedgeinsets:uiedgeinsetsmake (0, (btn.bounds.size.width-kimagewidth) *0.5 , Btn.bounds.size.height-kimagewidth, (btn.bounds.size.width-kimagewidth) *0.5)];    [Btn Settitleedgeinsets:uiedgeinsetsmake (Btn.imageView.bounds.size.height, (Btn.bounds.size.width- Btn.titleLabel.bounds.size.width) *0.500)];

The display and coordinates of this button are as follows:

imageview.x=137.500000, imageview.y=0.000000, imageview.width=100.000000, imageview.height=100.000000titlelabel.x=147.250000, titlelabel.y=100.000000 , titlelabel.width=180.500000, titlelabel.height=21.500000

It can be found that the problem arises when the Titlelabel is no longer centered in the horizontal direction. But we can also find that the position of the Titlelabel in the vertical direction is still correct, and you can see the titlelabel.y=100. This means that after using the Setimageedgeinsets: method, the size of the ImageView will be changed.

So why is the Titlelabel offset in the horizontal direction? The reason is that we have always equated the initial x value of Titlelabel with the width of the imageview. And here the width of the imageview is smaller, but the initial x value of Titlelabel is still equal to the width of the imageview before shrinking, but we use a reduced width of imageview instead of the initial x value of Titlelabel, This led to the emergence of offsets.

There are two ways to handle this situation:

5, processing Method 1, first define Titlelabel redefine ImageView:

Use the following statement to implement this scenario:

#define kimagewidth 100.     [btn Settitleedgeinsets:uiedgeinsetsmake (Kimagewidth, (Btn.bounds.size.width- Btn.titleLabel.bounds.size.width) *0.500)];    [Btn setimageedgeinsets:uiedgeinsetsmake (0, (btn.bounds.size.width-kimagewidth) *0.5, Btn.bounds.size.height-kimagewidth, (btn.bounds.size.width-kimagewidth) *0.5)];

The display and coordinates of this button are as follows:

imageview.x=137.500000, imageview.y=0.000000, imageview.width=100.000000, imageview.height=100.000000titlelabel.x=97.250000, titlelabel.y=100.000000, Titlelabel.width=180.500000, titlelabel.height=21.500000

Since Titlelabel is used to position the width of ImageView before it is compressed, it can be positioned accurately, and will not be affected by the compression of the ImageView.

6, Treatment Method 2, first ImageView deformation before the width recorded:

Use the following statement to implement this scenario:

#define kimagewidth 100.      = btn.imageView.bounds.size.width;    [Btn setimageedgeinsets:uiedgeinsetsmake (0, (btn.bounds.size.width-kimagewidth) *0.5, Btn.bounds.size.height-kimagewidth, (btn.bounds.size.width-kimagewidth) *0.5)];    [Btn Settitleedgeinsets:uiedgeinsetsmake (Btn.imageView.bounds.size.height, (Btn.bounds.size.width- Btn.titleLabel.bounds.size.width) *0.500)];

The display and coordinates of this button are as follows:

imageview.x=137.500000, imageview.y=0.000000, imageview.width=100.000000, imageview.height=100.000000titlelabel.x=97.250000, titlelabel.y=100.000000, Titlelabel.width=180.500000, titlelabel.height=21.500000

The width of the ImageView is recorded and used as the initial x value of the Titlelabel, then the ImageView compression will no longer affect this value.

7, in addition, if you want to enlarge the ImageView, such as the width of ImageView 180, then the following conditions:

imageview.x=97.500000, imageview.y=0.000000, imageview.width=150.000000, imageview.height=150.000000titlelabel.x=97.250000, titlelabel.y=150.000000, Titlelabel.width=180.500000, titlelabel.height=21.500000

Can be found that the size of the ImageView or 150x150, and did not enlarge, but the center of the ImageView has been affected, resulting in offset.

8, after the above test, you can get the following conclusions:

(1), in UIButton, the initial x value of Titlelabel is the width of imageview;

(2), imageview can be compressed;

(3), when the ImageView is compressed, the width of the imageview will be smaller, at this time it is not possible to use the width of the imageview to replace the Titlelabel initial X-value to adjust the position;

(4), ImageView can not be enlarged.

The position adjustment of ImageView and Titlelabel in the 1:uibutton of lattice and knowledge