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からViewHeight*0.03下、 左マージン:View.leadingからView.Width*0.01右
-サイズ：設定済
・NameButton(右上ボタン)
-上マージン：RMCalculator.topからViewHeight*0.02下、右マージン：View.trailingからViewWidth*0.02左
-サイズ：文字数によって可変にするつもりだからまだ未定義
各オブジェクトの画像は現在作成中なので見た目は初期状態のままです。イメージしにくかったらごめんなさい。
上半分のオブジェクトに関しては配置が結構バラバラなので等間隔配置がしたい等の実装ではありません。
また、別問題になりますが書き方に引っかかる点などございましたらついでにご指摘頂けると幸いです。
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
checkベストアンサー
+1
こんな感じかなぁ（僕もなんか思い違いしてるかもしれません、、、）
幅を位置に加算するにはスペーサーを置くしかないと思います。
（比率は小さかったので適当に大きくしています）
水色が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をわざと作成しなかったら中のコンテンツのサイズに自動調整されます。
うむ、手順を書いてみるとめんどくさいですね、、、
慣れたら１つ１つは簡単で数分の話なのですが、、、
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
+1
私の場合の話ですが、マージンは固定でやってます。（それほど厳密なレイアウトにすることはないので）
もし、どうしてもやらないといけなくなったらコードで対応すると思います。
【追記】
ボタンより一回り大きい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で表現出来ません。
出来る方法があったら教えて下さいｗ
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
質問への追記・修正、ベストアンサー選択の依頼
toki_td
2016/04/18 00:50
どんな形にしたいのかいまいちよくわかりません。
画像などアップしてもらったほうがいいと思います。
ビューの間隔をデバイスのサイズによって変えたいということでしょうか？
fuzzball
2016/04/18 14:42
「サイズ：縦横が DummyView*0.05 の正方形」とありますが、正方形にはならないのでは？矩形ということでいいでしょうか？
morizoo-
2016/04/18 15:00
あ、すみません。間違えました。縦横がDummyView.height*0.05の正方形です。Viewの縦方向の長さだけを基準にしています。
fuzzball
2016/04/18 15:07
「DummyViewのサイズはViewと同じ」とのことですが、サイズの基準はdummyView、マージンの基準はViewにしているのには何か意味があるのでしょうか？
morizoo-
2016/04/18 15:12
深い意味はありません。やり始めのあまり理解出来ていない内に適当に付けてしまったものなので、後でDummyView基準に修正するつもりです。お目汚し失礼致しました。