design/patterns/navigation.jd

page.title=iu hng bng Quay li v Ln trn
page.tags="navigation","activity","task","up navigation","back navigation"
page.image=/design/media/navigation_between_siblings_gmail.png
@jd:body

<a class="notice-developers" href="{@docRoot}training/implementing-navigation/index.html">
  <div>
    <h3>Ti liu cho Nh pht trin</h3>
    <p>Trin khai iu hng Hiu qu</p>
  </div>
</a>

<p itemprop="description">iu hng nht qun l mt thnh phn thit yu trong tri nghim ngi dng ni chung. Mt vi iu nh b li khin
ngi dng kh chu hn so vi iu hng c bn chnh l hnh x khng nht qun v khng nh k vng. Android 3.0
 gii thiu nhng thay i ng k v hnh vi iu hng ton cc. Tun th k lng cc hng dn
v Quay li v Ln trn s gip vic iu hng trn ng dng ca bn tr nn d on v ng tin cy cho ngi dng ca bn.</p>
<p>Phin bn Android 2.3 v mi hn da vo nt <em>Quay li</em> ca h thng  h tr iu hng trong mt
ng dng. Vi vic gii thiu thanh hnh ng trong Android 3.0, mt c ch iu hng th hai  xut hin:
nt <em>Ln trn</em>, bao gm biu tng ng dng v du nhy li tri.</p>

<img src="{@docRoot}design/media/navigation_with_back_and_up.png">

<h2 id="up-vs-back">Ln trn so vi Quay li</h2>

<p>Nt Ln trn c s dng  iu hng bn trong mt ng dng da trn mi quan h th bc
gia cc mn hnh. V d, nu mn hnh A hin th mt danh sch cc mc v vic chn mt mc s dn n
mn hnh B (trnh by chi tit hn v mc ), khi  B s a ra nt Ln trn
quay li mn hnh A.</p>
<p>Nu mt mn hnh ang  trn cng trong mt ng dng (c th l trang ch ca ng dng), th n s xut hin nt
Ln trn.</p>

<p>Nt Quay li ca h thng c s dng  iu hng ngc theo th t thi gian, qua lch s cc mn hnh
m ngi dng mi thao tc qua. N thng c da trn mi quan h thi gian
gia cc mn hnh thay v th bc ca ng dng.</p>

<p>Khi mn hnh xem trc  cng ng thi l mn hnh m theo th bc ca mn hnh hin ti, nhn nt
Quay li s c cng kt qu nh khi nhn nt Ln trn&mdash;iu ny thng hay
xy ra. Tuy nhin, khng nh nt Ln trn m bo ngi dng vn cn trong ng dng ca bn,
nt Quay li c th tr ngi dng v mn hnh Trang ch hoc thm ch sang mt ng dng khc.</p>

<img src="{@docRoot}design/media/navigation_up_vs_back_gmail.png">

<p>Nt Quay li cng h tr mt vi hnh vi khng trc tip gn vi iu hng gia cc mn hnh:
</p>
<ul>
<li>B qua ca s ni (hp thoi, ca s bt ln)</li>
<li>B qua thanh hnh ng ng cnh v b t sng khi mc  chn</li>
<li>n bn phm trn mn hnh (IME)</li>
</ul>
<h2 id="within-app">iu hng trong ng dng ca Bn</h2>

<h4>iu hng ti mn hnh vi nhiu im bt u</h4>
<p>i khi mt mn hnh khng ch c mt v tr c nh trong th bc ca ng dng v bn c th truy cp n
t nhiu im bt u&mdash;v d nh mn hnh ci t c th c truy cp t bt c mn hnh
no khc trong ng dng ca bn. Trong trng hp ny, nt Ln trn s chn quay li mn hnh  chuyn n, c tc dng
ging nh Quay li.</p>
<h4>Thay i dng xem bn trong mt mn hnh</h4>
<p>Thay i ty chn dng xem cho mt mn hnh khng lm thay i hnh vi Ln trn hay Quay li: mn hnh vn
 cng mt ch trong th bc ca ng dng v khng to thm lch s iu hng mi no.</p>
<p>V d v thay i dng xem gm:</p>
<ul>
<li>Chuyn dng xem bng tab v/hoc trt nhanh tri phi</li>
<li>Chuyn dng xem bng danh sch th xung (cn gi l tab thu gn)</li>
<li>Lc mt danh sch</li>
<li>Sp xp mt danh sch</li>
<li>Thay i c tnh hin th (nh thu phng)</li>
</ul>
<h4>iu hng gia cc mn hnh anh em</h4>
<p>Khi ng dng ca bn h tr iu hng t mt danh mc ti mt dng xem chi tit ca mt trong nhng mc , thng
n u tin h tr iu hng theo hng t mc  ti mt mc khc  pha trc hoc
pha sau n trong danh sch. V d, trong Gmail, bn c th d dng trt nhanh sang tri hoc phi t mt hi thoi
 xem hi thoi mi hn hoc c hn trong cng Hp th n. Nh khi thay i dng xem trong mt mn hnh,
iu hng  khng lm thay i hnh vi Ln trn hoc Quay li.</p>

<img src="{@docRoot}design/media/navigation_between_siblings_gmail.png">

<p>Tuy nhin, c mt trng hp ngoi l ng ch   l khi duyt gia cc dng xem chi tit c lin quan, khng
rng buc vi nhau bi danh sch chuyn n&mdash;v d nh khi duyt trong Play Store gia cc ng dng t
cng mt nh pht trin hoc gia cc album bi cng mt ngh s. Trong cc trng hp ny, truy cp vo tng lin kt khng to ra
lch s, khin nt Quay li i qua tng mn hnh c xem trc . Thao tc Ln trn s tip tc
b qua nhng mn hnh lin quan ny v iu hng ti mn hnh b cha c xem gn y nht.</p>

<img src="{@docRoot}design/media/navigation_between_siblings_market1.png">

<p>Bn c kh nng thit k  hnh vi Ln trn thng minh hn da trn hiu bit ca mnh v dng xem
chi tit. Suy rng t v d v Play Store bn trn, tng tng ngi dng  iu hng t
Cun sch xem gn nht ti chi tit chuyn th Phim. Trong trng hp , thao tc Ln trn c th tr v mt b cha
(Phim) m trc  ngi dng cha iu hng qua.</p>

<img src="{@docRoot}design/media/navigation_between_siblings_market2.png">

<h2 id="into-your-app">iu hng ti ng dng ca Bn thng qua Widget v Thng bo trn Mn hnh Trang ch</h2>

<p>Bn c th s dng widget hoc thng bo trn mn hnh Trang ch  gip ngi dng ca mnh iu hng trc tip ti mn hnh
nm su trong th bc ng dng ca bn. V d, widget Hp th n ca Gmail v thng bo th mi c th
va b qua mn hnh Hp th n, va a ngi dng trc tip ti dng xem hi thoi.</p>

<p>Trong c hai trng hp ny, hy iu khin nt Ln trn nh sau:</p>

<ul>
<li><em>Nu mn hnh ch thng c truy cp t mt mn hnh c th trong ng dng
ca bn</em>, thao tc Ln trn s iu hng ti mn hnh .</li>
<li><em>Nu khng</em>, thao tc Ln trn s iu hng ti mn hnh trn cng ("Trang ch") ca ng dng ca bn.</li>
</ul>

<p>Trong trng hp nt Quay li, bn nn thit k  vic iu hng d on hn bng cch chn vo ngn xp
ca tc v ton b ng dn iu hng ln trn ti mn hnh trn cng ca ng dng. Lm vy s cho php nhng ngi dng no
qun cch h vo ng dng ca bn s iu hng ti mn hnh trn cng ca ng dng trc khi
thot.</p>

<p>V d, widget mn hnh Trang ch ca Gmail c mt nt  i trc tip vo mn hnh
son email ca n. Ln hoc Quay li t mn hnh son th s a ngi dng ti Hp th n, v t
nt Quay li tip tc a v Trang ch.</p>

<img src="{@docRoot}design/media/navigation_from_outside_back.png">

<h4>Thng bo gin tip</h4>

<p>Khi ng dng ca bn cn trnh by thng tin v nhiu s kin ng thi, n c th s dng
thng bo duy nht  chuyn hng ngi dng ti mt mn hnh xen k. Mn hnh ny tng hp nhng s kin
ny v cung cp ng dn cho ngi dng i su vo ng dng. Thng bo kiu ny c gi
l <em>thng bo gin tip</em>.</p>

<p>Khng nh thng bo tiu chun (trc tip), nhn Quay li t mn hnh xen k ca mt thng bo gin tip
s tr ngi dng v im m t  thng bo  c kch hot&mdash;khng c
mn hnh b sung no c chn vo ngn xp. Sau khi ngi dng tin vo ng dng t mn hnh xen k
, thao tc Ln trn v Quay li c tc dng nh vi thng bo tiu chun, nh c m t  trn:
iu hng bn trong ng dng thay v quay li mn hnh xen k.</p>

<p>V d, gi s mt ngi dng trong Gmail nhn c mt thng bo gin tip t Lch. Chm
vo thng bo ny  m ra mn hnh xen k, trong  hin th nhc nh cho mt vi s kin
khc nhau. Chm vo Quay li t mn hnh xen k s tr ngi dng v Gmail. Chm vo mt s kin
c th s a ngi dng ra khi mn hnh xen k v vo ng dng Lch  hin th chi tit v
s kin. T chi tit s kin, Ln trn v Quay li s iu hng ti dng xem trn cng ca Lch.</p>

<img src="{@docRoot}design/media/navigation_indirect_notification.png">

<h4>Thng bo bt ln</h4>

<p><em>Thng bo bt ln</em> s b qua ngn thng bo thay v xut hin trc tip pha
trc ngi dng. Chng him khi c s dng v <strong>nn c  dnh cho nhng dp khi cn
phn ng kp thi v vic gin on ng cnh ca ngi dng l cn thit</strong>. V d,
Talk s dng kiu ny  cnh bo ngi dng v li mi t mt ngi bn  tham gia tr chuyn video, bi
li mi ny s t ng ht hn sau mt vi giy.</p>

<p>Xt v hnh vi iu hng, thng bo bt ln bm st cht ch hnh vi ca mn hnh xen k
trong thng bo gin tip. Quay li s b qua thng bo bt ln. Nu ngi dng iu hng
t mn hnh bt ln vo ng dng thng bo, hnh vi Ln trn v Quay li s bm st quy tc p dng vi thng bo tiu chun,
iu hng bn trong ng dng.</p>

<img src="{@docRoot}design/media/navigation_popup_notification.png">

<h2 id="between-apps">iu hng gia cc ng dng</h2>

<p>Mt trong nhng th mnh c bn ca h thng Android  l kh nng cc ng dng kch hot
ln nhau, gip ngi dng c th iu hng trc tip t ng dng ny sang ng dng khc. V d, mt ng dng
cn chp nh c th kch hot ng dng Camera, ng dng ny s tr
nh v ng dng chuyn n. iu ny c bit c ch i vi c nh pht trin, nhng ngi c th d dng tn dng
on m t cc ng dng khc, ln ngi dng, nhng ngi thch c mt tri nghim nht qun i vi nhng hnh ng
c thc hin thng xuyn.</p>

<p> hiu r iu hng gia cc ng dng, quan trng l phi hiu c hnh vi b khung Android
c  cp di y.</p>

<h4>Hot ng, tc v v  nh</h4>

<p>Trong Android, <strong>hot ng</strong> l mt thnh phn ng dng nh ngha mt mn hnh
thng tin v tt c hnh ng lin kt m ngi dng c th thc hin. ng dng ca bn l tp hp
ca nhiu hot ng, bao gm c hot ng do bn to v hot ng m bn s dng li t cc ng dng khc.</p>

<p><strong>Tc v</strong> l trnh t cc hot ng m mt ngi dng tun theo  hon thnh mt mc tiu.
Tc v n c th s dng cc hot ng t ch mt ng dng, hoc c th da trn hot ng t nhiu
ng dng khc nhau.</p>

<p><strong> nh</strong> l mt c ch  mt ng dng bo hiu rng n mun s tr gip
ca mt ng dng khc khi thc hin mt hnh ng. Cc hot ng ca mt ng dng c th biu th nhng  nh
m chng c th phn hi. i vi nhng  nh thng gp nh "Chia s", ngi dng c th ci t nhiu ng dng
c kh nng thc hin yu cu .</p>

<h4>V d: iu hng gia cc ng dng  h tr chia s</h4>

<p> hiu nhng hot ng, tc v v  nh ny vn hnh vi nhau nh th no, hy xem cch mt ng dng cho php ngi dng
chia s ni dung bng cch dng mt ng dng khc. V d, khi chy ng dng Play Store t Trang ch s bt u
Tc v A mi (xem hnh bn di). Sau khi iu hng qua Play Store v chm vo mt cun sch c qung co
 xem chi tit ca sch, ngi dng vn  trong cng mt tc v, m rng n bng cch thm vo cc hot ng. Kch hot
hnh ng Chia s s nhc ngi dng bng mt hp thoi lit k tng hot ng mt (t cc ng dng khc nhau)
m  ng k x l  nh Chia s .</p>

<img src="{@docRoot}design/media/navigation_between_apps_inward.png">

<p>Khi ngi dng chn chia s qua Gmail, hot ng son email ca Gmail s c thm lm hot ng tip tc
Tc v A&mdash;khng c tc v mi no c to thm. Nu Gmail c tc v ring ang chy nn, n s
khng b nh hng.</p>

<p>T hot ng son email, gi th hoc chm vo nt Quay li s tr ngi dng v
hot ng chi tit v cun sch. Nhng ln chm sau  vo Quay li s tip tc iu hng quay li qua
Store v cui cng v li Trang ch.</p>

<img src="{@docRoot}design/media/navigation_between_apps_back.png">

<p>Tuy nhin, nu chm vo Ln trn t hot ng son email, ngi dng biu th mong mun vn  nguyn trong
Gmail. Hot ng danh sch hi thoi ca Gmail xut hin v Tc v B mi s c to cho n. Cc tc v mi
s lun c lin kt gc vi Trang ch, v th chm vo Quay li t danh sch hi thoi s quay li .</p>

<img src="{@docRoot}design/media/navigation_between_apps_up.png">

<p>Tc v A duy tr chy nn v ngi dng c th quay li n sau (v d, thng qua
mn hnh Gn y). Nu Gmail  c tc v ring ang chy nn, n s c thay th
bng Tc v B&mdash;ng cnh trc  s b b i phc v cho mc ch mi ca ngi dng.</p>

<p>Khi ng dng ca bn ng k iu khin  nh bng mt hot ng nm su trong th bc ca ng dng,
hy tham kho phn <a href="#into-your-app">iu hng ti ng dng ca Bn thng qua Widget v Thng bo trn
Mn hnh Trang ch</a>  xem hng dn v cch quy nh iu hng Ln trn.</p>