Android Fragments pe intelesul tuturor

Fragment este o noțiune introdusă în Android 3.0 și facilitează realizarea de interfețe grafice dinamice.  După cum bine se știe Android rulează pe o multitudine de device-uri, mai mari, mai mici, mai rapide, mai puțin rapide și lista poate continua. De cele mai multe ori aceasta diversitate generează și probleme, mai ales la capitolul design. Realizând aplicații care au în componența lor fragmente, problemele de design pot dispărea ca prin minune.

images

Scenariu:

Elementul central al acestui tutorial este reprezentat de realizarea unui exemplu prin intermediul căruia 2 screen-uri, reprezentate de un ListView și un ecran de detalii, vor fi transformate într-un singur view creat pentru device-uri ce au dimensiuni mari, cum ar fi mult prea cunoscutele tablete (sau “măsuțe de cafea”). Sună tentant?! Eu sunt de părere că DA. 🙂

Situaţia iniţială:

Android Fragment

Soluţia obţinută:

Android-Fragment 2

Implementare:

main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="fill_parent"
 android:orientation="vertical" >
 <TextView
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"
 android:background="#858585"
 android:text="@string/hello" />
 <LinearLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 android:orientation="horizontal" >
 <LinearLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
 android:id="@+id/list_frag_layout"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:background="#FFFFFF" >
 <fragment
 android:id="@+id/list_frag"
 android:name="com.pras.frags.CustomListFrag"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:layout_marginRight="5dip" />
 </LinearLayout>
 <LinearLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
 android:id="@+id/player_frag_layout"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:background="#858585" >
 <fragment
 android:id="@+id/player_frag"
 android:name="com.pras.frags.DisplayImageFrag"
 android:layout_width="match_parent"
 android:layout_height="match_parent" />
 </LinearLayout>
 </LinearLayout>
</LinearLayout>

android_fragment_1-180x300

list_item_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:id="@+id/list_layout"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 android:orientation="vertical" >
 <TextView
 android:id="@+id/text_title"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:padding="5dip"
 android:textColor="#000000"
 android:textSize="14sp"
 android:textStyle="bold" />
 <TextView
 android:id="@+id/text_desc"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:padding="5dip"
 android:textColor="#000000"
 android:textSize="12sp" />
 <TextView
 android:id="@+id/text_more"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:background="#FF0000"
 android:padding="5dip"
 android:text=""
 android:textColor="#000000"
 android:textSize="10sp"
 android:visibility="gone" />
</LinearLayout>

android_fragments_2-180x300

ExempluFragments,java

import com.pras.feed.Content;
import com.pras.frags.DetailFrag;
import com.pras.frags.FragmentInterface;
import com.pras.frags.DisplayImageFrag;
import android.app.Activity;
import android.app.FragmentManager;
import android.app.FragmentTransaction;
import android.graphics.Point;
import android.os.Bundle;
import android.view.Display;
import android.widget.LinearLayout;public class ExempluFragments extends Activity implements FragmentInterface 
{
 @Override
 public void onCreate(Bundle savedInstanceState)
 {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.main);

 Display display = getWindowManager().getDefaultDisplay();
 Point size = new Point();
 display.getSize(size);
 int screenWidth = size.x;

 int leftFragWidth = (int)(screenWidth * 0.50);
 int rightFragWidth = (int)(screenWidth * 0.50);

 LinearLayout.LayoutParams leftParm = new LinearLayout.LayoutParams(leftFragWidth, LinearLayout.LayoutParams.MATCH_PARENT);
 LinearLayout.LayoutParams rightParm = new LinearLayout.LayoutParams(rightFragWidth, LinearLayout.LayoutParams.MATCH_PARENT);

 findViewById(R.id.list_frag_layout).setLayoutParams(leftParm);
 findViewById(R.id.player_frag_layout).setLayoutParams(rightParm);
 }@Override
 public void showImage(Content content) 
 {
 DisplayImageFrag playerFrag = (DisplayImageFrag) getFragmentManager().findFragmentById(R.id.player_frag);
 playerFrag.updateImage(content);

 FragmentManager fm = getFragmentManager();
 FragmentTransaction transaction = fm.beginTransaction();

 transaction.hide(fm.findFragmentById(R.id.list_frag));

 DetailFrag detailFrag = new DetailFrag();
 transaction.add(R.id.list_frag_layout, detailFrag);

 transaction.addToBackStack(null);

 transaction.commit();
 }
}

android_fragments_3-180x300

FragmentInterface.xml

public interface FragmentInterface
{
public void showImage(Content content);
}

 

android_fragments_41-180x300

Resurse:

  1. Codul sursă – Codul sursă asociat acestui tutorial poate fi downloadat de aici : AndroidFragment.
  2. Referinţe: http://developer.android.com/guide/components/fragments.html

Advertisements
Android Fragments pe intelesul tuturor

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s