UIedgeInsetsMake使用の詳細

10437 ワード

例buttonを作成する際には、buttonにピクチャとボタンを追加する必要があります.一般的には、ピクチャの上、タイトルの下の効果(グレーはbutton):が必要です.
スクリーンショット2016-04-08午後4.38.33.png
titleとimageを設定すると、画像が左で、タイトルが右です.
スクリーンショット2016-04-08午後4.40.19.png
もちろんこれは私たちが望んでいる効果ではありません.そこでUIEdgeInsetsMakeの属性を設定することで、私たちが望んでいる効果を達成しますが、具体的にはどのくらい設定するか、毎回やっている間に私はいつも試して、少しずつ試して、望んでいる効果に直行して、このようにすることはとても頭が痛くて、しかも原理などが全く分からないので、もっと頭が痛いのは万一需要を修正することです.例えばフォントの多少や大きさが変わったら、また試してみて、気が狂った感じがして、木があります!そこである日(つまり今日)私はついに我慢できなくなって、UIEdgeInsetsMakeがいったい何なのかを研究し始めました.
定義

typedef struct UIEdgeInsets {
  CGFloat top, left, bottom, right;  // specify amount to inset (positive) for each of the edges. values can be negative to 'outset'
} UIEdgeInsets;

UIedgeInsetsは実際には構造体であり(これまでは列挙と書かれていたが、刃のない刃が提出したエラーに感謝)、UIedgeInsetsMake(,)は4つの余白を設定し、まず1枚の図を見る:image_2.png
図中、青は可変領域、緑は不変領域として識別される.UIedgeInsets構造体のプロパティtopはbottomとペアで、縦可変領域(黒い破線矩形)を指定し、leftとrightをペアにして横可変領域(白い破線矩形)を指定します.UIButton/UIImageViewのsizeがUIImageのsizeより大きい場合、(1)コントロール幅がピクチャ幅より大きく、白い破線矩形を伸ばす(2)コントロール高さがピクチャ高さより大きく、黒い破線矩形を伸ばす(3)コントロール幅がピクチャ幅より小さい場合、横全体が縮小する(可変領域と不変領域の割合が変わらない)(4)コントロール高さがピクチャ高さより小さい場合、縦全体の縮小(可変領域と不変領域の割合は変わらない)
上の画像と解釈は一葉ブログから来ていますが、私の理解ではtopは上部からの距離がデフォルトの上に設定された距離であり、冒頭のbuttonではbuttonがimageだけを設定している場合(imageとtitleを同時に設定しても効果が異なる場合は、以下で詳しく説明しますが、焦らないでください)、imageのデフォルトは真ん中で、このような設定が行われていることに相当します.

[button setImageEdgeInsets:UIEdgeInsetsMake(0, 0, 0, 0)];

もし私たちがこの時に設定したら:

[button setImageEdgeInsets:UIEdgeInsetsMake(20, 0, 0, 0)];

画像が中央にある上に、画像をまた20下に移動することに相当し、-20であれば元の上から20上に移動し、他のいくつかのパラメータは同じで、正数は相応の辺からの距離が増加し、負数は相応の距離が減少する.この点について皆さんが本当に明らかにしたいのは、単純に私が書いた文章や他の誰が書いた文章を見て探すことはほとんど不可能で、最も良い方法は実践して、自分でコードを書いて、1つの変数1つの変数の実験をして、1つの変数の値を変えるたびにどのような効果が現れて、このように理解することができます.その前に私はネット上で多くのこの方面の資料を探して、大部分は一人で書いたので、他の人に貼り付けられて複製して、千編一律で、他の人の言うことが透徹していないのではないかもしれませんが、自分が実践に欠けているだけです.さて、テーマに戻り、次に画像とタイトルを同時に設定する場合についてお話しします.
buttonのためにピクチャとタイトルを同時に設定する文章の冒頭で述べたが、buttonにピクチャとtitleを設定するとデフォルトではピクチャが左になり、タイトルが右に並んでいる:

  [button setImage:[UIImage imageNamed:@"ffw_32"] forState:UIControlStateNormal];
  [button setTitle:@" " forState:UIControlStateNormal];

記事の冒頭の第2章ピクチャに戻り、このような変化の根源は何なのか.つまり、画像とタイトルを同時に追加すると、デフォルトではbuttonのtitleLabelの幅が左にシフトし、タイトルが画像の幅を右にシフトします.それなら、オフセット量を設定して、私たちが望む効果を達成することができます.一歩一歩、先頭に立って(これらのパラメータをどのように設定すればいいか考えてみてください):

  [button setImageEdgeInsets:UIEdgeInsetsMake(0, 0, 0, -button.titleLabel.intrinsicContentSize.width)];
  [button setTitleEdgeInsets:UIEdgeInsetsMake(0, -button.currentImage.size.width, 0, 0)];

効果:スクリーンショット2016-04-08午後5.45.58.png
私がイメージオフセット量を設定したときは設定されていなかったことに気づいたかもしれません.titleLabel.bounds.size.それではなくtitleLabel.intrinsicContentSize.iOS 8の後だからtitleLabel.bounds.size.widthの値は0で、多角的に検索してやっと代替の方法が見つかりました.このように設定した意味は、imageのオフセット量を右からの距離をtitleLabelの幅を減らすことです.デフォルトは左にこんなに安いので、私たちはこのように設定した後、左にシフトしたオフセット量を相殺することに相当します.だから、画像は真ん中になっています.titleについては同じです.この点が分かったら残りは難題はありません.続けてtitleを下に移動し、imageを上に移動します.

    [button setImageEdgeInsets:UIEdgeInsetsMake(-button.titleLabel.intrinsicContentSize.height, 0, 0, -button.titleLabel.intrinsicContentSize.width)];
    [button setTitleEdgeInsets:UIEdgeInsetsMake(button.currentImage.size.height, -button.currentImage.size.width, 0, 0)];

効果:
スクリーンショット2016-04-08午後5.5.24.png
画像とタイトルが少し近いようで、やりやすいので、もう少し追加します.

[button setTitleEdgeInsets:UIEdgeInsetsMake(button.currentImage.size.height + 20, -button.currentImage.size.width, 0, 0)];

分離:
スクリーンショット2016-04-08午後5.57.56.png
私のテストdemoを添付します.必要なものがあれば、パラメータを直接変更することができます.

    UIButton *button = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, 160, 160)];
    [button setImage:[UIImage imageNamed:@"ffw_32"] forState:UIControlStateNormal];
    [button setTitle:@" " forState:UIControlStateNormal];
    button.titleLabel.font = [UIFont systemFontOfSize:14];
    [button setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
    button.center = self.view.center;
    button.backgroundColor = [UIColor grayColor];
    [self.view addSubview:button];
    NSLog(@"%f",-button.titleLabel.bounds.size.width);

    [button setImageEdgeInsets:UIEdgeInsetsMake(-button.titleLabel.intrinsicContentSize.height, 0, 0, -button.titleLabel.intrinsicContentSize.width)];
    [button setTitleEdgeInsets:UIEdgeInsetsMake(button.currentImage.size.height + 20, -button.currentImage.size.width, 0, 0)];

after before偽要素が同じラベルに使われている穴!!

[Django] Static files