Android/frameworks_base
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

am 67e988e0: Merge "docs: for AU basic training on fragments including ZIP for sample app" into ics-mr1

Browse Source 
* commit '67e988e0e96dcd0f9c8f07e5b685dc7c8224a884':
  docs:  for AU basic training on fragments including ZIP for sample app
This commit is contained in:
Scott Main
2012-04-19 19:09:37 -07:00
committed by Android Git Automerger
parent 559f184a89 67e988e0e9
commit 72c13446b4
13 changed files with 1538 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
docs/html/images/training/basics/fragments-screen-mock.graffle/QuickLook/Preview.pdf Normal file
View File

Binary file not shown.

BIN
docs/html/images/training/basics/fragments-screen-mock.graffle/QuickLook/Thumbnail.tiff Normal file
View File

Binary file not shown.

848
docs/html/images/training/basics/fragments-screen-mock.graffle/data.plist Normal file
View File

@@ -0,0 +1,848 @@
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>ActiveLayerIndex</key>
<integer>0</integer>
<key>ApplicationVersion</key>
<array>
<string>com.omnigroup.OmniGrafflePro</string>
<string>138.9.0.117994</string>
</array>
<key>AutoAdjust</key>
<true/>
<key>BackgroundGraphic</key>
<dict>
<key>Bounds</key>
<string>{{0, 0}, {1152, 733}}</string>
<key>Class</key>
<string>SolidGraphic</string>
<key>ID</key>
<integer>2</integer>
<key>Style</key>
<dict>
<key>shadow</key>
<dict>
<key>Draws</key>
<string>NO</string>
</dict>
<key>stroke</key>
<dict>
<key>Draws</key>
<string>NO</string>
</dict>
</dict>
</dict>
<key>CanvasOrigin</key>
<string>{0, 0}</string>
<key>ColumnAlign</key>
<integer>1</integer>
<key>ColumnSpacing</key>
<real>36</real>
<key>CreationDate</key>
<string>2012-03-20 17:38:46 -0700</string>
<key>Creator</key>
<string>Billy Rutledge</string>
<key>DisplayScale</key>
<string>1 0/72 in = 1.0000 in</string>
<key>GraphDocumentVersion</key>
<integer>6</integer>
<key>GraphicsList</key>
<array>
<dict>
<key>Class</key>
<string>LineGraphic</string>
<key>FontInfo</key>
<dict>
<key>Font</key>
<string>DroidSans</string>
<key>Size</key>
<real>11</real>
</dict>
<key>Head</key>
<dict>
<key>ID</key>
<integer>1205</integer>
</dict>
<key>ID</key>
<integer>196</integer>
<key>OrthogonalBarAutomatic</key>
<false/>
<key>OrthogonalBarPosition</key>
<real>4.1290435791015625</real>
<key>Points</key>
<array>
<string>{457.98, 171.696}</string>
<string>{490.023, 171.696}</string>
</array>
<key>Style</key>
<dict>
<key>stroke</key>
<dict>
<key>Color</key>
<dict>
<key>a</key>
<string>0.7</string>
<key>b</key>
<string>0</string>
<key>g</key>
<string>0</string>
<key>r</key>
<string>0</string>
</dict>
<key>CornerRadius</key>
<real>4</real>
<key>HeadArrow</key>
<string>FilledArrow</string>
<key>LineType</key>
<integer>2</integer>
<key>TailArrow</key>
<string>0</string>
</dict>
</dict>
<key>Tail</key>
<dict>
<key>ID</key>
<integer>1202</integer>
<key>Info</key>
<integer>3</integer>
</dict>
</dict>
<dict>
<key>Bounds</key>
<string>{{500.158, 103.347}, {73.0685, 120.722}}</string>
<key>Class</key>
<string>ShapedGraphic</string>
<key>FontInfo</key>
<dict>
<key>Color</key>
<dict>
<key>b</key>
<string>0</string>
<key>g</key>
<string>0</string>
<key>r</key>
<string>0</string>
</dict>
<key>Font</key>
<string>DroidSans-Bold</string>
<key>Size</key>
<real>10</real>
</dict>
<key>ID</key>
<integer>1206</integer>
<key>Magnets</key>
<array>
<string>{1, 1}</string>
<string>{1, -1}</string>
<string>{-1, -1}</string>
<string>{-1, 1}</string>
<string>{0, 1}</string>
<string>{0, -1}</string>
<string>{1, 0}</string>
<string>{-1, 0}</string>
<string>{-0.5, -0.233518}</string>
<string>{-0.491442, 0.260063}</string>
<string>{0.507118, -0.224086}</string>
<string>{0.507118, 0.267179}</string>
<string>{-0.27431, -0.474028}</string>
<string>{0.27978, -0.478478}</string>
<string>{0.293938, 0.543044}</string>
<string>{-0.286232, 0.553804}</string>
</array>
<key>Shape</key>
<string>Rectangle</string>
<key>Style</key>
<dict>
<key>fill</key>
<dict>
<key>Color</key>
<dict>
<key>b</key>
<string>0.628571</string>
<key>g</key>
<string>0.768599</string>
<key>r</key>
<string>1</string>
</dict>
<key>FillType</key>
<integer>2</integer>
<key>GradientAngle</key>
<real>90</real>
<key>GradientColor</key>
<dict>
<key>b</key>
<string>0.236788</string>
<key>g</key>
<string>0.532236</string>
<key>r</key>
<string>0.990271</string>
</dict>
</dict>
<key>shadow</key>
<dict>
<key>Color</key>
<dict>
<key>a</key>
<string>0.35</string>
<key>b</key>
<string>0</string>
<key>g</key>
<string>0</string>
<key>r</key>
<string>0</string>
</dict>
<key>Fuzziness</key>
<real>2.3972222805023193</real>
<key>ShadowVector</key>
<string>{0, 1}</string>
</dict>
<key>stroke</key>
<dict>
<key>Color</key>
<dict>
<key>b</key>
<string>0.131021</string>
<key>g</key>
<string>0.363196</string>
<key>r</key>
<string>0.725948</string>
</dict>
<key>CornerRadius</key>
<real>3</real>
</dict>
</dict>
<key>Text</key>
<dict>
<key>Text</key>
<string>{\rtf1\ansi\ansicpg1252\cocoartf1038\cocoasubrtf360
{\fonttbl\f0\fswiss\fcharset0 Helvetica;}
{\colortbl;\red255\green255\blue255;}
\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\qc
\f0\fs24 \cf0 Fragment B}</string>
<key>VerticalPad</key>
<integer>0</integer>
</dict>
</dict>
<dict>
<key>Bounds</key>
<string>{{490.023, 82.3917}, {93.3371, 178.608}}</string>
<key>Class</key>
<string>ShapedGraphic</string>
<key>ID</key>
<integer>1205</integer>
<key>ImageID</key>
<integer>2</integer>
<key>Magnets</key>
<array>
<string>{0, 1}</string>
<string>{0, -1}</string>
<string>{1, 0}</string>
<string>{-1, 0}</string>
</array>
<key>Shape</key>
<string>Rectangle</string>
<key>Style</key>
<dict>
<key>fill</key>
<dict>
<key>Draws</key>
<string>NO</string>
</dict>
<key>shadow</key>
<dict>
<key>Draws</key>
<string>NO</string>
</dict>
<key>stroke</key>
<dict>
<key>Draws</key>
<string>NO</string>
</dict>
</dict>
</dict>
<dict>
<key>Bounds</key>
<string>{{99.4737, 58.4729}, {223.971, 183.465}}</string>
<key>Class</key>
<string>ShapedGraphic</string>
<key>FontInfo</key>
<dict>
<key>Color</key>
<dict>
<key>b</key>
<string>0</string>
<key>g</key>
<string>0</string>
<key>r</key>
<string>0</string>
</dict>
<key>Font</key>
<string>DroidSans-Bold</string>
<key>Size</key>
<real>10</real>
</dict>
<key>ID</key>
<integer>200</integer>
<key>Magnets</key>
<array>
<string>{1, 1}</string>
<string>{1, -1}</string>
<string>{-1, -1}</string>
<string>{-1, 1}</string>
<string>{0, 1}</string>
<string>{0, -1}</string>
<string>{1, 0}</string>
<string>{-1, 0}</string>
<string>{-0.5, -0.233518}</string>
<string>{-0.491442, 0.260063}</string>
<string>{0.507118, -0.224086}</string>
<string>{0.507118, 0.267179}</string>
<string>{-0.27431, -0.474028}</string>
<string>{0.27978, -0.478478}</string>
<string>{0.293938, 0.543044}</string>
<string>{-0.286232, 0.553804}</string>
</array>
<key>Shape</key>
<string>Rectangle</string>
<key>Style</key>
<dict>
<key>fill</key>
<dict>
<key>Color</key>
<dict>
<key>b</key>
<string>0.628571</string>
<key>g</key>
<string>0.768599</string>
<key>r</key>
<string>1</string>
</dict>
<key>FillType</key>
<integer>2</integer>
<key>GradientAngle</key>
<real>90</real>
<key>GradientColor</key>
<dict>
<key>b</key>
<string>0.236788</string>
<key>g</key>
<string>0.532236</string>
<key>r</key>
<string>0.990271</string>
</dict>
</dict>
<key>shadow</key>
<dict>
<key>Color</key>
<dict>
<key>a</key>
<string>0.35</string>
<key>b</key>
<string>0</string>
<key>g</key>
<string>0</string>
<key>r</key>
<string>0</string>
</dict>
<key>Fuzziness</key>
<real>2.3972222805023193</real>
<key>ShadowVector</key>
<string>{0, 1}</string>
</dict>
<key>stroke</key>
<dict>
<key>Color</key>
<dict>
<key>b</key>
<string>0.131021</string>
<key>g</key>
<string>0.363196</string>
<key>r</key>
<string>0.725948</string>
</dict>
<key>CornerRadius</key>
<real>3</real>
</dict>
</dict>
<key>Text</key>
<dict>
<key>Text</key>
<string>{\rtf1\ansi\ansicpg1252\cocoartf1038\cocoasubrtf360
{\fonttbl\f0\fswiss\fcharset0 Helvetica;}
{\colortbl;\red255\green255\blue255;}
\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\qc
\f0\fs24 \cf0 Fragment B}</string>
<key>VerticalPad</key>
<integer>0</integer>
</dict>
</dict>
<dict>
<key>Bounds</key>
<string>{{24.8166, 58.4729}, {73.0685, 183.465}}</string>
<key>Class</key>
<string>ShapedGraphic</string>
<key>FontInfo</key>
<dict>
<key>Color</key>
<dict>
<key>b</key>
<string>0</string>
<key>g</key>
<string>0</string>
<key>r</key>
<string>0</string>
</dict>
<key>Font</key>
<string>DroidSans-Bold</string>
<key>Size</key>
<real>10</real>
</dict>
<key>ID</key>
<integer>1203</integer>
<key>Magnets</key>
<array>
<string>{1, 1}</string>
<string>{1, -1}</string>
<string>{-1, -1}</string>
<string>{-1, 1}</string>
<string>{0, 1}</string>
<string>{0, -1}</string>
<string>{1, 0}</string>
<string>{-1, 0}</string>
<string>{-0.5, -0.233518}</string>
<string>{-0.491442, 0.260063}</string>
<string>{0.507118, -0.224086}</string>
<string>{0.507118, 0.267179}</string>
<string>{-0.27431, -0.474028}</string>
<string>{0.27978, -0.478478}</string>
<string>{0.293938, 0.543044}</string>
<string>{-0.286232, 0.553804}</string>
</array>
<key>Shape</key>
<string>Rectangle</string>
<key>Style</key>
<dict>
<key>fill</key>
<dict>
<key>Color</key>
<dict>
<key>b</key>
<string>1</string>
<key>g</key>
<string>0.874135</string>
<key>r</key>
<string>0.71718</string>
</dict>
<key>FillType</key>
<integer>2</integer>
<key>GradientAngle</key>
<real>90</real>
<key>GradientColor</key>
<dict>
<key>b</key>
<string>1</string>
<key>g</key>
<string>0.662438</string>
<key>r</key>
<string>0.464468</string>
</dict>
</dict>
<key>shadow</key>
<dict>
<key>Color</key>
<dict>
<key>a</key>
<string>0.35</string>
<key>b</key>
<string>0</string>
<key>g</key>
<string>0</string>
<key>r</key>
<string>0</string>
</dict>
<key>Fuzziness</key>
<real>2.3972222805023193</real>
<key>ShadowVector</key>
<string>{0, 1}</string>
</dict>
<key>stroke</key>
<dict>
<key>Color</key>
<dict>
<key>b</key>
<string>0.93512</string>
<key>g</key>
<string>0.472602</string>
<key>r</key>
<string>0.333854</string>
</dict>
<key>CornerRadius</key>
<real>3</real>
</dict>
</dict>
<key>Text</key>
<dict>
<key>Text</key>
<string>{\rtf1\ansi\ansicpg1252\cocoartf1038\cocoasubrtf360
{\fonttbl\f0\fswiss\fcharset0 Helvetica;}
{\colortbl;\red255\green255\blue255;}
\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\qc
\f0\fs24 \cf0 Fragment A}</string>
<key>VerticalPad</key>
<integer>0</integer>
</dict>
</dict>
<dict>
<key>Bounds</key>
<string>{{374.205, 103.347}, {73.0685, 120.722}}</string>
<key>Class</key>
<string>ShapedGraphic</string>
<key>FontInfo</key>
<dict>
<key>Color</key>
<dict>
<key>b</key>
<string>0</string>
<key>g</key>
<string>0</string>
<key>r</key>
<string>0</string>
</dict>
<key>Font</key>
<string>DroidSans-Bold</string>
<key>Size</key>
<real>10</real>
</dict>
<key>ID</key>
<integer>157</integer>
<key>Magnets</key>
<array>
<string>{1, 1}</string>
<string>{1, -1}</string>
<string>{-1, -1}</string>
<string>{-1, 1}</string>
<string>{0, 1}</string>
<string>{0, -1}</string>
<string>{1, 0}</string>
<string>{-1, 0}</string>
<string>{-0.5, -0.233518}</string>
<string>{-0.491442, 0.260063}</string>
<string>{0.507118, -0.224086}</string>
<string>{0.507118, 0.267179}</string>
<string>{-0.27431, -0.474028}</string>
<string>{0.27978, -0.478478}</string>
<string>{0.293938, 0.543044}</string>
<string>{-0.286232, 0.553804}</string>
</array>
<key>Shape</key>
<string>Rectangle</string>
<key>Style</key>
<dict>
<key>fill</key>
<dict>
<key>Color</key>
<dict>
<key>b</key>
<string>1</string>
<key>g</key>
<string>0.874135</string>
<key>r</key>
<string>0.71718</string>
</dict>
<key>FillType</key>
<integer>2</integer>
<key>GradientAngle</key>
<real>90</real>
<key>GradientColor</key>
<dict>
<key>b</key>
<string>1</string>
<key>g</key>
<string>0.662438</string>
<key>r</key>
<string>0.464468</string>
</dict>
</dict>
<key>shadow</key>
<dict>
<key>Color</key>
<dict>
<key>a</key>
<string>0.35</string>
<key>b</key>
<string>0</string>
<key>g</key>
<string>0</string>
<key>r</key>
<string>0</string>
</dict>
<key>Fuzziness</key>
<real>2.3972222805023193</real>
<key>ShadowVector</key>
<string>{0, 1}</string>
</dict>
<key>stroke</key>
<dict>
<key>Color</key>
<dict>
<key>b</key>
<string>0.93512</string>
<key>g</key>
<string>0.472602</string>
<key>r</key>
<string>0.333854</string>
</dict>
<key>CornerRadius</key>
<real>3</real>
</dict>
</dict>
<key>Text</key>
<dict>
<key>Text</key>
<string>{\rtf1\ansi\ansicpg1252\cocoartf1038\cocoasubrtf360
{\fonttbl\f0\fswiss\fcharset0 Helvetica;}
{\colortbl;\red255\green255\blue255;}
\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\qc
\f0\fs24 \cf0 Fragment A}</string>
<key>VerticalPad</key>
<integer>0</integer>
</dict>
</dict>
<dict>
<key>Bounds</key>
<string>{{364.643, 82.3917}, {93.3371, 178.608}}</string>
<key>Class</key>
<string>ShapedGraphic</string>
<key>ID</key>
<integer>1202</integer>
<key>ImageID</key>
<integer>2</integer>
<key>Magnets</key>
<array>
<string>{0, 1}</string>
<string>{0, -1}</string>
<string>{1, 0}</string>
<string>{-1, 0}</string>
</array>
<key>Shape</key>
<string>Rectangle</string>
<key>Style</key>
<dict>
<key>fill</key>
<dict>
<key>Draws</key>
<string>NO</string>
</dict>
<key>shadow</key>
<dict>
<key>Draws</key>
<string>NO</string>
</dict>
<key>stroke</key>
<dict>
<key>Draws</key>
<string>NO</string>
</dict>
</dict>
</dict>
<dict>
<key>Bounds</key>
<string>{{6.54947, 41}, {335.776, 220}}</string>
<key>Class</key>
<string>ShapedGraphic</string>
<key>ID</key>
<integer>1201</integer>
<key>ImageID</key>
<integer>1</integer>
<key>Magnets</key>
<array>
<string>{0, 1}</string>
<string>{0, -1}</string>
<string>{1, 0}</string>
<string>{-1, 0}</string>
</array>
<key>Shape</key>
<string>Rectangle</string>
<key>Style</key>
<dict>
<key>fill</key>
<dict>
<key>Draws</key>
<string>NO</string>
</dict>
<key>shadow</key>
<dict>
<key>Draws</key>
<string>NO</string>
</dict>
<key>stroke</key>
<dict>
<key>Draws</key>
<string>NO</string>
</dict>
</dict>
</dict>
</array>
<key>GridInfo</key>
<dict/>
<key>GuidesLocked</key>
<string>NO</string>
<key>GuidesVisible</key>
<string>YES</string>
<key>HPages</key>
<integer>2</integer>
<key>ImageCounter</key>
<integer>3</integer>
<key>ImageLinkBack</key>
<array>
<dict/>
<dict/>
</array>
<key>ImageList</key>
<array>
<string>image2.png</string>
<string>image1.png</string>
</array>
<key>KeepToScale</key>
<false/>
<key>Layers</key>
<array>
<dict>
<key>Lock</key>
<string>NO</string>
<key>Name</key>
<string>Layer 1</string>
<key>Print</key>
<string>YES</string>
<key>View</key>
<string>YES</string>
</dict>
</array>
<key>LayoutInfo</key>
<dict>
<key>Animate</key>
<string>NO</string>
<key>circoMinDist</key>
<real>18</real>
<key>circoSeparation</key>
<real>0.0</real>
<key>layoutEngine</key>
<string>dot</string>
<key>neatoSeparation</key>
<real>0.0</real>
<key>twopiSeparation</key>
<real>0.0</real>
</dict>
<key>LinksVisible</key>
<string>NO</string>
<key>MagnetsVisible</key>
<string>NO</string>
<key>MasterSheets</key>
<array/>
<key>ModificationDate</key>
<string>2012-04-17 18:01:13 -0700</string>
<key>Modifier</key>
<string>Scott Main</string>
<key>NotesVisible</key>
<string>NO</string>
<key>Orientation</key>
<integer>2</integer>
<key>OriginVisible</key>
<string>NO</string>
<key>PageBreaks</key>
<string>YES</string>
<key>PrintInfo</key>
<dict>
<key>NSBottomMargin</key>
<array>
<string>float</string>
<string>41</string>
</array>
<key>NSLeftMargin</key>
<array>
<string>float</string>
<string>18</string>
</array>
<key>NSPaperSize</key>
<array>
<string>size</string>
<string>{612, 792}</string>
</array>
<key>NSRightMargin</key>
<array>
<string>float</string>
<string>18</string>
</array>
<key>NSTopMargin</key>
<array>
<string>float</string>
<string>18</string>
</array>
</dict>
<key>PrintOnePage</key>
<false/>
<key>ReadOnly</key>
<string>NO</string>
<key>RowAlign</key>
<integer>1</integer>
<key>RowSpacing</key>
<real>36</real>
<key>SheetTitle</key>
<string>Canvas 1</string>
<key>SmartAlignmentGuidesActive</key>
<string>YES</string>
<key>SmartDistanceGuidesActive</key>
<string>YES</string>
<key>UniqueID</key>
<integer>1</integer>
<key>UseEntirePage</key>
<false/>
<key>VPages</key>
<integer>1</integer>
<key>WindowInfo</key>
<dict>
<key>CurrentSheet</key>
<integer>0</integer>
<key>ExpandedCanvases</key>
<array>
<dict>
<key>name</key>
<string>Canvas 1</string>
</dict>
</array>
<key>Frame</key>
<string>{{189, -8}, {1214, 874}}</string>
<key>ListView</key>
<true/>
<key>OutlineWidth</key>
<integer>142</integer>
<key>RightSidebar</key>
<false/>
<key>ShowRuler</key>
<true/>
<key>Sidebar</key>
<true/>
<key>SidebarWidth</key>
<integer>120</integer>
<key>VisibleRegion</key>
<string>{{0, 2}, {1065, 705}}</string>
<key>Zoom</key>
<real>1</real>
<key>ZoomValues</key>
<array>
<array>
<string>Canvas 1</string>
<real>1</real>
<real>1</real>
</array>
</array>
</dict>
<key>saveQuickLookFiles</key>
<string>YES</string>
</dict>
</plist>

BIN
docs/html/images/training/basics/fragments-screen-mock.graffle/image1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

BIN
docs/html/images/training/basics/fragments-screen-mock.graffle/image2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
docs/html/images/training/basics/fragments-screen-mock.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 55 KiB

BIN
docs/html/images/training/basics/sdk-manager.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 98 KiB

BIN
docs/html/shareables/training/FragmentBasics.zip Normal file
View File

Binary file not shown.

179
docs/html/training/basics/fragments/communicating.jd Normal file
View File

@@ -0,0 +1,179 @@
page.title=Communicating with Other Fragments
parent.title=Building a Dynamic UI with Fragments
parent.link=index.html
trainingnavtop=true
previous.title=Building a Flexible UI
previous.link=fragment-ui.html
@jd:body
<div id="tb-wrapper">
<div id="tb">
<h2>This lesson teaches you to</h2>
<ol>
<li><a href="#DefineInterface">Define an Interface</a></li>
<li><a href="#Implement">Implement the Interface</a></li>
<li><a href="#Deliver">Deliver a Message to a Fragment</a></li>
</ol>
<h2>You should also read</h2>
<ul>
<li><a href="{@docRoot}guide/topics/fundamentals/fragments.html">Fragments</a></li>
</ul>
<h2>Try it out</h2>
<div class="download-box">
<a href="http://developer.android.com/shareables/training/FragmentBasics.zip"
class="button">Download the sample</a>
<p class="filename">FragmentBasics.zip</p>
</div>
</div>
</div>
<p>In order to reuse the Fragment UI components, you should build each as a completely
self-contained, modular component that defines its own layout and behavior. Once you
have defined these reusable Fragments, you can associate them with an Activity and
connect them with the application logic to realize the overall composite UI.</p>
<p>Often you will want one Fragment to communicate with another, for example to change
the content based on a user event. All Fragment-to-Fragment communication is done
through the associated Activity. Two Fragments should never communicate directly.</p>
<h2 id="DefineInterface">Define an Interface</h2>
<p>To allow a Fragment to communicate up to its Activity, you can define an interface
in the Fragment class and implement it within the Activity. The Fragment captures
the interface implementation during its onAttach() lifecycle method and can then call
the Interface methods in order to communicate with the Activity.</p>
<p>Here is an example of Fragment to Activity communication:</p>
<pre>
public class HeadlinesFragment extends ListFragment {
OnHeadlineSelectedListener mCallback;
// Container Activity must implement this interface
public interface OnHeadlineSelectedListener {
public void onArticleSelected(int position);
}
&#64;Override
public void onAttach(Activity activity) {
super.onAttach(activity);
// This makes sure that the container activity has implemented
// the callback interface. If not, it throws an exception
try {
mCallback = (OnHeadlineSelectedListener) activity;
} catch (ClassCastException e) {
throw new ClassCastException(activity.toString()
+ " must implement OnHeadlineSelectedListener");
}
}
...
}
</pre>
<p>Now the fragment can deliver messages to the activity by calling the {@code
onArticleSelected()} method (or other methods in the interface) using the {@code mCallback}
instance of the {@code OnHeadlineSelectedListener} interface.</p>
<p>For example, the following method in the fragment is called when the user clicks on a list
item. The fragment uses the callback interface to deliver the event to the parent activity.</p>
<pre>
&#64;Override
public void onListItemClick(ListView l, View v, int position, long id) {
// Send the event to the host activity
mCallback.onArticleSelected(position);
}
</pre>
<h2 id="Implement">Implement the Interface</h2>
<p>In order to receive event callbacks from the fragment, the activity that hosts it must
implement the interface defined in the fragment class.</p>
<p>For example, the following activity implements the interface from the above example.</p>
<pre>
public static class MainActivity extends Activity
implements HeadlinesFragment.OnHeadlineSelectedListener{
...
public void onArticleSelected(Uri articleUri) {
// The user selected the headline of an article from the HeadlinesFragment
// Do something here to display that article
}
}
</pre>
<h2 id="Deliver">Deliver a Message to a Fragment</h2>
<p>The host activity can deliver messages to a fragment by capturing the {@link
android.support.v4.app.Fragment} instance
with {@link android.support.v4.app.FragmentManager#findFragmentById findFragmentById()}, then
directly call the fragment's public methods.</p>
<p>For instance, imagine that the activity shown above may contain another fragment that's used to
display the item specified by the data returned in the above callback method. In this case,
the activity can pass the information received in the callback method to the other fragment that
will display the item:</p>
<pre>
public static class MainActivity extends Activity
implements HeadlinesFragment.OnHeadlineSelectedListener{
...
public void onArticleSelected(int position) {
// The user selected the headline of an article from the HeadlinesFragment
// Do something here to display that article
ArticleFragment articleFrag = (ArticleFragment)
getSupportFragmentManager().findFragmentById(R.id.article_fragment);
if (articleFrag != null) {
// If article frag is available, we're in two-pane layout...
// Call a method in the ArticleFragment to update its content
articleFrag.updateArticleView(position);
} else {
// Otherwise, we're in the one-pane layout and must swap frags...
// Create fragment and give it an argument for the selected article
ArticleFragment newFragment = new ArticleFragment();
Bundle args = new Bundle();
args.putInt(ArticleFragment.ARG_POSITION, position);
newFragment.setArguments(args);
FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
// Replace whatever is in the fragment_container view with this fragment,
// and add the transaction to the back stack so the user can navigate back
transaction.replace(R.id.fragment_container, newFragment);
transaction.addToBackStack(null);
// Commit the transaction
transaction.commit();
}
}
}
</pre>

155
docs/html/training/basics/fragments/creating.jd Normal file
View File

@@ -0,0 +1,155 @@
page.title=Creating a Fragment
parent.title=Building a Dynamic UI with Fragments
parent.link=index.html
trainingnavtop=true
previous.title=Using the Android Support Library
previous.link=support-lib.html
next.title=Building a Flexible UI
next.link=fragment-ui.html
@jd:body
<div id="tb-wrapper">
<div id="tb">
<h2>This lesson teaches you to</h2>
<ol>
<li><a href="#Create">Create a Fragment Class</a></li>
<li><a href="#AddInLayout">Add a Fragment to an Activity using XML</a></li>
</ol>
<h2>You should also read</h2>
<ul>
<li><a href="{@docRoot}guide/topics/fundamentals/fragments.html">Fragments</a></li>
</ul>
<h2>Try it out</h2>
<div class="download-box">
<a href="http://developer.android.com/shareables/training/FragmentBasics.zip"
class="button">Download the sample</a>
<p class="filename">FragmentBasics.zip</p>
</div>
</div>
</div>
<p>You can think of a fragment as a modular section of an activity, which has its own lifecycle,
receives its own input events, and which you can add or remove while the activity is running (sort
of like a "sub activity" that you can reuse in different activities). This lesson shows how to
extend the {@link android.support.v4.app.Fragment} class using the Support Library so your app
remains compatible with devices running system versions as old as Android 1.6.</p>
<p class="note"><strong>Note:</strong> If you decide for other reasons that the minimum
API level your app requires is 11 or higher, you don't need to use the Support
Library and can instead use the framework's built in {@link android.app.Fragment} class and related
APIs. Just be aware that this lesson is focused on using the APIs from the Support Library, which
use a specific package signature and sometimes slightly different API names than the versions
included in the platform.</p>
<h2 id="Create">Create a Fragment Class</h2>
<p>To create a fragment, extend the {@link android.support.v4.app.Fragment} class, then override
key lifecycle methods to insert your app logic, similar to the way you would with an {@link
android.app.Activity} class.</p>
<p>One difference when creating a {@link android.support.v4.app.Fragment} is that you must use the
{@link android.support.v4.app.Fragment#onCreateView onCreateView()} callback to define the layout.
In fact, this is the only callback you need in order to get a fragment running. For
example, here's a simple fragment that specifies its own layout:</p>
<pre>
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.ViewGroup;
public class ArticleFragment extends Fragment {
&#64;Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
return inflater.inflate(R.layout.article_view, container, false);
}
}
</pre>
<p>Just like an activity, a fragment should implement other lifecycle callbacks that allow you to
manage its state as it is added or removed from the activity and as the activity transitions
between its lifecycle states. For instance, when the activity's {@link
android.app.Activity#onPause()} method is called, any fragments in the activity also receive a call
to {@link android.support.v4.app.Fragment#onPause()}.</p>
<p>More information about the fragment lifecycle and callback methods is available in the <a
href="{@docRoot}guide/topics/fundamentals/fragments.html">Fragments</a> developer guide.</p>
<h2 id="AddInLayout">Add a Fragment to an Activity using XML</h2>
<p>While fragments are reusable, modular UI components, each instance of a {@link
android.support.v4.app.Fragment} class must be associated with a parent {@link
android.support.v4.app.FragmentActivity}. You can achieve this association by defining each
fragment within your activity layout XML file.</p>
<p class="note"><strong>Note:</strong> {@link android.support.v4.app.FragmentActivity} is a
special activity provided in the Support Library to handle fragments on system versions older than
API level 11. If the lowest system version you support is API level 11 or higher, then you can use a
regular {@link android.app.Activity}.</p>
<p>Here is an example layout file that adds two fragments to an activity when the device
screen is considered "large" (specified by the <code>large</code> qualifier in the directory
name).</p>
<p><code>res/layout-large/news_articles.xml:</code></p>
<pre>
&lt;LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
&lt;fragment android:name="com.example.android.fragments.HeadlinesFragment"
android:id="@+id/headlines_fragment"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent" />
&lt;fragment android:name="com.example.android.fragments.ArticleFragment"
android:id="@+id/article_fragment"
android:layout_weight="2"
android:layout_width="0dp"
android:layout_height="match_parent" />
&lt;/LinearLayout>
</pre>
<p class="note"><strong>Tip:</strong> For more information about creating layouts for different
screen sizes, read <a href="{@docRoot}training/multiscreen/screensizes.html">Supporting Different
Screen Sizes</a>.</p>
<p>Here's how an activity applies this layout:</p>
<pre>
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
public class MainActivity extends FragmentActivity {
&#64;Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.news_articles);
}
}
</pre>
<p class="note"><strong>Note:</strong> When you add a fragment to an activity layout by defining
the fragment in the layout XML file, you <em>cannot</em> remove the fragment at runtime. If you plan
to swap your fragments in and out during user interaction, you must add the fragment to the activity
when the activity first starts, as shown in the next lesson.</p>

196
docs/html/training/basics/fragments/fragment-ui.jd Normal file
View File

@@ -0,0 +1,196 @@
page.title=Building a Flexible UI
parent.title=Building a Dynamic UI with Fragments
parent.link=index.html
trainingnavtop=true
previous.title=Create a Fragment
previous.link=creating.html
next.title=Communicating with Other Fragments
next.link=communicating.html
@jd:body
<div id="tb-wrapper">
<div id="tb">
<h2>This lesson teaches you to</h2>
<ol>
<li><a href="#AddAtRuntime">Add a Fragment to an Activity at Runtime</a></li>
<li><a href="#Replace">Replace One Fragment with Another</a></li>
</ol>
<h2>You should also read</h2>
<ul>
<li><a href="{@docRoot}guide/topics/fundamentals/fragments.html">Fragments</a></li>
<li><a href="{@docRoot}guide/practices/tablets-and-handsets.html">Supporting Tablets and
Handsets</a></li>
</ul>
<h2>Try it out</h2>
<div class="download-box">
<a href="http://developer.android.com/shareables/training/FragmentBasics.zip"
class="button">Download the sample</a>
<p class="filename">FragmentBasics.zip</p>
</div>
</div>
</div>
<p>When designing your application to support a wide range of screen sizes, you can reuse your
fragments in different layout configurations to optimize the user experience based on the available
screen space.</p>
<p>For example, on a handset device it might be appropriate to display just one fragment at a time
for a single-pane user interface. Conversely, you may want to set fragments side-by-side on a
tablet which has a wider screen size to display more information to the user.</p>
<img src="{@docRoot}images/training/basics/fragments-screen-mock.png" alt="" />
<p class="img-caption"><strong>Figure 1.</strong> Two fragments, displayed in different
configurations for the same activity on different screen sizes. On a large screen, both fragment
fit side by side, but on a handset device, only one fragment fits at a time so the fragments must
replace each other as the user navigates.</p>
<p>The {@link android.support.v4.app.FragmentManager} class provides methods that allow you to add,
remove, and replace fragments to an activity at runtime in order to create a dynamic experience.</p>
<h2 id="AddAtRuntime">Add a Fragment to an Activity at Runtime</h2>
<p>Rather than defining the fragments for an activity in the layout file&mdash;as shown in the
<a href="creating.html">previous lesson</a> with the {@code &lt;fragment>} element&mdash;you can add
a fragment to the activity during the activity runtime. This is necessary
if you plan to change fragments during the life of the activity.</p>
<p>To perform a transaction such as add or
remove a fragment, you must use the {@link android.support.v4.app.FragmentManager} to create a
{@link android.support.v4.app.FragmentTransaction}, which provides APIs to add, remove, replace,
and perform other fragment transactions.</p>
<p>If your activity allows the fragments to be removed and replaced, you should add the
initial fragment(s) to the activity during the activity's
{@link android.app.Activity#onCreate onCreate()} method.</p>
<p>An important rule when dealing with fragments&mdash;especially those that you add at
runtime&mdash;is that the fragment must have a container {@link android.view.View} in the layout in
which the fragment's layout will reside.</p>
<p>The following layout is an alternative to the layout shown in the <a
href="creating.html">previous lesson</a> that shows only one fragment at a time. In order to replace
one fragment with another, the activity's layout
includes an empty {@link android.widget.FrameLayout} that acts as the fragment container.</p>
<p>Notice that the filename is the same as the layout file in the previous lesson, but the layout
directory does <em>not</em> have the <code>large</code> qualifier, so this layout is used when the
device screen is smaller than <em>large</em> because the screen does not fit both fragments at
the same time.</p>
<p><code>res/layout/news_articles.xml:</code></p>
<pre>
&lt;FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</pre>
<p>Inside your activity, call {@link
android.support.v4.app.FragmentActivity#getSupportFragmentManager()} to get a {@link
android.support.v4.app.FragmentManager} using the Support Library APIs. Then call {@link
android.support.v4.app.FragmentManager#beginTransaction} to create a {@link
android.support.v4.app.FragmentTransaction} and call {@link
android.support.v4.app.FragmentTransaction#add add()} to add a fragment.</p>
<p>You can perform multiple fragment transaction for the activity using the same {@link
android.support.v4.app.FragmentTransaction}. When you're ready to make the changes, you must call
{@link android.support.v4.app.FragmentTransaction#commit()}.</p>
<p>For example, here's how to add a fragment to the previous layout:</p>
<pre>
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
public class MainActivity extends FragmentActivity {
&#64;Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.news_articles);
// Check that the activity is using the layout version with
// the fragment_container FrameLayout
if (findViewById(R.id.fragment_container) != null) {
// However, if we're being restored from a previous state,
// then we don't need to do anything and should return or else
// we could end up with overlapping fragments.
if (savedInstanceState != null) {
return;
}
// Create an instance of ExampleFragment
HeadlinesFragment firstFragment = new HeadlinesFragment();
// In case this activity was started with special instructions from an Intent,
// pass the Intent's extras to the fragment as arguments
firstFragment.setArguments(getIntent().getExtras());
// Add the fragment to the 'fragment_container' FrameLayout
getSupportFragmentManager().beginTransaction()
.add(R.id.fragment_container, firstFragment).commit();
}
}
}
</pre>
<p>Because the fragment has been added to the {@link android.widget.FrameLayout} container at
runtime&mdash;instead of defining it in the activity's layout with a {@code &lt;fragment>}
element&mdash;the activity can remove the fragment and replace it with a different one.</p>
<h2 id="Replace">Replace One Fragment with Another</h2>
<p>The procedure to replace a fragment is similar to adding one, but requires the {@link
android.support.v4.app.FragmentTransaction#replace replace()} method instead of {@link
android.support.v4.app.FragmentTransaction#add add()}.</p>
<p>Keep in mind that when you perform fragment transactions, such as replace or remove one, it's
often appropriate to allow the user to navigate backward and "undo" the change. To allow the user
to navigate backward through the fragment transactions, you must call {@link
android.support.v4.app.FragmentTransaction#addToBackStack addToBackStack()} before you commit the
{@link android.support.v4.app.FragmentTransaction}.</p>
<p class="note"><strong>Note:</strong> When you remove or replace a fragment and add the transaction
to the back stack, the fragment that is removed is stopped (not destroyed). If the user navigates
back to restore the fragment, it restarts. If you <em>do not</em> add the transaction to the back
stack, then the fragment is destroyed when removed or replaced.</p>
<p>Example of replacing one fragment with another:</p>
<pre>
// Create fragment and give it an argument specifying the article it should show
ArticleFragment newFragment = new ArticleFragment();
Bundle args = new Bundle();
args.putInt(ArticleFragment.ARG_POSITION, position);
newFragment.setArguments(args);
FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
// Replace whatever is in the fragment_container view with this fragment,
// and add the transaction to the back stack so the user can navigate back
transaction.replace(R.id.fragment_container, newFragment);
transaction.addToBackStack(null);
// Commit the transaction
transaction.commit();
</pre>
<p>The {@link android.support.v4.app.FragmentTransaction#addToBackStack addToBackStack()} method
takes an optional string parameter that specifies a unique name for the transaction. The name isn't
needed unless you plan to perform advanced fragment operations using the {@link
android.support.v4.app.FragmentManager.BackStackEntry} APIs.</p>

74
docs/html/training/basics/fragments/index.jd Normal file
View File

@@ -0,0 +1,74 @@
page.title=Building a Dynamic UI with Fragments
trainingnavtop=true
startpage=true
next.title=Using the Android Support Library
next.link=support-lib.html
@jd:body
<div id="tb-wrapper">
<div id="tb">
<h2>Dependencies and prerequisites</h2>
<ul>
<li>Basic knowledge of the Activity lifecycle (see <a
href="{@docRoot}training/basics/activity-lifecycle/index.html">Managing the Activity
Lifecycle</a>)</li>
<li>Experience building <a href="{@docRoot}guide/topics/ui/declaring-layout.html">XML
layouts</a></li>
</ul>
<h2>You should also read</h2>
<ul>
<li><a href="{@docRoot}guide/topics/fundamentals/fragments.html">Fragments</a></li>
<li><a href="{@docRoot}guide/practices/tablets-and-handsets.html">Supporting Tablets and
Handsets</a></li>
</ul>
<h2>Try it out</h2>
<div class="download-box">
<a href="http://developer.android.com/shareables/training/FragmentBasics.zip"
class="button">Download the sample</a>
<p class="filename">FragmentBasics.zip</p>
</div>
</div>
</div>
<p>To create a dynamic and multi-pane user interface on Android, you need to encapsulate
UI components and activity behaviors into modules that you can swap into and out of
your activities. You can create these modules with the {@link android.app.Fragment} class, which
behaves somewhat like a nested activity that can define its own layout and manage its own
lifecycle.</p>
<p>When a fragment specifies its own layout, it can be configured in different combinations with
other fragments inside an activity to modify your layout configuration for different screen
sizes (a small screen might show one fragment at a time, but a large screen can show two or
more).</p>
<p>This class shows you how to create a dynamic user experience with fragments and optimize your
app's user experience for devices with different screen sizes, all while continuing to support
devices running versions as old as Android 1.6.</p>
<h2>Lessons</h2>
<dl>
<dt><b><a href="support-lib.html">Using the Android Support Library</a></b></dt>
<dd>Learn how to use more recent framework APIs in earlier versions of Android by bundling
the Android Support Library into your app.</dd>
<dt><b><a href="creating.html">Creating a Fragment</a></b></dt>
<dd>Learn how to build a fragment and implement basic behaviors within its callback
methods.</dd>
<dt><b><a href="fragment-ui.html">Building a Flexible UI</a></b></dt>
<dd>Learn how to build your app with layouts that provide different fragment configurations for
different screens.</dd>
<dt><b><a href="communicating.html">Communicating with Other Fragments</a></b></dt>
<dd>Learn how to set up communication paths from a fragment to the activity and other
fragments.</dd>
</dl>

86
docs/html/training/basics/fragments/support-lib.jd Normal file
View File

@@ -0,0 +1,86 @@
page.title=Using the Support Library
parent.title=Building a Dynamic UI with Fragments
parent.link=index.html
trainingnavtop=true
next.title=Creating a Fragment
next.link=creating.html
@jd:body
<div id="tb-wrapper">
<div id="tb">
<h2>This lesson teaches you to</h2>
<ol>
<li><a href="#Setup">Set Up Your Project With the Support Library</a></li>
<li><a href="#Apis">Import the Support Library APIs</a></li>
</ol>
<h2>You should also read</h2>
<ul>
<li><a href="{@docRoot}sdk/compatibility-library.html">Support Library</a></li>
</ul>
</div>
</div>
<p>The Android <a href="{@docRoot}sdk/compatibility-library.html">Support Library</a> provides a JAR
file with an API library that allow you to use some of the more recent Android APIs in your app
while running on earlier versions of Android. For instance, the Support Library provides a version
of the {@link android.app.Fragment} APIs that you can use on Android 1.6 (API level 4) and
higher.</p>
<p>This lesson shows how to set up your app to use the Support Library in order to use fragments
to build a dynamic app UI.</p>
<h2 id="Setup">Set Up Your Project With the Support Library</h2>
<div class="figure" style="width:527px">
<img src="{@docRoot}images/training/basics/sdk-manager.png" alt="" />
<p class="img-caption"><strong>Figure 1.</strong> The Android SDK Manager with the
Android Support package selected.</p>
</div>
<p>To set up your project:</p>
<ol>
<li>Downlad the Android Support package using the SDK Manager</li>
<li>Create a <code>libs</code> directory at the top level of your Android project.</li>
<li>Locate the JAR file for the library you want to use and copy it into the <code>libs/</code>
directory.
<p>For example, the library that supports API level 4 and up is located at
<code>&lt;sdk>/extras/android/support/v4/android-support-v4.jar</code>.</p></li>
<li>Update your manifest file to set the minimum API level to <code>4</code> and the target
API level to the latest release:
<pre>&lt;uses-sdk android:minSdkVersion="4" android:targetSdkVersion="15" /></pre>
</li>
</ol>
<h2 id="Apis">Import the Support Library APIs</h2>
<p>The Support Library includes a variety of APIs that were either added in recent versions of
Android or don't exist in the platform at all and merely provide additional support to you when
developing specific application features.</p>
<p>You can find all the API reference documentation for the Support Library included in the
platform docs in the {@link android.support.v4} package. For which API references are available
at {@link android.support.v4}.</p>
<div class="warning"><p><strong>Warning:</strong> To be sure that you don't accidentally use new
APIs on an older system version, be certain that you import the {@link
android.support.v4.app.Fragment} class and related APIs from the {@link android.support.v4.app}
package:</p>
<pre>
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
...
</pre>
</div>
<p>When creating an activity that hosts fragments while using the Support Library, you must also
extend the {@link android.support.v4.app.FragmentActivity} class instead of the traditional {@link
android.app.Activity} class. You'll see sample code for the fragment and activity in the next
lesson.</p>