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

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

ただいまの
回答率

89.52%

ボタンの位置がずれる

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 2,439

前任者が作成したプロジェクトを変更しています。

横並びの2個のボタン に1個ボタンを追加しました。

View as: を iPad Pro 9.7 に設定して
ボタンを 2個から3個変更して位置をずらしました。

View as : を iPhone6 に設定すると
この3個のボタンが ずれてしまいます。
(先に View as : を iPhone6 で配置調整してView as: を iPad Pro 9.7 に変更するとやはりずれてしまいます。 )

変更していない他のボタンは、位置は問題ありません。

どのように調整したらいいかお教えください。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • fuzzball

    2017/07/24 15:45

    Autolayoutを使用しているのでしょうか?

    キャンセル

  • KoichiYoshimi

    2017/07/24 16:24

    Use Auto layout のチェックは入っています

    キャンセル

回答 1

checkベストアンサー

0

ボタンを置いているだけで制約(Constraint)を付けていないのではないでしょうか?

【追記】
大幅なレイアウト変更をするのでなければ、制約だけでなんとかなります。

一例として、画面サイズ(幅)が変わったときに、ボタンの幅は固定でボタン同士の間隔を可変にする、という方針で制約を付けてみたいと思います。(ボタン同士の制約についてのみ書きます)

両端のボタンは固定なので現状のままでもいいとして、他の3つのボタンに制約を付けていきます。

  • 3つのボタンのwidth/heightを固定にします。(例えば、左端ボタンと=にする。固定値でもかまいません)
  • Y座標(CenterY)を固定にします。(例えば、左端ボタンと=にする)
  • ボタン1のX座標を= Superview.CenterX * 0.5にします。
  • ボタン2のX座標を= Superview.CenterXにします。
  • ボタン3のX座標を= Superview.CenterX * 1.5にします。

以上で、画面の幅にかかわらず、ボタン1は左から1/4の位置、ボタン2は中央、ボタン3は右から1/4の位置に配置されるようになります。

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/07/25 14:03

    元々両端にボタンが2個(左端、右端)あります。
    その間に2個のボタンがあり、これを3個に変更しました。
    現状の制約(Constraint)は下記です。
    変更前は、
    View as: を iPhone6 か  iPad Pro 9.7 に設定したときに
    数字の値が変わったのですが、 現状は 変わりません。
    これが要因かと予想しているのですが、
    どうしたら View as: iPhone6 と  iPad Pro 9.7 で値が変更できるのかわかりません。
    ご指摘、よろしくお願いいたします。

    Pages.centerX= centerX
    Pages.top = top
    左端ボタン.height = 1個目ボタン.height
    左端ボタン.leading = leading - 10
    左端ボタン.centerY = 1個目ボタン.centerY
    trailing = Editscroll.trailinScrollg
    Editscroll.top = Pages.bottont
    Editscroll.leading = leading
    2個目ボタン.height = 1個目ボタン.height
    2個目ボタン.width = 1個目ボタン.width
    2個目ボタン.top = 1個目ボタン.top
    2個目ボタン.leading = centerX - 99
    2個目ボタン.centerY = 1個目ボタン.centerY
    bottom = 3個目ボタン.bottom + 11
    3個目ボタン.top = 1個目ボタン.top
    3個目ボタン.width = 2個目ボタン.width
    3個目ボタン.leading = 2個目ボタン.trailing + 23
    右端ボタン.height = 1個目ボタン.height
    右端ボタン.centerY = 1個目ボタン.centerY
    trailing = 右端ボタン.trailing -10
    centerX = 1個目ボタン.trailing + 120
    1個目ボタン.top = Editscroll.bottom + 11
    bottom = 1個目ボタン.bottom + 11

    キャンセル

  • 2017/07/25 14:36

    制約(Constraint)に ターゲット毎の設定を追加する方法がわかりました。

    素人で、申し訳ありません

    キャンセル

  • 2017/07/25 15:13

    回答に追記しましたので暇なら見て下さい。

    キャンセル

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

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