From 346f6d395ccf1196a289f4314d26aa026a2dbba5 Mon Sep 17 00:00:00 2001 From: "smain@google.com" Date: Wed, 7 Sep 2016 16:28:27 -0700 Subject: add dev guide for constraint layout. originally written and reviewed for Piper: https://critique.corp.google.com/#review/129818554 bug: 28428669 Change-Id: If81f8792d3f7afb89ab75fba5c6994201eea234e --- docs/html/training/_book.yaml | 5 + .../images/alignment-constraint-offset_2x.png | Bin 0 -> 8218 bytes .../images/alignment-constraint_2x.png | Bin 0 -> 7172 bytes .../images/baseline-constraint_2x.png | Bin 0 -> 5136 bytes .../images/constraint-fail-fixed_2x.png | Bin 0 -> 9688 bytes .../images/constraint-fail_2x.png | Bin 0 -> 9419 bytes .../layout-editor-convert-to-constraint_2x.png | Bin 0 -> 21264 bytes .../images/layout-editor-margin-callout_2-2_2x.png | Bin 0 -> 8136 bytes .../layout-editor-properties-callouts_2-2_2x.png | Bin 0 -> 40984 bytes .../images/layout-editor_2-2_2x.png | Bin 0 -> 206243 bytes .../images/parent-constraint_2x.png | Bin 0 -> 5613 bytes .../images/position-constraint_2x.png | Bin 0 -> 7161 bytes .../images/thumbnail-add-layout-guideline_2-2.png | Bin 0 -> 78602 bytes .../images/thumbnail-adjust-constraint-bias.png | Bin 0 -> 308699 bytes .../images/thumbnail-studio-constraint-first.png | Bin 0 -> 61879 bytes .../images/thumbnail-studio-constraint-second.png | Bin 0 -> 65594 bytes docs/html/training/constraint-layout/index.html | 498 +++++++++++++++++++++ 17 files changed, 503 insertions(+) create mode 100644 docs/html/training/constraint-layout/images/alignment-constraint-offset_2x.png create mode 100644 docs/html/training/constraint-layout/images/alignment-constraint_2x.png create mode 100644 docs/html/training/constraint-layout/images/baseline-constraint_2x.png create mode 100644 docs/html/training/constraint-layout/images/constraint-fail-fixed_2x.png create mode 100644 docs/html/training/constraint-layout/images/constraint-fail_2x.png create mode 100644 docs/html/training/constraint-layout/images/layout-editor-convert-to-constraint_2x.png create mode 100644 docs/html/training/constraint-layout/images/layout-editor-margin-callout_2-2_2x.png create mode 100644 docs/html/training/constraint-layout/images/layout-editor-properties-callouts_2-2_2x.png create mode 100644 docs/html/training/constraint-layout/images/layout-editor_2-2_2x.png create mode 100644 docs/html/training/constraint-layout/images/parent-constraint_2x.png create mode 100644 docs/html/training/constraint-layout/images/position-constraint_2x.png create mode 100644 docs/html/training/constraint-layout/images/thumbnail-add-layout-guideline_2-2.png create mode 100644 docs/html/training/constraint-layout/images/thumbnail-adjust-constraint-bias.png create mode 100644 docs/html/training/constraint-layout/images/thumbnail-studio-constraint-first.png create mode 100644 docs/html/training/constraint-layout/images/thumbnail-studio-constraint-second.png create mode 100644 docs/html/training/constraint-layout/index.html diff --git a/docs/html/training/_book.yaml b/docs/html/training/_book.yaml index 891574fbc6ca..ef6b27666c23 100644 --- a/docs/html/training/_book.yaml +++ b/docs/html/training/_book.yaml @@ -898,6 +898,11 @@ toc: value: 順応性のある UI フローの実装 - name: zh-cn-lang value: 实施自适应用户界面流程 + - title: Build a Responsive UI with ConstraintLayout + path: /training/constraint-layout/index.html + path_attributes: + - name: description + value: How to build a layout using ConstraintLayout and the Android Studio Layout Editor. - title: Adding the App Bar path: /training/appbar/index.html path_attributes: diff --git a/docs/html/training/constraint-layout/images/alignment-constraint-offset_2x.png b/docs/html/training/constraint-layout/images/alignment-constraint-offset_2x.png new file mode 100644 index 000000000000..1e4867e6513a Binary files /dev/null and b/docs/html/training/constraint-layout/images/alignment-constraint-offset_2x.png differ diff --git a/docs/html/training/constraint-layout/images/alignment-constraint_2x.png b/docs/html/training/constraint-layout/images/alignment-constraint_2x.png new file mode 100644 index 000000000000..afe7d4aed282 Binary files /dev/null and b/docs/html/training/constraint-layout/images/alignment-constraint_2x.png differ diff --git a/docs/html/training/constraint-layout/images/baseline-constraint_2x.png b/docs/html/training/constraint-layout/images/baseline-constraint_2x.png new file mode 100644 index 000000000000..dfc35226fdb5 Binary files /dev/null and b/docs/html/training/constraint-layout/images/baseline-constraint_2x.png differ diff --git a/docs/html/training/constraint-layout/images/constraint-fail-fixed_2x.png b/docs/html/training/constraint-layout/images/constraint-fail-fixed_2x.png new file mode 100644 index 000000000000..be9d54f4fbf5 Binary files /dev/null and b/docs/html/training/constraint-layout/images/constraint-fail-fixed_2x.png differ diff --git a/docs/html/training/constraint-layout/images/constraint-fail_2x.png b/docs/html/training/constraint-layout/images/constraint-fail_2x.png new file mode 100644 index 000000000000..3f28ef7906ab Binary files /dev/null and b/docs/html/training/constraint-layout/images/constraint-fail_2x.png differ diff --git a/docs/html/training/constraint-layout/images/layout-editor-convert-to-constraint_2x.png b/docs/html/training/constraint-layout/images/layout-editor-convert-to-constraint_2x.png new file mode 100644 index 000000000000..ace31a6105d9 Binary files /dev/null and b/docs/html/training/constraint-layout/images/layout-editor-convert-to-constraint_2x.png differ diff --git a/docs/html/training/constraint-layout/images/layout-editor-margin-callout_2-2_2x.png b/docs/html/training/constraint-layout/images/layout-editor-margin-callout_2-2_2x.png new file mode 100644 index 000000000000..07680227fbb7 Binary files /dev/null and b/docs/html/training/constraint-layout/images/layout-editor-margin-callout_2-2_2x.png differ diff --git a/docs/html/training/constraint-layout/images/layout-editor-properties-callouts_2-2_2x.png b/docs/html/training/constraint-layout/images/layout-editor-properties-callouts_2-2_2x.png new file mode 100644 index 000000000000..b4ffb2cd946a Binary files /dev/null and b/docs/html/training/constraint-layout/images/layout-editor-properties-callouts_2-2_2x.png differ diff --git a/docs/html/training/constraint-layout/images/layout-editor_2-2_2x.png b/docs/html/training/constraint-layout/images/layout-editor_2-2_2x.png new file mode 100644 index 000000000000..72a4e401a05c Binary files /dev/null and b/docs/html/training/constraint-layout/images/layout-editor_2-2_2x.png differ diff --git a/docs/html/training/constraint-layout/images/parent-constraint_2x.png b/docs/html/training/constraint-layout/images/parent-constraint_2x.png new file mode 100644 index 000000000000..0414f1d5b34b Binary files /dev/null and b/docs/html/training/constraint-layout/images/parent-constraint_2x.png differ diff --git a/docs/html/training/constraint-layout/images/position-constraint_2x.png b/docs/html/training/constraint-layout/images/position-constraint_2x.png new file mode 100644 index 000000000000..9f93e72dcd4d Binary files /dev/null and b/docs/html/training/constraint-layout/images/position-constraint_2x.png differ diff --git a/docs/html/training/constraint-layout/images/thumbnail-add-layout-guideline_2-2.png b/docs/html/training/constraint-layout/images/thumbnail-add-layout-guideline_2-2.png new file mode 100644 index 000000000000..f863e5f99bd1 Binary files /dev/null and b/docs/html/training/constraint-layout/images/thumbnail-add-layout-guideline_2-2.png differ diff --git a/docs/html/training/constraint-layout/images/thumbnail-adjust-constraint-bias.png b/docs/html/training/constraint-layout/images/thumbnail-adjust-constraint-bias.png new file mode 100644 index 000000000000..d61e9b2354f1 Binary files /dev/null and b/docs/html/training/constraint-layout/images/thumbnail-adjust-constraint-bias.png differ diff --git a/docs/html/training/constraint-layout/images/thumbnail-studio-constraint-first.png b/docs/html/training/constraint-layout/images/thumbnail-studio-constraint-first.png new file mode 100644 index 000000000000..97471025b007 Binary files /dev/null and b/docs/html/training/constraint-layout/images/thumbnail-studio-constraint-first.png differ diff --git a/docs/html/training/constraint-layout/images/thumbnail-studio-constraint-second.png b/docs/html/training/constraint-layout/images/thumbnail-studio-constraint-second.png new file mode 100644 index 000000000000..940b84955278 Binary files /dev/null and b/docs/html/training/constraint-layout/images/thumbnail-studio-constraint-second.png differ diff --git a/docs/html/training/constraint-layout/index.html b/docs/html/training/constraint-layout/index.html new file mode 100644 index 000000000000..62eaf15f62a7 --- /dev/null +++ b/docs/html/training/constraint-layout/index.html @@ -0,0 +1,498 @@ + + + Build a Responsive UI with ConstraintLayout + + + + + + +
+ +
+ + +

ConstraintLayout allows you to create large and complex layouts with a flat view +hierarchy (no nested view groups). It's similar to RelativeLayout in that all views are +layed out according to relationships between sibling views and the parent layout, but it's more +flexible than RelativeLayout and easier to use with Android Studio's Layout Editor. +

+ +

Everything you can do with ConstraintLayout is available directly from the Layout Editor's visual +tools, because the layout API and the Layout Editor were specially built for each other. So you can +build your layout with ConstraintLayout entirely by drag-and-dropping instead of editing the XML. +

+ + +

Figure 1. A ConstraintLayout in the Layout Editor

+ + +

+ConstraintLayout is available in an API library that's compatible with Android +2.3 (API level 9) and higher, and the new layout editor is available in Android +Studio 2.2 and higher. +

+ +

+This page provides a guide to building a layout with ConstraintLayout in Android +Studio. If you'd like more information about the Layout Editor itself, see the +Android Studio guide to Build a UI with +Layout Editor. +

+ + +

Constraints overview

+

+To define a view's position in ConstraintLayout, you must add two +or more constraints for the view. Each constraint represents a connection or +alignment to another view, the parent layout, or an invisible guideline. Each +constraint defines the view's position along either the +vertical or horizontal axis; so each view must have a minimum of one constraint for each +axis, but often more are necessary. +

+ +

+When you drop a view into the Layout Editor, it stays where you leave it even if +it has no constraints. However, this is only to make editing easier; if a view has +no constraints when you run your layout on a device, it is drawn at +position [0,0] (the top-left corner).

+ +

In figure 2, the layout looks good in the +editor, but there's no vertical constraint on TextView B. When this +layout draws on a device, TextView B horizontally aligns with the left and +right edges of the ImageView, but appears at the top of the screen because +it has no vertical constraint. +

+ +
+
+ +

Figure 2. TextView B is missing a +vertical constraint

+
+
+ +

Figure 3. TextView B is now vertically +constrained to the ImageView

+
+
+ +

+Although a missing constraint won't cause a compilation error, the Layout Editor +indicates missing constraints as an error in the toolbar. To view the errors and +other warnings, click Show Warnings and Errors +. +To help you avoid missing constraints, the Layout Editor can automatically add +constraints for you with the Autoconnect and infer +constraints features. +

+ + +

Add ConstraintLayout to your project

+

+To use ConstraintLayout in your project, proceed as follows: +

+ +
    +
  1. Ensure you have the latest Constraint Layout library: +
      +
    1. Click Tools > Android > SDK Manager. +
    2. Click the SDK Tools tab. +
    3. Expand Support Repository and then check +ConstraintLayout for Android and Solver for ConstraintLayout. +Check Show Package Details and take note of the version you're downloading +(you'll need this below).

      +
    4. Click OK. +
    5. Add the ConstraintLayout library as a dependency in your module-level + build.gradle file: +
      +dependencies {
+    compile 'com.android.support.constraint:constraint-layout:1.0.0-alpha8'
+}
+
      +

      The library version you download may be higher, so be sure the value you specify + here matches the version from step 3.

      +
      6. +
    6. In the toolbar or sync notification, click Sync Project with Gradle +Files.
      7. +
    +
    2. +
+ +

Now you're ready to build your layout with ConstraintLayout.

+ +

Convert a layout

+ +
+ +

+ Figure 4. The menu to convert a layout to ConstraintLayout

+
+ +

To convert an existing layout to a constraint layout, follow these steps:

+
    +
  1. Open your layout in Android Studio and click the Design tab +at the bottom of the editor window. +
  2. In the Component Tree window, right-click the layout and +click Convert layout to ConstraintLayout.
    3. +
+ +

Create a new layout

+ +

To start a new constraint layout file, follow these steps:

+
    +
  1. Click anywhere in the Project window and then select +File > New > XML > Layout XML. +
  2. Enter a name for the layout file and enter +"android.support.constraint.ConstraintLayout" for the Root Tag. +
  3. Click Finish.
    4. +
+ + +

Add a constraint

+ +

Start by dragging a view from the Palette window into the editor. +When you add a view in a ConstraintLayout, it displays a bounding box with square +resizing handles on each corner and circular constraint handles on each side. +

+ + +
+
+ +
+

+Video 1. The left side of a view is constrained to the left side of the parent +

+
+ +

+Click the view to select it. Then click-and-hold one of the +constraint handles and drag the line to an available anchor point (the edge of +another view, the edge of the layout, or a guideline). When you release, the +constraint is made, with a default margin +separating the two views. +

+ +

When creating constraints, remember the following rules:

+ + + + + +
+
+ +
+

+Video 2. Adding a constraint that opposes an existing one +

+
+ + + +

+To remove a constraint, select the view and then click the constraint handle. +

+ +

If you add opposing constraints on a view, the constraint lines become squiggly +like a spring to indicate the opposing forces, as shown in video 2. The effect +is most visible when the view size is set to "fixed" or "wrap content," in which +case the view is centered between the constraints. If you instead +want the view to stretch its size to meet the constraints, switch the size to "any size"; or if you want +to keep the current size but move the view so that it is not centered, adjust the constraint bias. +

+ + + +

+There are many ways to constrain a view, but the following constraint types +provide the basic building blocks. +

+ + + + +

Parent constraint

+
+
+

+ Connect the side of a view to the corresponding edge of the layout. +

+ In figure 5, the left side of a view is connected to the left edge of the + parent layout. +

+

+
+ +

Figure 5. A horizontal constraint to the parent

+
+
+ + +

Position constraint

+
+
+

Define the order of appearance for two views, either vertically or horizontally.

+

In figure 6, a Button is constrained below an ImageView with a 24dp +margin.

+
+
+ +

Figure 6. A vertical position constraint

+
+
+ + + +

Alignment constraint

+
+
+

Align the edge of a view to the same edge of another view.

+

In figure 7, the left side of a Button is aligned to the left side of an +ImageView.

+

You can offset the alignment by dragging the view +inward from the constraint. For example, figure 8 shows the same +Button with a 24dp offset alignment. +The offset is defined by the constrained view's margin.

+
+
+ +

Figure 7. A horizontal alignment constraint

+
+
+ +

Figure 8. An offset horizontal alignment constraint

+
+
+ + +

Baseline alignment constraint

+
+
+

Align the text baseline of a view to the text baseline of another view.

+

In figure 9, the first line of a TextView is aligned with the text in a +Button.

+

To create a baseline constraint, hover your mouse over the baseline handle for +two seconds until the handle blinks white. Then click and drag the line to +another baseline.

+
+
+ +

Figure 9. A baseline alignment constraint

+
+
+ + + + + +

Constrain to a guideline

+
+
+ +

+You can add a vertical or horizontal guideline to which you can attach +constraints. You can position the guideline within the layout based on either dp +units or percent, relative to the layout's edge. +

+ +

+To create a guideline, click Guidelines + +in the toolbar, and then click either Add Vertical Guideline +or Add Horizontal Guideline. +

+ +

+Click the circle at the edge of the guideline to toggle the measurements used to +position the guideline (either percent or dp units from the layout's edge). +

+ +

+Guidelines are not visible to your users. +

+
+ +
+
+ +
+

Video 3. Adding a constraint to a guideline

+
+
+ + +

Use Autoconnect and Infer Constraints

+ +
+
+ +
+

Video 4. Adding a view with Autoconnect enabled

+
+ +

+Autoconnect is a persistent mode that automatically creates two or more +constraints for each view you add to the layout. Autoconnect is disabled by +default. You can enable it by clicking Turn on Autoconnect + +in the Layout Editor toolbar. +

+ +

While enabled, Autoconnect creates constraints for each view as you add them; it does not create +constraints for existing views in the layout. If you drag a view once the constraints are made, the +constraints do not change (though the margins do), so you must delete the constraints if you want to +significantly reposition the view.

+ +

Alternatively, you can click Infer Constraints + +to create constraints for all views in the layout. +

+ +

Infer Constraints is a one-time action that scans the entire layout to determine the most +effective set of constraints for all views, so it may create constraints between elements that are +far from each other. Autoconnect, however, creates constraints only for the view you are adding, and +it creates constraints to only the nearest elements. In either case, you can always modify a +constraint by clicking the constraint handle to delete it, and then create a new constraint.

+ + +

Adjust the view size

+ +

+You can use the handles on each corner of the view to resize it, but doing so +hard codes the width and height values, which you should avoid for most views +because hard-coded view sizes cannot adapt to different content and screen +sizes. To select from one of the dynamic sizing modes or to define more specific +dimensions, click a view and open the Properties + +window on the right side of the editor. At the top of the window is the view +inspector, as shown in figure 10. +

+
+ +

Figure 10. The Properties window includes controls for +(1) view size, (2) margins, and +(3) constraint bias.

+
+ +

+The grey square represents the selected view. The symbols inside the square +represent the height and width settings as follows: +

+ + + +

To toggle between these settings, click the symbols.

+ +

Note: You should not use match_parent for any view +in a ConstraintLayout. Instead use "Any Size" (0dp). +

+ + +

Adjust the constraint bias

+ +

When you add a constraint to both sides of a view (and the view size for the same dimension is +either "fixed" or "wrap content"), the view becomes centered between the two anchor points by +default. When a view is centered, the bias is 50%. You can adjust the bias by dragging the bias +slider in the Properties window or by dragging the view, as shown in video 5.

+ +
+ +
+

Video 5. Adjusting the constraint bias

+ +

If you instead want the view to stretch its size to meet the constraints, switch the size to "any size".

+ + +

Adjust the view margins

+ +

To ensure that all your views are evenly spaced, click Margin in the toolbar +to select the default margin for each view that you add to the layout. The button changes to show +your current margin selection. Any change you make to the default margin applies only to the views +you add from then on.

+ + + +

Figure 11. The toolbar's Margin button. +Click to adjust the default margin. +

+ +

You can control the margin for each view in the Properties window by clicking +the number on the line that represents each constraint (in figure 10, the margins are each set to +16dp).

+ +

All margins offered by the tool are factors of 8dp to help your views align to Material Design's +8dp square grid +recommendations.

+ + + -- cgit v1.2.3-59-g8ed1b