Fragments. Lecture 10

Transcription

1 Fragments Lecture 10

2 Situa2onal layouts Your app can use different layouts in different situa2ons Different device type (tablet vs. phone vs. watch) Different screen size Different orienta2on (portrait vs. landscape) Different country or locale (language, etc.)

3 Situa2on- specific folders Your app will look for resource folder names with suffixes: Screen density (e.g. drawable- hdpi) xhdpi: 2.0 (twice as many pixels/dots per inch) hdpi:1.5 mdpi: 1.0 (baseline) idpi: 0.75 Screen size (e.g. layout- large) Small, normal, large, xlarge Orienta2on (e.g. layout- land) Portrait, landscape

4 Portrait vs. Landscape Layout To create a different layout in landscape mode Create a folder in your project called res/layout- land Place another copy of your ac2vity s layout XML file there Modify it as needed to represent the differences

5 Problem: Redundant Layouts With situa2onal layout you begin to encounter redundancy The layout in one case (e.g. portrait or medium) is very similar to the layout in another case (e.g. landscape or large) You don t want to represent the same XML or Java code mul2ple 2mes or in mul2ple places

6 Situa2onal Layout You some2mes want your code to behave situa2onally In portrait mode, clicking a bu[on should launch a new ac2vity In landscape mode, clicking a bu[on, should launch a new view

7 Fragments A reusable segment of Android UI that can appear in an ac2vity Can help handle different devices and screen sizes Can reuse a common fragment across mul2ple ac2vi2es First added in Android 3.0

8 Fragments

9 Crea2ng a fragment In Android studio, right- click app, click: New - > Fragment - > Fragment(blank) Un- check boxes about Include_methods Now create layout XML and Java event code as in an Ac2vity

10 Using Fragments in ac2vity XML Ac2vity layout XML can include fragments <! ac2vity_name,xml - - > <LinearLayout > <fragment android:name= ClassName1 /> <fragment android:name= ClassName2 /> </LinearLayout>

11 Fragment Life Cycle Fragments have a similar life cycle and events as ac2vi2es Important methods: ona[ach to glue fragment to its surrounding ac2vity oncreate when fragment is loading oncreateview method that must return fragment s root UI view onac2vitycreated method that indicates the enclosing ac2vity is ready onpause when fragment is being lel/exited ondetach just as fragment is being deleted

12

13 Fragment template public class Name extends Fragment public View oncreateview(layoutinflater inflater, ViewGroup vg, Bundle bundle) { //load the GUI layout from the XML return inflater.inflate(r.layout.id,vg,false); public void onac2vitycreated(bundle savedstate) { super.onac2vitycreated(savedstate); // any other GUI ini2aliza2on needed // any other code (e.g. event handling)

14 Fragment vs. ac2vity Fragment code is similar to ac2vity code, with a few changes: Many ac2vity methods aren t present in the fragment, but you can call getac2vity to access the ac2vity the fragment is inside of Bu[on b = (Bu[on) findviewbyid (R.id.but); Bu[on b = (Bu[on) getac2vity().findviewbyid(r.id.but); Some2mes also use getview to refer to the ac2vity s layout Event handlers cannot be a[ached in the XML any more :- < Must be a[ached in Java code instead Passing informa2on to a fragment (via Intent/Bundle) is trickier The fragment must ask its enclosing ac2vity for the informa2on Fragment ini2aliza2on code must be mindful of order of execu2on Does it depend on the surrounding ac2vity being loaded? Etc. Typically move oncreate code to onac2vitycreated

15 Fragment onclick listener Ac2vity <Bu[on android:onclick= onclickb1" /> Fragment <Bu[on /> // in fragment s java file Bu[on b = (Bu[on) getac2vity().findviewbyid(r.id.bu#on1); b.setonclicklistener(new public void onclick(view view) { );

16 Ac2vity that accepts parameters

17 Fragment that accepts parameters

18 Communica2on between fragments One ac2vity might contain mul2ple fragments The fragments may want to talk to each other Use ac2vity s getfragmentmanager method Its findfragmentbyid method can access any fragment that has an id Ac2vity act = getac2vity(); if(act.getresources().getconfigura2on().orienta2on == Configura2on.ORIENTATION_LANDSCAPE) { //update other fragment within this same ac2vity FragmentClass fragment = (FragmentClass) act.getfragmentmanager().findfragmentbyid(r.id.fid); fragment.methodname(parameters);

19 Fragment subclasses DialogFragment a fragment meant to be shown as a dialog box that pops up on the top of the current ac2vity ListFragment a fragment that shows a list of items as its main content PreferenceFragment a fragment whose main content is meant to allow the user to change sevngs for the app

20 Fragment Example 1 public class FragmentPortrait extends Fragment{ public View oncreateview(layoutinflater inflater, ViewGroup container, Bundle savedinstancestate) { // return super.oncreateview(inflater, container, savedinstancestate); return inflater.inflate(r.layout.portrait_fragment, container, false);

21 Fragment Example 1 ac2vity_main.xml file contains two fragments <Rela2veLayout xmlns:android="h<p://schemas.android.com/apk/res/android" xmlns:tools="h<p://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:paddinglec="@dimen/ ac2vity_horizontal_margin" android:paddingright="@dimen/ac2vity_horizontal_margin" android:paddingtop="@dimen/ac2vity_ver2cal_margin" android:paddingbo<om="@dimen/ac2vity_ver2cal_margin" tools:context=".mainac2vity"> <fragment android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/landscape_fragment" /> <fragment android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/portrait_fragment" /> </Rela2veLayout>

22 public class MainAc2vity extends AppCompatAc2vity protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); FragmentManager fragmentmanager = getfragmentmanager(); FragmentTransac2on fragmenttransac2on = fragmentmanager.begintransac2on(); Configura2on configinfo = getresources().getconfigura2on(); // Depending on the screen orientaaon replace with the correct fragment if(configinfo.orienta2on == Configura2on.ORIENTATION_LANDSCAPE){ FragmentLandscape fragmentlandscape = new FragmentLandscape(); fragmenttransac2on.replace(android.r.id.content, fragmentlandscape); else { FragmentPortrait fragmentportrait = new FragmentPortrait(); fragmenttransac2on.replace(android.r.id.content, fragmentportrait); // Schedule for the replacement of the Fragment as soon as possible fragmenttransac2on.commit();

23 Fragment Example 2 MainAc2vity.java ac2vity_main.xml ac2vity_main.xml - > contains one fragment fragment_main.xml MainFragment.java ac2vity_main.xml(land)- > contains two fragments fragment_main.xml fragment_details.xml DetailsFragment.java DetailsAc2vity.java ac2vity_details.xml

24 MainAc2vity.java public class MainAc2vity extends Ac2vity protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.ac<vity_main);

25 ac2vity_main.xml <LinearLayout xmlns:android="h<p://schemas.android.com/apk/res/android" xmlns:tools="h<p://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="top center" android:orienta2on="ver2cal" tools:context=".mainac2vity"> <fragment android:layout_width="match_parent" android:layout_height="match_parent" android:name="com.example.maozheng.fragmenmun.mainfragment" /> </LinearLayout>

26 ac2vity_main.xml(land) </LinearLayout > <fragment android:layout_width="wrap_content" android:layout_height="wrap_content" android:name="com.example.maozheng.fragmenmun.mainfragment" <fragment android:layout_width="wrap_content" android:layout_height="wrap_content" android:name="com.example.maozheng.fragmenmun.detailsfragment" </LinearLayout>

27 DetailsAc2vity.java public class DetailsAc2vity extends Ac2vity protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.ac<vity_details);

28 ac2vity_details.xml <LinearLayout xmlns:android="h<p://schemas.android.com/apk/res/android" xmlns:tools="h<p://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" ac2vity_horizontal_margin" android:gravity="top center" android:orienta2on="ver2cal" tools:context="com.example.maozheng.layoumun.detailsac2vity"> <fragment android:layout_width="match_parent" android:layout_height="match_parent" android:name="com.example.maozheng.fragmenmun.detailsfragment" </LinearLayout>

29 <LinearLayout > <RadioGroup android:orienta2on="horizontal" android:layout_width="wrap_content" android:layout_height="wrap_content"> <RadioBu<on android:text="leo" android:checked="true" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <RadioBu<on android:text="mike" android:layout_width="wrap_content" android:layout_height="wrap_content" /> </RadioGroup> <ImageBu<on android:layout_width="wrap_content" android:layout_height="wrap_content" /> </LinearLayout> fragment_main.xml

30 fragment_details.xml <LinearLayout xmlns:android="h<p://schemas.android.com/apk/res/android" xmlns:tools="h<p://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" ac2vity_horizontal_margin" android:gravity="top center" android:orienta2on="ver2cal" tools:context="com.example.maozheng.layoumun.detailsac2vity"> <TextView android:text="" android:layout_width="wrap_content" android:layout_height="wrap_content" /> </LinearLayout>

31 Fragment Example 2 MainFragment.java /* * Shows more detailed informaaon about the currently selected ninja turtle. * In portrait mode, this pops up a second acavity. * In landscape mode, this updates the DetailsFragment within the same acavity. */ public void showdetailsaboutturtle() { RadioGroup group = (RadioGroup) getac2vity().findviewbyid(r.id.turtle_group); int id = group.getcheckedradiobu[onid(); if (getresources().getconfigura2on().orienta2on == Configura2on.ORIENTATION_LANDSCAPE) { // show in same acavity DetailsFragment frag = (DetailsFragment) getfragmentmanager().findfragmentbyid(r.id.fragment2); frag.setturtleid(id); else { // launch details as its own acavity Intent intent = new Intent(getAc2vity(), DetailsAc2vity.class); intent.putextra("turtle_id", id); startac2vity(intent);

32 Fragment Example 2 MainFragment.java /* * This method is called ajer the containing acavity is done being created. * This is a good place to a#ach event listeners and do other iniaalizaaon. public void onac2vitycreated(bundle savedinstancestate) { super.onac2vitycreated(savedinstancestate); // a#ach event listener to radio bu#on group RadioGroup group = (RadioGroup) getac2vity().findviewbyid(r.id.turtle_group); group.setoncheckedchangelistener(new RadioGroup.OnCheckedChangeListener() public void oncheckedchanged(radiogroup group, int checkedid) { updateturtleimage(); ); // a#ach click event listener to turtle image bu#on ImageBu[on img = (ImageBu[on) getac2vity().findviewbyid(r.id.turtle); img.setonclicklistener(new View.OnClickListener() public void onclick(view v) { showdetailsaboutturtle(); );

33 Fragment Example 2 MainFragment.java /* * Updates which turtle image is showing * based on which radio bu#on is currently checked. */ private void updateturtleimage() { ImageBu[on img = (ImageBu[on) getac2vity().findviewbyid(r.id.turtle); RadioGroup group = (RadioGroup) getac2vity().findviewbyid(r.id.turtle_group); int checkedid = group.getcheckedradiobu[onid(); if (checkedid == R.id.leo) { img.setimageresource(r.drawable.tmntleo); else if (checkedid == R.id.mike) { img.setimageresource(r.drawable.tmntmike); else if (checkedid == R.id.don) { img.setimageresource(r.drawable.tmntdon); else if (checkedid == R.id.raph) { img.setimageresource(r.drawable.tmntraph); if (getresources().getconfigura2on().orienta2on == Configura2on.ORIENTATION_LANDSCAPE) { showdetailsaboutturtle();

34 DetailsFragment.java /* * Sets the acavely selected ninja turtle text based on the given resource ID. */ public void setturtleid(int id) { int index; if (id == R.id.leo) { index = 0; else if (id == R.id.mike) { index = 1; else if (id == R.id.don) { index = 2; else { // if (id == R.id.raph) index = 3; String text = TURTLE_DETAILS[index]; TextView tv = (TextView) getac2vity().findviewbyid(r.id.turtle_info); tv.settext(text);