現在選択されているビューに影響を与えるすべての制約は、キャンバス上に色付きの線として表示されます。形状、ストロークの型、および線の色が、制約の現在の状態について多くのことを教えてくれます。行のバッジは、制約関係に関する詳細情報を示しまし、制約の定数の現在の値が期待値と異なることを示しています。
| 線とバッジ | 説明 |
| I-bar | T 字型のエンドキャップバーの線は、空白 (space) のサイズを示します。この空白は、2 つのビュー間の距離か、ビューの高さまたは幅のいずれかです。 |
| プレーンの線 | エンドキャップのない直線は、縁が揃う場所を示します。これらの線は、 それらの間に 0 ポイントの空白があるビューを接続するためにも使用できます。 |
| 実線 | 実線は必要な制約を表します (優先度= 1000)。 |
| 破線 | 破線はオプションの制約を表しています (優先度 < 1000)。 |
| 赤い線 | 赤い線は、制約の影響を受けるビューの 1 つにエラーがあることを示します。ビューのレイアウトがあいまいであるか、そのレイアウトが満足のいくものではありません。 |
| オレンジ色の線 | オレンジ色の線は、この制約の影響を受けるビューの 1 つのフレームが、 現在の制約のセットに基づいた正しい位置にないことを示しています。 |
| 青い線 | 青い線は、制約の影響を受けるビューが明確で満足できるレイアウトであり、ビューのフレームが自動レイアウトエンジンによって計算された正しい位置にあることを示します。 |
| イコール(等しい)バッジ | 等号 (=) 記号を含む青いバッジは、2 つのビューに同じ幅または同じ高さを与える制約を示します。両方のビューの制約にはこのバッジがあります。 |
| 以上のバッジ | > = 記号が付いた小さな青いバッジは、「以上」 の関係を示します。 |
| 以下のバッジ | < = 記号の付いた小さな青いバッジは、「以下」 の関係を示します。 |
| 数字が入ったバッジ | バッジはオレンジと赤の線で表示されます。数値は、キャンバス上の 制約値と期待値との差を示します。 |