Android專案ViewPager+Fragment的基本使用
阿新 • • 發佈：2019-02-20
利用ViewPager+Fragment簡單實現頁面的切換
專案的大概組成：
以下是程式碼的實現，首先在activity_main.xml新建選單欄和ViewPager控制元件：
<LinearLayout 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:orientation="vertical" tools:context="com.itman.viewpagerdemo.MainActivity" > <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" > <TextView android:id="@+id/tv_item_one" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:gravity="center_horizontal" android:text="選單一" /> <TextView android:id="@+id/tv_item_two" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:gravity="center_horizontal" android:text="選單二" /> <TextView android:id="@+id/tv_item_three" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:gravity="center_horizontal" android:text="選單三" /> </LinearLayout> <android.support.v4.view.ViewPager android:id="@+id/myViewPager" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_weight="1" /> </LinearLayout>
接下來就新建三個Fragment頁面做好準備，Fragment的佈局檔案：
<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" > <TextView android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center" android:text="我是選單一" android:textSize="30sp" /> </RelativeLayout>
Fragment的Java檔案：
package com.itman.viewpagerdemo; import android.os.Bundle; import android.support.annotation.Nullable; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; public class OneFragment extends Fragment{ @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View view = inflater.inflate(R.layout.fragment_one, null); return view; } }
三個fragment頁面都一樣的，就不全部貼出來了，接下來就準備新增Fragment的介面卡TabFragmentPagerAdapter：
package com.itman.viewpagerdemo;
import java.util.List;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
public class TabFragmentPagerAdapter extends FragmentPagerAdapter {
private FragmentManager mfragmentManager;
private List<Fragment> mlist;
public TabFragmentPagerAdapter(FragmentManager fm, List<Fragment> list) {
super(fm);
this.mlist = list;
}
@Override
public Fragment getItem(int arg0) {
return mlist.get(arg0);//顯示第幾個頁面
}
@Override
public int getCount() {
return mlist.size();//有幾個頁面
}
}準備工作完成，接下來是MainActivit.Java的程式碼實現：
package com.itman.viewpagerdemo;
import java.util.ArrayList;
import java.util.List;
import android.graphics.Color;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.support.v7.app.ActionBarActivity;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.TextView;
public class MainActivity extends ActionBarActivity implements OnClickListener {
private TextView tv_item_one;
private TextView tv_item_two;
private TextView tv_item_three;
private ViewPager myViewPager;
private List<Fragment> list;
private TabFragmentPagerAdapter adapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
InitView();
// 設定選單欄的點選事件
tv_item_one.setOnClickListener(this);
tv_item_two.setOnClickListener(this);
tv_item_three.setOnClickListener(this);
myViewPager.setOnPageChangeListener(new MyPagerChangeListener());
//把Fragment新增到List集合裡面
list = new ArrayList<>();
list.add(new OneFragment());
list.add(new TwoFragment());
list.add(new ThreeFragment());
adapter = new TabFragmentPagerAdapter(getSupportFragmentManager(), list);
myViewPager.setAdapter(adapter);
myViewPager.setCurrentItem(0); //初始化顯示第一個頁面
tv_item_one.setBackgroundColor(Color.RED);//被選中就為紅色
}
/**
* 初始化控制元件
*/
private void InitView() {
tv_item_one = (TextView) findViewById(R.id.tv_item_one);
tv_item_two = (TextView) findViewById(R.id.tv_item_two);
tv_item_three = (TextView) findViewById(R.id.tv_item_three);
myViewPager = (ViewPager) findViewById(R.id.myViewPager);
}
/**
* 點選事件
*/
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.tv_item_one:
myViewPager.setCurrentItem(0);
tv_item_one.setBackgroundColor(Color.RED);
tv_item_two.setBackgroundColor(Color.WHITE);
tv_item_three.setBackgroundColor(Color.WHITE);
break;
case R.id.tv_item_two:
myViewPager.setCurrentItem(1);
tv_item_one.setBackgroundColor(Color.WHITE);
tv_item_two.setBackgroundColor(Color.RED);
tv_item_three.setBackgroundColor(Color.WHITE);
break;
case R.id.tv_item_three:
myViewPager.setCurrentItem(2);
tv_item_one.setBackgroundColor(Color.WHITE);
tv_item_two.setBackgroundColor(Color.WHITE);
tv_item_three.setBackgroundColor(Color.RED);
break;
}
}
/**
* 設定一個ViewPager的偵聽事件，當左右滑動ViewPager時選單欄被選中狀態跟著改變
*
*/
public class MyPagerChangeListener implements OnPageChangeListener {
@Override
public void onPageScrollStateChanged(int arg0) {
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}
@Override
public void onPageSelected(int arg0) {
switch (arg0) {
case 0:
tv_item_one.setBackgroundColor(Color.RED);
tv_item_two.setBackgroundColor(Color.WHITE);
tv_item_three.setBackgroundColor(Color.WHITE);
break;
case 1:
tv_item_one.setBackgroundColor(Color.WHITE);
tv_item_two.setBackgroundColor(Color.RED);
tv_item_three.setBackgroundColor(Color.WHITE);
break;
case 2:
tv_item_one.setBackgroundColor(Color.WHITE);
tv_item_two.setBackgroundColor(Color.WHITE);
tv_item_three.setBackgroundColor(Color.RED);
break;
}
}
}
}程式碼的註釋很詳細，也不是什麼很難實現功能，有了基本實現的樣例，大家就可以隨意改動，變成自己喜歡的樣式了。