1. ホーム
  2. Android

ConstraintLayoutにおけるChainとGuidelineの利用について

2022-02-17 08:07:40
<パス

前項では、ConstraintLayoutの使用方法について説明しました。ConstraintLayoutを使う場合、ASでは問題なく見えても、スマホで実行するとやはり違って見えることがあるので、必ずスマホで実行して結果を確認した方がいいです。
続いて本記事では、ConstraintLayoutの Chain チェーンとも呼ばれ、ConstraintLayoutの補助線である Guideline を使用することで

チェーン

チェーンとは何ですか?簡単に言うと、同じ軸(横または縦)のトップをつないで、一体となって行動できるようにした鎖のことです。

チェーンに入る前に、チェーンがどれほど便利で強力なものか、いくつかのレイアウトを変えて、クリソツに書いてみましょう Tab の各行が Tab が連鎖し、各行が異なる style :

以下は、それを実装したコードです(一部の属性は省略しています)。


見ての通り、5種類のアクションがあり、それぞれの行で最初のコントロールのプロパティを設定し、そしてそれぞれの行で異なる表示をしているので、本題に入りましょう。

チェーンを作成する

次の画像のように、2つのコントロールが双方向にリンクされている場合のチェーンの作成方法について説明します。 A B を2つのチェーンの内側に、さらに A B という2つのコントロールがあり、これをチェーンと呼びます。

次のコードは、2つのボタンをリンクして chain (属性の一部を省略)。


チェーンヘッド

チェーンヘッダーとは何ですか?チェーン内部の最初の要素はヘッダーで、一番左の水平方向と一番上の垂直方向のコントロールです。チェーンヘッダーの役割は、上記のようにチェーン全体のプロパティを制御することです。 A は、チェーンの先頭です。

チェーンにおけるマージン

チェーンヘッダーの上に設定 margin で、チェーン全体がこれに応答します。 margin 例えば、チェーンの左側のヘッダーに android:layout_marginStart="10dp" で、チェーン全体がこれに応答します。 margin は、その

<イグ

チェーンスタイル

次の2つの属性を設定することで、それぞれ水平または垂直の異なるスタイルを持つチェーンを設定することができます。

  • layout_constraintHorizontal_chainStyle
    layout_constraintVertical_chainStyle
    

そして、スタイルには3種類あります。

  • spread (default) -エレメントが広がっている

  • spread_inside -と spread ただし、チェーンの終点が広がっていないこと

  • packed -チェーン内の要素は束ねられます

また、チェーンの内部では、2つの組み合わせがあります。 weight bias :

  • spread + weight -要素のサイズを設定します。 MATCH_CONSTRAINT と一緒に使用することができます。 weight イコールスペース

  • packed + bias - 前述したように bias はバイアスを意味し、ここではチェーンにまとめてバイアスをかけています。

記事の冒頭で、含まれているスタイルを全て書きましたので、分からなければ上で読み直せば良いですし、省略されているコードに関しては、書けば出てくるはずです。

ガイドライン

Guideline は、ConstraintLayoutレイアウトの内部でのみ使用できるツールクラスで、レイアウトを補助するために設定できる補助線のようなものです。 android:orientation 属性で、水平か垂直かを判断します。

  • に設定すると vertical Guideline は、幅が0、高さが parent の高さである。
  • にも設定されています。 horizontal の場合、高さは0、幅は parent は横幅

重要なのは、Guidelineがインターフェイスに表示されないことで、デフォルトは GONE s.

Guideline また、3つの重要な属性があり、それぞれ Guideline は、これらのうち1つだけを指定することができます。

  • layout_constraintGuide_begin 100dpなど一定距離を指定すると、左または上から100dpの位置に補助線が表示される
  • layout_constraintGuide_end 右または下に一定の距離、例えば30dpを指定すると、右または下から30dpのところに補助線が表示されます
  • layout_constraintGuide_percent 親コントロールにおける幅または高さのパーセンテージを指定します。例えば、0.8 のように指定すると、上側または左側から 80% の距離を示します。

これは、栗でもわかる。

layout_constraintGuide_percent