[Tutorial] Implementare facilmente ViewPagerIndicator in una applicazione di Android

https://fbcdn-sphotos-b-a.akamaihd.n...40155776_n.jpg


1) Set Up Jake Wharton ViewPagerIndicator

http://img163.imageshack.us/img163/7536/z31g.gif

Per scaricare l'applicazione di esempio cliccare qui:
xda-developers - View Single Post - [GUIDE][ECLIPSE] How to Set Up and Implement J.W. ViewPagerIndicator [+SAMPLE APP]

SITO UFFICIALE>>>ViewPagerIndicator<<<SITE

1 - Scaricare JakeWharton ViewPagerIndicator:

http://s12.postimg.org/5upqwhuyl/web.png

Si puo' scaricare da qui: JakeWharton ViewPagerIndicator download

O dal sito web: ViewPagerIndicator

http://s15.postimg.org/hzxje8lej/Senza_nome.png

2 - Aprire Eclipse

http://s8.postimg.org/viux5h02t/eclip.png

Per prima cosa dovete estrarre la cartella "library" dallo zip e salvarla nella propria cartella dei documenti, come da immagine seguente:

http://s12.postimg.org/777fydse5/Senza_nome3.png

... semplicemente trascinandocela dentro:

http://s8.postimg.org/vgfmwdlt1/Drag_drop.png

- Importare la libreria appena scaricata come segue:
GO TO FILE > NEW > OTHER > ANDROID > ANDROID PROJECT FROM EXISTING CODE:

http://s22.postimg.org/6btihq3up/other.png
http://s8.postimg.org/5h22wxehx/exicode.png

- Cliccare sul pulsante next e browser directory (1) per selezionare le librerie (2):
(1) CLICK BROWSE...
(2) AND SELECT "LIBRARY" FOLDER, GO TO Libraries > My Documents > Library, click OK.

http://s8.postimg.org/obxtncejp/brows.jpg

Adesso date un nome al vostro progetto (per esempio "ViewPagerIndicator") e selezionare "Copy project into workspace", come da screenshot:

http://s8.postimg.org/62r1t19k5/name2.png

Cliccare "Finish"

2) Come caricare in modo corretto il viewpager indicator nel proprio progetto

- Creare un nuovo progetto:

http://s15.postimg.org/8pv2lk6e3/newpro.png
http://s15.postimg.org/tcjs6vpsr/newprog1.png

- Date un nome al vostro progetto (per esempio "ViewPagerTest"), come nell'immagine seguente:

http://s22.postimg.org/ao7dsb6dd/newandro.png

- Cliccare su next e finish per creare il progetto:

http://s12.postimg.org/fqvvt9725/test.png

- Ora aprite le proprietà:

http://s18.postimg.org/bekwpamrt/propre.png

- Selezionare Android e cliccare "Add" per caricare le librerie nel proprio progetto:

http://s15.postimg.org/6a2wikk0r/and.png
http://s15.postimg.org/8z2amcevv/load.png

Riceverete un errore:

http://s15.postimg.org/lp6izfmu3/error.png

Per fixare questo errore dovete cancellare la cartella delle libs dal vostro progetto:

http://s17.postimg.org/p71kmmvu7/error1.png

Se incontrate altri errori come questo ... :

http://s17.postimg.org/5nsdzj7ov/errorlikethis.png

recarsi nella proprietà del ViewPagerIndicator e cambiate il "Project Build Target". Deve essere uguale a quello del ViewPagerTest:

http://s23.postimg.org/5zxva3j8b/fixpro.png

---------- Post added at 08:28 PM ---------- Previous post was at 08:27 PM ----------

3) Creare i Layouts

Blue = Aggiungere
Red = Cancellare

- Recarsi in res > layout

http://s8.postimg.org/ptobw0plx/activitymain.png

e modificate l'activity_main.xml cancellato l'intero codice:

codice:

---

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_world" />

</RelativeLayout>

---

Copy & paste il codide seguente nell'activity_main.xml

codice:

---

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">

    <com.viewpagerindicator.TitlePageIndicator
        android:id="@+id/indicator"
        android:padding="10dip"
        android:layout_height="wrap_content"
        android:layout_width="fill_parent"
        android:background="#000000"
        android:textColor="#2FB3E3"
        app:footerColor="#2FB3E3"
        app:footerLineHeight="1dp"
        app:footerIndicatorHeight="3dp"
        app:footerIndicatorStyle="underline"
        app:selectedColor="#FFFFFF"
        app:selectedBold="true"
        />
    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        />

</LinearLayout>

---

Ora create un nuovo file .xml files nella cartella layout (Come esempio faro' 3 layouts). Go to New > other

http://s22.postimg.org/z2o1iwwzl/image.png

e selezionare "Android XML file":

http://s22.postimg.org/gbqpmhrsx/xml.png

Date un nome a questo file xml (for example "layout1") e selezionare linear layout, cliccare finish. Riferirsi allo screenshot:

http://s22.postimg.org/wb9d61nup/image.png

Create due altri layouts e chiamateli "layout2" e "layout3":

http://s12.postimg.org/m53cfh5h9/3la.png

4)Implementare ViewPager usando fragments

Blue = Aggiungere
Red = Cancellare

Recarsi in src > com.example.viewpagertest e modificate la MainActivity.java

http://s11.postimg.org/dyj5t1pkj/maina.png

Cancellate la parte di codice evidenziata in rosso:

codice:

---

package com.example.viewpagertest;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;

public class MainActivity extends Activity {

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

  @override
        public boolean onCreateOptionsMenu(Menu menu) {
                // Inflate the menu; this adds items to the action bar if it is present.
                getMenuInflater().inflate(R.menu.main, menu);
                return true;
        }

}

---

ed aggiungete le seguenti parti di codice:

codice:

---

import com.viewpagerindicator.PageIndicator;
import com.viewpagerindicator.TitlePageIndicator;
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;
import android.view.Menu;
import com.example.viewpagertest.R;

public class MainActivity extends FragmentActivity {
   
    FragmentAdapter mAdapter;
    ViewPager mPager;
    PageIndicator mIndicator;
    int Number = 0;

  @override
        protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
       
        mAdapter = new FragmentAdapter(getSupportFragmentManager());

        mPager = (ViewPager)findViewById(R.id.pager);
        mPager.setAdapter(mAdapter);

        mIndicator = (TitlePageIndicator)findViewById(R.id.indicator);
        mIndicator.setViewPager(mPager);
       
    }
   
  @override
        public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }
   
   
}

---

Il risultato:

codice:

---

package com.example.viewpagertest;

import com.viewpagerindicator.PageIndicator;
import com.viewpagerindicator.TitlePageIndicator;
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;
import android.view.Menu;
import com.example.viewpagertest.R;

public class MainActivity extends FragmentActivity {
   
    FragmentAdapter mAdapter;
    ViewPager mPager;
    PageIndicator mIndicator;
    int Number = 0;

  @override
        protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
       
        mAdapter = new FragmentAdapter(getSupportFragmentManager());

        mPager = (ViewPager)findViewById(R.id.pager);
        mPager.setAdapter(mAdapter);

        mIndicator = (TitlePageIndicator)findViewById(R.id.indicator);
        mIndicator.setViewPager(mPager);
       
    }
   
  @override
        public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }
   
   
}

---

Ora bisogna creare tre fragments nella cartella src > com.example.viewpagertest:

- go to new > other:

http://s16.postimg.org/mh9bx4px1/frag.png

e create tre class chiamandole "FirstActivity", "SecondActivity" e"ThirdActivity" come nello screenshot sotto:

http://s18.postimg.org/urpl0sgjt/first.png

Ora modificate la FirstActivity.java nella cartella src > com.example.viewpagertest cancellando le seguenti parti di codice evidenziate in rosso:

codice:

---

package com.example.viewpagertest;

public class FragmentAdapter {

}

---

ed aggiungete la seguente parte di codice:

codice:

---

package com.example.viewpagertest;

import com.example.viewpagertest.R;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class FirstActivity extends Fragment {
   
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState){
        View v = inflater.inflate(R.layout.layout1, null);
       
       
       
        return v;
       
    }
}


---

Per la SecondActivity class:

codice:

---

package com.example.viewpagertest;

import com.example.viewpagertest.R;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class SecondActivity extends Fragment {
   
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState){
        View v = inflater.inflate(R.layout.layout2, null);
       
       
       
        return v;
       
    }
}

---

Per la ThirdActivity class:

codice:

---

package com.example.viewpagertest;

import com.example.viewpagertest.R;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class ThirdActivity extends Fragment {
   
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState){
        View v = inflater.inflate(R.layout.layout3, null);
       
       
       
        return v;
       
    }
}

---

Ora bisogna creare una nuova class chiamata "FragmentAdapter.java" nella cartella src > com.example.viewpagertes:

- go to new > other:

http://s16.postimg.org/mh9bx4px1/frag.png

e create la class "FragmentAdapter" come da esempio:

http://s21.postimg.org/l0sas7vcn/class.png
http://s21.postimg.org/4bquwayrb/fragm.png

cliccare finish.

Modifichiamo il FragmentAdapter.java nella cartella src > com.example.viewpagertest cancellando le parti di codice evidenziate in rosso:

codice:

---

package com.example.viewpagertest;

public class FragmentAdapter {

}

---

aggiungendo la seguente parte di codice:

codice:

---

package com.example.viewpagertest;

import com.viewpagerindicator.IconPagerAdapter;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatPagerAdapter;

public class FragmentAdapter extends FragmentStatPagerAdapter implements IconPagerAdapter{

    public FragmentAdapter(FragmentManager fm) {
        super(fm);
        // TODO Auto-generated constructor stub
    }

  @override
        public int getIconResId(int index) {
        // TODO Auto-generated method stub
        return 0;
    }

  @override
        public Fragment getItem(int position)
    {
        // TODO Auto-generated method stub
        Fragment fragment = new FirstActivity();
        switch(position){
        case 0:
            fragment = new FirstActivity();
            break;
        case 1:
            fragment = new SecondActivity();
            break;
        case 2:
            fragment = new ThirdActivity();
            break;
        }
        return fragment;
    }

  @override
        public int getCount() {
        // TODO Auto-generated method stub
        return 3;
    }
   
  @override
        public CharSequence getPageTitle(int position){
        String title = "";
        switch(position){
        case 0:
            title = "First";
            break;
        case 1:
            title = "Second";
            break;
        case 2:
            title = "Third";
            break;
        }
        return title;
    }

}

---

Salvate l'intero progetto!, e godetevi la vostra app :-)!!!

USARE ImageView PER VISUALIZZARE IMMAGINI NELLE TUE APPLICAZIONI.

Esempio:

Per prima cosa bisogna aggiungere delle risorse in Eclipse. Rechiamoci in res/values/strings.xml.

http://s14.postimg.org/707xgyt1d/Senza_nome.png

e modifichiamo il file strings.xml

http://s14.postimg.org/o3apch9q9/Senza_nome2.png

Cio' che ci aspetteremo di trovare nel file string.xml è mostrato di seguito:

codice:

---

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

    <string name="app_name">ViewPagerTest</string>
    <string name="action_settings">Settings</string>
    <string name="hello_world">Hello world!</string>

</resources>

---

Aggiungiamo la seguente stringa:

codice:

---

<string name="content">image</string>

---

Come in questo esempio:

codice:

---

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

    <string name="app_name">ViewPagerTest</string>
    <string name="action_settings">Settings</string>
    <string name="hello_world">Hello world!</string>
    <string name="content">image</string>
   
</resources>

---

Ora non resta che aggiungere l'immagine nel nostro progetto e come potrete notare troveremo 5 cartelle contenenti le immagini del progetto:

res/drawable-hdpi
res/drawable-ldpi
res/drawable-mdpi
res/drawable-xhdpi
res/drawable-xxhdpi

Per saperne di più su cosa sono queste cartelle e su come funzionano le immagini in Android, vi linko delle reference direttamente dal sito per gli sviluppatori di Android: Drawable Resource e Screen Support.

All'interno di queste cartelle troverete le immagini in formato .png del vostro progetto. Le immagini che andremo ad aggiungere in queste cartelle saranno chiamate ic_launcher.png

Ora, apriamo il layout1.xml:

http://s14.postimg.org/3qtiai4xt/image.png

codice:

---

<?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="match_parent"
    android:orientation="vertical" >

</LinearLayout>

---

ed aggiungiamo la seguente parte di codice:

codice:

---

<ImageView
        android:id="@+id/image"
        android:contentDescription="@string/content"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_launcher" />

---

Come in questo esempio:

codice:

---

<?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="match_parent"
    android:orientation="vertical" >
   
   
    <ImageView
        android:id="@+id/image"
        android:contentDescription="@string/content"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_launcher" />
   
</LinearLayout>

---

http://s14.postimg.org/ma7so5ojl/image.png

è tutto per ora! ;-)

SAMPLE APP:

>>>DOWNLOAD<<<

JAKE WHARTON VIEW PAGER INDICATOR GITHUB:

https://github.com/JakeWharton/Andro...PagerIndicator

CREDITS:

- il grande ivan888, i meriti vanno certamente a lui, Io ho solo aiutato e dato supporto ;-)
- me
- Jake Warthon

Thanks to Xda!


Di seguito vi riporto

- Articolo nel Portale XDA!

http://img.media.xda-developers.com/...er/xdaLogo.png

How to Use ViewPagerIndicator in Your App ? xda-developers

- Articolo su androidiani.com! :D

http://i.picasion.com/pic73/7ad5c6a4...bf449f0bfb.gif

https://www.androidiani.com/applicaz...tra-app-188200


- Articolo su LFFL famoso blog linux italiano

https://lh6.googleusercontent.com/-_...20-c/photo.jpg

Implementare facilmente ViewPagerIndicator in una applicazione di Android

http://s16.postimg.org/q6osv28qt/SIGNATURE_1.png

Advanced Stock ROM su Androidiani

http://i.picasion.com/pic73/9aa272cd...c4eb62c1a2.gif

• Clicca qui se vuoi vedere tutti i nostri contributi per xda-developers.com •

Urlist

Bravissimo Enrico! Io uso un metodo leggermente diverso, casomai stasera lo posto.

Nella classe MainActivity.java inserire

codice:

---

@Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
       
        ViewPager viewPager = (ViewPager) findViewById(R.id.pager);
        PagerTabStrip pagerTabStrip = (PagerTabStrip) findViewById(R.id.pager_tab_strip);
        FragmentPagerAdapter fragmentPagerAdapter = new MyFragmentPagerAdapter(
                getSupportFragmentManager());
 
        viewPager.setAdapter(fragmentPagerAdapter);
        pagerTabStrip.setDrawFullUnderline(true);
        pagerTabStrip.setTabIndicatorColor(Color.DKGRAY);
       
    }

---

Nel progetto Eclipse recarsi in res/layout/activity_main.xml e inserire
<br /> <?xml version="1.0" encoding="utf-8"?><br /> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"<br /> android:id="@+id/RelativeLayout1"<br /> android:layout_width="fill_parent"<br /> android:layout_height="fill_parent"<br /> ><br /> <br /> <android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android"<br /> xmlns:tools="http://schemas.android.com/tools"<br /> android:id="@+id/pager"<br /> android:layout_width="match_parent"<br /> android:layout_height="match_parent"<br /> tools:context=".MainActivity" ><br /> <android.support.v4.view.PagerTabStrip<br /> android:id="@+id/pager_tab_strip"<br /> android:layout_width="match_parent"<br /> android:layout_height="wrap_content"<br /> android:layout_gravity="top"<br /> android:background="#33B5E5"<br /> android:textColor="#FFFFFF"<br /> android:paddingTop="10dp"<br /> android:paddingBottom="10dp" /><br /> <br /> </android.support.v4.view.ViewPager><br /> <br /> </RelativeLayout>

Creare una Classe ( Click col dx sul Package -> New -> Class ) e chiamarla MyFragmentPagerAdapter. Inserire

codice:

---

public class MyFragmentPagerAdapter extends FragmentPagerAdapter {
 
    private String[] pageTitle = {
            "Pagina1", "Pagina2", "Pagina3"
    };
 
    public MyFragmentPagerAdapter(FragmentManager fragmentManager) {
        super(fragmentManager);
    }
 
    @Override
    public Fragment getItem(int position) {
            switch (position) {
            case 0: return new PageFragment();
        case 1: return new PageFragment2();
        case 2: return new PageFragment3();
            }
        Fragment fragment = new PageFragment();
        Bundle arguments = new Bundle();
        arguments.putString("pageIndex", Integer.toString(position + 1));
        fragment.setArguments(arguments);
        return fragment;
   
  }

---

Creare la classe PageFragment e inserire

codice:

---

public class PageFragment extends Fragment {

        public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = getActivity().getLayoutInflater().inflate(R.layout.fragment_page, null);
        return view;

---

Con relativo layout associato

<br /> <?xml version="1.0" encoding="utf-8"?><br /> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"<br /> android:layout_width="wrap_content"<br /> android:layout_height="wrap_content" ><br /> <br /> <TextView<br /> android:id="@+id/textView1"<br /> android:layout_width="fill_parent"<br /> android:layout_height="wrap_content"<br /> android:layout_alignParentLeft="true"<br /> android:layout_alignParentTop="true"<br /> android:layout_marginTop="20dp"<br /> android:textSize="18sp"<br /> android:gravity="center_horizontal"<br /> android:text="Hello World!" <br /> <br /> /><br /> </RelativeLayout><br />

Ripetere questa operazione a seconda di quante "pagine" ( Fragments ) avete.

AGGIUNGERE TRANSIZIONI ANIMATE


Riferimento qui: Using ViewPager for Screen Slides | Android Developers

http://img89.imageshack.us/img89/7237/3y0.gif

- Di cosa abbiamo bisogno?:

- Libreria NineOldAndroids:

>>>Scarica<<<

Sito>>>NineOldAndroids<<<Sito

- ZoomOutPageTransformer.java

>>>Scarica<<<

1) Per prima cosa estraiamo la cartella "library" folder dallo zip e salviamola nella cartella dei documenti (o dove vogliamo):

http://s16.postimg.org/epbxml9ol/open.png

2) Ora trasciniamo questa cartella (library) all'interno dei documenti, Io l'ho rinominata "library_1" per evitare conflitti:

http://s23.postimg.org/6bcxgye8b/Senza_nome.png

3) Importiamo le librerie NineOlds nel workspace:
Vai a FILE > NEW > OTHER > ANDROID > ANDROID PROJECT FROM EXISTING CODE

4) Clicca next button e cliccare su browse directory per selezionare la libreria:
(1) Cliccare BROWSE...
(2) selezionare la cartella "LIBRARY", andare in Libraries > My Documents > Library_1, e cliccare OK.

5) Adesso diamo un nome al nostro progetto (per esempio "Library_1 o "NineOld") e spunta "Copy project into workspace"

Segui il primo post per capire come "importare librerie": [url=https://www.androidiani.com/forum/programmazione-e-hint-avanzati/342063-tutorial-implementare-facilmente-viewpagerindicator-una-applicazione-di-android.html#post4546970[/url]

ESEMPIO:

Copiare la classe allegata ZoomOutPageTransformer.java nella cartella src/com.example.viewpagertest/ o crea una classe chiamata ZoomOutPageTransformer:

codice:

---

package com.example.viewpagertest;
import android.support.v4.view.ViewPager.PageTransformer;
import android.view.View;
import com.nineoldandroids.view.ViewHelper;

public class ZoomOutPageTransformer implements PageTransformer {
    private static float MIN_SCALE = 0.85f;
    private static float MIN_ALPHA = 0.5f;

    public void transformPage(View view, float position) {
        int pageWidth = view.getWidth();
        int pageHeight = view.getHeight();
       
        if (position < -1) { // [-Infinity,-1)
            // This page is way off-screen to the left.
            ViewHelper.setAlpha(view, 0);
        } else if (position <= 1) { // [-1,1]
            // Modify the default slide transition to shrink the page as well
            float scaleFactor = Math.max(MIN_SCALE, 1 - Math.abs(position));
            float vertMargin = pageHeight * (1 - scaleFactor) / 2;
            float horzMargin = pageWidth * (1 - scaleFactor) / 2;
            if (position < 0) {
                ViewHelper.setTranslationX(view, horzMargin - vertMargin / 2);
            } else {
                ViewHelper.setTranslationX(view, -horzMargin + vertMargin / 2);
            }

            // Scale the page down (between MIN_SCALE and 1)
            ViewHelper.setScaleX(view, scaleFactor);
            ViewHelper.setScaleY(view, scaleFactor);

            // Fade the page relative to its size.
            ViewHelper.setAlpha(view, MIN_ALPHA +
                    (scaleFactor - MIN_SCALE) /
                    (1 - MIN_SCALE) * (1 - MIN_ALPHA));

        } else { // (1,+Infinity]
            // This page is way off-screen to the right.
            ViewHelper.setAlpha(view, 0);
        }
    }
}

---

Se hai cancellato la cartella "libs" del tuo progetto,vai sulla cartella workspace/ViewPagerTest/ e creane una nuova chiamata "libs" e schiaffaci dentro il file android-support-v4.jar (che si trova in sdk/extras/android/support/v4), copia lo stesso file (android-support-v4.jar) nella cartella workspace/ViewPagerIndicator/libs.

Ora vai sulle opzioni di library_1 e spunta il corretto target e spunta "Is library":

http://s17.postimg.org/58ynxqtj3/Senza_nome3.png

Carica la libreria dentro il tuo progetto (sai come fare).

THE CODE

blue = Aggiungere
red = Cancellare

Adesso faro' un .xml chiamato "colors" nella cartella res/values:

codice:

---

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

<resources>

    <color name="red">#F75D59</color>
    <color name="blue">#0000FF</color>
    <color name="orange">#dc5a1e</color>

</resources>

---

e aggiungi il seguente codice per il layout1:

codice:

---

<?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="match_parent"
    android:orientation="vertical"
    android:background="@color/red">
    </LinearLayout>

---

per il layout2:

codice:

---

<?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="match_parent"
    android:orientation="vertical"
    android:background="@color/blue" >
</LinearLayout>

---

per il layout3:

codice:

---

<?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="match_parent"
    android:orientation="vertical"
    android:background="@color/orange">
</LinearLayout>

---

Apri la MainActivity.java:

codice:

---

package com.example.viewpagertest;

import com.viewpagerindicator.PageIndicator;
import com.viewpagerindicator.TitlePageIndicator;
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;
import android.view.Menu;
import com.example.viewpagertest.R;

public class MainActivity extends FragmentActivity {
   
    FragmentAdapter mAdapter;
    ViewPager mPager;
    PageIndicator mIndicator;
    int Number = 0;

  @override
        protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
       
        mAdapter = new FragmentAdapter(getSupportFragmentManager());

        mPager = (ViewPager)findViewById(R.id.pager);
        mPager.setAdapter(mAdapter);

        mIndicator = (TitlePageIndicator)findViewById(R.id.indicator);
        mIndicator.setViewPager(mPager);
       
    }
   
  @override
        public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }
   
   
}

---

e aggiungi la linea evidenziata in blu:

codice:

---

package com.example.viewpagertest;


import com.viewpagerindicator.PageIndicator;
import com.viewpagerindicator.TitlePageIndicator;
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;
import android.view.Menu;
import com.example.viewpagertest.R;

public class MainActivity extends FragmentActivity {
   
    FragmentAdapter mAdapter;
    ViewPager mPager;
    PageIndicator mIndicator;
    int Number = 0;

  @override
        protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
       
        mAdapter = new FragmentAdapter(getSupportFragmentManager());

        mPager = (ViewPager)findViewById(R.id.pager);
        mPager.setAdapter(mAdapter);
     

        mIndicator = (TitlePageIndicator)findViewById(R.id.indicator);
        mIndicator.setViewPager(mPager);
       
        mPager.setPageTransformer(true, new ZoomOutPageTransformer ());
       
               
           
    }
       
  @override
        public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }
   
   
}

---

http://img89.imageshack.us/img89/7237/3y0.gif

>>>Scarica l'applicazione di esempio ZoomOutPageTransformer<<<

Se vuoi provare altre animazioni, linko il sito di riferimento: Using ViewPager for Screen Slides | Android Developers

o usa altre librerie come transitionviewpager e JazzyViewPager

http://img443.imageshack.us/img443/3508/fm6.gif

Creiamo una classe chiamandola DepthPageTransformer nella cartella src/.../ ed aggiungiamo quanto segue:

codice:

---

package com.example.viewpagertest;

import android.support.v4.view.ViewPager.PageTransformer;
import android.view.View;
//import com.nineoldandroids.view.ViewHelper;

public class DepthPageTransformer implements PageTransformer {
    private static float MIN_SCALE = 0.75f;

    public void transformPage(View view, float position) {
        int pageWidth = view.getWidth();

        if (position < -1) { // [-Infinity,-1)
            // This page is way off-screen to the left.
            view.setAlpha(0);

        } else if (position <= 0) { // [-1,0]
            // Use the default slide transition when moving to the left page
            view.setAlpha(1);
            view.setTranslationX(0);
            view.setScaleX(1);
            view.setScaleY(1);

        } else if (position <= 1) { // (0,1]
            // Fade the page out.
            view.setAlpha(1 - position);

            // Counteract the default slide transition
            view.setTranslationX(pageWidth * -position);

            // Scale the page down (between MIN_SCALE and 1)
            float scaleFactor = MIN_SCALE
                    + (1 - MIN_SCALE) * (1 - Math.abs(position));
            view.setScaleX(scaleFactor);
            view.setScaleY(scaleFactor);

        } else { // (1,+Infinity]
            // This page is way off-screen to the right.
            view.setAlpha(0);
        }
    }
}

---

Nella MainActivity.java aggiungi la parte di codice evidenziata in blue:

@override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

...
...

mPager.setPageTransformer(true, new DepthPageTransformer ());

...
...

}[/CODE]

mio ... riservato per il futuro

mio ... riservato per future aggiunte

un altro... non si sa mai

ma si... abbondiamo va :-D

Bravissimo Enrico, sei finito anche sul blog di Androidiani. Complimenti. Stasera se ho tempo posto il mio codice che utilizzo per implementare il ViewPager. Alla fine é molto simile al tuo, ci sono solo alcune rivisitazioni.

Ho modificato il mio precedente intervento con del codice ;)

Grande enri! Mi chiedevo proprio come facevi le transizioni animate! Grande! :D

bella fratello! :D

Per memorizzare lo stato dei Fragments mettete quanto segue

<br /> ViewPager viewPager = (ViewPager) findViewById(R.id.pager);<br /> viewPager.setOffscreenPageLimit(3);<br />

Dove 3 sono il numero dei Fragment.

Grazie a Dema121, per avermi fatto conoscere l'istruzione in questione.

Quote:

---

Originariamente inviato da Crotan

Per memorizzare lo stato dei Fragments mettete quanto segue

<br /> ViewPager viewPager = (ViewPager) findViewById(R.id.pager);<br /> viewPager.setOffscreenPageLimit(3);<br />

Dove 3 sono il numero dei Fragment.

Grazie a Dema121, per avermi fatto conoscere l'istruzione in questione.

---

Occhio a quel metodo. Per la precisione invocando

codice:

---

setOffScreenPageLimit

---

indichi al sistema quante pagine mantenere in memoria prima e dopo la pagina corrente

Quote:

---

Originariamente inviato da giozh

Occhio a quel metodo. Per la precisione invocando

codice:

---

setOffScreenPageLimit

---

indichi al sistema quante pagine mantenere in memoria prima e dopo la pagina corrente

---

Esattamente. ;)

grazie, utilissimo, ti nominerò nella sezione credits della mia app :D

[B]Livello di difficoltà: facile
Versione SDK utilizzata: 4.4.2

In questo tutorial spiegherò come è possibile creare un semplice wizard da mostrare all'utente al primo avvio dell'applicazione. Per fare ciò utilizzerò un ViewPager. Per ulteriori informazioni circa questo oggetto potete consultare la documentazione ufficiale: View Pager | Android Developers.

Come prima cosa creiamo i vari files xml necessari per il corretto funzionamento dell'applicazione. Rechiamoci dunque in /res/layout/ ed apriamo l'activity_main e inseriamo quanto segue.
<br /> <com.example.tutorialapp.ViewPagerNoSwipe xmlns:android="http://schemas.android.com/apk/res/android"<br /> android:id="@+id/pager"<br /> android:layout_width="match_parent"<br /> android:layout_height="match_parent" />

Da notare il "com.example.tutorialapp.ViewPagerNoSwipe". Spiegherò tra poco a cosa serve. Andiamo in /src/ e creiamo una classe chiamata ViewPagerNoSwipe ed inseriamo al suo interno il seguente codice.

<br /> public class ViewPagerNoSwipe extends ViewPager {<br /> <br /> public ViewPagerNoSwipe(Context context) {<br /> super(context);<br /> }<br /> <br /> public ViewPagerNoSwipe(Context context, AttributeSet attrs) {<br /> super(context, attrs);<br /> }<br /> <br /> @Override<br /> public boolean onInterceptTouchEvent(MotionEvent arg0) {<br /> <br /> return false;<br /> }<br /> <br /> @Override<br /> public boolean onTouchEvent(MotionEvent event) {<br /> <br /> return false;<br /> }<br /> }

Tramite questa classe disabilitiamo la possibilità di fare lo swipe tra le varie schermate del ViewPager. Abbiamo così svelato il mistero del "com.example.tutorialapp.ViewPagerNoSwipe".

Creiamo ora i vari files xml per ogni schermata (fragment) del Wizard. In questo esempio utilizzerò tre pagine, quindi, tre layout differenti.

Pagina1

<?xml version="1.0" encoding="utf-8"?><br /> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"<br /> android:layout_width="fill_parent"<br /> android:layout_height="fill_parent" ><br /> <br /> <TextView<br /> android:id="@+id/textView1"<br /> android:layout_width="wrap_content"<br /> android:layout_height="wrap_content"<br /> android:layout_alignParentLeft="true"<br /> android:layout_below="@+id/textView1"<br /> android:text="Benvenuto!"<br /> android:textSize="16dp"<br /> /><br /> <br /> <Button<br /> android:id="@+id/button1"<br /> android:layout_width="wrap_content"<br /> android:layout_height="wrap_content"<br /> android:layout_alignParentBottom="true"<br /> android:layout_alignParentRight="true"<br /> android:text="Avanti" /><br /> <br /> </RelativeLayout>

Pagina2
<br /> <?xml version="1.0" encoding="utf-8"?><br /> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"<br /> android:layout_width="fill_parent"<br /> android:layout_height="fill_parent" ><br /> <br /> <TextView<br /> android:id="@+id/textView1"<br /> android:layout_width="wrap_content"<br /> android:layout_height="wrap_content"<br /> android:layout_alignParentLeft="true"<br /> android:layout_below="@+id/textView1"<br /> android:text="Sono nel secondo Fragment!"<br /> android:textSize="16dp"<br /> /><br /> <br /> <Button<br /> android:id="@+id/button1"<br /> android:layout_width="wrap_content"<br /> android:layout_height="wrap_content"<br /> android:layout_alignParentBottom="true"<br /> android:layout_alignParentRight="true"<br /> android:text="Avanti" /><br /> <br /> <Button<br /> android:id="@+id/button2"<br /> android:layout_width="wrap_content"<br /> android:layout_height="wrap_content"<br /> android:layout_alignParentBottom="true"<br /> android:layout_alignParentLeft="true"<br /> android:text="Indietro" /><br /> <br /> </RelativeLayout>

Pagina3

<?xml version="1.0" encoding="utf-8"?><br /> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"<br /> android:layout_width="fill_parent"<br /> android:layout_height="fill_parent" ><br /> <br /> <TextView<br /> android:id="@+id/textView1"<br /> android:layout_width="wrap_content"<br /> android:layout_height="wrap_content"<br /> android:layout_alignParentLeft="true"<br /> android:layout_below="@+id/textView1"<br /> android:text="Sono nell'ultimo Fragment!"<br /> android:textSize="16dp"<br /> /><br /> <br /> <Button<br /> android:id="@+id/button1"<br /> android:layout_width="wrap_content"<br /> android:layout_height="wrap_content"<br /> android:layout_alignParentBottom="true"<br /> android:layout_alignParentRight="true"<br /> android:text="Termina" /><br /> <br /> <Button<br /> android:id="@+id/button2"<br /> android:layout_width="wrap_content"<br /> android:layout_height="wrap_content"<br /> android:layout_alignParentBottom="true"<br /> android:layout_alignParentLeft="true"<br /> android:text="Indietro" /><br /> <br /> </RelativeLayout>

Essendo il codice di facile comprensione non mi soffermo ulteriormente su descrizioni dello stesso. Proseguiamo oltre passando ora alla parte Java. Andiamo in /src/ ed apriamo la classe MainActivity inserendo quanto segue.

public class MainActivity extends FragmentActivity{<br /> <br /> ViewPager viewPager;<br /> Adapter adapter;<br /> ActionBar actionBar;<br /> <br /> protected void onCreate(Bundle savedIstanceState) {<br /> super.onCreate(savedIstanceState);<br /> setContentView(R.layout.activity_main);<br /> actionBar = getActionBar();<br /> actionBar.setTitle("Wizard iniziale");<br /> viewPager = (ViewPager)findViewById(R.id.pager);<br /> adapter = new Adapter(getSupportFragmentManager());<br /> viewPager.setAdapter(adapter);<br /> }<br /> <br /> public ViewPager getViewPager() {<br /> return viewPager;<br /> }<br /> <br /> @Override<br /> public void onBackPressed() {<br /> if (viewPager.getCurrentItem() == 0) {<br /> //Non eseguo nulla in quanto siamo nella prima pagina<br /> super.onBackPressed();<br /> } else {<br /> //Imposta l'item corrente prendendo il numero di tutti gli item correnti e togliendo 1<br /> viewPager.setCurrentItem(viewPager.getCurrentItem() - 1);<br /> <br /> }<br /> }<br /> }

Creiamo ora l'adapter per il ViewPager.

public class Adapter extends FragmentPagerAdapter{<br /> <br /> //Il numero di pagine totali<br /> private int numeroPagine = 3;<br /> <br /> //Costruttore<br /> public Adapter(FragmentManager fm) {<br /> super(fm);<br /> // TODO Auto-generated constructor stub<br /> }<br /> <br /> @Override<br /> //Switcha in base alla posizione<br /> public Fragment getItem(int arg0) {<br /> // TODO Auto-generated method stub<br /> switch(arg0) {<br /> case 0: return new PageFragment();<br /> case 1: return new PageFragment2();<br /> case 2: return new PageFragment3();<br /> }<br /> Fragment fragment = new PageFragment();<br /> Bundle arguments = new Bundle();<br /> arguments.putString("pageIndex", Integer.toString(arg0 + 1));<br /> fragment.setArguments(arguments);<br /> return fragment;<br /> }<br /> <br /> @Override<br /> //Numero di pagine totali<br /> public int getCount() {<br /> // TODO Auto-generated method stub<br /> return numeroPagine;<br /> }<br /> <br /> }

La variabile "numeroPagine", come facilmente intuibile, indica il numero di pagine totali del ViewPager. Con il metodo getCount ritorniamo quel valore.

Siamo quasi giunti alla fine, creiamo per ogni file xml la corrispettiva classe estendendo Fragment.

public class PageFragment extends Fragment{<br /> <br /> @Override<br /> public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {<br /> View view = getActivity().getLayoutInflater().inflate(R.layout.pagina1, null);<br /> <br /> Button b1 = (Button) view.findViewById(R.id.button1);<br /> b1.setOnClickListener(new View.OnClickListener() {<br /> @Override<br /> public void onClick(View v) {<br /> ((MainActivity) getActivity()).getViewPager().setCurrentItem(1);<br /> }<br /> });<br /> <br /> return view;<br /> <br /> }<br /> <br /> }

Per questioni di spazio non posto tutte le classi, che potete comunque consultare nello zip dei sorgenti in allegato, l'unica nota che mi sento di fare è la seguente: quando arrivate all'ultimo Fragment, ossia l'ultima pagina del ViewPager, dovreste utilizzare le SharedPreferences per far si che il Wizard non sia mostrato sempre ad ogni avvio dell'applicazione. Per fare questo utilizzeremo una boolean.

private void memorizzaValore(String key, boolean value) {<br /> SharedPreferences sharedPreferences = PreferenceManager.getDefaultSharedPreferences(getActivity());<br /> Editor editor = sharedPreferences.edit();<br /> editor.putBoolean(key, value);<br /> editor.commit();<br /> }

Successivamente, nel metodo onClickListener del Button

memorizzaValore("GuidaCompletata", true);<br /> Toast.makeText(getActivity(), "Preferenze salvate", Toast.LENGTH_SHORT).show();<br /> Intent intent = new Intent(getActivity(), HomePage.class);<br /> startActivity(intent);

In questo modo abbiamo salvato le preferenze, ma ancora non è finita. Nella classe HomePage dobbiamo controllare se effettivamente la variabile booleana ha un valore di true o false. Quindi, in HomePage inseriamo

preferenze = PreferenceManager.getDefaultSharedPreferences(getBaseContext());<br /> attivo = preferenze.getBoolean("GuidaCompletata", false);<br /> <br /> if(attivo) {<br /> <br /> }<br /> <br /> else {<br /> intent = new Intent(getApplicationContext(), MainActivity.class);<br /> startActivity(intent);<br /> }

Questo è tutto ! Per ulteriori chiarimenti potete scrivere in questa discussione.