ユーザーが下の画像のように向きを変更したときに組み込みのキーボードとまったく同じように動作するには、Interface Builder でカスタム キーボードにどのような制約を追加する必要がありますか (すべてのボタンは水平方向に伸び、その間に等間隔で垂直方向に収縮します)。
1013 次
1 に答える
4
これはとても簡単です (autolayout のやり方を知っていれば)。
まず、必要なボタン (または UIView) を背景ビューにドラッグします。そして、あなたが望むようにそれらを手動でレイアウトします。
そして、最初の行（Q〜P）から始めます。制約は次のように設定できます
Q -> コンテナーへの先行スペース: 4px
P -> コンテナーの末尾のスペース: 4px
QW, WE, ER, RT, TY, YU, UI, IO, OP はすべて 4px のような水平スペースを持っています
興味深い部分は、幅を決定することです。単純に、QW、WE、ER、RT、TY、YU、UI、IO、OP の幅を等しくします。なぜこの制約を設定するのですか? Q の先頭、P の末尾、およびすべてのギャップを修正すると、それらを同じ幅に設定すると、最初の行のすべてのボタンが残りのキーボード幅 (ボタンの幅) を自動的に共有するようになります。言い忘れましたが、WERTYUIOP は y を Q の中央に配置する必要があります。
これで、ボタンの幅を持つ最初の行が決定されました。
身長はどうやって決めるの？考え方は同じで、キーボードの高さの合計は、上マージン (Q の上のギャップ) と下マージン (スペースの下のギャップ、または 123)、行間のギャップ、および 4 * ボタンの高さで構成されます。
したがって、このような制約を設定し、Q、A、Z、および 123 を使用してボタンの高さを決定できます。
Q -> 上部のスペースからコンテナーへ: 4px 123 -> 下部のスペースからコンテナーへ: 4px QA、AZ、Z-123 はすべて垂直方向のスペースが 4px で、ボタンの幅に対して行ったのと同じように高さが等しくなるように設定します。
次に、Q と同じ高さになるように WP に制約を追加できます (Q、A、Z、123 の高さを決定しました)。
これで、1 行目が適切に決定されました。次に、2 行目を検討します。2 行目の x 位置の参照ベースが必要です。G に制約を追加してコンテナ ビューの水平方向の中央に配置し、2 行目のすべてのボタンのギャップを 1 行目と同じになるように設定します (この例では、 4px)。これで 2 行目が決まりました。
3 列目はとても簡単です。各ボタンを 2 列目に配置するだけです。例えば、
Z -> X を S に中央揃え -> S に等しい幅
Z の y 位置と高さを決定したので、もうそれを行う必要がないことを思い出してください。XM の場合、y の場合は Z の中央に、x の場合は 2 番目の行のボタンの中央に、2 番目の行のボタンと同じ幅、Z と同じ高さになります。
オートレイアウトの主な部分は BASE を見つけることです。コンテナー ビューのサイズが変化したときに、すべての要素がどこにあるべきかがわかるように、開始点が必要です。
お役に立てれば。
于 2014-11-13T02:10:32.823 に答える