Android Studio 3.0 ハンズオン : LayoutEditor & ConstraintLayout

Slide 1

Slide 1 text

"OESPJE4UVEJP عٝؤؔٝ ֮׿ְׂײֹ!%FW'FTU5PLZP -BZPVU&EJUPS$POTUSBJOU-BZPVU

Slide 2

Slide 2 text

HPPHM%C,I-:

Slide 3

Slide 3 text

˖ CMPH:".ך꧟鎸䌘 ˖ ZBO[NCMPHTQPUDPN ˖ UXJUUFS!ZBO[Nװ׿ׂ׬ ˖ V1IZDB*OD 吳䒭⠓爡ؐؿ؍ؕ ˖ (56((JSMTHUVHHJSMTKQ ˖ ESPJEHJSMTIUUQTESPJEHJSMTDPOOQBTTDPN ͋Μ͍͟Ώ͖

Slide 4

Slide 4 text

-BZPVU&EJUPS$POTUSBJOU-BZPVU ד 5XJUUFSך״ֲז6*׾ꥡ㾴ד⡲׷

Slide 5

Slide 5 text

倜׃ְفٗآؙؑز׾ ⡲׷

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

$POTUSBJOU-BZPVU

Slide 11

Slide 11 text

$POTUSBJOU-BZPVU ˖ "OESPJE4VQQPSU-JCSBSZך♧א ˖ 7JFX(SPVQ ˖ 3FMBUJWF-BZPVU׾넝堣腉ח׃׋䠬ׄ ˖ ⵖ秈$POTUSBJOUדꂁ縧㜥䨽׾寸׭׷

Slide 12

Slide 12 text

ⵖ秈׾䭷㹀ׅ׷ ˖ 㶨ؽُ٦חⵖ秈׾䭷㹀 ˖ ⵖ秈ח״׶ꂁ縧㜥䨽ָ寸ת׷ app:layout_constraintXXXXXXX

Slide 13

Slide 13 text

NBUDI DPOTUSBJOU ˖ $POTUSBJOU-BZPVUך㶨ؽُ٦דכNBUDI@QBSFOU כ⢪׻זְ ˖ EQNBUDIDPOTUSBJOU ˖ ⵖ秈׾弫׋ׅ朐䡾ד剑׮䎢ָ׷

Slide 14

Slide 14 text

CVJMEHSBEMF ך鏣㹀 implementation 'com.android.support.constraint:constraint-layout:1.0.2' compile 'com.android.support.constraint:constraint-layout:1.0.2' HSBEMFY⟃꣬ HSBEMFY⟃⵸

Slide 15

Slide 15 text

BQQCVJMEHSBEMF

Slide 16

Slide 16 text

BDUJWJUZ@NBJOYNM׾Ꟛֻ

Slide 17

Slide 17 text

ػٖحز 1BMFUUF

Slide 18

Slide 18 text

سٓحؚسٗحف

Slide 19

Slide 19 text

㾩䚍 "UUSJCVUFT

Slide 20

Slide 20 text

%FTJHO4VSGBDFך㢌刿 %FTJHO#MVFQSJOU

Slide 21

Slide 21 text

%FTJHO4VSGBDFך㢌刿 %FTJHO

Slide 22

Slide 22 text

%FTJHO4VSGBDFך㢌刿 #MVFQSJOU

Slide 23

Slide 23 text

%FGBVMU.BSHJOT ⵖ秈׾אֽ׋הֹח荈⹛ד鏣㹀ׁ׸׷و٦آٝ

Slide 24

Slide 24 text

5XJUUFSך״ֲז6* ׾ꥡ㾴ד⡲׷

Slide 25

Slide 25 text

5FYU7JFX׾⵴ꤐׅ׷ 鼅䫛׃גEFMFUF

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

*NBHF7JFX׾鷄⸇ׅ׷ 鼅䫛 سٓحؚسٗحف

Slide 28

Slide 28 text

鼅䫛 ؙٔحؙ

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

عٝسٕ 筮سٓحؚ׃ג$POTUSBJOU׾鏣㹀饔ؙٔحؙ׃ג$POTUSBJOU׾鍑ꤐ

Slide 31

Slide 31 text

%FGBVMU.BSHJOT׾חׅ׷ ؙٔحؙ ؙٔحؙ

Slide 32

Slide 32 text

*NBHF7JFX׾䊩♳חꂁ縧ׅ׷ ♳ךعٝسٕ׾سٓحؚ׃ג♳畭 דꨄׅ 䊩ךعٝسٕ׾سٓحؚ׃ג䊩畭 דꨄׅ

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

5FYU7JFX׾鷄⸇ׅ׷ 鼅䫛 سٓحؚسٗحف

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

5FYU7JFX׾*NBHF7JFXך〸חꂁ縧ׅ׷ ♳ךعٝسٕ׾سٓحؚ׃ג *NBHF7JFXך♳ךعٝسٕ דꨄׅ 䊩ךعٝسٕ׾سٓحؚ׃ג *NHBF7JFXך〸ךعٝسٕ דꨄׅ

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

5FYU7JFXךو٦آٝ׾㢌刿ׅ׷ ؙٔحؙ ؙٔحؙ

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

5FYU"QQFBSBODF׾㢌刿ׅ׷ ؙٔحؙ ؙٔحؙ

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

فٖؽُ٦欽ך俑㶵⴨׾㢌刿ׅ׷ ؙٔحؙ ؙٔحؙ

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

劤俑欽ך5FYU7JFX׾鷄⸇ׅ׷

Slide 45

Slide 45 text

劤俑欽ך5FYU7JFX׾ꂁ縧ׅ׷ ♳ךعٝسٕ ̔せ⵸欽ך5FYU7JFXך♴畭䊩ךعٝسٕ ̔せ⵸欽ך5FYU7JFXך䊩畭〸ךعٝسٕ ̔$POTUSBJOU-BZPVUך〸畭

Slide 46

Slide 46 text

No content

Slide 47

Slide 47 text

XJEUI׾NBUDIDPOTUSBJOUחׅ׷ ؙٔحؙ

Slide 48

Slide 48 text

8SBQ$POUFOU XSBQ@DPOUFOU 'JYFE 99EQ .BUDI$POTUSBJOUT EQ

Slide 49

Slide 49 text

No content

Slide 50

Slide 50 text

䊩ךو٦آٝ׾EQחׅ׷

Slide 51

Slide 51 text

7FDUPS%SBXBCMF׾鷄⸇ׅ׷ 鼅䫛 'JMF/FX7FDUPS"TTFU׾ؙٔحؙ

Slide 52

Slide 52 text

ؙٔحؙ

Slide 53

Slide 53 text

Ⰵ⸂ 鼅䫛 ؙٔحؙ

Slide 54

Slide 54 text

ؙٔحؙ

Slide 55

Slide 55 text

ؙٔحؙ

Slide 56

Slide 56 text

GBWPSJUF TIBSF TFUUJOHT ׾鷄⸇

Slide 57

Slide 57 text

*NBHF7JFX⦐ 5FYU7JFX⦐׾鷄⸇ׅ׷ 埆♧⴨ח⚛ץ׷

Slide 58

Slide 58 text

DIBJOחׅ׷ ؙٔحؙ Ⰻ鼅䫛ׅ׷

Slide 59

Slide 59 text

No content

Slide 60

Slide 60 text

⦐ך5FYU7JFXך䌴׾NBUDIDPOTUSBJOUחׅ׷

Slide 61

Slide 61 text

%FGBVMU.BSHJOT׾חׅ׷

Slide 62

Slide 62 text

DIBJOך䊩〸畭׾劤俑ח֮׻ׇ׷

Slide 63

Slide 63 text

♳♴׾GBWPSJUFח֮׻ׇ׷

Slide 64

Slide 64 text

GBWPSJUFך♳畭׾劤俑ך♴畭חאז־׷

Slide 65

Slide 65 text

儗꟦欽ך5FYU7JFX׾ꂁ縧ׅ׷ ؙٔحؙ CBTFMJOF欽ךعٝسٕ

Slide 66

Slide 66 text

CBTFMJOF׾せ⵸חさ׻ׇ׷

Slide 67

Slide 67 text

JE欽ך5FYU7JFX׾ꂁ縧ׅ׷ CBTFMJOF׾せ⵸חさ׻ׇ׷䊩〸׾せ⵸ה儗꟦חאז־׷

Slide 68

Slide 68 text

؟؎ؤװ⡭涯זו锃侭 ׃ג㸣䧭ׇׁ״ֲ

Slide 69

Slide 69 text

ֶתֽ

Slide 70

Slide 70 text

涫㜥➂暟 $POTUSBJOU-BZPVU $POTUSBJOU-BZPVUך㶨ؽُ٦ד ⡘縧׾寸׭״ֲה׃גְ׷׮ך $POTUSBJOU-BZPVUך➭ך㶨ؽُ٦ !JEBODIPS

Slide 71

Slide 71 text

♳畭׾ $POTUSBJOU-BZPVU ח䲧ִ׷ app:layout_constraintTop_toTopOf="parent" )FMMP

Slide 72

Slide 72 text

♴畭׾ $POTUSBJOU-BZPVU ח䲧ִ׷ app:layout_constraintBottom_toBottomOf="parent" )FMMP

Slide 73

Slide 73 text

䊩畭׾ $POTUSBJOU-BZPVU ח䲧ִ׷ app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintStart_toStartOf="parent" )FMMP

Slide 74

Slide 74 text

〸畭׾ $POTUSBJOU-BZPVU ח䲧ִ׷ app:layout_constraintRight_toRightOf="parent" app:layout_constraintEnd_toEndOf="parent" )FMMP

Slide 75

Slide 75 text

♳♴׾ $POTUSBJOU-BZPVU ך⚥㣛ח䲧ִ׷ app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toBottomOf="parent" )FMMP

Slide 76

Slide 76 text

♳♴ך嫰཰׾䭷㹀ׅ׷ app:layout_constraintVertical_bias="0.3" app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toBottomOf="parent" )FMMP

Slide 77

Slide 77 text

䊩〸׾ $POTUSBJOU-BZPVU ך⚥㣛ח䲧ִ׷ app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" )FMMP

Slide 78

Slide 78 text

䊩〸ך嫰཰׾䭷㹀ׅ׷ app:layout_constraintHorizontal_bias="0.3" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" )FMMP

Slide 79

Slide 79 text

$POTUSBJOU-BZPVU ך⚥㣛ח䲧ִ׷ app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" )FMMP

Slide 80

Slide 80 text

♳♴׾ $POTUSBJOU-BZPVU ְ׏םְח䎢־׷ android:layout_height="0dp" app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toBottomOf="parent" EQNBUDIDPOTUSBJOU )FMMP

Slide 81

Slide 81 text

䊩〸׾ $POTUSBJOU-BZPVU ְ׏םְח䎢־׷ android:layout_width="0dp" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" )FMMP EQNBUDIDPOTUSBJOU

Slide 82

Slide 82 text

$POTUSBJOU-BZPVU ְ׏םְח䎢־׷ android:layout_width="0dp" android:layout_height="0dp" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" )FMMP

Slide 83

Slide 83 text

NBUDI DPOTUSBJOU ךהֹך NBYJNVN TJ[F android:layout_width="0dp" android:layout_height="0dp" … app:layout_constraintWidth_max="300dp"  app:layout_constraintHeight_max="100dp" EQ EQ )FMMP

Slide 84

Slide 84 text

NBUDI DPOTUSBJOU ךהֹ XSBQ@DPOUFOU ך״ֲחׅ׷ android:layout_width="0dp" android:layout_height="0dp" … app:layout_constraintWidth_default="wrap"  app:layout_constraintHeight_default="wrap" )FMMP

Slide 85

Slide 85 text

NBUDI DPOTUSBJOU XSBQ ךהֹך NJOJNVN TJ[F android:layout_width="0dp" android:layout_height="0dp" … app:layout_constraintWidth_min="100dp"  app:layout_constraintHeight_min="100dp" EQ EQ )FMMP

Slide 86

Slide 86 text

♳畭׾➭ך 7JFX ך♳畭ח䲧ִ׷ app:layout_constraintTop_toTopOf="@id/anchor"

Slide 87

Slide 87 text

♳畭׾➭ך 7JFX ך♴畭ח䲧ִ׷ app:layout_constraintTop_toBottomOf="@id/anchor"

Slide 88

Slide 88 text

♴畭׾➭ך 7JFX ך♴畭ח䲧ִ׷ app:layout_constraintBottom_toBottomOf="@id/anchor"

Slide 89

Slide 89 text

♴畭׾➭ך 7JFX ך♳畭ח䲧ִ׷ app:layout_constraintBottom_toTopOf="@id/anchor"

Slide 90

Slide 90 text

CBTFMJOF ׾➭ך 7JFX ך CBTFMJOF ח䲧ִ׷ app:layout_constraintBaseline_toBaselineOf="@id/anchor" " "

Slide 91

Slide 91 text

䊩畭׾➭ך 7JFX ך䊩畭ח䲧ִ׷ app:layout_constraintLeft_toLeftOf="@id/anchor" or app:layout_constraintStart_toStartOf="@id/anchor"

Slide 92

Slide 92 text

䊩畭׾➭ך 7JFX ך〸畭ח䲧ִ׷ app:layout_constraintLeft_toRightOf="@id/anchor" or app:layout_constraintStart_toEndOf="@id/anchor"

Slide 93

Slide 93 text

〸畭׾➭ך 7JFX ך〸畭ח䲧ִ׷ app:layout_constraintRight_toRightOf="@id/anchor" or app:layout_constraintEnd_toEndOf="@id/anchor"

Slide 94

Slide 94 text

〸畭׾➭ך 7JFX ך䊩畭ח䲧ִ׷ app:layout_constraintRight_toLeftOf="@id/anchor" or app:layout_constraintEnd_toStartOf="@id/anchor"

Slide 95

Slide 95 text

♳♴׾➭ך 7JFX ך⚥㣛ח䲧ִ׷ app:layout_constraintTop_toTopOf="@id/anchor" app:layout_constraintBottom_toBottomOf="@id/anchor"

Slide 96

Slide 96 text

䊩〸׾➭ך 7JFX ך⚥㣛ח䲧ִ׷ app:layout_constraintLeft_toLeftOf="@id/anchor" app:layout_constraintRight_toRightOf="@id/anchor" or app:layout_constraintStart_toStartOf="@id/anchor" app:layout_constraintEnd_toEndOf="@id/anchor"

Slide 97

Slide 97 text

7JFX ך㣐ֹׁ׾嫰཰ד䭷㹀ׅ׷ android:layout_width="0dp" android:layout_height="0dp" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintDimensionRatio="h,2:1" or app:layout_constraintDimensionRatio="w,1:2"

Slide 98

Slide 98 text

(VJEFMJOF

Slide 99

Slide 99 text

HVJEFMJOF app:layout_constraintGuide_begin="20dp" app:layout_constraintGuide_end="20dp"

Slide 100

Slide 100 text

HVJEFMJOF חさ׻ׇגꂁ縧ׅ׷ android:layout_width="0dp" app:layout_constraintLeft_toRightOf="@id/guideline1" app:layout_constraintRight_toLeftOf="@id/guideline2" !JEHVJEFMJOF !JEHVJEFMJOF

Slide 101

Slide 101 text

HPOF NBSHJO

Slide 102

Slide 102 text

HPOF.BSHJO )FMMP )FMMP )FMMP android:layout_marginLeft="16dp"  app:layout_constraintLeft_toRightOf="@id/anchor"  app:layout_goneMarginLeft="0dp" BODIPSךWJTJCJMJUZHPOF ⵖ秈⯓ך7JFXךWJTJCJMJUZָHPOFהֹח⢪׻׸׷ NBHJO⦼ BODIPSךWJTJCJMJUZWJTJCMF EQ

Slide 103

Slide 103 text

$IBJO

Slide 104

Slide 104 text

DIBJO )FMMP )FMMP )FMMP ✼ְחⵖ秈׃֮׏גְ׷ app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toLeftOf="@+id/view2" WJFX app:layout_constraintLeft_toRightOf="@+id/view1" app:layout_constraintRight_toLeftOf="@+id/view3" WJFX app:layout_constraintLeft_toRightOf="@+id/view2" app:layout_constraintRight_toRightOf="parent" WJFX !JEWJFX !JEWJFX !JEWJFX

Slide 105

Slide 105 text

DIBJO4UZMF )FMMP )FMMP )FMMP app:layout_constraintHorizontal_chainStyle="spread" )FMMP )FMMP )FMMP app:layout_constraintHorizontal_chainStyle="packed" )FMMP )FMMP )FMMP app:layout_constraintHorizontal_chainStyle="spread_inside" WJFXח䭷㹀ׅ׷

Slide 106

Slide 106 text

DIBJO TQSFBE NBUDI DPOTUSBJOU )FMMP )FMMP )FMMP android:layout_width="0dp" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toLeftOf="@+id/view2" app:layout_constraintHorizontal_chainStyle="spread" WJFX android:layout_width="0dp" app:layout_constraintLeft_toRightOf="@+id/view1" app:layout_constraintRight_toLeftOf="@+id/view3" WJFX android:layout_width="0dp" app:layout_constraintLeft_toRightOf="@+id/view2" app:layout_constraintRight_toRightOf="parent" WJFX

Slide 107

Slide 107 text

DIBJO TQSFBE NBUDI DPOTUSBJOU XFJHIU )FMMP )FMMP )FMMP android:layout_width="0dp" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toLeftOf="@+id/view2" app:layout_constraintHorizontal_chainStyle="spread" app:layout_constraintHorizontal_weight="2" WJFX android:layout_width="0dp" app:layout_constraintLeft_toRightOf="@+id/view1" app:layout_constraintRight_toLeftOf="@+id/view3" app:layout_constraintHorizontal_weight="1" WJFX android:layout_width="0dp" app:layout_constraintLeft_toRightOf="@+id/view2" app:layout_constraintRight_toRightOf="parent" app:layout_constraintHorizontal_weight="1" WJFX

Slide 108

Slide 108 text

DIBJO QBDLFE CJBT app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toLeftOf="@+id/view2" app:layout_constraintHorizontal_chainStyle="packed" app:layout_constraintHorizontal_bias="0.3" WJFX app:layout_constraintLeft_toRightOf="@+id/view1" app:layout_constraintRight_toLeftOf="@+id/view3" WJFX app:layout_constraintLeft_toRightOf="@+id/view2" app:layout_constraintRight_toRightOf="parent" WJFX )FMMP )FMMP )FMMP