ViewPager + Fragment实现滑动标签页

ViewPager 结合Fragment实现一个Activity里包含多个可滑动的标签页，每个标签页可以有独立的布局及响应。

activity_main.xml

[html] view
plain copy

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

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

<LinearLayout

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:orientation="horizontal">

<TextView

android:id="@+id/tv_guid1"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_weight="1.0"

android:gravity="center"

android:text="特性1"

android:textSize="18sp"/>

<TextView

android:id="@+id/tv_guid2"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_weight="1.0"

android:gravity="center"

android:text="特性2"

android:textSize="18sp"/>

<TextView

android:id="@+id/tv_guid3"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_weight="1.0"

android:gravity="center"

android:text="特性3 "

android:textSize="18sp"/>

<TextView

android:id="@+id/tv_guid4"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_weight="1.0"

android:gravity="center"

android:text="特性4"

android:textSize="18sp"/>

</LinearLayout>

<ImageView

android:id="@+id/cursor"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:scaleType="matrix"

android:src="@drawable/cursor"/>

<android.support.v4.view.ViewPager

android:id="@+id/viewpager"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:flipInterval="30"

android:persistentDrawingCache="animation"/>

</LinearLayout>

MainActivity.java

[java] view
plain copy

package com.example.viewpagernfragment;

import java.util.ArrayList;

import android.graphics.BitmapFactory;

import android.graphics.Matrix;

import android.os.Bundle;

import android.support.v4.app.Fragment;

import android.support.v4.app.FragmentActivity;

import android.support.v4.view.ViewPager;

import android.support.v4.view.ViewPager.OnPageChangeListener;

import android.util.DisplayMetrics;

import android.view.Menu;

import android.view.View;

import android.view.animation.Animation;

import android.view.animation.TranslateAnimation;

import android.widget.ImageView;

import android.widget.TextView;

import android.widget.Toast;

public class MainActivity extends FragmentActivity {

private ViewPager mPager;

private ArrayList<Fragment> fragmentList;

private ImageView image;

private TextView view1, view2, view3, view4;

private int currIndex;//当前页卡编号

private int bmpW;//横线图片宽度

private int offset;//图片移动的偏移量

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

InitTextView();

InitImage();

InitViewPager();

}

/*

* 初始化标签名

*/

public void InitTextView(){

view1 = (TextView)findViewById(R.id.tv_guid1);

view2 = (TextView)findViewById(R.id.tv_guid2);

view3 = (TextView)findViewById(R.id.tv_guid3);

view4 = (TextView)findViewById(R.id.tv_guid4);

view1.setOnClickListener(new txListener(0));

view2.setOnClickListener(new txListener(1));

view3.setOnClickListener(new txListener(2));

view4.setOnClickListener(new txListener(3));

}

public class txListener implements View.OnClickListener{

private int index=0;

public txListener(int i) {

index =i;

}

@Override

public void onClick(View v) {

// TODO Auto-generated method stub

mPager.setCurrentItem(index);

}

}

/*

* 初始化图片的位移像素

*/

public void InitImage(){

image = (ImageView)findViewById(R.id.cursor);

bmpW = BitmapFactory.decodeResource(getResources(), R.drawable.cursor).getWidth();

DisplayMetrics dm = new DisplayMetrics();

getWindowManager().getDefaultDisplay().getMetrics(dm);

int screenW = dm.widthPixels;

offset = (screenW/4 - bmpW)/2;

//imgageview设置平移，使下划线平移到初始位置（平移一个offset）

Matrix matrix = new Matrix();

matrix.postTranslate(offset, 0);

image.setImageMatrix(matrix);

}

/*

* 初始化ViewPager

*/

public void InitViewPager(){

mPager = (ViewPager)findViewById(R.id.viewpager);

fragmentList = new ArrayList<Fragment>();

Fragment btFragment= new ButtonFragment();

Fragment secondFragment = TestFragment.newInstance("this is second fragment");

Fragment thirdFragment = TestFragment.newInstance("this is third fragment");

Fragment fourthFragment = TestFragment.newInstance("this is fourth fragment");

fragmentList.add(btFragment);

fragmentList.add(secondFragment);

fragmentList.add(thirdFragment);

fragmentList.add(fourthFragment);

//给ViewPager设置适配器

mPager.setAdapter(new MyFragmentPagerAdapter(getSupportFragmentManager(), fragmentList));

mPager.setCurrentItem(0);//设置当前显示标签页为第一页

mPager.setOnPageChangeListener(new MyOnPageChangeListener());//页面变化时的监听器

}

public class MyOnPageChangeListener implements OnPageChangeListener{

private int one = offset *2 +bmpW;//两个相邻页面的偏移量

@Override

public void onPageScrolled(int arg0, float arg1, int arg2) {

// TODO Auto-generated method stub

}

@Override

public void onPageScrollStateChanged(int arg0) {

// TODO Auto-generated method stub

}

@Override

public void onPageSelected(int arg0) {

// TODO Auto-generated method stub

Animation animation = new TranslateAnimation(currIndex*one,arg0*one,0,0);//平移动画

currIndex = arg0;

animation.setFillAfter(true);//动画终止时停留在最后一帧，不然会回到没有执行前的状态

animation.setDuration(200);//动画持续时间0.2秒

image.startAnimation(animation);//是用ImageView来显示动画的

int i = currIndex + 1;

Toast.makeText(MainActivity.this, "您选择了第"+i+"个页卡", Toast.LENGTH_SHORT).show();

}

}

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

}

}

谷歌官方认为，ViewPager应该和Fragment一起使用时，此时ViewPager的适配器是FragmentPagerAdapter，当你实现一个FragmentPagerAdapter,你必须至少覆盖以下方法:

getCount()

getItem()

如果ViewPager没有和Fragment一起，ViewPager的适配器是PagerAdapter，它是基类提供适配器来填充页面ViewPager内部，当你实现一个PagerAdapter,你必须至少覆盖以下方法:

instantiateItem(ViewGroup,
int)

destroyItem(ViewGroup,
int, Object)

getCount()

isViewFromObject(View,
Object)

[java] view
plain copy

package com.example.viewpagernfragment;

import java.util.ArrayList;

import android.support.v4.app.Fragment;

import android.support.v4.app.FragmentManager;

import android.support.v4.app.FragmentPagerAdapter;

public class MyFragmentPagerAdapter extends FragmentPagerAdapter{

ArrayList<Fragment> list;

public MyFragmentPagerAdapter(FragmentManager fm,ArrayList<Fragment> list) {

super(fm);

this.list = list;

}

@Override

public int getCount() {

return list.size();

}

@Override

public Fragment getItem(int arg0) {

return list.get(arg0);

}

}

[java] view
plain copy

package com.example.viewpagernfragment;

import android.os.Bundle;

import android.support.v4.app.Fragment;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.widget.Button;

import android.widget.Toast;

public class ButtonFragment extends Fragment{

Button myButton;

@Override

public View onCreateView(LayoutInflater inflater, ViewGroup container,

Bundle savedInstanceState) {

View rootView = inflater.inflate(R.layout.guide_1, container, false);//关联布局文件

myButton = (Button)rootView.findViewById(R.id.mybutton);//根据rootView找到button

//设置按键监听事件

myButton.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

// TODO Auto-generated method stub

Toast.makeText(ButtonFragment.this.getActivity(), "button is click!", Toast.LENGTH_SHORT).show();

}

});

return rootView;

}

}

[java] view
plain copy

package com.example.viewpagernfragment;

import android.os.Bundle;

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

public class TestFragment extends Fragment {

private static final String TAG = "TestFragment";

private String hello;// = "hello android";

private String defaultHello = "default value";

static TestFragment newInstance(String s) {

TestFragment newFragment = new TestFragment();

Bundle bundle = new Bundle();

bundle.putString("hello", s);

newFragment.setArguments(bundle);

//bundle还可以在每个标签里传送数据

return newFragment;

}

@Override

public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {

Log.d(TAG, "TestFragment-----onCreateView");

Bundle args = getArguments();

hello = args != null ? args.getString("hello") : defaultHello;

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

TextView viewhello = (TextView) view.findViewById(R.id.tv);

viewhello.setText(hello);

return view;

}

}

[html] view
plain copy

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

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:background="#ff0000ff" >

<Button

android:id="@+id/mybutton"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="hit me"

android:gravity="center"/>

</RelativeLayout>

[html] view
plain copy

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

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:orientation="vertical"

android:background="#158684" >

<TextView

android:id="@+id/tv"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="TextView" />

</RelativeLayout>