MobAppDev (Fall 2014): More on Fragments, Landscape & Portrait Modes, Fragments with and w/o Videos
-
Upload
vladimir-kulyukin -
Category
Technology
-
view
104 -
download
0
description
Transcript of MobAppDev (Fall 2014): More on Fragments, Landscape & Portrait Modes, Fragments with and w/o Videos
MobAppDev
More on Fragments
Vladimir Kulyukin
www.vkedco.blogspot.com
Outline
● Fragments & Activities● Fragment Use● Fragment's Callbacks● Deep Code Dive into Fragments with & w/o
Videos
Fragments & Activities
Fragment Lifecycle
source image at http://developer.android.com/guide/components/fragments.html
Activity vs Fragment Lifecycles
source image at http://developer.android.com/guide/components/fragments.html
Fragments As Sub-Activities
● Fragments can be viewed as sub-activities● As the sizes of mobile screens grew larger, mobile
developers wanted to run multiple activities on the same screen
● Running multiple activities on the same screen was the main motivation for the development of fragments
Fragments & Activities Side by Side
● Fragments are contained within a specific activity● Fragments exists only in the context of a specific activity● Fragments cannot be used without a specific activity● There is NO need to convert all activity widgets into
fragments: fragments can exist with other widgets● Fragments differ from activities in terms of saving and
restoring states
Fragments & Activities Side By Side● Activity is a subclass of Context● Fragment is not an extension of Activity, it is a subclass
of Object● Fragments can have a view hierarchy to interact with
the user● Fragment's view hierarchy must attach to the view
hierarchy of its activity
Fragments & Back Button● When the user presses the back button in an activity,
the user is taken out of that activity: onPause() & onStop() are called
● If an activity has fragments, active fragments can pile up on a fragment stack
● When the user presses the back button in a fragment, the user is not taken out of the activity but remains in its context
Fragment Use
● If there is a UI component/functionality that can be used on multiple devices and multiple screen sizes: fragments can be attached to activities on large screens and detached from activities on small screens
● If there is a UI component/functionality that must work in multiple rotation modes, e.g., landscape vs. portrait
● Each fragment may have its own layout
Fragment Construction● Fragments receive Bundle objects as their initialization arguments
● Fragments can be saved and restored by the system automatically: the developer must override onSaveInstanceState(Bundle)
● When the system restores the fragment, it calls the default constructor and then passes the Bundle to the constructed Fragment: this Bundle is passed to onCreate(), onInflate(), onCreateView(), and onActivityCreated()
● It is important to remember that the initialization Bundle (the one used in fragment construction) and the restoration Bundle (the one used in onSaveInstanceState()) are two different objects
Developer's Impertatives● When developing a fragment, the developer must
Define a default constructor: static newInstance() method
Add a bundle of arguments to the constructed fragments
Use the bundle's values in fragment callbacks to restore the fragment's state
Fragment's Parent Activity● Activity uses a FragmentManager to manage its
fragment● Since a Fragment exists only in the context of a specific
Activity, it can get to its FragmentManager● Since a Fragment exists only in the context of a specific
Activity, it can get to its parent Activity's resources (e.g., through the parent Activity's Resources object)
Fragment's Callbacks
Fragment's Callbacks● Constructors: newInstace() & newInstance(Bundle)● onInflate(): layout view inflation if one is specified● onAttach(): is called after fragment is associated with its
parent Activity● onCreate(): code that relies on the existence of the activity's
view hierarchy● onCreateView(): constructs and returns the view of the
fragment
Fragment's Callbacks● onActivityCreated(): called when the parent's activity completes its
onCreate(); activity's view and the fragment's view have now been fully constructed
● onStart(): The fragment is now visible to the user● onPause(): this callback occurs simultaneously with the parent's
onPause()● onSaveInstanceState(): this method takes a Bundle object that is
persisted by Android and passed to a restored Fragment
Fragment's Callbacks● onStop(): this method is tied to the parent's onStop() called when
the parent's activity completes its onCreate(); activity's view and the fragment's view have now been fully constructed
● onDestroyView(): This method is called when the view created in onCreateView() is being destroyed
● onDestroy(): the fragment has no view, but is still findable● onDetach(): this method is called to untie the fragment from the
parent's activity; all its resources should be released
Deep Code Dive
Rumi's Quatrains in Fragments with & without Videos
Application Requirements
● Develop two applications that use fragments to display texts of several quatrains by Rumi
● Both applications should work in two modes: landscape and portrait● In portrait mode, only one quatrain can be displayed● In landscape mode, the user can select the quatrains to display● The second application should, in addition to displaying quatrain
texts, play specific videos
Source Code
● Source code of the first application is at https://github.com/VKEDCO/Fragments/tree/master/RumiQuatrainFragments
● Source code of the second application is at
https://github.com/VKEDCO/Fragments/tree/master/RumiQuatrainVideoFragments
● The repos contain only the source code (Java and XML files) not Eclipse projects; the projects were too large, especially the 2nd one with videos, so I decided not to upload projects to save space
Application Class Contents
● RumiQuatrainMainActivity.java – main activity● QuatrainNumberListFragment.java – ListFragment associated with
main activity● QuatrainTextDisplayActivity.java – host activity for
QuatrainTextDisplayFragment.java● QuatrainTextDisplayFragment.java – fragment to display quatrain
texts● The texts of the quatrains and their numbers are in quatrains.xml
RumiQuatrainMainActivity.java
● The real workhorse of is displayQuatrainText(int quatrain_index)● It finds a fragment by id and replaces it with a newly created fragment● It also shows how to check the orientation● If the orientation is landscape, then two fragments are displayed● If the orientation is portrait, then a new activity is launched
Sample Screenshots
landscape
portrait
Landscape Mode of RumiQuatrainMainActivity.java
landscape
Landscape Mode in XML<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#555555">
<fragment class="org.vkedco.mobappdev.rumi_quatrain_fragments.QuatrainNumberListFragment"
android:id="@+id/quatrain_number_list" android:layout_weight="1"
android:layout_width="0px"
android:layout_height="match_parent"
android:background="#00550033" />
<FrameLayout
android:id="@+id/quatrain_text" android:layout_weight="2"
android:layout_width="0px"
android:layout_height="match_parent" />
</LinearLayout>
Portrait Mode of RumiQuatrainMainActivity.java
Portrait Mode in XML<?xml version="1.0" encoding="utf-8"?>
<!-- This file is res/layout/main.xml -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<fragment class="org.vkedco.mobappdev.rumi_quatrain_fragments.QuatrainNumberListFragment"
android:id="@+id/quatrain_number_list"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
XML Layout of QuatrainTextDisplayFragment <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="match_parent" >
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="match_parent" >
<ScrollView
android:id="@+id/scvQuatrainText"
android:layout_width="match_parent"
android:layout_height="150dp" >
<TextView
android:id="@+id/tvQuatrainText"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</ScrollView>
</RelativeLayout>
</LinearLayout>
References● http://developer.android.com/guide/components/fragments.html
● S. Komatineni & D. MaClean. Pro Android 4. APRESS
● R. Meier. Pro Android 4 Application Development. WROX