質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.47%

  • Swift

    7463questions

    Swiftは、アップルのiOSおよびOS Xのためのプログラミング言語で、Objective-CやObjective-C++と共存することが意図されています

  • Xcode

    4207questions

    Xcodeはソフトウェア開発のための、Appleの統合開発環境です。Mac OSXに付随するかたちで配布されています。

  • Objective-C

    1198questions

    Objective-Cはオブジェクト指向型のプログラミング言語のひとつです。C言語をベースにSmalltalkが取り入れられています。

[xcode]Autolayoutのmarginについて

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 868

morizoo-

score 41

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ページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • 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基準に修正するつもりです。お目汚し失礼致しました。

    キャンセル

回答 2

checkベストアンサー

+1

こんな感じかなぁ(僕もなんか思い違いしてるかもしれません、、、)
幅を位置に加算するにはスペーサーを置くしかないと思います。

レイアウト
(比率は小さかったので適当に大きくしています)

水色がDummyViewでその他のビューの親になっています。

  1. RMCaluculatorSpacerを左上(0,0)に置いてLeading,TopのConstraintを作成

  2. RMCaluculatorSpacerとDummyViewとでEqualWidth/EqualHeightを作成

  3. 作成したEqualWidth/HeightのConstraintを選択して画面左のSize InspectorからMultiplierを5%なら5:100にする

  4. RMCaluculatorのLeading, Top位置をとりあえずRMCaluculatorSpacerのLeading,TopとEqualにして作成

  5. 作成したLeadingのConstraintを選択してSize InspectorからFirst ItemのRMCaluculator.LeadingをRMCaluculator.Trainingに変更(TopもBottomに変更)
       -> これでRMCaluculatorの(0,0)はSpacerの右下にくっつきます

  6. RMCaluculatorとDummyViewとEqualWidth/Heightを作成して、Equal WidthのConstraintを選択、DummyView.WidthをHeightに変更、Width, HeightのMultiplierを設定します。
       -> これでRMC〜はDummyViewのHeightから幅、高さ両方が決まります。

  7. NameButtonSpacerのTopとRMCaluculatorのTop, Trainingと親ViewのTrainingを合わせます。

  8. 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つ1つは簡単で数分の話なのですが、、、

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/04/19 08:45 編集

    ちょっとしたことですが、

    >>Multiplierを5%なら5:100にする

    これは「5%」のまま記述できます。「0.05」でもOKです。
    その時々で分かり易い書き方をするのが良いですね。

    キャンセル

  • 2016/04/19 19:23

    丁寧なご回答誠に有難うございます!!

    やはりStoryboard上で動的なマージンを作るには一工夫必要なのですね。
    ご教授頂いたspacerを設ける手段だとどうしてもオブジェクトの数や制約が増えてしまい若干見づらくなってしまう印象を受けました。
    ここで疑問に思ったのですが、無理にでもレイアウトをAutolayout内で統一してしまうか、楽できる所はコード上で済ませるかは、コードレビューのしやすさも含めた観点でどちらが好ましいのでしょうか?

    キャンセル

  • 2016/04/20 00:25

    > fuzzballさん
    あっ、そうなんですね、いつも比率で書いてたので気にしてませんでした、、、
    勉強になります。

    > morizoo-さん
    無理に全部AutoLayoutにする必要はもちろんないです。
    スペーサーなどがわかりにくいなら、わかりやすいとこだけAutoLayoutにするのも1つの手だと思います。
    僕も今ではほとんどはAutoLayoutで作りますが微妙な調整が必要な時はコードで書きますよ。
    ビュー内で中央揃えするだけなら明らかにAutoLayoutのほうが楽でわかりやすいです。
    アプリの状態によって位置やサイズが変わるならAutoLayoutだけでは明らかに無理です。
    要所要所で押さえておけばいいと思いますよ。

    キャンセル

  • 2016/04/20 15:54

    成る程!
    たしかに状態遷移に対するレイアウトはAutolayoutだけじゃ無理ですね。。
    制約が複雑化しない様ならspacerを設ける等、状況に応じて色々試してみようと思います!
    大変参考になりました、ありがとうございました!

    キャンセル

+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で表現出来ません。

出来る方法があったら教えて下さいw

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/04/18 15:56

    やはり%指定を直感的にやる方法は無いんですかね。。。
    当面は僕もコード上で指定しようかな、と思います。
    ご協力誠に有難うございました!!

    キャンセル

  • 2016/04/20 15:58

    [追記に関して]
    成る程、そのやり方は思いつきませんでした!
    親子関係にすれば制約も分割できそうですね。
    これから試してみようと思います!

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.47%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • Swift

    7463questions

    Swiftは、アップルのiOSおよびOS Xのためのプログラミング言語で、Objective-CやObjective-C++と共存することが意図されています

  • Xcode

    4207questions

    Xcodeはソフトウェア開発のための、Appleの統合開発環境です。Mac OSXに付随するかたちで配布されています。

  • Objective-C

    1198questions

    Objective-Cはオブジェクト指向型のプログラミング言語のひとつです。C言語をベースにSmalltalkが取り入れられています。