"OLPʹ
͸͞ΜͰ
͸͞·Εͯ גࣜձࣾφνϡϥϧελΠϧ
ࢁޱஐߦ 

ࣗݾ঺հ w ࢁޱஐߦ

w גࣜձࣾφνϡϥϧελΠϧॴଐ 

࡞͍ͬͯΔ΋ͷ w ϑΝογϣϯίʔσΟωʔτ ΞϓϦʮ8&"3ʯΛ੡࡞ 

w ͔͜͜Βຊ୊ 

"OLP w ,PUMJOͷ%4-Ͱ"OESPJEͷ6*Λ૊ΈཱͯΔϥΠϒϥ Ϧ
w +FU#SBJOTެࣜ
w ·ͩόʔδϣϯ 

"OLPͷϝϦοτ w 9.-Ͱͳ͍͜ͱʹΑΔϝϦοτ
w 9.-Λύʔε͠ͳ͍͍ͯ͘ͷͰૣ͍
w pOE7JFX#Z*E͠ͳ͍͍ͯ͘
w ,PUMJOʹΑΔԸܙ
w ܕ҆શ
w /VMM҆શ
w ػೳ֦ு͕༰қ
w
ϥΠϒϥϦʹศརͳؔ਺͕༻ҙ͞Ε͍ͯΔ 

ͪͳΈʹ1SFWJFXػೳ΋͍͍ͭͯ·͢ 

ͪͳΈʹ1SFWJFXػೳ΋͍͍ͭͯ·͢
͍ͭͯ·͚͢Ͳ 

όʔδϣϯ
ͩͱ͏·͘ಈ͔ͳ͔ͬͨͷͰ஫ҙɻ
ͳΒ͏·͘ಈ͖·ͨ͠ 

9.-Λࣗಈม׵͢Δπʔϧ΋͋Δ
$PEF

$POWFSU
UP
,PBO
%4- 

9.-Λࣗಈม׵͢Δπʔϧ΋͋Δ
$PEF

$POWFSU
UP
,PBO
%4- "OLP͡Όͳͯ͘
,PBOʹͳ͍ͬͯΔͷ͸͓͖ͯ͞ 

ෆຬ఺ w %BUB
#JOEJOHͱҰॹʹ͸࢖͑ͳ͍
w %FMFHBUFE
1SPQFSUJFT
Λ࢖͑͹ࣅͨΑ͏ͳ͜ͱ ͸Ͱ͖Δ͚ΕͲ
ͪΐͬͱ໘౗
w 1SFWJFXͰ
9.-Ͱͷ5PPMTଐੑͷΑ͏ͳ͜ͱ͕Ͱ͖ ͳ͍
w $POTUSBJOU-BZPVU͸
Ͳ͏ͳΔ 

࢖͍͔ͨ 

override fun onCreate(savedInstanceState: Bundle?) {
 super.onCreate(savedInstanceState)
 
 verticalLayout {
 val name = editText()
 button("Say Hello") {
 // ボタンを押したらトーストを表示
 onClick { ctx.toast("Hello, ${name.text}!") }
 }
 }
 } "DUJWJUZͷதͰ࡞Δྫ  

class MyActivity : AppCompatActivity() {
 override fun onCreate(savedInstanceState: Bundle?, persistentState: PersistableBundle?) {
 super.onCreate(savedInstanceState, persistentState)
 MyActivityUI().setContentView(this)
 }
 }
 
 class MyActivityUI : AnkoComponent {
 override fun createView(ui: AnkoContext) = with(ui) {
 verticalLayout {
 val name = editText()
 button("Say Hello") {
 onClick { ctx.toast("Hello, ${name.text}!") }
 }
 }
 }
 } ΫϥεΛ෼͚ͨྫ  

class MyActivity : AppCompatActivity() {
 override fun onCreate(savedInstanceState: Bundle?, persistentState: PersistableBundle?) {
 super.onCreate(savedInstanceState, persistentState)
 MyActivityUI().setContentView(this)
 }
 }
 
 class MyActivityUI : AnkoComponent {
 override fun createView(ui: AnkoContext) = with(ui) {
 verticalLayout {
 val name = editText()
 button("Say Hello") {
 onClick { ctx.toast("Hello, ${name.text}!") }
 }
 }
 }
 } ΫϥεΛ෼͚ͨྫ  JOUFSGBDF
"OLP$PNQPOFOU5
\




GVO
DSFBUF7JFX VJ
"OLP$POUFYU5 
7JFX
^ 

class MyActivity : AppCompatActivity() {
 override fun onCreate(savedInstanceState: Bundle?, persistentState: PersistableBundle?) {
 super.onCreate(savedInstanceState, persistentState)
 MyActivityUI().setContentView(this)
 }
 }
 
 class MyActivityUI : AnkoComponent {
 override fun createView(ui: AnkoContext) = with(ui) {
 verticalLayout {
 val name = editText()
 button("Say Hello") {
 onClick { ctx.toast("Hello, ${name.text}!") }
 }
 }
 }
 } ΫϥεΛ෼͚ͨྫ  

class MyActivity : AppCompatActivity() {
 override fun onCreate(savedInstanceState: Bundle?, persistentState: PersistableBundle?) {
 super.onCreate(savedInstanceState, persistentState)
 MyActivityUI().setContentView(this)
 }
 }
 
 class MyActivityUI : AnkoComponent {
 override fun createView(ui: AnkoContext) = with(ui) {
 verticalLayout {
 val name = editText()
 button("Say Hello") {
 onClick { ctx.toast("Hello, ${name.text}!") }
 }
 }
 }
 } ΫϥεΛ෼͚ͨྫ  ΫϥεΛ෼͚ͯ΋1SFWJFX͸ಈ͖·͢ 

override fun onCreateView(inflater: LayoutInflater?, container: ViewGroup?, savedInstanceState: Bundle?): View? {
 return UI {
 verticalLayout {
 val name = editText { }
 button("Say Hello") {
 onClick { ctx.toast("Hello, ${name.text}!") }
 }
 }
 }.view
 } 'SBHNFOUͰ࢖͏ྫ  

override fun onCreateView(inflater: LayoutInflater?, container: ViewGroup?, savedInstanceState: Bundle?): View? {
 return UI {
 verticalLayout {
 val name = editText { }
 button("Say Hello") {
 onClick { ctx.toast("Hello, ${name.text}!") }
 }
 }
 }.view
 } 
6*
\
^WJFXͰ
͸͞Ή 'SBHNFOUͰ࢖͏ྫ  

include(R.layout.something) {
 backgroundColor = Color.RED
 } 9.-ΛJODMVEF  

// 以下の2行を追加 (カスタムビューの中などで良い)
 // ViewManagerの拡張関数
 
 inline fun ViewManager.customView(theme: Int = 0) = customView(theme) {}
 inline fun ViewManager.customView(theme: Int = 0, init: CustomView.() -> Unit) = ankoView({ CustomView(it) }, theme, init) ΧελϜϏϡʔΛ"OLP
%4-ͷதͰ࢖͏  

// 以下の2行を追加 (カスタムビューの中などで良い)
 // ViewManagerの拡張関数
 
 inline fun ViewManager.customView(theme: Int = 0) = customView(theme) {}
 inline fun ViewManager.customView(theme: Int = 0, init: CustomView.() -> Unit) = ankoView({ CustomView(it) }, theme, init) // これでカスタムビューをAnkoに はさめる frameLayout {
 customView {
 
 }
 } ΧελϜϏϡʔΛ"OLP
%4-ͷதͰ࢖͏  

// 以下の2行を追加 (カスタムビューの中などで良い)
 // ViewManagerの拡張関数
 
 inline fun ViewManager.customView(theme: Int = 0) = customView(theme) {}
 inline fun ViewManager.customView(theme: Int = 0, init: CustomView.() -> Unit) = ankoView({ CustomView(it) }, theme, init) // これでカスタムビューをAnkoに はさめる // カスタムビューの中にも Ankoを はさめる frameLayout {
 customView {
 text = textView("Anko CustomView")
 }
 } ΧελϜϏϡʔΛ"OLP
%4-ͷதͰ࢖͏  

relativeLayout {
 // 一意のidを生成 ids.xmlに指定しても良い
 var main_activity_text: Int = View.generateViewId()
 
 textView = textView {
 id = main_activity_text
 }
 
 textView {
 text = "Bottom of R.id.main_activity_text"
 lparams {
 bottomOf(main_activity_text)
 }
 }
 } *%Λࢦఆͯ͠
3FMBUJWF-BZPVUͰ࢖͏  

relativeLayout {
 // 一意のidを生成 ids.xmlに指定しても良い
 var main_activity_text: Int = View.generateViewId()
 
 textView = textView {
 id = main_activity_text
 }
 
 textView {
 text = "Bottom of R.id.main_activity_text"
 lparams {
 bottomOf(main_activity_text)
 }
 }
 } *%Λࢦఆͯ͠
3FMBUJWF-BZPVUͰ࢖͏  

relativeLayout {
 // 一意のidを生成 ids.xmlに指定しても良い
 var main_activity_text: Int = View.generateViewId()
 
 textView = textView {
 id = main_activity_text
 }
 
 textView {
 text = "Bottom of R.id.main_activity_text"
 lparams {
 bottomOf(main_activity_text)
 }
 }
 } *%Λࢦఆͯ͠
3FMBUJWF-BZPVUͰ࢖͏  

relativeLayout {
 // 一意のidを生成 ids.xmlに指定しても良い
 var main_activity_text: Int = View.generateViewId()
 
 textView = textView {
 id = main_activity_text
 }
 
 textView {
 text = "Bottom of R.id.main_activity_text"
 lparams {
 bottomOf(main_activity_text)
 }
 }
 } *%Λࢦఆͯ͠
3FMBUJWF-BZPVUͰ࢖͏  

// Toast
 toast(R.string.message)
 
 // アラートダイアログ
 alert("Hi, I'm Roy", "Have you tried turning it off and on again?") {
 yesButton { toast("Oh…") }
 noButton {}
 }.show()
 
 // Activityの呼び出し
 startActivity("id" to 5) ศརͳػೳ  

// 非同期処理
 
 doAsync {
 // 何か重い処理
 
 // Acitivityがfinishしていたら呼ばれない
 activityUiThreadWithContext {
 result.text = "Done"
 }
 } ศརͳػೳ  


*NBHF7JFXͷ֦ுؔ਺
fun ImageView.loadImage(imageUrl: String, error: Int) {
 Picasso.with(context).load(imageUrl).error(error).into(this)
 }
 // Picassoを使ってイメージを読み込み
 imageView = imageView {
 loadImage("画像のURL", R.drawable.error)
 } ֦ுؔ਺Λ࢖༻͢Δ  


*NBHF7JFXͷ֦ுؔ਺
fun ImageView.loadImage(imageUrl: String, error: Int) {
 Picasso.with(context).load(imageUrl).error(error).into(this)
 }
 // Picassoを使ってイメージを読み込み
 imageView = imageView {
 loadImage("画像のURL", R.drawable.error)
 } ֦ுؔ਺Λ࢖༻͢Δ  ,PUMJOͷԸܙΛͦͷ··ड͚ΕΔײ͡Ͱ
ྑ͍ 

͓ΘΓʹ w ,PUMJOͷ࿩୊͸੝Γ্͕͍ͬͯΔҹ৅ 

͓ΘΓʹ w "OLPͷ࿩ͬͯ͋·Γฉ͔ͳ͍ 

͓ΘΓʹ w 2JJUBͰͷهࣄ਺
݅ͱ͔ͩͬͨ͠ 

͓ΘΓʹ w "OLP΋
΋ͬͱ࿩୊ʹͳΔͱ͍͍ͳʂ 

͓ΘΓʹ w ͦΜͳΘ͚Ͱ 

͓ΘΓʹ w "OLPͷ࿩୊΋
͸͞ΜͰ΄͍͠ 

͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ 

͕࣌ؒ͋ͬͨΒ΍Δ 

Ϩγʔό෇͖ؔ਺Ϧςϥϧ ֦ுؔ਺ ΛҾ਺ʹऔΔ
֦ுϓϩύςΟ
͍͍ͩͨ
͜ͷ΁ΜͷػೳͰ࣮ݱ
Ͳ͏΍͍ͬͯΔͷ͔  

͘Θ͘͠͸͜ͷ͋ͨΓΛࢀর
,PUMJO
,PBOTͷ#VJMEFSTͷষ
ಛʹ)UNM
CVJMEFSTͷ ෦෼
%4-ͷྫ
,PUMJO

"OESPJE
"
#SBTT
5BDLT
&YQFSJNFOU
(PPHMFͷਓ͕ॻ͍ͨهࣄ
ӳޠ
Ͳ͏΍͍ͬͯΔͷ͔  

class MyListViewAdapter(var context:Context) : BaseAdapter() {
 
 override fun getView(position:Int, convertView: View?, parent: ViewGroup?):View? {
 var newConvertView:View?
 
 if (convertView == null) {
 var ui = MyListItemUI(getItem(position), position)
 newConvertView = ui.createView(context.UI { })
 newConvertView.tag = ui
 }else {
 newConvertView = convertView
 var ui = newConvertView.tag as MyListItemUI
 ui.label?.text = "List item: " + position
 newConvertView.tag = ui
 }
 return newConvertView
 }
 }
 
 class MyListItemUI(var user:User?,var position:Int) : AnkoComponent {
 var label : TextView? = null
 
 override fun createView(ui: AnkoContext) = with(ui) {
 verticalLayout {
 label = textView { text ="List item: " + position }
 }
 }
 }
 -JTU7JFXͰ࢖͏ྫ  

DMBTT
.Z"DUJWJUZ

"QQ$PNQBU"DUJWJUZ
\

MB[ZΛ࢖ͬͨ΄͏͕͍͍͔΋




WBM
VJ
.BJO"DUJWJUZ6J
CZ
MB[Z
\








.BJO"DUJWJUZ6J




^




PWFSSJEF
GVO
PO$SFBUF TBWFE*OTUBODF4UBUF
#VOEMF
QFSTJTUFOU4UBUF
1FSTJTUBCMF#VOEMF
\
TVQFSPO$SFBUF TBWFE*OTUBODF4UBUF
QFSTJTUFOU4UBUF
VJTFU$POUFOU7JFX UIJT
VJUFYU7JFX UFYU

l"1*͔Βͱ͖ͬͯͨ஋ͱ͔z




^
^
DMBTT
.Z"DUJWJUZ6*

"OLP$PNQPOFOU.Z"DUJWJUZ
\
WBS
UFYU7JFX
5FYU7JFX

OVMM
PWFSSJEF
GVO
DSFBUF7JFX VJ
"OLP$POUFYU.Z"DUJWJUZ

XJUI VJ
\

লུ











^
^ ΫϥεΛ෼͚ͨྫ  

DMBTT
.Z"DUJWJUZ

"QQ$PNQBU"DUJWJUZ
\

MB[ZΛ࢖ͬͨ΄͏͕͍͍͔΋




WBM
VJ
.BJO"DUJWJUZ6J
CZ
MB[Z
\








.BJO"DUJWJUZ6J




^




PWFSSJEF
GVO
PO$SFBUF TBWFE*OTUBODF4UBUF
#VOEMF
QFSTJTUFOU4UBUF
1FSTJTUBCMF#VOEMF
\
TVQFSPO$SFBUF TBWFE*OTUBODF4UBUF
QFSTJTUFOU4UBUF
VJTFU$POUFOU7JFX UIJT
VJUFYU7JFX UFYU

l"1*͔Βͱ͖ͬͯͨ஋ͱ͔z




^
^
DMBTT
.Z"DUJWJUZ6*

"OLP$PNQPOFOU.Z"DUJWJUZ
\
WBS
UFYU7JFX
5FYU7JFX

OVMM
PWFSSJEF
GVO
DSFBUF7JFX VJ
"OLP$POUFYU.Z"DUJWJUZ

XJUI VJ
\

লུ











^
^ ΫϥεΛ෼͚ͨྫ  

DMBTT
.Z"DUJWJUZ

"QQ$PNQBU"DUJWJUZ
\

MB[ZΛ࢖ͬͨ΄͏͕͍͍͔΋




WBM
VJ
.BJO"DUJWJUZ6J
CZ
MB[Z
\








.BJO"DUJWJUZ6J




^




PWFSSJEF
GVO
PO$SFBUF TBWFE*OTUBODF4UBUF
#VOEMF
QFSTJTUFOU4UBUF
1FSTJTUBCMF#VOEMF
\
TVQFSPO$SFBUF TBWFE*OTUBODF4UBUF
QFSTJTUFOU4UBUF
VJTFU$POUFOU7JFX UIJT
VJUFYU7JFX UFYU

l"1*͔Βͱ͖ͬͯͨ஋ͱ͔z




^
^
DMBTT
.Z"DUJWJUZ6*

"OLP$PNQPOFOU.Z"DUJWJUZ
\
WBS
UFYU7JFX
5FYU7JFX

OVMM
PWFSSJEF
GVO
DSFBUF7JFX VJ
"OLP$POUFYU.Z"DUJWJUZ

XJUI VJ
\

লུ











^
^ ΫϥεΛ෼͚ͨྫ  

DMBTT
.Z"DUJWJUZ

"QQ$PNQBU"DUJWJUZ
\

MB[ZΛ࢖ͬͨ΄͏͕͍͍͔΋




WBM
VJ
.BJO"DUJWJUZ6J
CZ
MB[Z
\








.BJO"DUJWJUZ6J




^




PWFSSJEF
GVO
PO$SFBUF TBWFE*OTUBODF4UBUF
#VOEMF
QFSTJTUFOU4UBUF
1FSTJTUBCMF#VOEMF
\
TVQFSPO$SFBUF TBWFE*OTUBODF4UBUF
QFSTJTUFOU4UBUF
VJTFU$POUFOU7JFX UIJT
VJUFYU7JFX UFYU

l"1*͔Βͱ͖ͬͯͨ஋ͱ͔z




^
^
DMBTT
.Z"DUJWJUZ6*

"OLP$PNQPOFOU.Z"DUJWJUZ
\
WBS
UFYU7JFX
5FYU7JFX

OVMM
PWFSSJEF
GVO
DSFBUF7JFX VJ
"OLP$POUFYU.Z"DUJWJUZ

XJUI VJ
\

লུ











^
^ ΫϥεΛ෼͚ͨྫ  

DMBTT
.Z"DUJWJUZ

"QQ$PNQBU"DUJWJUZ
\

MB[ZΛ࢖ͬͨ΄͏͕͍͍͔΋




WBM
VJ
.BJO"DUJWJUZ6J
CZ
MB[Z
\








.BJO"DUJWJUZ6J




^




PWFSSJEF
GVO
PO$SFBUF TBWFE*OTUBODF4UBUF
#VOEMF
QFSTJTUFOU4UBUF
1FSTJTUBCMF#VOEMF
\
TVQFSPO$SFBUF TBWFE*OTUBODF4UBUF
QFSTJTUFOU4UBUF
VJTFU$POUFOU7JFX UIJT
VJUFYU7JFX UFYU

l"1*͔Βͱ͖ͬͯͨ஋ͱ͔z




^
^
DMBTT
.Z"DUJWJUZ6*

"OLP$PNQPOFOU.Z"DUJWJUZ
\
WBS
UFYU7JFX
5FYU7JFX

OVMM

ຊ౰͸͜͜ͰOVMMΛೖΕͨ͘ͳ͍ʜʜ
Կ͔͍͍ํ๏͸
PWFSSJEF
GVO
DSFBUF7JFX VJ
"OLP$POUFYU.Z"DUJWJUZ

XJUI VJ
\

লུ











^
^ ΫϥεΛ෼͚ͨྫ  

class ViewBinder(val function: (M) -> Unit) : ReadWriteProperty {
 private var mValue: M? = null
 
 override fun getValue(thisRef: Any, property: KProperty<*>): M = mValue as M
 
 override fun setValue(thisRef: Any, property: KProperty<*>, value: M) {
 mValue = value
 function(value)
 }
 } /////////////////////////////////////// var user: User? by ViewBinder {
 // userのセッターが呼ばれた時にこの関数が呼ばれる
 // このときActivityがクローズされていたら?
 // activityUiThreadWithContextの中で呼ぶこと
 
 when (it) {
 null -> {
 
 }
 else -> {
 ui.textView?.apply {
 text = it?.name
 }
 }
 }
 } 7JFX
#JOEFS