ViewPager（二）：Fragment+ViewPager实现页面滑动

最新推荐文章于 2025-07-23 21:34:58 发布

原创最新推荐文章于 2025-07-23 21:34:58 发布 · 450 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#viewpager #andriod

雪衣随笔记专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种在Android应用中实现通过点击标题栏和滑动手势来切换不同页面的方法。具体实现了四个Fragment（新闻、体育、娱乐、天气），并使用ViewPager组件结合自定义的FragmentPagerAdapter完成页面间的切换效果。

效果图：

功能：点击标题栏可以切换页面，滑动可切换页面。

activity_main.xml布局文件代码：

 <LinearLayout 
        android:id="@+id/layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        
        <TextView 
            android:id="@+id/news"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="新闻"
            android:textSize="20sp"
            android:gravity="center"
            android:clickable="true"/>
        
        <TextView 
            android:id="@+id/sport"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="体育"
            android:textSize="20sp"
            android:gravity="center"
            android:clickable="true"/>
        <TextView 
            android:id="@+id/entertainment"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="娱乐"
            android:textSize="20sp"
            android:gravity="center"
            android:clickable="true"/>
        <TextView 
            android:id="@+id/weather"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="天气"
            android:textSize="20sp"
            android:gravity="center"
            android:clickable="true"/>
    </LinearLayout>
    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/layout"
        ></android.support.v4.view.ViewPager>

fragment的布局文件fragment.xml中就存放了一个TextView

MainActivity.java的代码如下：

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.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.LinearLayout;
import android.widget.TextView;

//要继承v4包的FragmentActivity
public class MainActivity extends FragmentActivity {
	private ViewPager viewPager;
	private List<Fragment> fragments; //集合存储每个页面的fragment
	private TextView[] titles;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		viewPager=(ViewPager)findViewById(R.id.viewPager);
		//创建集合，初始化页面的Fragment
		initFragment();
		
		MyAdapter adapter = new MyAdapter(getSupportFragmentManager());
		viewPager.setAdapter(adapter);
		
		//初始化标题
		initTitle();
		viewPager.setOnPageChangeListener(new OnPageChangeListener() {
			
			@Override
			public void onPageSelected(int arg0) {
				// TODO Auto-generated method stub
				for (int i = 0; i < titles.length; i++) {
					titles[i].setBackgroundColor(Color.WHITE);
				}
				titles[arg0].setBackgroundColor(Color.GRAY);
				
			}
			
			@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
				
			}
		});
	}
	
	private void initTitle() {
		// TODO Auto-generated method stub
		titles=new TextView[fragments.size()];
		LinearLayout layout = (LinearLayout)findViewById(R.id.layout);
		for (int i = 0; i < titles.length; i++) {
			titles[i]=(TextView) layout.getChildAt(i);
			titles[i].setBackgroundColor(Color.WHITE);
			titles[i].setTag(i);
			titles[i].setOnClickListener(new OnClickListener() {
				
				@Override
				public void onClick(View v) {
					// TODO Auto-generated method stub
					viewPager.setCurrentItem((Integer)v.getTag());
					
				}
			});
		}
		//第一个默认选中
		titles[0].setBackgroundColor(Color.GRAY);
	}

	//PagerAdapter适用于view,
	//如果ViewPager加载Fragment，使用FragmentPagerAdapter
	class MyAdapter extends FragmentPagerAdapter{

		public MyAdapter(FragmentManager fm) {
			super(fm);
			// TODO Auto-generated constructor stub
		}

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

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

	private void initFragment() {
		// TODO Auto-generated method stub
		fragments=new ArrayList<Fragment>();
		
		//新闻
		MyFragment mf1=new MyFragment();
		Bundle bundle = new Bundle();
		bundle.putInt("tabIndex", 0);
		mf1.setArguments(bundle);
		fragments.add(mf1);
		//体育
		MyFragment mf2=new MyFragment();
		bundle = new Bundle();
		bundle.putInt("tabIndex", 1);
		mf2.setArguments(bundle);
		fragments.add(mf2);
		//娱乐
		MyFragment mf3=new MyFragment();
		bundle = new Bundle();
		bundle.putInt("tabIndex", 2);
		mf3.setArguments(bundle);
		fragments.add(mf3);
		//天气
		MyFragment mf4=new MyFragment();
		bundle = new Bundle();
		bundle.putInt("tabIndex", 3);
		mf4.setArguments(bundle);
		fragments.add(mf4);
		
	}

}

MyFragment.java的代码如下：

import android.graphics.Color;
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.TextView;

public class MyFragment extends Fragment {
	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		View view = inflater.inflate(R.layout.fragment, null);
		TextView tv=(TextView)view.findViewById(R.id.tv);
		
		Bundle bundle = getArguments();
		int tabIndex=bundle.getInt("tabIndex");
		switch (tabIndex) {
		case 0:
			tv.setText("刘云山访问朝鲜");
			view.setBackgroundColor(Color.BLUE);
			break;
		case 1:
			tv.setText("尼克斯获胜");
			view.setBackgroundColor(Color.RED);
			break;
		case 2:
			tv.setText("呼叫大黑牛");
			view.setBackgroundColor(Color.GREEN);
			break;
		case 3:
			tv.setText("今天天气好晴朗");
			view.setBackgroundColor(Color.YELLOW);
			break;

		default:
			break;
		}
		return view;
	}
}