Building interfaces with ConstraintLayout in Android Studio Android Developers Japanese English

Building interfaces with ConstraintLayout in Android StudioYouTube↗ IA↗(long shot)
Science & Technology 278.9K views 1.5K likes 50 dislikes 20 Dec 2016

Android Developers 1.4M subscribers N/A YouTube↗

Click to Play Video

Android Studio 2.2では

ビジュアルレイアウトエディタが大幅に改善され

SPEAKER: In Android Studio 2.2, we've greatly improved the Visual Layout

ConstraintLayoutのビルトインサポートがあります

Editor, including built-in support for ConstraintLayout.

ConstraintLayoutには柔軟な制約システムがあり

ConstraintLayout is a great new way to define complex layouts without the need

ビューのネスト構造をなくし複雑なレイアウトを定義できます

for nested view hierarchies, thanks to a flexible constraint

サポートリポジトリから利用可能で

system. It's available in the Support Repository,

APIレベル9までの後方互換性があります

and works all the way down to API level 9.

Android Studioにインストールするには [SDK Manager]を開き

To install it in Android Studio, open the SDK manager

[ConstraintLayout for Android]と [Solver for ConstraintLayout]の両方を

and select both the ConstraintLayout for Android and Solver for ConstraintLayout

[SDK Tools]タブから選択します

from the SDK Tools tab.

プロジェクトで使用する際は

To use it in your project, add the dependency

dependenciesを追加し Gradleをビルドしてください

and build a gradle.

ConstraintLayoutで新たにレイアウトファイルを作り

Now, create a new layout file with the ConstraintLayout

ルートビューとします

as the root view.

Android Studio 2.2では

Notice that, in Android Studio 2.2,

Layout Editorに新機能が追加されました

the Layout Editor gained a few new features,

例えばBlueprintモードでは

such as the Blueprint mode, which

必要に応じてデザインビューを横に表示できます

you can use alongside the Design view if you wish.

画面の右側には新しいView Inspectorがあり

On the right side of the screen, you can see the redesigned View Inspector.

一般的に使われるビュープロパティと全体リストを切り替えられます

Here, you can switch between the commonly-used View properties, and the full list.

Inspectorには ConstraintLayout特有の

The Inspector also includes ConstraintLayout-specific

レイアウトアトリビュートエディタがあるので今からお見せします

layout attribute editors, which I'll show you in a moment.

まずイメージビューを選択し

First, let's start by dragging an image view from the palette

パレットからブループリントへドラッグします

onto the blueprint.

ConstraintLayout上のすべてのビューには

You can see that every view in a ConstraintLayout

上下左右の４辺にそれぞれハンドルがあります

has four handles on the sides-- top, right, bottom, and left.

テキストビューに由来するビューには

Views that inherit from Text view

ベースラインのハンドルもあります

also have a baseline handle.

それぞれのビューを関連させるには

To position views relative to each other,

ハンドルの１つを選択し同タイプの別ハンドルへとドラッグします

you can click and drag from one handle to another of the same type.

このようにテキストビューを配置し

Here, I'm placing a Text view in the layout

イメージビューの右側に揃えることによって

and aligning it to the right of the Image view

左ハンドルの制約を設定しました

by creating a constraint from the left handle.

縦方向を揃えて上側の制約も設定しました

I'm also aligning these views vertically by adding a top constraint.

ビューが近すぎるときは

The views are still a bit too close together,

デザインプレビューの制約ビューをドラッグして

so you can adjust the margin by dragging the Constraint

余白を適用したり右の[Properties]ウィンドウを使うこともできます

view in Design Preview, or I can use the Properties window

良くなりましたね

最後に残っているのは

That looks better.

親コンテナーにビューを配置することです

The only thing that remains is positioning our views inside the parent container.

ツールバーの[制約設定を表示する] ボタンをオンにすることで

By enabling the Show Constraint Settings in the toolbar,

レイアウトの外辺に対する制約が設定されていないことが分かります

I can see that there are currently no constraints pointing to the outer edges of the layout.

実行時には２つのビューはゼロ位置へと移動してしまうでしょう

My two views would simply get moved to position zero at runtime.

上と左のハンドルを親の外辺につなぐことで

By connecting the top and left handles to the parent edges,

コンテナーの中でのビューの位置を指定できます

I can specify how I want to position the views in the container.

画面の左や右にくっつけずに

What if I want to center a view instead

中央にビューを置きたいときはどうすればいいでしょうか

of gluing it to the left or right side of the screen?

新しいテキストビューを作り横方向中央に置いてみましょう

I'll create a new Text view, and center it horizontally

そのためには両サイドを親辺につなぎます

within the layout by connecting both sides to the parent.

するとビューは制約によって両方向に引っ張られます

You can see the view now has constraints pulling it

ConstraintLayoutは両方の制約を一度に満たすことができないので

both ways. Because ConstraintLayout can't satisfy both constraints

ビューは中央に留まることになります

at the same time, the view remains centered.

[Properties]ウィンドウを見てください

If you now look at the Properties window,

このスライダーは横のバイアスと呼ばれます

you can see a slider called Horizontal Bias.

スライダーを使って%値を変更すると

By changing the percent value using the slider,

制約のウェイトを変更することができ

I can influence the strength or weight

左右の微調整ができます

of each constraint, which results in moving the view slightly to the left or right.

横幅や高さを適切なものに変更するには

You can also change the desired width and height of a view

３つのモードを使用できます [Wrap Content] [Fixed Size] [Match Constraint]です

by cycling through three modes-- Wrap Content, Fixed Size, and Match Constraint.

ConstraintLayoutでは [Match Parent]を使用せず

You shouldn't be using Match Parent in ConstraintLayout,

[Match Constraints]を代わりに使ってください

and use Match Constraints instead,

ビューが制約を満たしつつも

which basically means that the view can grow up

可能な限り大きくできることを意味するからです

to the available space while still satisfying its constraints.

制約を削除するには

To remove a constraint, click on one

[Properties]ウィンドウのボックスの１辺をクリックするか

of the sides of the box shown in the Properties window,

デザインビューのハンドルをクリックしてください

or click on a handle in the Design view.

ある１つのビューの制約をすべて削除したいときは

You can also delete all constraints on a single view

ここをクリックするかツールバーのボタンを使ってレイアウトとすべての制約を削除してください

by clicking here, or remove all constraints and the layout using the button in the toolbar.

私たちはエディタの充実やパフォーマンスの向上を絶えず行っています

We're continuously improving both runtime performance as well as editor capabilities, so always make sure

ですから常にアップデートして SDK Managerやビルドファイルで最新のバージョンにしてください

that you update to the newest version in the SDK Manager and your build files.

コードラボや「Medium」の記事もチェックして

And check out our code lab and article

ConstraintLayoutの高度な使用例を見てみてください

on "Medium" for more advanced ConstraintLayout examples. [MUSIC PLAYING]

ご視聴ありがとうございます

Thanks for watching.

もしAndroid StudioやAndroid開発にさらに興味がありましたらこちらの動画をクリックしてみてください

And if you want to learn more about Android Studio and Android development, click on one of the videos here. [MUSIC PLAYING]

Similar videos:

Layout Editor (Ep 3, Android Studio)
Google for Developers
53.6K views 293 likes 9 dislikes 25 Mar 201563% match

APK Analyzer: An Android Tool Time Deep Dive
Android Developers
102.5K views 417 likes 33 dislikes 30 Nov 201758% match

Android Studio 3.0 Canary 1
Android Developers
121.5K views 2K likes 32 dislikes 17 May 201748% match

What's New in Android Studio 2.2
Android Developers
99.5K views 1.3K likes 22 dislikes 19 Sep 201647% match

What’s New in Android Studio 2.0
Android Developers
140.3K views 1.2K likes 28 dislikes 05 Feb 201642% match

What’s new in Android Studio 2.3 - Android Tool Time
Android Developers
78.2K views 918 likes 26 dislikes 02 Mar 201741% match

Getting started with Kotlin
Android Developers
236.8K views 1.8K likes 44 dislikes 18 May 201740% match

App Links Assistant in Android Studio 2.3 - Android Tool Time
Android Developers
96.7K views 624 likes 42 dislikes 02 Mar 201740% match

Android Studio: (About) 10 Things You (Probably) Didn’t Know You Could Do
Android Developers
86.3K views 1.1K likes 58 dislikes 14 Apr 201639% match

Create UI tests with Espresso Test Recorder
Android Developers
63.7K views 613 likes 6 dislikes 02 Mar 201738% match

UI testing with Espresso - Android Testing Patterns #2
Android Developers
76.6K views 692 likes 11 dislikes 25 May 201638% match

Android Studio support for VectorDrawable
Android Developers
70.9K views 450 likes 20 dislikes 30 Sep 201537% match

Android Testing Support - Android Testing Patterns #1
Android Developers
51.8K views 545 likes 6 dislikes 25 May 201637% match

Android Studio for Experts (Android Dev Summit 2015)
Android Developers
75.2K views 775 likes 33 dislikes 24 Nov 201536% match

Android Studio 2.0 Preview: Instant Run
Android Developers
107.3K views 187 likes 19 dislikes 23 Nov 201535% match

What's New in Android 7.1
Android Developers
80.4K views 912 likes 29 dislikes 08 Nov 201635% match

What's New in Android O for Developers
Android Developers
125.9K views 1.4K likes 124 dislikes 27 Mar 201732% match

Android Studio 3.0: Android Profiler
Android Developers
59.2K views 408 likes 17 dislikes 25 Oct 201732% match

Migrating to Android Gradle Plugin 3.0.0
Android Developers
113.1K views 562 likes 76 dislikes 25 Oct 201732% match

Android Application Architecture (Android Dev Summit 2015)
Android Developers
137.6K views 1.3K likes 125 dislikes 23 Nov 201531% match

Android Design in Action: Navigation Anti-Patterns
Android Developers
69.2K views 442 likes 14 dislikes 18 Feb 201431% match

Instant Run: An Android Tool Time Deep Dive
Android Developers
67K views 414 likes 10 dislikes 05 May 201630% match

Android and Android Studio: Getting Started
Android Developers
844.1K views 4.6K likes 408 dislikes 27 Oct 201530% match

Notification Updates in Android Oreo
Android Developers
89.1K views 676 likes 89 dislikes 07 Sep 201730% match

DevBytes - Android Wear: Developer Preview
Android Developers
79.3K views 447 likes 17 dislikes 18 Mar 201429% match

What's New in Android Studio 3.0
Android Developers
123.1K views 1.8K likes 23 dislikes 25 Oct 201728% match

Life of a Certification Student
Android Developers
104.7K views 3.3K likes 62 dislikes 16 Aug 201728% match

Using NotificationCompat for Beautiful Notifications (Android Development Patterns Ep 2)
Android Developers
76.2K views 771 likes 30 dislikes 01 Oct 201528% match

Building a Responsive UI in Android (Android Development Patterns)
Android Developers
83.3K views 824 likes 37 dislikes 10 May 201628% match

DevByte - Sliding Tabs
Android Developers
84.6K views 730 likes 21 dislikes 31 Mar 201428% match

Settings Privacy About Contact Donate