[Android] ViewPager的簡易使用方法,Fragment,以及切換分頁監聽實作

之前看一些可以分頁的APP又有動畫,都只是把程式碼抓下來修改一下,就用了．

今天終於稍微搞懂一些裡面的用法．

首先MainActivity.java

1.第一目標 ------ extends FragmentActivity

然後裡面宣告一個PagerAdapter 的變數

2.PagerAdapter宣告的時候一定是出現錯誤,因為你還沒建立一個名為PagerAdapter的型態的

class 所以我們就多建一個java檔名為PagerAdapter 記得要implement FragmentPagerAdapter!

import java.util.List;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

public class PagerAdapter extends FragmentPagerAdapter {


private List<Fragment> fragments;

public PagerAdapter(FragmentManager fm, List<Fragment> fragments) {
super(fm);
// TODO Auto-generated constructor stub
this.fragments = fragments;
}

@Override
public Fragment getItem(int arg0) {
// TODO Auto-generated method stub
return this.fragments.get(arg0);
}

@Override
public int getCount() {
// TODO Auto-generated method stub
return this.fragments.size();
}

}

裡面就是實作他需要的方法(可以按add unimplement method來建立)

3.把PagerAdapter建立起來以後就是要加入分頁了!

在onCreate()裡面新增:

(初始化pager)
private void initialisePaging() {
// TODO Auto-generated method stub
List<Fragment> fragments = new Vector<Fragment>();
fragments.add(Fragment.instantiate(this, Fragment1.class.getName()));
fragments.add(Fragment.instantiate(this, Fragment2.class.getName()));
mPagerAdapter = new PagerAdapter(this.getSupportFragmentManager(),
fragments);

ViewPager pager = (ViewPager) findViewById(R.id.viewpager);
pager.setAdapter(mPagerAdapter);

myPageChange = new myPageChangeListenter();//new
pager.setOnPageChangeListener(myPageChange);//建立監聽
}

這邊就是建立一個list 然後放進去兩個class(也就是未來的兩個分頁)

當然要在外面宣告兩個變數

private PagerAdapter mPagerAdapter;
public myPageChangeListenter myPageChange;//先宣告一個該型態的變數

不然他會抓不到

--------------------------------------------分隔線------------------------------------------------------

如果到這邊都OK的話,你已經完成一半了．

接下來還要設定監聽(滑動的時候要監聽,不然系統不會去抓你滑到哪一頁了)

我們在上面有用pager.setOnPageChangeListener(myPageChange);來建立監聽

下面當然是要實做這個 myPageChangeListener

public class myPageChangeListenter implements OnPageChangeListener{

@Override
public void onPageScrollStateChanged(int arg0) {
// TODO Auto-generated method stub
//Log.d("change to page = ",Integer.toString(arg0));
}

@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
// TODO Auto-generated method stub
//Log.d("scroll to page = ","here");
}

@Override
public void onPageSelected(int arg0) {
// TODO Auto-generated method stub
Log.d("select to page = ",Integer.toString(arg0));
//第一頁為0,第二頁為1
}
}

}

非常簡單,我個人習慣使用onPageSelected來設定動作,都可以透過Log來測試你想要的觸發

--------------------------------------------分隔線------------------------------------------------------

有了 監聽 /  PagerAdapter  還需要分頁.....

這部分最大的問題就是在於抓不到該分頁的元件id,當然後來解決了(不然也不會發文)

package com.example.viewpagerexample;

import android.content.Context;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.support.v4.app.Fragment;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

import com.civetcat.weather.library.WeatherInfo;
import com.civetcat.weather.library.YahooWeather;
import com.civetcat.weather.library.YahooWeather.SEARCH_MODE;
import com.civetcat.weather.library.YahooWeatherInfoListener;

public class Fragment1 extends Fragment implements YahooWeatherInfoListener{

    public View view;

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// TODO Auto-generated method stub
if (container == null) {
return null;
}

view = inflater.inflate(R.layout.fragement1_layout,container, false);

               //中間可以使用
               TextView txv = (TextView) view.findViewById(R.id.xxx);
               //來抓取id

return view;
}
}

Fragment2 也是類似的就不多貼了!

至於layout的部分:

(viewpager_layout.xml)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >
   
    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        />
</LinearLayout>

這部分是重點!!

看我們這邊在MainActivity.java裡面設定的

setContentView(R.layout.viewpager_layout);

因此該xml檔必須要有ViewPager 不然怎麼去抓呢? 

大致上就是這樣,把寫了一個天氣的範例放上來,可以參考看看

MEGA載點

END