android viewpager和fragment相结合，实现菜单的滑动效果

ViewPager是SDK自带的可以控制界面滑动一个控件。现在可以上效果图给大家看看。

              

效果就是如上图一样，可以左右滑动下面菜单栏可以改变颜色和微信有点相似。

  1 布局的介绍

 

<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:background="@color/yinbaise"    android:orientation="vertical"    tools:context=".HomePageMenu" >    <android.support.v4.view.ViewPager        android:id="@+id/vp_content"        android:layout_width="match_parent"        android:layout_height="0dp"        android:layout_weight="0.40"        android:background="#ffffff" >    </android.support.v4.view.ViewPager>    <LinearLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:background="@color/DarkGoldenrod1"        >        <TextView            android:id="@+id/functionone"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_weight="1"            android:gravity="center"            android:text="首页"            android:textSize="25dp"            android:textColor="@color/black" />        <TextView            android:id="@+id/functiontow"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_weight="1"            android:gravity="center"            android:textSize="25dp"            android:text="功能1"            android:textColor="@color/black" />        <TextView            android:id="@+id/functionthree"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_weight="1"            android:gravity="center"            android:text="功能2"            android:textSize="25dp"            android:textColor="@color/black" />        <TextView            android:id="@+id/functionfour"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_weight="1"            android:gravity="center"            android:textSize="25dp"            android:text="功能3"            android:textColor="@color/black" />    </LinearLayout></LinearLayout>

这布局就很简单了，一眼就可以看清楚，不过需要注意的是在布局中添加ViewPage的时候，在eclipse中并没又找到，可能是我版本的问题或者是其他愿意，我是直接手打或者复制进布局中就可以了。

2 四个功能菜单对应了4个fragment和4个布局文件

fragment的布局文件简单这里就不给代码了，只是给出fragment中添加布局文件的相关代码，如下：

package com.menu.showfrag;import com.example.viewpagedemo.R;import android.os.Bundle;import android.support.v4.app.Fragment;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;public class FunctionOne extends Fragment {@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {// TODO Auto-generated method stubView view = View.inflate(getActivity(), R.layout.function1, null);return view;}}

这里的ViewPager滑动切换的是fragment，这样就可以在fragment中去写相关的逻辑代码，逻辑很清楚方便。

3  mainactivity的布局已经给出现在来看，它的代码：

 

package com.example.viewpagedemo;import java.util.ArrayList;import java.util.List;import com.menu.showfrag.FunctionFour;import com.menu.showfrag.FunctionOne;import com.menu.showfrag.FunctionThree;import com.menu.showfrag.FunctionTow;import android.os.Bundle;import android.annotation.SuppressLint;import android.app.Activity;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.Menu;import android.view.View;import android.view.View.OnClickListener;import android.widget.TextView;@SuppressLint("ResourceAsColor")public class MainActivity extends FragmentActivity implements OnClickListener {// tyy 四个功能按钮TextView function_one, function_tow, function_three, function_four;// tyy viewpagerViewPager viewpager;// tyy fragment 数组保存fragmentList<Fragment> fm_list;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);function_one = (TextView) findViewById(R.id.functionone);function_tow = (TextView) findViewById(R.id.functiontow);function_three = (TextView) findViewById(R.id.functionthree);function_four = (TextView) findViewById(R.id.functionfour);viewpager = (ViewPager) findViewById(R.id.vp_content);fm_list = new ArrayList<Fragment>();fm_list.add(new FunctionOne());fm_list.add(new FunctionTow());fm_list.add(new FunctionThree());fm_list.add(new FunctionFour());function_one.setOnClickListener(this);function_tow.setOnClickListener(this);function_three.setOnClickListener(this);function_four.setOnClickListener(this);viewpager.setAdapter(new MenuApaper(getSupportFragmentManager()));viewpager.setCurrentItem(0);// tyy 默认显示第一个function_one.setBackgroundResource(R.color.Orange);// tyy 给viewpager添加监听事件viewpager.setOnPageChangeListener(new OnPageChangeListener() {@Overridepublic void onPageSelected(int arg0) {selectColor(arg0);}@Overridepublic void onPageScrolled(int arg0, float arg1, int arg2) {}@Overridepublic void onPageScrollStateChanged(int arg0) {}});}@SuppressLint("ResourceAsColor")@Overridepublic void onClick(View v) {// TODO Auto-generated method stubswitch (v.getId()) {case R.id.functionone:viewpager.setCurrentItem(0);break;case R.id.functiontow:viewpager.setCurrentItem(1);break;case R.id.functionthree:viewpager.setCurrentItem(2);break;case R.id.functionfour:viewpager.setCurrentItem(3);break;default:break;}}/** * tyy 改变底部菜单颜色 *  * @param i是fragment的index */private void selectColor(int i) {// TODO Auto-generated method stubswitch (i) {case 0:function_one.setBackgroundResource(R.color.Orange);function_tow.setBackgroundResource(R.color.DarkGoldenrod1);function_three.setBackgroundResource(R.color.DarkGoldenrod1);function_four.setBackgroundResource(R.color.DarkGoldenrod1);break;case 1:function_one.setBackgroundResource(R.color.DarkGoldenrod1);function_tow.setBackgroundResource(R.color.Orange);function_three.setBackgroundResource(R.color.DarkGoldenrod1);function_four.setBackgroundResource(R.color.DarkGoldenrod1);break;case 2:function_one.setBackgroundResource(R.color.DarkGoldenrod1);function_tow.setBackgroundResource(R.color.DarkGoldenrod1);function_three.setBackgroundResource(R.color.Orange);function_four.setBackgroundResource(R.color.DarkGoldenrod1);break;case 3:function_one.setBackgroundResource(R.color.DarkGoldenrod1);function_tow.setBackgroundResource(R.color.DarkGoldenrod1);function_three.setBackgroundResource(R.color.DarkGoldenrod1);function_four.setBackgroundResource(R.color.Orange);break;default:break;}}class MenuApaper extends FragmentPagerAdapter {public MenuApaper(FragmentManager fm) {super(fm);}@Overridepublic Fragment getItem(int position) {// tyy 将fm_list中添加到了adapter中return fm_list.get(position);}@Overridepublic int getCount() {// TODO Auto-generated method stubreturn fm_list.size();}}}

这里有几点需要注意的是 

a.给ViewPager添加adapter：  viewpager.setAdapter(new MenuApaper(getSupportFragmentManager()));但是这里的activity必须继承FragmentActivity不然是找不到getSupportFragmentManager()这个方法的。

b.给ViewPager添加监听事件，这样可以来监听滑动并且在相应的方法中处理事件。

附带源码：http://download.csdn.net/download/sky_918/9634600