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

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

ただいまの
回答率

90.40%

  • Swift

    9136questions

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

  • Xcode

    5140questions

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

  • iOS

    4867questions

    iOSとは、Apple製のスマートフォンであるiPhoneやタブレット端末のiPadに搭載しているオペレーションシステム(OS)です。その他にもiPod touch・Apple TVにも搭載されています。

Xcodeで、文字サイズ/位置を相対的に変化させたい

解決済

回答 2

投稿 編集

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

ois

score 38

はじめてアプリ開発をしています。
iPad、iPhoneなど、どの端末から見ても崩れないアプリを作りたいです。
画面としては入力フォームのようなものを作っています。

困っていることは、
1)例えばTextfieldを上記のように、いろんなサイズの端末に対応させる際に設定する項目がわからない
2)Scroll Viewなど、いつどのViewを入れ子にするかわからない(1を解決しようとしたら、Stack Viewを使うといいとか、Scroll Viewと使うといいとかでてきたので)

という2点です。

特に1に関して困っていて、調べていくうちにAutolayoutを使うということはわかりました。
Equal Width+Multiplierで相対的な横幅にしたものの、サイズが小さいと画面が切れてしまいます。
また、位置もAlignment ConstraintsでHolizontally in Containerを設定しておりますが、ずれてしまいます。
文字サイズは固定になります。
例えば画面にtextfieldを1つ表示するとして、どの端末でもレイアウトを保つにはどういう設定をしたらいいのでしょうか。上記だと不足がありますか。

ご教授いただけると幸いです。

(追記)
現状のViewと制約についてです。
現状のViewの構成は
Scroll View
>Label1
>StackView
>TextField1
>TextField2
という形になっており、ついている制約は
Scroll View : Align Center X to superview, Align Center Y to superview, Proportional Width to Label1
Label1 : Proportial width to Superview
StackView : Align Center X to Superview

具体的な困りごとは
・TextFieldが中央に来ず、左によってしまう
・サイズを小さくした時に文字が表示しきれないのか、部品がつぶれてしまう
というところです。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • fuzzball

    2018/08/16 14:10

    現状の制約を書いて下さい。

    キャンセル

  • fuzzball

    2018/08/16 16:14

    制約のエラー出てますよね?まずはエラーは無くして下さい。また、おそらく「Viewの構成」が正しく表現されていません。見る人が分かるように書いて下さい。

    キャンセル

回答 2

checkベストアンサー

0

テキストフィールドの開始位置をどのデバイスでも共通としたいという内容であれば、以下の画像のような制約を入ればできませんか?
※画像の設定だと、端末の横幅に応じてテキストフィールドの横幅は動的に変わります。(左側と右側に10pxの余白が空いたレイアウト)
イメージ説明

テキストフィールドの横幅を端末の横幅の○%とかにしたいなら以下の画像のような制約になるかなと。
イメージ説明

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

-1

下記のソースみたいに、デバイスサイズを得て、TextFieldの幅・高さ、開始位置を調整すれば、どの端末でも同じような位置に配置する事ができます。
また、フォントサイズについても同様にしてデバイスの幅で計算すれば、デバイスのサイズ別に設定できます。
下記ソースは、iPhone SEを基準に位置やサイズを算出しています。

import UIKit

class ViewController: UIViewController, UITextFieldDelegate {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.

        // デバイスのサイズを得る
        let devMaxWidth : CGFloat = self.view.bounds.width
        let devMaxHeight: CGFloat = self.view.bounds.height
        // UITextFieldの開始位置と幅・高さを設定する
        let textFieldWidth  : CGFloat = devMaxWidth / 320 * 200
        let textFieldHeight : CGFloat = devMaxHeight / 568 * 80
        let textFieldPosX   : CGFloat = (devMaxWidth - textFieldWidth) / 2
        let textFieldPosY   : CGFloat = (devMaxHeight - textFieldHeight) / 4

        // UITextFieldを作成する
        let myTextField = UITextField()
        //  UITextFieldの位置とサイズを設定する
        myTextField.frame = CGRect(x: textFieldPosX, y: textFieldPosY, width: textFieldWidth, height: textFieldHeight)
        // 表示する文字を代入する
        myTextField.text = "Hello UITextField!"
        // テキストを左揃えにする
        myTextField.textAlignment = NSTextAlignment.left
        // フォントサイズを設定する
        myTextField.font = UIFont.systemFont(ofSize: UIFont.systemFontSize * devMaxWidth / 320)
        // Delegateを自身に設定する
        myTextField.delegate = self
        // 枠を表示する
        myTextField.borderStyle = .roundedRect
        // バックグラウンドをシアンにする
        myTextField.backgroundColor = UIColor.cyan
        // クリアボタンを追加する
        myTextField.clearButtonMode = .whileEditing
        // Viewに追加する
        self.view.addSubview(myTextField)

    }

    // UITextFieldが編集された直前に呼ばれる
    func textFieldDidBeginEditing(_ textField: UITextField) {
        print("textFieldDidBeginEditing: \(textField.text!)")
    }

    // UITextFieldが編集された直後に呼ばれる
    func textFieldDidEndEditing(_ textField: UITextField) {
        print("textFieldDidEndEditing: \(textField.text!)")
    }

    // 改行ボタンが押された際に呼ばれる
    func textFieldShouldReturn(_ textField: UITextField) -> Bool {
        print("textFieldShouldReturn \(textField.text!)")
        // 改行ボタンが押されたらKeyboardを閉じる処理.
        textField.resignFirstResponder()
        return true
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
}

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

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

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

  • Swift

    9136questions

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

  • Xcode

    5140questions

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

  • iOS

    4867questions

    iOSとは、Apple製のスマートフォンであるiPhoneやタブレット端末のiPadに搭載しているオペレーションシステム(OS)です。その他にもiPod touch・Apple TVにも搭載されています。