ViewPager和Fragment的嵌套使用

来源：互联网发布：淘宝宝贝上架时间查询编辑：程序博客网时间：2024/06/08 12:29

老规矩先贴效果图,最后给Demo的ZIP提供下载

*第一站效果图
这里写图片描述

*滑动到第三种的效果图

这里写图片描述

第一步:适配器的创建(就是viewpager的adapter)

分析:1,这里有三个函数，根据第一部分的官方文档，可知，对于FragmentPagerAdapter的派生类，只重写getItem(int)和getCount()就可以了。2,对于构造函数,这里必须传入一个Fragment的List集合对象,用于保存滑动的Fragment对象,并且初始化了它

对于构造函数，这里申请了一个Fragment的List对象，用于保存用于滑动的Fragment对象，并在创造函数中初始化：

package adapter;import android.support.v4.app.Fragment;import android.support.v4.app.FragmentManager;import android.support.v4.app.FragmentPagerAdapter;import java.util.ArrayList;import java.util.List;/** * Created by lovelin on 2016/6/23. */public class FragAdapter extends FragmentPagerAdapter {    private List<Fragment> fragmentList;    /**     * 构造函数中就把 管理Fragment的List集合传入进来     * 在这里必须实现只重写getItem(int)和getCount()     * @param fragmentManager     * @param fragmentList     */    public FragAdapter(FragmentManager fragmentManager, ArrayList<Fragment> fragmentList) {        super(fragmentManager);        this.fragmentList = fragmentList;    }    @Override    public Fragment getItem(int position) {        return fragmentList.get(position);    }    @Override    public int getCount() {        return fragmentList.size();    }}

第二步:Fragment类的创建(就是viewpager滑动时的界面)

*这里根据需求,来显示你的viewpager滑动时候时,一共需要显示的界面(几个界面就有几个fragment,并且每个Fragment都可以做相对应逻辑需求的处理我这里没有做实例,只是单纯的给了颜色区分不同界面),我这里的Deom就只有四个,

*第一个Fargment01的XML

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:background="#faf"    android:orientation="vertical">    <TextView        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_centerInParent="true"        android:text="我是第一个Fragment"        android:textColor="#000"        android:textSize="19sp" /></RelativeLayout>

*第一个Fragment01的Java代码

package fragment;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;import com.tzt.viewpagerfragment.R;/** * Created by lovelin on 2016/6/23. */public class Fragment01 extends Fragment {    @Nullable    @Override    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {        View view = View.inflate(getActivity(), R.layout.fragment_01, null);        return view;    }}

*第二个fargment的xml
*略
*第二个fargment的java代码

================其他几个fragment的xml和代码省略了因为和第一个一样============

第三步:ManiAcivity的操作(主activity的处理,重点哦)

在这里,ViewPager的滑动带动红点的动态移动(这个在很多地方都是用的到,比如新手引导界面,一半的viewpager动画的联动实现等等)

看图下面由我的Demo代码里面有非常详细的注释我就不在这里叽叽歪歪了哦

这里写图片描述

*XML文件

Activity的Java代码

package com.tzt.viewpagerfragment;import android.annotation.TargetApi;import android.os.Build;import android.support.v4.app.Fragment;import android.support.v4.app.FragmentActivity;import android.os.Bundle;import android.support.v4.view.ViewPager;import android.util.Log;import android.view.ViewGroup;import android.view.ViewTreeObserver;import android.widget.ImageView;import android.widget.LinearLayout;import android.widget.RelativeLayout;import java.util.ArrayList;import adapter.FragAdapter;import fragment.Fragment01;import fragment.Fragment02;import fragment.Fragment03;import fragment.Fragment04;public class MainActivity extends FragmentActivity {    private ViewPager viewPager;    private ArrayList<Fragment> fragmentList;    private FragAdapter fragAdapter;    private ImageView iv_red_piont;    private LinearLayout ll_container;    private int pointMoveDistance;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        initView();        initData();    }    private void initView() {        viewPager = (ViewPager) findViewById(R.id.viewPager);        //红点的线性布局  (父)        ll_container = (LinearLayout) findViewById(R.id.ll_container);        //红点        iv_red_piont = (ImageView) findViewById(R.id.iv_red_piont);    }    private void initData() {        //存Frangment的list        fragmentList = new ArrayList<Fragment>();        Fragment01 fragment01 = new Fragment01();        Fragment02 fragment02 = new Fragment02();        Fragment03 fragment03 = new Fragment03();        Fragment04 fragment04 = new Fragment04();        fragmentList.add(fragment01);        fragmentList.add(fragment02);        fragmentList.add(fragment03);        fragmentList.add(fragment04);        fragAdapter = new FragAdapter(getSupportFragmentManager(), fragmentList);        viewPager.setAdapter(fragAdapter);        initPointData();        //viewager 滑动时候远点的动画        initViewPager();    }    private void initPointData() {        for (int i = 0; i < fragmentList.size(); i++) {            //初始化小圆点            ImageView point = new ImageView(this);            point.setBackgroundResource(R.drawable.shape_point_gray);            //获取父布局参数,在初始化参数            LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);            if (i > 0) {                layoutParams.leftMargin = 10;            }            point.setLayoutParams(layoutParams);            ll_container.addView(point);        }    }    private void initViewPager() {        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {            /**             *当页面滑动的过程中调用的方法             * positionOffset,移动偏移的百分比             * position当前的位置             * positionOffsetPixels  具体移动了多少像素             */            @Override            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {                //更新小红点的距离                int leftMargin = (int)(pointMoveDistance* positionOffset)+position*pointMoveDistance;                //计算小红点当前左边的距离                //先拿到小红点爹的布局参数                RelativeLayout.LayoutParams parmas = (RelativeLayout.LayoutParams) iv_red_piont.getLayoutParams();                //再更新他的leftmargin实现移动                parmas.leftMargin = leftMargin;                //最后再给子view设置参数                iv_red_piont.setLayoutParams(parmas);            }            @Override            public void onPageSelected(int position) {            }            @Override            public void onPageScrollStateChanged(int state) {            }        });        //xml的监听        iv_red_piont.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {            @TargetApi(Build.VERSION_CODES.JELLY_BEAN)            @Override            public void onGlobalLayout() {                iv_red_piont.getViewTreeObserver().removeOnGlobalLayoutListener(this);                //获取到两个fragment移动时,两个点需要移动的距离                pointMoveDistance = ll_container.getChildAt(1).getLeft() - ll_container.getChildAt(0).getLeft();            }        });    }}

第四步:可能出现的问题

*问题：在MainActivity中，当写到这句：fragments.add(new Fragment1()); 向Fragment列表中添加Fragement对象实例时，会提示“无法将Fragment1()转换为fragment”

*解决办法：这是因为导入包不一致，一般的问题在于：在Fragment1中导入的是android.app.Fragment，而在这里导入类确是：android.support.v4.app.Fragment,包不同当然无法转换，统一导入为android.support.v4.app.Fragment之后就正常了.参考文章《android之cannot convert from Fragment1 to Fragment》

Demo链接http://download.csdn.net/detail/tongzhengtong/9557948

2 0