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

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

新規登録して質問してみよう
ただいま回答率
85.49%
Xcode

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

Swift

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

Q&A

解決済

1回答

4095閲覧

画面サイズに応じてボタンのサイズを均等にする方法

kappaTKO

総合スコア37

Xcode

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

Swift

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

0グッド

0クリップ

投稿2019/07/25 07:35

編集2019/07/25 08:31

メニューが画面を作成しています。
ベースは、iPad Pro (12.9-inch)で配置しました。
親View「UIView:灰色」
子View「UILabel:黒色」「UIButton:青色」
親View のConstraints 上下左右を「0」にして表示させています。

やりたいことは、画面のサイズによって、ボタンのサイズを均等にして位置調整させたいです。
スタッフボタンの左の位置を「20」
利用者ボタンの右の位置を「20」
スタッフボタンと利用者ボタンの隙間を「20」
親Viewの幅「1366」
ボタンの幅「(1366 - 20 -20 -20)/2」
のような制約をボタンにつけたいと思っています。

ボタンの制約は、親Viewのサイズに対してMultiplierの設定を幅「0.4」高さ「0.12」にしています。

分からないことは、ボタンの幅と隙間を考慮に入れてどのようにボタンの大きさを均等にさせる制約をつけるかです。

もう一つ、画面サイズが変わるとボタンの縦軸の位置がズレてしまいます。スタッフボタンの上側にはメニューラベルがあり、利用者ボタンの上側には何もありません。このような場合、ボタンの縦軸の位置を合わせるにはどのように制約をつければよいでしょうか?

ご教示よろしくお願いします。

ラベルの制約は、上と左に設定しました。
イメージ説明
スタッフボタンの制約は、上と左に設定しました。
イメージ説明
利用者ボタンの設定は、上と右に設定しました。
イメージ説明
ボタンのMultiplierを含めた制約です。
イメージ説明
スタッフボタンと利用者ボタンの隙間が「20」になるようにボタンを大きくしたいです。
イメージ説明
縦にすると利用者ボタンが上に少しズレてしまいます。(解決済み)
イメージ説明
縦にすると利用者ボタンが上に少しズレる対策として、ラベルの幅を親Viewと同じすることで解決しました。
イメージ説明

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

ボタンの横方向だけですが、

  • スタッフ.leading = leading + 20(左の隙間)
  • trailing = 利用者.trailing + 20(右の隙間)
  • 利用者.leading = スタッフ.trailing + 20(ボタン同士の隙間)
  • スタッフ.width = 利用者.width(同じ幅)

これで「幅」は勝手に計算してくれることになります。

投稿2019/07/25 08:45

fuzzball

総合スコア16731

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kappaTKO

2019/07/25 09:43

上記はUIViewController の diewDidLoad内のコードで記述するものなのでしょうか。 最初のスタッフ.leading はどこで設定しますか。スタッフボタンのPINの左は「20」と設定しているのですが。
fuzzball

2019/07/25 09:55

今まで通りStoryboardでいいと思いますが。
kappaTKO

2019/07/26 00:58

ボタンの幅のサイズを調整することができました。 今回はボタンのサイズは親Viewとの割合できめなくてもいいですね。 ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.49%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問