ViewPager和Fragment的组合使用

本篇文章介绍的方法不推荐使用，可以参考另一篇文章：

http://blog.csdn.net/u013758734/article/details/43197659

今天想看TabHost相关信息的时候，提示建议使用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"    tools:context=".MainActivity" >        <!-- 底部四个导航按钮 -->    <LinearLayout         android:id="@+id/ll_tabs"        android:layout_width="match_parent"        android:layout_height="50dp"        android:layout_alignParentBottom="true"        android:orientation="horizontal"        >                <Button             android:id="@+id/btn_one"            android:layout_width="0dp"            android:layout_height="match_parent"            android:layout_weight="1"            android:text="One"            android:background="#009eff"            android:textColor="#fff"            />        <Button             android:id="@+id/btn_two"            android:layout_width="0dp"            android:layout_height="match_parent"            android:layout_weight="1"            android:text="Two"            android:background="#009e00"            android:textColor="#fff"            />        <Button             android:id="@+id/btn_three"            android:layout_width="0dp"            android:layout_height="match_parent"            android:layout_weight="1"            android:text="Three"            android:background="#009eff"            android:textColor="#fff"            />        <Button             android:id="@+id/btn_four"            android:layout_width="0dp"            android:layout_height="match_parent"            android:layout_weight="1"            android:text="Four"            android:background="#009e00"            android:textColor="#fff"            />            </LinearLayout>        <!-- 覆盖在导航按钮上的覆盖层，表示选中项 -->    <ImageView         android:id="@+id/imgv_overtab"        android:layout_width="60dp"        android:layout_height="50dp"        android:background="@drawable/red"        android:layout_alignParentBottom="true"        />        <!-- 导航和视图的分割线 -->    <View         android:layout_width="match_parent"        android:layout_height="2dp"        android:background="#f00"        android:layout_above="@id/ll_tabs"        />        <!--     <RelativeLayout        android:id="@+id/fragment_content_view"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:layout_above="@id/ll_tabs"        android:layout_marginBottom="2dp"        android:background="#fff"        />     -->          <!-- VIewPager 主要是加载内容的 -->     <android.support.v4.view.ViewPager        android:id="@+id/viewpager"        android:layout_above="@id/ll_tabs"        android:layout_marginBottom="2dp"        android:layout_width="match_parent"        android:layout_height="match_parent"/>   </RelativeLayout>

下面是具体的代码，由于代码比较少，很容易看明白，就不做多的讲述了：

package com.example.switchfragment;import java.util.ArrayList;import java.util.List;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.FragmentStatePagerAdapter;import android.support.v4.view.ViewPager;import android.view.View;import android.view.ViewGroup;import android.view.View.OnClickListener;import android.view.animation.TranslateAnimation;import android.widget.Button;import android.widget.ImageView;import android.widget.RelativeLayout;public class MainActivity extends FragmentActivity implements OnClickListener{/** * 四个导航按钮 */Button buttonOne;Button buttonTwo;Button buttonThree;Button buttonFour;/** * 作为页面容器的ViewPager */ViewPager mViewPager;/** * 页面集合 */List<Fragment> fragmentList;/** * 四个Fragment（页面） */OneFragment oneFragment;TwoFragment twoFragment;ThreeFragment threeFragment;FourFragment fourFragment;//覆盖层ImageView imageviewOvertab;//屏幕宽度int screenWidth;//当前选中的项int currenttab=-1;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);buttonOne=(Button)findViewById(R.id.btn_one);buttonTwo=(Button)findViewById(R.id.btn_two);buttonThree=(Button)findViewById(R.id.btn_three);buttonFour=(Button)findViewById(R.id.btn_four);buttonOne.setOnClickListener(this);buttonTwo.setOnClickListener(this);buttonThree.setOnClickListener(this);buttonFour.setOnClickListener(this);mViewPager=(ViewPager) findViewById(R.id.viewpager);fragmentList=new ArrayList<Fragment>();oneFragment=new OneFragment();twoFragment=new TwoFragment();threeFragment=new ThreeFragment();fourFragment=new FourFragment();fragmentList.add(oneFragment);fragmentList.add(twoFragment);fragmentList.add(threeFragment);fragmentList.add(fourFragment);screenWidth=getResources().getDisplayMetrics().widthPixels;buttonTwo.measure(0, 0);imageviewOvertab=(ImageView) findViewById(R.id.imgv_overtab);RelativeLayout.LayoutParams imageParams=new RelativeLayout.LayoutParams(screenWidth/4, buttonTwo.getMeasuredHeight());imageParams.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM);imageviewOvertab.setLayoutParams(imageParams);mViewPager.setAdapter(new MyFrageStatePagerAdapter(getSupportFragmentManager()));}/** * 定义自己的ViewPager适配器。 * 也可以使用FragmentPagerAdapter。关于这两者之间的区别，可以自己去搜一下。 */class MyFrageStatePagerAdapter extends FragmentStatePagerAdapter{public MyFrageStatePagerAdapter(FragmentManager fm) {super(fm);}@Overridepublic Fragment getItem(int position) {return fragmentList.get(position);}@Overridepublic int getCount() {return fragmentList.size();}/** * 每次更新完成ViewPager的内容后，调用该接口，此处复写主要是为了让导航按钮上层的覆盖层能够动态的移动 */@Overridepublic void finishUpdate(ViewGroup container) {super.finishUpdate(container);//这句话要放在最前面，否则会报错//获取当前的视图是位于ViewGroup的第几个位置，用来更新对应的覆盖层所在的位置int currentItem=mViewPager.getCurrentItem();if (currentItem==currenttab){return ;}imageMove(mViewPager.getCurrentItem());currenttab=mViewPager.getCurrentItem();}}/** * 移动覆盖层 * @param moveToTab 目标Tab，也就是要移动到的导航选项按钮的位置 * 第一个导航按钮对应0，第二个对应1，以此类推 */private void imageMove(int moveToTab){int startPosition=0;int movetoPosition=0;startPosition=currenttab*(screenWidth/4);movetoPosition=moveToTab*(screenWidth/4);//平移动画TranslateAnimation translateAnimation=new TranslateAnimation(startPosition,movetoPosition, 0, 0);translateAnimation.setFillAfter(true);translateAnimation.setDuration(200);imageviewOvertab.startAnimation(translateAnimation);}@Overridepublic void onClick(View v){switch (v.getId()){case R.id.btn_one:changeView(0);break;case R.id.btn_two:changeView(1);break;case R.id.btn_three:changeView(2);break;case R.id.btn_four:changeView(3);break;default:break;}}//手动设置ViewPager要显示的视图private void changeView(int desTab){mViewPager.setCurrentItem(desTab, true);}}

注释写的很详细了，就不多说了。其实也没什么深的技术，就是对ViewPager的使用。

里面还有其他的布局文件以及java文件没有贴出来，有意向的可以到这个地址下载哦，免积分哦！

http://download.csdn.net/detail/u013758734/7477459