Android Development. Mikko Ahonen Skype: mikko.emicode

Transcription

1 Android Development Mikko Ahonen Skype: mikko.emicode

2 Fragments Example Examples developer site:

3 Create new project Project Name and Application Name: FragmentExample Package: com.example.fragmentexample Targets: Api16 and min: API8 Activity Name: MainActivity Layout Name: news_articles Title: MainActivity

4 Create new xml file in res/layout folder called article_view.xml Create new folder in res folder called layout-large This is folder for large screen devices Android automatically check this folder before normal layout folder Copy news_articles.xml in layoutlarge folder Layout-large folder will contain one layout with two fragments inside. Layout folder will contain two fragments in separate folder Example

5 Edit article_view.xml to show textview <?xml version="1.0" encoding="utf-8"?> <TextView xmlns:android=" android:layout_width="match_parent" android:layout_height="match_parent" android:padding="16dp" android:textsize="18sp" />

6 Change MainActivity to extend as FragmentActivity Import android.support.v4.app.fragmentactivity; This class can now handles fragments and is working as Activity Create class ArticleFragment that extends Fragment This is our Fragment class, that handles our article public View oncreateview(layoutinflater inflater, ViewGroup container, Bundle savedinstancestate) { // Inflate the layout for this fragment return inflater.inflate(r.layout.article_view, container, false);

7 Now edit news_articles we copied in layout-large folder Now we create two fragments side by side Important is to name fragments : your.package.name.fragment name Fragment name in package is same as java file for the fragment We also greate fragment view for articles See next page

8 <LinearLayout xmlns:android=" android:layout_width="fill_parent" android:layout_height="fill_parent" > <fragment android:name="com.example.fragmentexample.headlinesfragment" android:layout_weight="1" android:layout_width="0dp" android:layout_height="match_parent" /> <fragment android:name="com.example.fragmentexample.articlefragment" android:layout_weight="2" android:layout_width="0dp" android:layout_height="match_parent" /> </LinearLayout>

9 Now edit news_articles.xml in layout folder: This layout is used when screen is not large XML file <FrameLayout xmlns:android=" res/android" android:layout_width="match_parent" android:layout_height="match_parent" /> Now we have frame layout for smaller views If you run your app now, it should compile without errors

10 Now we make our code (MainActivity.java) to use FrameLayout Add in oncreatemethod() (Don't worry about errors right now): if (findviewbyid(r.id.fragment_container)!= null) { if (savedinstancestate!= null) { return; HeadlinesFragment firstfragment = new HeadlinesFragment(); firstfragment.setarguments(getintent().getextras()); getsupportfragmentmanager().begintransaction().add(r.id.fragment_container, firstfragment).commit();

11 Now in main activity we have Layout container checker First we check is our fragmentcontainer alive and if it is we don't want to create new fragments there. We just show fragment allredy created If fragments are not present app creates HeadlinesFragment firstfragment.setarguments(getintent().getextras()); This adds intents extras in fragment if there is any extras in intent getsupportfragmentmanager().begintransaction().add(r.id.fragment_container, firstfragment).commit(); This adds fragment in to the Fragment container

12 Crate new class in scr folder called HeadlinesFragment that extends ListFragment This is special fragment shat show user a ListView Things we need to add in this class (These come later): Add interface for Container activity This is for container to get list positions OnAttach() method (This is same as oncreate but for fragment)

13 Create class Ipsum.java Copy content in Ipsum.java static String[] Headlines = { ; "Article One", "Article Two" This is helper class that simpy contains string list for our list object

14 In HeadlinesFragment add in oncreate method support for older devices int layout = Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB? android.r.layout.simple_list_item_activated_1 : android.r.layout.simple_list_item_1; And populate our ListView setlistadapter(new ArrayAdapter<String>(getActivity(), layout, Ipsum.Headlines)); Run and compile

15 Create interface in HeadLinesFragment OnHeadlineSelectedListener mcallback; public interface OnHeadlineSelectedListener { public void onarticleselected(int position); This is interface for MainActivity to get access in HeadlineFragment's on click events Later we add this onarticleselected in main activity

16 Now we implement our interface in HeadLinesFragment's onattach method. Exeption comes if you don't have implemention in main public void onattach(activity activity) { super.onattach(activity); try { mcallback = (OnHeadlineSelectedListener) activity; catch (ClassCastException e) { throw new ClassCastException(activity.toString() + " must implement OnHeadlineSelectedListener");

17 Last thing we need to do in HeadlinesFragment is on click listener that sends on cliks to our public void onlistitemclick(listview l, View v, int position, long id) { mcallback.onarticleselected(position); getlistview().setitemchecked(position, true); Positions and other variables comes from ListView

18 To finish headline implemention add implemntion to main activity public class MainActivity extends FragmentActivity implements HeadlinesFragment.OnHeadlineSelectedListener Add unimplemented public void onarticleselected(int position) { Run and compile

19 Headlines fragment is now done. Next we need to do ArticleFragment Create new class called ArticleFragment and make it extend Fragment class Create oncreateview to our Article public View oncreateview(layoutinflater inflater, ViewGroup container, Bundle savedinstancestate){ return inflater.inflate(r.layout.article_view, container, false); This is method is called when view is created. In our case it is article text view

20 Now add two global variables in ArticleFragment class final static String ARG_POSITION = "position"; int mcurrentposition = -1; ARG_POSITION is argument to get position integer from intents extras mcurrentposition gets intents position integer. Position is position of our ListView

21 Now add functionality in ArticleFragment.class for onstart method Create onstart method and add functionality to get values from public void onstart() { super.onstart(); Bundle args = getarguments(); if (args!= null) { updatearticleview(args.getint(arg_position)); else if (mcurrentposition!= -1) { updatearticleview(mcurrentposition);

22 Create update method for ArticleFragment. This is used when article updated public void updatearticleview(int position) { TextView article = (TextView) getactivity().findviewbyid(r.id.article); article.settext(ipsum.articles[position]); mcurrentposition = position;

23 Add new string array in Ipsum.java file. Copy or create your own content static String[] Articles = { "Article One\n\nExcepteur pour-over occaecat squid biodiesel umami gastropub, nulla laborum salvia dreamcatcher fanny pack. Ullamco culpa retro ea, trust fund excepteur eiusmod direct trade banksy nisi lo-fi cray messenger bag. Nesciunt esse carles selvage put a bird on it gluten-free, wes anderson ut trust fund twee occupy viral. Laboris small batch scenester pork belly, leggings ut farmto-table aliquip yr nostrud iphone viral next level. Craft beer dreamcatcher pinterest truffaut ethnic, authentic brunch. Esse single-origin coffee banksy do next level tempor. Velit synth dreamcatcher, magna shoreditch in american apparel messenger bag narwhal PBR ennui farm-to-table.", "Article Two\n\nVinyl williamsburg non velit, master cleanse four loko banh mi. Enim kogi keytar trust fund pop-up portland gentrify. Non ea typewriter dolore deserunt Austin. Ad magna ethical kogi mixtape next level. Aliqua pork belly thundercats, ut pop-up tattooed dreamcatcher kogi accusamus photo booth irony portland. Semiotics brunch ut locavore irure, enim etsy laborum stumptown carles gentrify post-ironic cray. Butcher 3 wolf moon blog synth, vegan carles odd future." ;

24 Now we create state saving for our fragment Add method onsavedinstancestate and save our public void onsaveinstancestate(bundle outstate) { super.onsaveinstancestate(outstate); outstate.putint(arg_position, mcurrentposition); OnCreate method add check for our state if (savedinstancestate!= null) { mcurrentposition = savedinstancestate.getint(arg_position);

25 Now we finalize our main activity Create method onarticleselected if you don't have it here public void onarticleselected(int position) { Get articlefragment from fragment manager. Create in onarticleselected method ArticleFragment articlefrag = (ArticleFragment) getsupportfragmentmanager().findfragmentbyid(r.id.article_fragment);

26 Create article fragment handling inside onarticleselected method if (articlefrag!= null) { else { articlefrag.updatearticleview(position); ArticleFragment newfragment = new ArticleFragment(); Bundle args = new Bundle(); args.putint(articlefragment.arg_position, position); newfragment.setarguments(args); FragmentTransaction transaction = getsupportfragmentmanager().begintransaction(); transaction.replace(r.id.fragment_container, newfragment); transaction.addtobackstack(null); transaction.commit();

27 Bundle is class that holds all kind of settings and state information as a String format. In bundle you can save your states and return to them. PutInt() adds integer in bundle and setarguments sets them in bundle Fragments transaction handles fragment changes