web-dev-qa-db-ja.com

パーセントベースのiOSレイアウトを作成する

Androidアプリケーションで現在使用しているレイアウトを複製しようとしていますが、特にiPhone 5の背が高いため、iOSでそれを実行する方法がわかりません。

これを「Android」の用語で説明する方法は知っていますが、過去数日間、iOSでこれを実行しようとしていましたが、うまく機能しません。

それを説明する最良の方法：

  1. 2つのレイアウトが必要です。上部のレイアウトは40％を占め、下部のレイアウトは60％を占める必要があります。
  2. 上のレイアウトでは、可能なすべてのスペースを埋める3つのボタンである必要があります（本質的にスペースの1/3）
  3. 下部のレイアウトでは、imageViewが必要で、その上にtextViewが必要です。

これはペイントモックアップです。 iOSでこれを行うことは可能ですか？レイアウトはAndroidよりも作成がはるかに難しいと感じています。

enter image description here

iosinterface-builderiphone-5
48
EGHDK

Xcode 6.0を使用して、Interface Builderで比例した幅または高さを指定できるようになりました。スーパービューからの高さのパーセンテージの手順：

子ビューとそのスーパービューの両方が選択されている間に、「等しい高さ」制約（または比例した幅にしたい場合は「等しい幅」）を追加します。

enter image description here

次に、必要な比率に追加した制約の「乗数」を変更します。たとえば、50％の場合、2に変更します。

内部ビューをスーパービューの割合として指定する場合、制約内のアイテムを逆にすることができます。

enter image description here

0.5の乗数（または必要な他の比率）を使用できるようになりました。

enter image description here

特定のケースでは、2つの子ビュー間で「等しい高さ」制約を定義し、アイテムが逆になっている場合は乗数を1.5（下部は上部のサイズ1.5）または0.6667に変更できます。

71
GK100

他の答えとは反対に、少なくとも自動レイアウトシステムを検討すべきだと思います。これは、説明したような予測可能なレイアウトを簡単に作成できるようにするために作成されました。自動レイアウトは、レイアウト内のビューに設定するconstraintsによって決まります。これらの制約は、視覚的またはプログラム的に作成できます。視覚的には、最初のビューは次のようになります。

visual constraints

表示される青い線には、ボタン間の間隔、ボタンの周囲のスペース、ボタンの高さと幅を指定する多くの制約があります。 =が付いているいくつかの制約を見ることができます-3つのボタンをすべて選択し、「等しい高さ」の制約を与えました。

制約を文字列として記述することができるNice visual format syntax があります。リンクされたドキュメントを見てください。文字列を読むことができるほど十分に学習するのにそれほど長くかかりません。たとえば、トップレイアウトは次のように指定できます。

V:[button1]-[button2(==button1)]-[button3(==button1)]

括弧付きの==button1は、button2およびbutton3をbutton1と同じ高さにするようレイアウトシステムに指示します。 -は、ボタン間に標準の間隔を使用する必要があることを示します。必要に応じて、異なる間隔を指定できます。 10ポイント間隔の場合、これを行います。

V:|-10-[button1]-10-[button2(==button1)]-10-[button3(==button1)]-10-|

このような文字列を取得したら、次のメソッドを使用して制約に変換できます。+[NSLayoutConstraint constraintsWithVisualFormat:options:metrics:views:]

一部の制約は、視覚的にも、上記の文字列でも指定できません。これらの中で最も重要なのは、上部と下部のレイアウトのように、2つのビューの間に一定の（ただし不均等な）関係を設定する場合です。そのうちの1つが使用可能な垂直スペースの40％を占め、もう1つが60％を占めるようにします。メソッド+[NSLayoutConstraint constraintWithItem:attribute:relatedBy:toItem:attribute:multiplier:constant:]を使用してこれを行います。例えば：

NSLayoutConstraint *c = [NSLayoutConstraint constraintWithItem:bottomView
                                                     attribute:NSLayoutAttributeHeight
                                                     relatedBy:NSLayoutRelationEqual
                                                        toItem:topView
                                                    multiplier:1.5
                                                      constant:0];

これにより、bottomViewの高さをtopViewの高さの1.5倍に設定する制約が与えられます（60/40 = 1.5なので、これが必要です）。

プログラムで制約を作成する場合、ビュー階層を作成（またはロード）するときに適切なビューに制約を追加できます。 View Controllerの-viewDidLoadメソッドは、それを行うのに最適な場所です。

37
Caleb

私はそれを使用しないので、自動レイアウトの使用については知りませんが、それなしのコードでは、2つのUIViewsを作成し、それらのフレームを次のように設定できます。

CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height * 0.4f);
CGRectMake(0, self.view.frame.size.height * 0.4f, self.view.frame.size.width, self.view.frame.size.width * 0.6f);

そして、トップビューで、フレーム付きのボタンを追加できます（ビューがview1）：

CGRectmake(0, 0, self.view.frame.size.width, view1.frame.size.height * (1.0f/3.0f));
CGRectmake(0, view1.frame.size.height * (1.0f/3.0f), self.view.frame.size.width, view1.frame.size.height * (1.0f/3.0f));
CGRectmake(0, view1.frame.size.height * (2.0f/3.0f), self.view.frame.size.width, view1.frame.size.height * (1.0f/3.0f));
2
Jsdodgers

動作させるには、いくつかの制約を追加する必要があります。必要なものの簡単な説明は次のとおりです。

  1. 水平方向の間隔の制約が必要になります。上面までの距離が0であるため、上面ビューの場合は1つです。底面までの距離がゼロであるため、底面ビュー用のもう1つ。 2つのビューの間にはもう1つの制約があります。これは、2つのビューの間隔もゼロだからです。

  2. 同じ原理がトップビュー内のボタンにも適用されます。トップビュー内に正しいサイズのボタンを配置し、同様の制約を追加しますが、現在は2つではなく3つの要素があります。したがって、ボタンの上部、下部、およびボタン間のゼロ間隔の制約。

ビューにコンポーネントを追加すると、いくつかの制約が作成されます。一方を上部に、もう一方を下部に追加すると、上部の間隔と互いの間隔の両方が作成されます。それらを編集するには、インスペクターの5番目のタブ（ルーラー）に移動するだけで、制約のリストが表示されます。最後に、制約メニューを試してみることもできます（このための有名な名前があるかどうかはわかりません）。 Interface Builderキャンバスの右下隅にあります。画像をご覧ください：

enter image description here

さらにサポートが必要な場合はお知らせください。

1
rocir

これは、ストーリーボードを使用するときに自動的に行うことができます（あちこちで1つまたは2つの設定を変更する必要がある場合があります）。 GUIを作成するときに、画面サイズ（3.5インチと4インチ）を切り替えて、両方で適切に表示されるようにすることができます。 この質問に対する回答を参照 。

このチュートリアルもご覧になれます 。これにより、GUIレイアウトの操作方法についてのアイデアが得られます。

0
CaptJak