新人奮闘記15

iOS 入門

iOSアプリを作成する際、使用頻度の高いUI（Button）で、ハマった事を書いていきたいと思います。

[UIButton]

ユーザーがタップすると画面が遷移したりと、様々な操作を受け付けるためのUIですが、今回UIButtonのレイアウトを行っているとき、予期せぬ事が起きたので、調査してみます。

ボタンを作成する際、何かしらのイメージ画像を設定する事があるかと思いますが、設定自体はシンプルに、StoryBordにて、Buttonを選択した状態でShow the Attribute Inspecterタブ->imageのプルダウンメニューからプロジェクト内にある、画像を選択するだけなのですが、長方形で小さめのサイズのButtonを複数、横に並べたものをオートレイアウトで作成している時につまづきました。

実機にて確認してみると異常なく表示されていましたが、ふとタップしてみると反応が微妙に鈍い感じがありました。

タップは可能、但し反応が鈍く、少し右へスワイプするようにタップすると反応してくれるという事に気づき、原因を探っていました。するとXcodeのpreviewにて、大きな端末サイズ（iPad Pro等）で確認してみると見た目が崩れて、正体が現れました。

結論から言うとUIButtonを配置した際、デフォルトではTitle：Plainとなっていますが、その下にある「Button」と書かれているTitleの内容が原因でした。

この文字列を削除する事で大きな端末サイズでも意図した表示となり、タップの鈍さも改善されました。

検証①
単純に、UIButtonに38px×38pxの画像を設定し、Horizontal,Verticalを0に設定して、まん中に位置を固定してみます。

すると画像はButton内の左サイドへ寄ってしまいます。

試しに、Show the Attribute InspecterタブのViewの背景色をBlackColorへ変更してみました。

結果

デフォルトの状態では見えなかったものが明らかになりました。

この事から、StoｒryBordにてUIButtonに画像を設定すると、単純に画像に入れ変わっているのではなく,デフォルトで書かれているボタンのテキスト「Button」の左に画像が追加される事がわかりました。

そしてTitleの「Button」を削除すると画像が持っているサイズへ変更され正しく描画されている事がわかりました。

また、デフォルトのまま固定値で、UIButtonのwidthとheightを画像と同じサイズに設定した場合も「Button」は表示されなくなります。
しかしオートレイアウトにてButtonサイズを可変にした場合等は、文字列タイトルとして「Button」は画像の右側に残っているので、削除する方法が安全だと思いました。

[ImageとBackGroundImageについて]

UIに画像を設定する際、Show the Attribute Inspecterタブの項目にて画像を設定しますが、

誤って一つ下の項目、BackgroundImageにてプルダウンメニューより画像を設定してしまいました。

imageとBackgroundImageはどう違うのかが疑問となりましたので、実験してみようかと思います。

検証②
height:125、width:125のUIButtonを二つ作成し、それぞれに同じ画像を設定します。

この時、あえてTitleの「Button」はそのままにして起きました。

片方は、Imageに画像を設定、もう片方はBackGroundImageに画像を設定しました。

左 -> Image

右 -> Background Image

結果

図のように

Imageにて設定した画像は伸縮しないのに対し、BackgroundImageにて設定した画像は枠いっぱいに伸びています。

また、文字列「Button」の描画にも違いがあります。右側の描画では画像が「Button」の背面にきています。

これらの事から、UIButtonのサイズに合わせて枠全体に画像を描画したくない場合はImageを使用。
Buttonサイズが大きくなった場合も合わせて枠いっぱいに大きくなって欲しい場合は、BackGroundImageを使用。

左の図では、画像とTitleの「Button」が同じ階層に描画されている。
右図は画像が一段、背面の階層に描画されている事などがわかりました。

では、両方に設定した場合どうなるのかという事が気になりますが検証内容については、今回は割愛させていただきます。
結論的にはBackGroundImageに設定された画像が背面になり、Imageで設定した画像が前面に描画されます。それぞれ別の画像を設定すると確認が容易でした。

先ほどのBackGroundImageについて、便利な使い道がいまいちわからなかったので、良い場面があれば近日中に記述したいと思います。

まとめ

・今回は二つの画像の設定方法がある事を理解しました。これからまだまだ、たくさんの事を調べなければいけませんが。未確定情報、使用方法の仮説から調査していきたいと思います。

Tweet