（微信框架之雏形）ViewPager+Fragment实现滑动标签页

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/u014736095/article/details/46909265

ViewPager + Fragment实现滑动标签页

首先感谢：http://blog.csdn.net/lizhenmingdirk/article/details/13631813，因为这个项目是参考他的。如果没有他的文章作为启发，就没有今天这篇文章。这个文章是在他的基础上做了一点点的修改（因为他的项目有个图片没有找到，故作此修改）标签动画，方便大家一起学习！

先看一下效果图：，通过左右滑动屏幕，切换相应的fragment，并改变下面的标签页样式，源码：http://download.csdn.net/download/u014736095/8905007

实现：

1、新建4个类，使其继承Fragment。（简单典型的Fragment）

ButtonFragment

package com.example.viewpagerfragment;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.Toast;

public class ButtonFragment extends Fragment {
	private Button mButton;
	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		View rootView = inflater.inflate(R.layout.guide_1, container,false);
		mButton = (Button) rootView.findViewById(R.id.btn_test);
		mButton.setOnClickListener(new OnClickListener() {
			
			@Override
			public void onClick(View arg0) {
				// TODO Auto-generated method stub
				Toast.makeText(ButtonFragment.this.getActivity(), "button is click!", Toast.LENGTH_SHORT).show();  
			}
		});
		
		return rootView;
	}

}

guide_1.xml

<?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:background="@android:color/holo_orange_light"
    android:orientation="vertical" >
    
    <Button 
        android:id="@+id/btn_test"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/action_settings"/>

</LinearLayout>

TestFragment   （通过调用里面的方法来创建新的Fragment）

package com.example.viewpagerfragment;

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

guide_2.xml

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

    <TextView
        android:id="@+id/tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView" />

</LinearLayout>

再次声明，4个Fragment可以根据各自的需求来定，不必如上来定义。

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

getCount()

getItem()

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

• instantiateItem(ViewGroup, int)
• destroyItem(ViewGroup, int, Object)
• getCount()
• isViewFromObject(View, Object)

所以我们需要一个FragmentPagerAdapter如下

MyFragmentPagerAdapter

package com.example.viewpagerfragment.adapter;

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 fragmentManager,ArrayList<Fragment> list) {  
      super(fragmentManager);  
      this.list = list;  
        
  }  
    
  @Override  
  public int getCount() {  
      return list.size();  
  }  
    
  @Override  
  public Fragment getItem(int arg0) {  
      return list.get(arg0);  
  }  
}  

3、现在所有东西准备完了，我们就开始操作主Activity来使用ViewPager了。

要使用ViewPager，肯定少不了这个ViewPager控件的，这个控件在v4包了，要使用全名的，除此之外，标签页也少不了，所以我们还需要4个Textview作为标签页

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    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="match_parent"
        android:flipInterval="30"
        android:persistentDrawingCache="animation" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:background="@android:color/darker_gray"
        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="page1"
            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="page2"
            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="page3"
            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="page4"
            android:textSize="18sp" />
    </LinearLayout>
</RelativeLayout>

最后我们在MainActivity里对ViewPager进行相应的操作了：主要包括：实例化控件，设置适配器，设置OnPageChangeListener监听

MainActivity

package com.example.viewpagerfragment;

import java.util.ArrayList;

import android.app.Activity;
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.View;
import android.view.animation.Animation;
import android.view.animation.TranslateAnimation;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;

import com.example.viewpagerfragment.adapter.MyFragmentPagerAdapter;

public class MainActivity extends FragmentActivity {

	private ViewPager mPager;
	private ArrayList<Fragment> fragmentList;
	private TextView view1,view2,view3,view4;
	private ArrayList<View> topTitles;
	private int currIndex;

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

		initTextView();
		initViewPager();
	}

	/**
	 * - happy - 2015-7-15
	 *初始化ViewPager
	 */
	private 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);//设置当前显示标签页为第一页  
        changeTitleView(0);
        mPager.setOnPageChangeListener(new MyOnPageChangeListener());//页面变化时的监听器  
	}
	
	public class MyOnPageChangeListener implements OnPageChangeListener{  
          
        @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 position) {  
            // TODO Auto-generated method stub  
            currIndex = position;  
        	int i = currIndex + 1;
        	changeTitleView(position);
            Toast.makeText(MainActivity.this, "您选择了第"+i+"个页卡", Toast.LENGTH_SHORT).show();  
        }  
    }

	/**
	 * - happy - 2015-7-15
	 *初始化标签名 
	 */
	private void initTextView() {
		// TODO Auto-generated method stub
		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));  
		
		topTitles = new ArrayList<View>();
		topTitles.add(view1);
		topTitles.add(view2);
		topTitles.add(view3);
		topTitles.add(view4);
	}

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

	/**
	 * - happy - 2015-7-16
	 * 改变标签页的样式
	 * @param position
	 */
	private void changeTitleView(int position){
		for (View v : topTitles) {
			v.setBackgroundColor(android.graphics.Color.GRAY);
		}
		topTitles.get(position).setBackgroundColor(android.graphics.Color.YELLOW);
	}
}