ViewPager和Fragment的组合使用

来源：互联网发布：redis 查询数据库0 编辑：程序博客网时间：2024/06/04 00:21

支持手指滑动切换页面，也支持点击导航按钮切换页面。

页面布局文件：

[html] view plaincopy
<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>  

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

[java] view plaincopy

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;
@Override
protected 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);
}
@Override
public Fragment getItem(int position) {
return fragmentList.get(position);
}
@Override
public int getCount() {
return fragmentList.size();
}
/**
* 每次更新完成ViewPager的内容后，调用该接口，此处复写主要是为了让导航按钮上层的覆盖层能够动态的移动
*/
@Override
public 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);
}
@Override
public 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);
}
}

代码下载地址：

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

0 0