レイアウトエディターによるUI設計に関するAndroid Studio公式ドキュメント

回る

<ラベル

(1368) (0)

ConstraintLayout基本インターフェース

今日の記事が始まる前に、私はあなたを助けるためにお願いしたい好意がある、私はJingdongで、淘宝網、Dangdang、Amazonは私の本を買ったことを願っています "友人のAndroidグループ：神器"、短い評価を与えるためにオンラインストアに行くのに役立ち、手のショー、またはみんなラ〜に大いに感謝します。

Android Studio 2.2のアップデート後、レイアウトデザイナーが更新され、同時にレイアウト階層の削減を目的としたConstraintLayoutというレイアウトが導入され、そのメインインターフェイスは以下のようになりました。

このインターフェースは、次のような主要セクションに分かれています。

• 左サイドバー（パレットコンポーネントライブラリとコンポーネントツリーを含む
• 真ん中はレイアウトデザイナーで、左側のビュープレビューと右側のレイアウト制約の2つのパーツから構成されています
• 右サイドバー。上部にボックスモデルのような境界線とサイズのレイアウトデザイナー、下部にプロパティのリストが表示される

インターフェイスに慣れたので、あとはConstraintLayoutが何であるかを理解するだけです。その核心は、ConstraintLayoutは実際に「制約」であり、それは拡張されたものとして記述できるものを単純かつ正確に翻訳したものです。
RelativeLayoutより制約が多いことを除けば、その点では理解しやすいと思います。

<ブロッククオート

ConstraintLayoutを初めて描画すると、Android Studioは自動的に依存関係をダウンロードし、自動的にインストールが終了するのを待ちます。
最後に、build.gradleに依存関係の行が追加されます。

<code class="hljs bash has-numbering">compile <span class="hljs-string">'com.android.support.constraint :constraint-layout:1.0.0-alpha8'</span></code><ul style="" class="pre-numbering"><li>1& lt;/li></ul>
    

Googleは、開発者がこのレイアウトに慣れるためのCodeLabを以下のアドレスで提供しています。

https://codelabs.developers.google.com/codelabs/constraint-layout/index.html#0

また、2016IOのGoogleでは、以下のアドレスで説明するTopicを提供しています。

https://youtu.be/sO9aX87hq9c

ConstraintLayout制約タイプ

コンストレイントとは、簡単に言うと構成要素間の関係のことで、公式サイトの図を拝借して説明します。

ここに示したのは、左ボタンと右ボタンの直接的な関係です。これは実際には単純な相対レイアウトのアプローチで、以下では具体的な制約の種類を見ていきます。

コントロールをクリックすると、このように表示されます。

ここに含まれる制約には、主にいくつかの種類があります。

• サイズ制約
• バウンダリーコンストレインツ
• ベースライン制約

ひとつひとつ見ていきましょう。

サイズの制約

寸法制約では、このように「正方形の固まり」を使用します。

これはわかりやすいですね、コンポーネントのサイズを変更することです。

境界の制約

に示すように、境界制約は「中空円」を使用します。

境界制約は、最もよく使われる制約で、コンポーネントとコンポーネント、コンポーネントとParent境界の間に制約を設け、実質的に互いの相対的な位置を決定するために使われます。

ベースライン制約

中空の丸みを帯びた四角形」を使ったベースライン制約は以下の通りです。

ベースライン制約とは、テキストプロパティを持つ2つのコンポーネントを整列させるもので、2つのコンポーネントのテキストをベースラインにしたがって整列させることができます。注意点は、コントロールにマウスオーバーして、ベースライン制約のグラフが点灯するのを待ってからドラッグする必要があることくらいです。

制約を解除する

コントロール上のすべての制約は、ツールバーの「Clear Constraints」ボタン、またはここに示すようにコントロール上のホバープロンプトでクリアできます。

これらの制約の使い方をマスターしたら、いよいよ自分で試してみましょう。ここでは、コントロールをドラッグして体験してみます。

コンストレイントの例

ここでは、公式ホームページからデモ用の動画をいくつかコピーしてみました。

オートコネクト

レイアウトデザイナーのメニューバーには、以下のような「マグネット」のようなアイコンがあります。

このボタンはデフォルトでオンになっており、これを使用すると、デモに示すように、コンポーネント制約の作成を自動化することができます。

これは、PPTでレイアウトをドラッグすると、アライメントベースラインがポップアップし、自動的にセンタリングしてくれる機能と似ています。実際には、コンポーネントをドラッグするときに制約を書いてくれるのは簡単ですが、手動で作成する必要がある精密な調整もあります。

制約条件推論推論

レイアウトデザイナーのメニューには、「電球」のようなボタンもあり、コンポーネントの近くにあるコンポーネントを分析し、デザインパネル内の現在の位置に基づいて制約関係を作成することで、コンポーネント間の制約関係を自動的に作成できるようになっています。

制約推論機能は非常に強力で、ある場所にコンポーネントをドラッグするだけで推論を行い、最も基本的な制約作成を行い、最後に手動で絞り込みを行うことができます。

ビューインスペクター

インスペクタインターフェースは、デザインレイアウトの右列で、図のようにレイアウトインスペクタのボックス状のモデルと、属性に対応するプロパティのリストが表示されます。

属性の部分は見ません。XMLで書いた属性と同じですが、ここでは視覚化されていることを除けば、以前にもやったことがあるので、主に上のインターフェイスを見ていきます。

このボックスのIDは、それ以上ではありませんが、このボックスの周りの線は、マージンの設定を表しています。ツールバーでは、マージンのベースも設定でき、MDデザインスタイルでは、通常8dpなので、ここでは、X8マージンを選択できます：。

また、一番外側の枠には数字が書かれた小さな円が2つあり、このように相対的な位置の縮尺をコントロールすることができます。

このスケール設定では、当然ながらパーセンテージのレイアウトで臨みます。

最後に、一番わかりにくいのが、このようにボックスの中に入っている4本の線です。

ここで、クリックすると変化する4行は、全部で次のとおりです。

固定

このような行のタイプでは、特定のサイズの値を書くことができます。

ラップコンテンツ

これがWrap Contentの意味するところであり、変更されていないコンテンツを包むことである。

サイズ

これは最も理解しにくいもので、コンポーネントが制約に合うように利用可能なスペースをすべて占有することを示し、線形レイアウトで width=0 と weight=1 を設定する場合と同様です。

整列

ツールバーの「整列」ツールを使って、次のように、選択したコンポーネントに整列制約をすばやく設定することができます。

デモができる。

パック

ツールバーでは、「パック」ツールを使って、このようにコンポーネントを素早くグループ化することができます。

クイックレイアウト

コンポーネントを右クリックすると、このようにいくつかのレイアウトのショートカットデザインを素早く作成することができます。

ここでは、コンポーネントのセンタリング、アライメントなどを素早く設定することができます。

ガイド線

より柔軟なレイアウトを実現するために、ConstraintLayoutには、以下のようなガイド線も用意されています。

このように、レイアウトに水平・垂直のガイド線を追加し、この線をターゲットにして基準レイアウトとして使用することができます。

ConstraintLayoutレイアウト変換

Android Studioでは、以下の画像のように、レイアウトデザイナーの左カラムにあるComponent Treeを開くと、通常のレイアウトを簡単にConstraintLayoutに変換することができます。

変換は相変わらず凄いですが、複雑なレイアウトはまだ試していないので、問題ないでしょうか。

コードから見たConstraintLayoutプロパティの理解

ConstraintLayoutが拡張RelativeLayoutと呼ばれるのには理由があり、相対レイアウトはコンポーネント間の相対位置を制御するためにlayout_toBottomOfなどのプロパティを提供します、したがってConstraintLayoutは実際には同じです、次のようなプロパティを見てみましょう。

<code class="hljs css has-numbering"><span class="hljs-tag">app</span><span class="hljs- pseudo">:layout_constraintTop_toBottomOf</span></code><ul style="" class="pre-numbering"& gt;<li>1</li></ul>
   

彼は「コンポーネントの上部が指定したコンポーネントの下部に整列することを期待する」の略で、この解釈を理解すると他のプロパティも理解しやすくなるので、ConstraintLayoutはコードでレイアウトすることはもう推奨されていませんが、コードの意味を理解することはConstraintLayoutのレイアウトを理解する上でとても役に立ちます。