Top Banner
Lesson 5. Rich and Responsive Layouts 도우미 이찬형
38

Lesson5. Rich and Responsive Layouts

Aug 07, 2015

Download

Software

Chanhyeong Lee
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Lesson5. Rich and Responsive Layouts

Lesson����������� ������������������  5.����������� ������������������  Rich����������� ������������������  and����������� ������������������  Responsive����������� ������������������  Layouts

도우미����������� ������������������  이찬형

Page 2: Lesson5. Rich and Responsive Layouts

Intro����������� ������������������  to����������� ������������������  Lesson����������� ������������������  5

•Store����������� ������������������  the����������� ������������������  data����������� ������������������  

•display����������� ������������������  the����������� ������������������  data����������� ������������������  

•We’re����������� ������������������  ready����������� ������������������  to����������� ������������������  build����������� ������������������  rich����������� ������������������  UI

Page 3: Lesson5. Rich and Responsive Layouts

Android����������� ������������������  Design����������� ������������������  Principles(1)

•Users����������� ������������������  judge����������� ������������������  the����������� ������������������  quality����������� ������������������  of����������� ������������������  your����������� ������������������  app����������� ������������������  within����������� ������������������  the����������� ������������������  first����������� ������������������  30����������� ������������������  seconds����������� ������������������  

•judgement����������� ������������������  will����������� ������������������  be����������� ������������������  based����������� ������������������  not����������� ������������������  on����������� ������������������  the����������� ������������������  functionality,����������� ������������������  but����������� ������������������  on����������� ������������������  the����������� ������������������  visual����������� ������������������  aesthetics

Page 4: Lesson5. Rich and Responsive Layouts

Android����������� ������������������  Design����������� ������������������  Principles(2)•look����������� ������������������  polished����������� ������������������  

•look����������� ������������������  professional����������� ������������������  

•easy����������� ������������������  to����������� ������������������  use����������� ������������������  

•fun����������� ������������������  to����������� ������������������  use����������� ������������������  

•short����������� ������������������  and����������� ������������������  frictionless����������� ������������������  

•let����������� ������������������  users����������� ������������������  touch����������� ������������������  and����������� ������������������  interact����������� ������������������  with����������� ������������������  objects����������� ������������������  

•rich����������� ������������������  imagery����������� ������������������  and����������� ������������������  pictures����������� ������������������  

•provide����������� ������������������  simple����������� ������������������  shortcuts����������� ������������������  to����������� ������������������  complete����������� ������������������  complex����������� ������������������  tasks

Page 5: Lesson5. Rich and Responsive Layouts

Enjoyable����������� ������������������  Apps

•What����������� ������������������  makes����������� ������������������  your����������� ������������������  favorite����������� ������������������  apps����������� ������������������  enjoyable����������� ������������������  to����������� ������������������  use����������� ������������������  ?

Page 6: Lesson5. Rich and Responsive Layouts

Recap����������� ������������������  on����������� ������������������  Views����������� ������������������  and����������� ������������������  ViewGroups(1)

•a����������� ������������������  view����������� ������������������  handles����������� ������������������  drawing����������� ������������������  and����������� ������������������  event����������� ������������������  handling����������� ������������������  

•text����������� ������������������  field,����������� ������������������  buttons,����������� ������������������  drop����������� ������������������  down����������� ������������������  menu,����������� ������������������  checkboxes,����������� ������������������  radio����������� ������������������  button,����������� ������������������  on/off����������� ������������������  switch,����������� ������������������  progress����������� ������������������  bar

Page 7: Lesson5. Rich and Responsive Layouts

Recap����������� ������������������  on����������� ������������������  Views����������� ������������������  and����������� ������������������  ViewGroups(2)

•A����������� ������������������  view����������� ������������������  group����������� ������������������  is����������� ������������������  a����������� ������������������  container����������� ������������������  for����������� ������������������  children����������� ������������������  views

Page 8: Lesson5. Rich and Responsive Layouts

Recap����������� ������������������  on����������� ������������������  Views����������� ������������������  and����������� ������������������  ViewGroups(3)

Page 9: Lesson5. Rich and Responsive Layouts

Recap����������� ������������������  on����������� ������������������  Views����������� ������������������  and����������� ������������������  ViewGroups(4)

Page 10: Lesson5. Rich and Responsive Layouts

Recap����������� ������������������  on����������� ������������������  Views����������� ������������������  and����������� ������������������  ViewGroups(5)

Page 11: Lesson5. Rich and Responsive Layouts

Recap����������� ������������������  on����������� ������������������  Views����������� ������������������  and����������� ������������������  ViewGroups(6)

Page 12: Lesson5. Rich and Responsive Layouts

Building����������� ������������������  List����������� ������������������  Item

Page 13: Lesson5. Rich and Responsive Layouts

Building����������� ������������������  List����������� ������������������  Item

Page 14: Lesson5. Rich and Responsive Layouts

Building����������� ������������������  Todays����������� ������������������  List����������� ������������������  Item

•Use����������� ������������������  the����������� ������������������  same����������� ������������������  place����������� ������������������  holder����������� ������������������  image����������� ������������������  

•Use����������� ������������������  the����������� ������������������  same����������� ������������������  IDs����������� ������������������  

•SimpleCusorAdapter����������� ������������������  only����������� ������������������  supports����������� ������������������  one����������� ������������������  item����������� ������������������  view����������� ������������������  types

Page 15: Lesson5. Rich and Responsive Layouts

Cursor����������� ������������������  Adapter

Page 16: Lesson5. Rich and Responsive Layouts

•newView����������� ������������������  method����������� ������������������  knows����������� ������������������  how����������� ������������������  to����������� ������������������  return����������� ������������������  a����������� ������������������  new����������� ������������������  list����������� ������������������  layout,����������� ������������������  but����������� ������������������  doesn’t����������� ������������������  contain����������� ������������������  data����������� ������������������  yet����������� ������������������  

•bindView����������� ������������������  method����������� ������������������  knows����������� ������������������  how����������� ������������������  to����������� ������������������  take����������� ������������������  an����������� ������������������  existing����������� ������������������  layout����������� ������������������  and����������� ������������������  update����������� ������������������  it����������� ������������������  with����������� ������������������  the����������� ������������������  data

Cursor����������� ������������������  Adapter

Page 17: Lesson5. Rich and Responsive Layouts

•getViewTypeCount����������� ������������������  return����������� ������������������  to����������� ������������������  two����������� ������������������  for����������� ������������������  the����������� ������������������  two����������� ������������������  different����������� ������������������  layouts����������� ������������������  

•getItemViewType����������� ������������������  return����������� ������������������  to����������� ������������������  VIEW_TYPE_TODAY����������� ������������������  or����������� ������������������  VIEW_TYPE_FUTURE_DAY����������� ������������������  

•modify����������� ������������������  newView����������� ������������������  method����������� ������������������  

•bindView

Two����������� ������������������  Item����������� ������������������  View����������� ������������������  Types

Page 18: Lesson5. Rich and Responsive Layouts

•To����������� ������������������  remove����������� ������������������  unnecessary����������� ������������������  findViewById����������� ������������������  calls,����������� ������������������  we����������� ������������������  can����������� ������������������  use����������� ������������������  the����������� ������������������  View����������� ������������������  Holder����������� ������������������  Pattern����������� ������������������  

•Set����������� ������������������  the����������� ������������������  ViewHolder����������� ������������������  as����������� ������������������  the����������� ������������������  tag����������� ������������������  of����������� ������������������  the����������� ������������������  view

Using����������� ������������������  the����������� ������������������  viewHolder����������� ������������������  Pattern

Page 19: Lesson5. Rich and Responsive Layouts

•날짜����������� ������������������  

•온도����������� ������������������  

•http://kakaoplus.tistory.com/68

Formatting����������� ������������������  Strings

Page 20: Lesson5. Rich and Responsive Layouts

Coding����������� ������������������  the����������� ������������������  Details����������� ������������������  Screen

•Break����������� ������������������  up����������� ������������������  the����������� ������������������  UI����������� ������������������  into����������� ������������������  smaller����������� ������������������  components����������� ������������������  

•Move����������� ������������������  DetailFragment����������� ������������������  to����������� ������������������  new����������� ������������������  file

Page 21: Lesson5. Rich and Responsive Layouts

Coding����������� ������������������  the����������� ������������������  Details����������� ������������������  Screen

Page 22: Lesson5. Rich and Responsive Layouts

Optimizing����������� ������������������  Layouts

•Inflating����������� ������������������  complex����������� ������������������  layouts����������� ������������������  can����������� ������������������  be����������� ������������������  expensive����������� ������������������  

•keep����������� ������������������  your����������� ������������������  layout����������� ������������������  shallow����������� ������������������  and����������� ������������������  wide,����������� ������������������  rather����������� ������������������  than����������� ������������������  deep����������� ������������������  and����������� ������������������  narrow

Page 23: Lesson5. Rich and Responsive Layouts

Hierarchy����������� ������������������  Viewer

Page 24: Lesson5. Rich and Responsive Layouts

Responsive����������� ������������������  Design•What����������� ������������������  does����������� ������������������  it����������� ������������������  look����������� ������������������  like����������� ������������������  on����������� ������������������  the����������� ������������������  tablet����������� ������������������  

•Combining����������� ������������������  multiple����������� ������������������  views����������� ������������������  into����������� ������������������  One����������� ������������������  

•It’ll����������� ������������������  be����������� ������������������  used����������� ������������������  across����������� ������������������  a����������� ������������������  range����������� ������������������  of����������� ������������������  different����������� ������������������  device����������� ������������������  screen����������� ������������������  sizes

Page 25: Lesson5. Rich and Responsive Layouts

Splitting����������� ������������������  Devices����������� ������������������  into����������� ������������������  Buckets

•http://www.kmshack.kr/%EC%95%88%EB%93%9C%EB%A1%9C%EC%9D%B4%EB%93%9C-%EC%95%B1-%EA%B0%9C%EB

Page 26: Lesson5. Rich and Responsive Layouts

Resource����������� ������������������  Folder����������� ������������������  Qualifiers

•The����������� ������������������  Android����������� ������������������  resource����������� ������������������  framework����������� ������������������  

•Android����������� ������������������  allows����������� ������������������  you����������� ������������������  to����������� ������������������  create����������� ������������������  alternative����������� ������������������  versions����������� ������������������  of����������� ������������������  every����������� ������������������  resource����������� ������������������  by����������� ������������������  placing����������� ������������������  them����������� ������������������  into����������� ������������������  folders����������� ������������������  with����������� ������������������  different����������� ������������������  qualifiers

Page 27: Lesson5. Rich and Responsive Layouts

Resource����������� ������������������  Folder����������� ������������������  Qualifiers

Page 28: Lesson5. Rich and Responsive Layouts

Images����������� ������������������  for����������� ������������������  Different����������� ������������������  Densities

Page 29: Lesson5. Rich and Responsive Layouts

Adding����������� ������������������  Images����������� ������������������  to����������� ������������������  the����������� ������������������  App

Page 30: Lesson5. Rich and Responsive Layouts

Tablet����������� ������������������  UX����������� ������������������  Mocks

Page 31: Lesson5. Rich and Responsive Layouts

Why����������� ������������������  Do����������� ������������������  we����������� ������������������  Need����������� ������������������  Fragments

•Allow����������� ������������������  us����������� ������������������  to����������� ������������������  fully����������� ������������������  modularize����������� ������������������  our����������� ������������������  activities����������� ������������������  

•Fragments����������� ������������������  were����������� ������������������  first����������� ������������������  introduced����������� ������������������  in����������� ������������������  Honeycomb����������� ������������������  to����������� ������������������  solve����������� ������������������  a����������� ������������������  particular����������� ������������������  problem

Page 32: Lesson5. Rich and Responsive Layouts

Why����������� ������������������  we����������� ������������������  Don’t����������� ������������������  Only����������� ������������������  Use����������� ������������������  Fragments

Page 33: Lesson5. Rich and Responsive Layouts

How����������� ������������������  Fragments����������� ������������������  Work•http://blog.saltfactory.net/190

Page 34: Lesson5. Rich and Responsive Layouts

Try����������� ������������������  the����������� ������������������  fragment����������� ������������������  manager

Page 35: Lesson5. Rich and Responsive Layouts

Fragments����������� ������������������  with����������� ������������������  No����������� ������������������  UI

Page 36: Lesson5. Rich and Responsive Layouts

Sunshine����������� ������������������  Resource����������� ������������������  Folders•http://developer.android.com/guide/practices/screens_support.html#ConfigurationExamples

Page 37: Lesson5. Rich and Responsive Layouts

smallest����������� ������������������  width����������� ������������������  Qualifier

Page 38: Lesson5. Rich and Responsive Layouts

Next����������� ������������������  Time…⋯

•Fragment����������� ������������������  coding����������� ������������������  

•CustomView