[Tutorial] Implementare facilmente ViewPagerIndicator in una applicazione di Android

enricocid · 21-09-13 12:38

1) Set Up Jake Wharton ViewPagerIndicator

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:

Si puo' scaricare da qui: JakeWharton ViewPagerIndicator download

O dal sito web: ViewPagerIndicator

2 - Aprire Eclipse

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

... semplicemente trascinandocela dentro:

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

- 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.

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

Cliccare "Finish"

enricocid · 21-09-13 12:39

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

- Creare un nuovo progetto:

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

- Cliccare su next e finish per creare il progetto:

- Ora aprite le proprietà:

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

Riceverete un errore:

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

Se incontrate altri errori come questo ... :

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

---------- 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

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

e selezionare "Android XML file":

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

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

enricocid · 21-09-13 12:40

4)Implementare ViewPager usando fragments

Blue = Aggiungere
Red = Cancellare

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

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:

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

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:

e create la class "FragmentAdapter" come da esempio:

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 :-)!!!

enricocid · 21-09-13 12:40

USARE ImageView PER VISUALIZZARE IMMAGINI NELLE TUE APPLICAZIONI.

Esempio:

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

e modifichiamo il file strings.xml

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:

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>

è tutto per ora! ;-)

enricocid · 21-09-13 12:41

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!

How to Use ViewPagerIndicator in Your App ? xda-developers

- Articolo su androidiani.com!

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

- Articolo su LFFL famoso blog linux italiano

Implementare facilmente ViewPagerIndicator in una applicazione di Android

Advanced Stock ROM su Androidiani

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

Urlist

**Crotan** · 21-09-13 14:47

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.

enricocid · 23-09-13 22:10

AGGIUNGERE TRANSIZIONI ANIMATE

Riferimento qui: Using ViewPager for Screen Slides | Android Developers

- 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):

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

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":

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;
    }
    
    
}

>>>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

enricocid · 23-09-13 22:11

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]

enricocid · 23-09-13 22:11

mio ... riservato per il futuro

enricocid · 23-09-13 22:13

mio ... riservato per future aggiunte

[Tutorial] Implementare facilmente ViewPagerIndicator in una applicazione di Android

LinkBack

Strumenti discussione

Visualizza

[Tutorial] Implementare facilmente ViewPagerIndicator in una applicazione di Android

I seguenti 4 Utenti hanno ringraziato enricocid per il post:

I seguenti 2 Utenti hanno ringraziato enricocid per il post:

I seguenti 2 Utenti hanno ringraziato enricocid per il post:

I seguenti 2 Utenti hanno ringraziato enricocid per il post:

Il seguente Utente ha ringraziato enricocid per il post:

I seguenti 3 Utenti hanno ringraziato Crotan per il post:

I seguenti 3 Utenti hanno ringraziato enricocid per il post:

I seguenti 2 Utenti hanno ringraziato enricocid per il post:

Il seguente Utente ha ringraziato enricocid per il post:

Il seguente Utente ha ringraziato enricocid per il post:

Permessi di invio