Ankoに はさんで はさまれて

第一回 Kansai.kt 発表資料

AnkoとはKotlinのDSLでAndroidのUIを組み立てることができるJetBrains公式のライブラリです。

Transcript

1. "OLPʹ
   ͸͞ΜͰ
   ͸͞·Εͯ גࣜձࣾφνϡϥϧελΠϧ
   ࢁޱஐߦ
2. ࣗݾ঺հ w ࢁޱஐߦ
   
   w גࣜձࣾφνϡϥϧελΠϧॴଐ
3. ࡞͍ͬͯΔ΋ͷ w ϑΝογϣϯίʔσΟωʔτ ΞϓϦʮ8&"3ʯΛ੡࡞
4. w ͔͜͜Βຊ୊
5. "OLP w ,PUMJOͷ%4-Ͱ"OESPJEͷ6*Λ૊ΈཱͯΔϥΠϒϥ Ϧ
   w +FU#SBJOTެࣜ
   w ·ͩόʔδϣϯ
6. "OLPͷϝϦοτ w 9.-Ͱͳ͍͜ͱʹΑΔϝϦοτ
   w 9.-Λύʔε͠ͳ͍͍ͯ͘ͷͰૣ͍
   w pOE7JFX#Z*E͠ͳ͍͍ͯ͘
   w ,PUMJOʹΑΔԸܙ
   w ܕ҆શ
   w /VMM҆શ
   w ػೳ֦ு͕༰қ
   w
   ϥΠϒϥϦʹศརͳؔ਺͕༻ҙ͞Ε͍ͯΔ
7. ͪͳΈʹ1SFWJFXػೳ΋͍͍ͭͯ·͢
8. ͪͳΈʹ1SFWJFXػೳ΋͍͍ͭͯ·͢
   ͍ͭͯ·͚͢Ͳ
9. όʔδϣϯ
   ͩͱ͏·͘ಈ͔ͳ͔ͬͨͷͰ஫ҙɻ
   ͳΒ͏·͘ಈ͖·ͨ͠
10. 9.-Λࣗಈม׵͢Δπʔϧ΋͋Δ
    $PEF
    
    $POWFSU
    UP
    ,PBO
    %4-
11. 9.-Λࣗಈม׵͢Δπʔϧ΋͋Δ
    $PEF
    
    $POWFSU
    UP
    ,PBO
    %4- "OLP͡Όͳͯ͘
    ,PBOʹͳ͍ͬͯΔͷ͸͓͖ͯ͞
12. ෆຬ఺ w %BUB
    #JOEJOHͱҰॹʹ͸࢖͑ͳ͍
    w %FMFHBUFE
    1SPQFSUJFT
    Λ࢖͑͹ࣅͨΑ͏ͳ͜ͱ ͸Ͱ͖Δ͚ΕͲ
    ͪΐͬͱ໘౗
    w 1SFWJFXͰ
    9.-Ͱͷ5PPMTଐੑͷΑ͏ͳ͜ͱ͕Ͱ͖ ͳ͍
    w $POTUSBJOU-BZPVU͸
    Ͳ͏ͳΔ
13. ࢖͍͔ͨ
14. override fun onCreate(savedInstanceState: Bundle?) {
 super.onCreate(savedInstanceState)
 
 verticalLayout {
 val name = editText()
 button("Say Hello") {
 // ボタンを押したらトーストを表示
 onClick { ctx.toast("Hello, ${name.text}!") }
 }
 }
 } "DUJWJUZͷதͰ࡞Δྫ 
15. class MyActivity : AppCompatActivity() {
 override fun onCreate(savedInstanceState: Bundle?, persistentState: PersistableBundle?) {
 super.onCreate(savedInstanceState, persistentState)
 MyActivityUI().setContentView(this)
 }
 }
 
 class MyActivityUI : AnkoComponent<MyActivity> {
 override fun createView(ui: AnkoContext<MyActivity>) = with(ui) {
 verticalLayout {
 val name = editText()
 button("Say Hello") {
 onClick { ctx.toast("Hello, ${name.text}!") }
 }
 }
 }
 } ΫϥεΛ෼͚ͨྫ 
16. class MyActivity : AppCompatActivity() {
 override fun onCreate(savedInstanceState: Bundle?, persistentState: PersistableBundle?) {
 super.onCreate(savedInstanceState, persistentState)
 MyActivityUI().setContentView(this)
 }
 }
 
 class MyActivityUI : AnkoComponent<MyActivity> {
 override fun createView(ui: AnkoContext<MyActivity>) = with(ui) {
 verticalLayout {
 val name = editText()
 button("Say Hello") {
 onClick { ctx.toast("Hello, ${name.text}!") }
 }
 }
 }
 } ΫϥεΛ෼͚ͨྫ  JOUFSGBDF
    "OLP$PNQPOFOU5
    \
    
    
    
    
    GVO
    DSFBUF7JFX VJ
    "OLP$POUFYU5 
    7JFX
    ^
17. class MyActivity : AppCompatActivity() {
 override fun onCreate(savedInstanceState: Bundle?, persistentState: PersistableBundle?) {
 super.onCreate(savedInstanceState, persistentState)
 MyActivityUI().setContentView(this)
 }
 }
 
 class MyActivityUI : AnkoComponent<MyActivity> {
 override fun createView(ui: AnkoContext<MyActivity>) = with(ui) {
 verticalLayout {
 val name = editText()
 button("Say Hello") {
 onClick { ctx.toast("Hello, ${name.text}!") }
 }
 }
 }
 } ΫϥεΛ෼͚ͨྫ 
18. class MyActivity : AppCompatActivity() {
 override fun onCreate(savedInstanceState: Bundle?, persistentState: PersistableBundle?) {
 super.onCreate(savedInstanceState, persistentState)
 MyActivityUI().setContentView(this)
 }
 }
 
 class MyActivityUI : AnkoComponent<MyActivity> {
 override fun createView(ui: AnkoContext<MyActivity>) = with(ui) {
 verticalLayout {
 val name = editText()
 button("Say Hello") {
 onClick { ctx.toast("Hello, ${name.text}!") }
 }
 }
 }
 } ΫϥεΛ෼͚ͨྫ  ΫϥεΛ෼͚ͯ΋1SFWJFX͸ಈ͖·͢
19. 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Ͱ࢖͏ྫ 
20. 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Ͱ࢖͏ྫ 
21. include<View>(R.layout.something) {
 backgroundColor = Color.RED
 } 9.-ΛJODMVEF 
22. // 以下の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-ͷதͰ࢖͏ 
23. // 以下の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-ͷதͰ࢖͏ 
24. // 以下の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-ͷதͰ࢖͏ 
25. 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Ͱ࢖͏ 
26. 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Ͱ࢖͏ 
27. 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Ͱ࢖͏ 
28. 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Ͱ࢖͏ 
29. // 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<SomeOtherActivity>("id" to 5) ศརͳػೳ 
30. // 非同期処理
 
 doAsync {
 // 何か重い処理
 
 // Acitivityがfinishしていたら呼ばれない
 activityUiThreadWithContext {
 result.text = "Done"
 }
 } ศརͳػೳ 
31. 
    *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)
 } ֦ுؔ਺Λ࢖༻͢Δ 
32. 
    *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ͷԸܙΛͦͷ··ड͚ΕΔײ͡Ͱ
    ྑ͍
33. ͓ΘΓʹ w ,PUMJOͷ࿩୊͸੝Γ্͕͍ͬͯΔҹ৅
34. ͓ΘΓʹ w "OLPͷ࿩ͬͯ͋·Γฉ͔ͳ͍
35. ͓ΘΓʹ w 2JJUBͰͷهࣄ਺
    ݅ͱ͔ͩͬͨ͠
36. ͓ΘΓʹ w "OLP΋
    ΋ͬͱ࿩୊ʹͳΔͱ͍͍ͳʂ
37. ͓ΘΓʹ w ͦΜͳΘ͚Ͱ
38. ͓ΘΓʹ w "OLPͷ࿩୊΋
    ͸͞ΜͰ΄͍͠
39. ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠
40. ͕࣌ؒ͋ͬͨΒ΍Δ
41. Ϩγʔό෇͖ؔ਺Ϧςϥϧ ֦ுؔ਺ ΛҾ਺ʹऔΔ
    ֦ுϓϩύςΟ
    ͍͍ͩͨ
    ͜ͷ΁ΜͷػೳͰ࣮ݱ
    Ͳ͏΍͍ͬͯΔͷ͔ 
42. ͘Θ͘͠͸͜ͷ͋ͨΓΛࢀর
    ,PUMJO
    ,PBOTͷ#VJMEFSTͷষ
    ಛʹ)UNM
    CVJMEFSTͷ ෦෼
    %4-ͷྫ
    ,PUMJO
    
    "OESPJE
    "
    #SBTT
    5BDLT
    &YQFSJNFOU
    (PPHMFͷਓ͕ॻ͍ͨهࣄ
    ӳޠ
    Ͳ͏΍͍ͬͯΔͷ͔ 
43. 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<Context> {
 var label : TextView? = null
 
 override fun createView(ui: AnkoContext<Context>) = with(ui) {
 verticalLayout {
 label = textView { text ="List item: " + position }
 }
 }
 }
 -JTU7JFXͰ࢖͏ྫ 
44. 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
    \
    
    লུ
    
    
    
    
    
    
    
    
    
    
    
    ^
    ^ ΫϥεΛ෼͚ͨྫ 
45. 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
    \
    
    লུ
    
    
    
    
    
    
    
    
    
    
    
    ^
    ^ ΫϥεΛ෼͚ͨྫ 
46. 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
    \
    
    লུ
    
    
    
    
    
    
    
    
    
    
    
    ^
    ^ ΫϥεΛ෼͚ͨྫ 
47. 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
    \
    
    লུ
    
    
    
    
    
    
    
    
    
    
    
    ^
    ^ ΫϥεΛ෼͚ͨྫ 
48. 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
    \
    
    লུ
    
    
    
    
    
    
    
    
    
    
    
    ^
    ^ ΫϥεΛ෼͚ͨྫ 
49. class ViewBinder<M>(val function: (M) -> Unit) : ReadWriteProperty<Any, M> {
 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