利用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;
- }
- }
- }
- }
代码的注释很详细,也不是什么很难实现功能,有了基本实现的样例,大家就可以随意改动,变成自己喜欢的样式了。