Laborator

Fragments
Informații despre modul de utilizare al elementelor de tip Fragments se pot obține de la adresa:

http://developer.android.com/guide/components/fragments.html

Pentru exemplificare, urmați pașii prezentați mai jos (are la bază exemplul prezentat la adresa de mai
sus):

Pas 1

Creăm un nou proiect cu numele Ex_Fragments și FragmentActivity.

Pas 2

In FragmentActivity.java vom avea

public class FragmentActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_fragment);
}
}

Pas 3

Pentru zona de “import” vom avea:

import android.app.FragmentTransaction;
import android.app.ListFragment;
import android.content.Intent;
import android.os.Bundle;
import android.app.Activity;
import android.app.Fragment;
import android.content.res.Configuration;
import android.support.v7.app.AppCompatActivity;
import android.util.TypedValue;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.widget.ScrollView;
import android.widget.TextView;

Pas 4

In același folder cu FragmentActivity.java vom crea fișierul Resurse.java în care vom defini tablourile ce
vor conține titlurile și valorile de afișat.

1 M. Apetrii
public final class Resurse {
/**
* tabloul static cu lista titlurilor.
*/
public static final String[] TITLURI =
{
"TITLU I",
"TITLU II",
"TITLU III",
"TITLU IV",
"TITLU V"
};
/**
* tabloul static cu textele asociate titlurilor
*/
public static final String[] DETALII =
{
"Text asociat lui TITLU I.",
"Text asociat lui TITLU II.",
"Text asociat lui TITLU III.",
"Text asociat lui TITLU IV.",
"Text asociat lui TITLU V."
};
}

Pas 6

Vom declara în clasa FragmentActivity fragment-ul din stânga, lista titlurilor.

public static class FragmentTitluri extends ListFragment {

@Override
public void onActivityCreated(Bundle savedInstanceState) {
super.onActivityCreated(savedInstanceState);

// Populam lista dintr-un tablou static.

setListAdapter(new ArrayAdapter<String>(getActivity(),
android.R.layout.simple_list_item_activated_1,
mape3.ex_fragments.Resurse.TITLURI));

}
}

Pas 7

În folderul “layout” vom da fișierului activity_fragment.xml conținutul următor (pentru modul Portret)

<?xml version="1.0" encoding="utf-8"?>

<merge xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<fragment class="mape3.ex_fragments.FragmentActivity$FragmentTitluri"
android:id="@+id/titluri"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</merge>

2 M. Apetrii
Pas 8

În folderul “layout-land” vom da fișierului activity_fragment.xml conținutul următor (pentru modul Landscape)

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">

<fragment class="mape3.ex_fragments.FragmentActivity$FragmentTitluri"
android:id="@+id/titluri" android:layout_weight="1"
android:layout_width="0px" android:layout_height="match_parent" />

<FrameLayout android:id="@+id/detalii" android:layout_weight="1"

android:layout_width="0px" android:layout_height="match_parent"
android:background="?android:attr/detailsElementBackground" />
</LinearLayout>

Pas 9

Testam proiectul până în acest moment. În timpul testului, emulatorul poate comuta între modurile
Portret/Landscape prin combinația de taste Ctrl+F11.

Pas 10

În clasa FragmentTitluri definim variabilele:

int elementSelectat = 0;
boolean tipLandscape;

Pas 11

Funcției onActivityCreated din clasa FragmentTitluri îi adăugăm codul:

// Testam daca este vizibil Activity-ul definit pentru modul Landscape

View cadruDetalii = getActivity().findViewById(R.id.detalii);
tipLandscape = cadruDetalii != null && cadruDetalii.getVisibility() ==
View.VISIBLE;

if (savedInstanceState != null) {
// determinam elenmentul selectat.
elementSelectat = savedInstanceState.getInt("curChoice", 0);
}

if (tipLandscape) {
// afisam detalii despre elementul selectat
getListView().setChoiceMode(ListView.CHOICE_MODE_SINGLE);
afiseazaDetalii(elementSelectat);
}

Pas 12

În clasa FragmentTitluri definim funcția afiseazaDetalii

3 M. Apetrii
/**
* functia care afiseaza detalii despre elementul selectat
*/
void afiseazaDetalii(int index) {
elementSelectat = index;
if (tipLandscape) {
// evidentiem elementul selectat
getListView().setItemChecked(index, true);
// ....

} else {
// ....
}
}

Pas 13

Testam proiectul până în acest moment comutând între modurile Portret/Landscape.

Pas 14

Vom declara în clasa FragmentActivity fragment-ul din dreapta care va contine detalii despre elementul selectat.

public static class FragmentDetalii extends Fragment {

/**
* Cream o noua instanta pentru FragmentDetalii care va afisa textul
corespunzator lui index.
*/
public static FragmentDetalii newInstance(int index) {
FragmentDetalii f = new FragmentDetalii();
// preluam argumentele
Bundle args = new Bundle();
args.putInt("index", index);
f.setArguments(args);
return f;
}

public int daIndexSelectat() {

return getArguments().getInt("index", 0);
}

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
if (container == null) {
return null;
}
//cream elementele pentru vizualizare
ScrollView scroller = new ScrollView(getActivity());
TextView text = new TextView(getActivity());
int padding =
(int)TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,
4, getActivity().getResources().getDisplayMetrics());
text.setPadding(padding, padding, padding, padding);
scroller.addView(text);
text.setText(Resurse.DETALII[daIndexSelectat()]);
return scroller;
}
}

4 M. Apetrii
Pas 15

În clasa FragmentTitluri modificăm funcția afiseazaDetalii

void afiseazaDetalii(int index) {

elementSelectat = index;
if (tipLandscape) {
// evidentiem elementul selectat
getListView().setItemChecked(index, true);

// Verificam ce element este deja afisat si il inlocuim daca este

nevoie
FragmentDetalii detalii = (FragmentDetalii)
getFragmentManager().findFragmentById(R.id.detalii);
if (detalii == null || detalii.daIndexSelectat() != index) {
// Construim un fragment nou
detalii = FragmentDetalii.newInstance(index);

// inlocuim fragmentul existent cu cel nou.

FragmentTransaction ft =
getFragmentManager().beginTransaction();
ft.replace(R.id.detalii, detalii);
ft.setTransition(FragmentTransaction.TRANSIT_FRAGMENT_FADE);
ft.commit();
}
} else {
// ...
}
}

Pas 16

Testam proiectul până în acest moment comutând între modurile Portret/Landscape.

Pas 17

În clasa FragmentTitluri adăugăm metodele

@Override
public void onSaveInstanceState(Bundle outState) {
super.onSaveInstanceState(outState);
outState.putInt("curChoice", elementSelectat);
}

@Override
public void onListItemClick(ListView l, View v, int position, long id) {
afiseazaDetalii(position);
}

Pas 18

Testam proiectul până în acest moment comutând între modurile Portret/Landscape.

Pas 19

Pentru vizualizarea detaliilor și în modul Portret vom crea în FragmentActivity un nou Activity

5 M. Apetrii
/**
* Este al doilea "Activity" care se va afisa cand ecranul nu este suficient
de lat (modul Portret).
*/
public static class DetaliiTitluActivity extends Activity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);

if (getResources().getConfiguration().orientation==
Configuration.ORIENTATION_LANDSCAPE) {
// nu este necesar in modul Landscape.
finish();
return;
}

if (savedInstanceState == null) {
// facem legatura cu fragmentul FragmentDetalii.
FragmentDetalii detalii = new FragmentDetalii();
detalii.setArguments(getIntent().getExtras());

getFragmentManager().beginTransaction().add(android.R.id.content,
detalii).commit();
}
}
}

Pas 20

Adăugăm acest nou Activity în AndroidManifest.xml

<activity android:name=".FragmentActivity$DetaliiTitluActivity" />

Pas 21

În funcția afiseazăDetalii, pe ramura else adăugăm

// Lansam o noua activitate pentru a afisa afragentul cu detalii

// despre elementul selectat.
Intent intent = new Intent();
intent.setClass(getActivity(), DetaliiTitluActivity.class);
intent.putExtra("index", index);
startActivity(intent);

Pas 22

Testam proiectul în forma finală, comutând între modurile Portret/Landscape.

6 M. Apetrii