Q&A
どんな形にしたいのかいまいちよくわかりません。
画像などアップしてもらったほうがいいと思います。
ビューの間隔をデバイスのサイズによって変えたいということでしょうか？
###Autolayoutでmarginを動的に変更したい
現在StoryboardのAutolayoutの勉強をしています。
Viewのサイズを動的(デバイスサイズに合わせて)に変更することは、DummyViewを設ける等で解決しました。しかし、各オブジェクトに対するマージンを同じ様に設定することが出来ず困っています。
%指定した透明なViewを設けてそれに対してmargin:0で指定、という方法も思いつきましたが、とても非効率な気がしています。何か良い方法はございませんでしょうか？
＊StackViewは未対応なverが多い様なのでなしでお願いします。
###[追記]
修正依頼がありましたので画像をアップさせて頂きます。お見苦しいかもしれませんがご勘弁下さい。
今回マージンを設定したいのは画面左上のボタン(RMCalculator)と右上のボタン(NameButton)です。
現在の各設定は
・RMCalculator(左上ボタン)
-上マージン：SuperView(View).top+30、 左マージン：SuperView.leading+10
-サイズ：縦横が DummyView*0.05 の正方形
・NameButton(右上ボタン)
-上マージン：RMCalculator.top+10、 右マージン：SuperView.trailing-10
-サイズ：未定義
＊DummyViewのサイズはViewと同じ
理想の各設定
・RMCalculator(左上ボタン)
-上マージン：View.topからViewHeight0.03下、 左マージン:View.leadingからView.Width0.01右
-サイズ：設定済
・NameButton(右上ボタン)
-上マージン：RMCalculator.topからViewHeight0.02下、右マージン：View.trailingからViewWidth0.02左
-サイズ：文字数によって可変にするつもりだからまだ未定義
各オブジェクトの画像は現在作成中なので見た目は初期状態のままです。イメージしにくかったらごめんなさい。
上半分のオブジェクトに関しては配置が結構バラバラなので等間隔配置がしたい等の実装ではありません。
また、別問題になりますが書き方に引っかかる点などございましたらついでにご指摘頂けると幸いです。
「サイズ：縦横が DummyView*0.05 の正方形」とありますが、正方形にはならないのでは？矩形ということでいいでしょうか？
あ、すみません。間違えました。縦横がDummyView.height*0.05の正方形です。Viewの縦方向の長さだけを基準にしています。
「DummyViewのサイズはViewと同じ」とのことですが、サイズの基準はdummyView、マージンの基準はViewにしているのには何か意味があるのでしょうか？
深い意味はありません。やり始めのあまり理解出来ていない内に適当に付けてしまったものなので、後でDummyView基準に修正するつもりです。お目汚し失礼致しました。
回答2件
0
ベストアンサー
こんな感じかなぁ（僕もなんか思い違いしてるかもしれません、、、）
幅を位置に加算するにはスペーサーを置くしかないと思います。
（比率は小さかったので適当に大きくしています）
水色がDummyViewでその他のビューの親になっています。
-
RMCaluculatorSpacerを左上(0,0)に置いてLeading,TopのConstraintを作成
-
RMCaluculatorSpacerとDummyViewとでEqualWidth/EqualHeightを作成
-
作成したEqualWidth/HeightのConstraintを選択して画面左のSize InspectorからMultiplierを5%なら5:100にする
-
RMCaluculatorのLeading, Top位置をとりあえずRMCaluculatorSpacerのLeading,TopとEqualにして作成
-
作成したLeadingのConstraintを選択してSize InspectorからFirst ItemのRMCaluculator.LeadingをRMCaluculator.Trainingに変更(TopもBottomに変更)
-> これでRMCaluculatorの(0,0)はSpacerの右下にくっつきます -
RMCaluculatorとDummyViewとEqualWidth/Heightを作成して、Equal WidthのConstraintを選択、DummyView.WidthをHeightに変更、Width, HeightのMultiplierを設定します。
-> これでRMC〜はDummyViewのHeightから幅、高さ両方が決まります。 -
NameButtonSpacerのTopとRMCaluculatorのTop, Trainingと親ViewのTrainingを合わせます。
-
NameButtonSpacerのサイズを2,3と同様に設定し、NameButtonのTop, Trainingを4,5と同様に設定します。
※ まずはある程度イメージする配置にしたほうが簡単です。
※ 直近にないView1とView2間のConstraintを作成するにはView1からCommandを押しながらView2へラインを引いたらメニューが出てきます。
※ Constraintの選択はビューを選択->Size InspectorのConstraintからLeadingなどの棒をクリック->出てきたConstraintをダブルクリックで素早く選択できます。
※ Size InspectorのFirst, Secondが入れ替わっている場合はMultiplierを反対にするか、▼のReverse First and Second Itemで入れ替えられます。
※ NameButtonのWidth、HeightはConstraintをわざと作成しなかったら中のコンテンツのサイズに自動調整されます。
うむ、手順を書いてみるとめんどくさいですね、、、
慣れたら１つ１つは簡単で数分の話なのですが、、、
投稿2016/04/18 15:39
編集2016/04/18 15:45総合スコア2850
ちょっとしたことですが、
>>Multiplierを5%なら5:100にする
これは「5%」のまま記述できます。「0.05」でもOKです。
その時々で分かり易い書き方をするのが良いですね。
丁寧なご回答誠に有難うございます！！
やはりStoryboard上で動的なマージンを作るには一工夫必要なのですね。
ご教授頂いたspacerを設ける手段だとどうしてもオブジェクトの数や制約が増えてしまい若干見づらくなってしまう印象を受けました。
ここで疑問に思ったのですが、無理にでもレイアウトをAutolayout内で統一してしまうか、楽できる所はコード上で済ませるかは、コードレビューのしやすさも含めた観点でどちらが好ましいのでしょうか？
> fuzzballさん
あっ、そうなんですね、いつも比率で書いてたので気にしてませんでした、、、
勉強になります。
> morizoo-さん
無理に全部AutoLayoutにする必要はもちろんないです。
スペーサーなどがわかりにくいなら、わかりやすいとこだけAutoLayoutにするのも1つの手だと思います。
僕も今ではほとんどはAutoLayoutで作りますが微妙な調整が必要な時はコードで書きますよ。
ビュー内で中央揃えするだけなら明らかにAutoLayoutのほうが楽でわかりやすいです。
アプリの状態によって位置やサイズが変わるならAutoLayoutだけでは明らかに無理です。
要所要所で押さえておけばいいと思いますよ。
成る程！
たしかに状態遷移に対するレイアウトはAutolayoutだけじゃ無理ですね。。
制約が複雑化しない様ならspacerを設ける等、状況に応じて色々試してみようと思います！
大変参考になりました、ありがとうございました！
0
私の場合の話ですが、マージンは固定でやってます。（それほど厳密なレイアウトにすることはないので）
もし、どうしてもやらないといけなくなったらコードで対応すると思います。
【追記】
ボタンより一回り大きいViewを用意してマージンにすれば、マージン用のダミーの数を減らせるかなと思ったのですが、基準となるサイズが縦横混在しているので断念しました。
例えば、RMCalculatorの縦方向について考えると、
上マージン(H * 0.03) + ボタン高(H * 0.05) + 下マージン(H * 0.03) = H * 0.11
というダミーViewを用意して、その上にボタンをセンター合わせします。
しかし、横方向は、
左マージン(W * 0.01) + ボタン幅(H * 0.05) + 右マージン(W * 0.01) = W * 0.02 + H * 0.05
と、縦横が混在しているので1つのConstraintで表現出来ません。
出来る方法があったら教えて下さいｗ
投稿2016/04/18 00:49
編集2016/04/18 06:30総合スコア16731
あなたの回答
tips
プレビュー
