Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Androidアプリのあれがやりたい
高木翔一@fly1tkg
Android 名古屋 つくる部
2013.9.14 LT
あれをつくりたい
(;^o^)Google謹製のアプリのUIレベルたけえ
( ˘⊖˘)。o(名前とかよくわからないけどググろう)
|Google| ┗(☋` )┓三
( ◠‿◠ )☛関係ない情報をくれてやる
▂▅▇█▓▒░(’ω’)░▒▓█▇▅...
今回紹介するあれたち
•  Navigation Drawer
•  Swipe to dismiss
•  Swipe to dismiss with undo
•  Card UIの出現アニメーション
Navigation Drawer
The origin: http://developer.android.com/design/patterns/navigation-drawer.html	
“あれ”その1 横から出てくるメニュー (e....
Navigation Drawer
•  名前さえ分かっていればGoogle謹製のサ
ンプルコードが手に入る!
•  http://developer.android.com/training/
implementing-navigation/...
実演
•  com.example.android_google_app_like.naviga
3on_drawer.Naviga3onDrawerAc3vity
Swipe to Dismiss
The	
  origin:	
  h=ps://github.com/romannurik/android-­‐swipetodismiss	
“あれ”その2: リストでスワイプすると消すやつ (e.g. G...
Swipe to Dismiss
•  名前さえ分かればサンプルがある
•  https://github.com/romannurik/android-
swipetodismiss"
•  Animatorとか使っているのでAPI
Leve...
実演
	
  
	
  
•  com.example.android_google_app_like.swipe
_to_dismiss.SwipeToDismissAc3vity	
  
Swipe to dismiss with undo
“あれ”その3: Swipe to dismissでさらに取り消せる! (e.g. Gmail)
The origin: https://www.timroes.de/2013/06/15/...
Swipe to dismiss with undo
•  名前さえ分かればサンプルがある
•  https://github.com/timroes/
SwipeToDismissUndoList"
•  Animatorとか(ry Nine...
実演
	
  
	
  
•  com.example.android_google_app_like.swipe
_to_dismiss.SwipeToDismissWithUndoAc3vity
Card UIの出現アニメーション
“あれ”その4: 新しいCardが出現するときにおしゃれアニメーションがつく
Card UIの出現アニメーション
•  AdapterのgetViewの時にアニメーショ
ンを挟めばおk
	
  
cf. http://techbooster.org/android/application/
16196/"
	
  
実演
•  com.example.android_google_app_like.card_
ui.CardUiAc3vity
まとめ	
  	
•  おしゃれUIたちは名前が分かればググれ
る
•  UIパターンとかの最新の情報にアンテナ
を貼って、正しい名前を知ってしまえば
こっちのもん
今回のソース
•  今回の実演ソースは以下のURLにありま
す
•  使い方はそれぞれの元ソース読んでね
•  https://github.com/fly1tkg/android-google-
app-like
最後に
•  僕も名古屋(日本)を離れてしまう可能性があ
ります。つ部に参加できるのは最後かも
•  勉強会なんてムダなんて悲しいエントリー
ちょくちょく見かけるけど、僕はコミュニ
ティーで成長できた一人 (経済学部出身だし)
•  これからも...
Glory be to the Tsubu!	
ご清聴ありがとうございました!
Upcoming SlideShare
Loading in …5
×

Androidアプリのあれがやりたい

12,182 views

Published on

Published in: Technology
  • Be the first to comment

Androidアプリのあれがやりたい

  1. 1. Androidアプリのあれがやりたい 高木翔一@fly1tkg Android 名古屋 つくる部 2013.9.14 LT
  2. 2. あれをつくりたい (;^o^)Google謹製のアプリのUIレベルたけえ ( ˘⊖˘)。o(名前とかよくわからないけどググろう) |Google| ┗(☋` )┓三 ( ◠‿◠ )☛関係ない情報をくれてやる ▂▅▇█▓▒░(’ω’)░▒▓█▇▅▂うわああああああ     名前がわからないとつくれない!
  3. 3. 今回紹介するあれたち •  Navigation Drawer •  Swipe to dismiss •  Swipe to dismiss with undo •  Card UIの出現アニメーション
  4. 4. Navigation Drawer The origin: http://developer.android.com/design/patterns/navigation-drawer.html “あれ”その1 横から出てくるメニュー (e.g. Google+ Gmail etc)
  5. 5. Navigation Drawer •  名前さえ分かっていればGoogle謹製のサ ンプルコードが手に入る! •  http://developer.android.com/training/ implementing-navigation/nav-drawer.html" •  AppcompatのActionBarを使えばAPI Level 7まではおk
  6. 6. 実演 •  com.example.android_google_app_like.naviga 3on_drawer.Naviga3onDrawerAc3vity
  7. 7. Swipe to Dismiss The  origin:  h=ps://github.com/romannurik/android-­‐swipetodismiss “あれ”その2: リストでスワイプすると消すやつ (e.g. Gmail)
  8. 8. Swipe to Dismiss •  名前さえ分かればサンプルがある •  https://github.com/romannurik/android- swipetodismiss" •  Animatorとか使っているのでAPI Level7-8あたりまで対応するなら NineOldAndroidsで対応する •  http://nineoldandroids.com/
  9. 9. 実演     •  com.example.android_google_app_like.swipe _to_dismiss.SwipeToDismissAc3vity  
  10. 10. Swipe to dismiss with undo “あれ”その3: Swipe to dismissでさらに取り消せる! (e.g. Gmail) The origin: https://www.timroes.de/2013/06/15/swipetodismiss-undo/
  11. 11. Swipe to dismiss with undo •  名前さえ分かればサンプルがある •  https://github.com/timroes/ SwipeToDismissUndoList" •  Animatorとか(ry NineOldAndroidsで対 応する •  http://nineoldandroids.com/
  12. 12. 実演     •  com.example.android_google_app_like.swipe _to_dismiss.SwipeToDismissWithUndoAc3vity
  13. 13. Card UIの出現アニメーション “あれ”その4: 新しいCardが出現するときにおしゃれアニメーションがつく
  14. 14. Card UIの出現アニメーション •  AdapterのgetViewの時にアニメーショ ンを挟めばおk   cf. http://techbooster.org/android/application/ 16196/"  
  15. 15. 実演 •  com.example.android_google_app_like.card_ ui.CardUiAc3vity
  16. 16. まとめ   •  おしゃれUIたちは名前が分かればググれ る •  UIパターンとかの最新の情報にアンテナ を貼って、正しい名前を知ってしまえば こっちのもん
  17. 17. 今回のソース •  今回の実演ソースは以下のURLにありま す •  使い方はそれぞれの元ソース読んでね •  https://github.com/fly1tkg/android-google- app-like
  18. 18. 最後に •  僕も名古屋(日本)を離れてしまう可能性があ ります。つ部に参加できるのは最後かも •  勉強会なんてムダなんて悲しいエントリー ちょくちょく見かけるけど、僕はコミュニ ティーで成長できた一人 (経済学部出身だし) •  これからも”つ部”が続いてくれるといいな あ
  19. 19. Glory be to the Tsubu! ご清聴ありがとうございました!

×