ViewPager结合Fragment

viewPager是我们项目中经常需要用到的控件，而这种控件也往往和Fragment碎片一起使用，最近业务有涉及这部分的需求，特此学习记录一下。

首先是ViewPager的组成：布局文件中的Viewpager（用于绑定Fragment）、 List集合存放Fragment、Viewpager的适配器

其次是流程：1、List中添加fragment  2、adapter获取Fragment管理器  3、viewpager设置adapter

比如这类需求

 

 

首先是MainActivity

public class MainActivity extends FragmentActivity implements ViewPager.OnPageChangeListener, View.OnClickListener {

    private ViewPager mViewPager;
    private TextView mTvFirst,mTvSecond,mTvThird;

    //定义一个list来存放Fragment
    private List<Fragment> fragmentList;

    //自定义一个适配器
    private ViewPagerAdapter mAdater;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
        initEvent();
        // adapter获取Fragment管理器
        mAdater = new ViewPagerAdapter(getSupportFragmentManager());
        // viewpager设置adapter
        mViewPager.setAdapter(mAdater);

    }

    //初始化控件
    private void initView() {
        // 绑定控件
        mViewPager = findViewById(R.id.vp_viewpager);
        mTvFirst = findViewById(R.id.tv_dial);
        mTvSecond = findViewById(R.id.tv_contacts);
        mTvThird = findViewById(R.id.tv_sms);
        // 添加fragment
        fragmentList = new ArrayList<>();
        fragmentList.add(new RecommandFragment());
        fragmentList.add(new NewsFragment());
        fragmentList.add(new MyFragment());

        //默认进入应用第一个被选中
        InitTextViewColor();
        mTvFirst.setTextColor(Color.parseColor("#1FB79F"));
    }

    //设置监听
    private void initEvent() {
        mViewPager.addOnPageChangeListener(this);
        mTvFirst.setOnClickListener(this);
        mTvSecond.setOnClickListener(this);
        mTvThird.setOnClickListener(this);
    }

    //颜色初始化
    private void InitTextViewColor() {
        mTvFirst.setTextColor(Color.WHITE);
        mTvSecond.setTextColor(Color.WHITE);
        mTvThird.setTextColor(Color.WHITE);
    }


    /**
     * 页面滑动过程中回调
     * @param position
     * @param v
     * @param i1
     */
    @Override
    public void onPageScrolled(int position, float v, int i1) {

    }

    /**
     * 页面被选择时候的回调
     * @param position
     */
    @Override
    public void onPageSelected(int position) {
        InitTextViewColor();
        switch (position) {

            case 0:
                mTvFirst.setTextColor(Color.parseColor("#1FB79F"));
                break;

            case 1:
                mTvSecond.setTextColor(Color.parseColor("#1FB79F"));
                break;

            case 2:
                mTvThird.setTextColor(Color.parseColor("#1FB79F"));
                break;
        }

    }

    /**
     * 页面滑动状态监听
     * @param state
     */
    @Override
    public void onPageScrollStateChanged(int state) {

    }

    /**
     * 当点击标题的时候，通过传入当前点击的页面的position，调用mViewPager.setCurrentItem()来实现页面的变化
     * @param v
     */
    @Override
    public void onClick(View v) {
        switch (v.getId()) {

            case R.id.tv_dial:
                mViewPager.setCurrentItem(0);
                break;

            case R.id.tv_contacts:
                mViewPager.setCurrentItem(1);
                break;

            case R.id.tv_sms:
                mViewPager.setCurrentItem(2);
                break;
        }
    }


    /**
     * 创建适配器
     */
    class ViewPagerAdapter extends FragmentPagerAdapter {

        public ViewPagerAdapter(FragmentManager fm) {
            super(fm);
        }

        //获取Fragment
        @Override
        public Fragment getItem(int position) {
            return fragmentList.get(position);
        }

        //显示的个数
        @Override
        public int getCount() {
            return fragmentList.size();

        }
    }

}

 

MainAcivity的布局文件

<?xml version="1.0" encoding="utf-8"?>
<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">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="56dp"
        android:background="#333444"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/tv_dial"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="推荐"
            android:textColor="#ffffff"
            android:textSize="18sp"
            tools:ignore="HardcodedText" />

        <TextView
            android:id="@+id/tv_contacts"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="新闻"
            android:textColor="#ffffff"
            android:textSize="18sp"
            tools:ignore="HardcodedText" />

        <TextView
            android:id="@+id/tv_sms"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="我的"
            android:textColor="#ffffff"
            android:textSize="18sp"
            tools:ignore="HardcodedText" />

    </LinearLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/vp_viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

 

Viewpager里面对应的Fragment代码

public class MyFragment extends android.support.v4.app.Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {

        View view = inflater.inflate(R.layout.fragment_mine, container, false);

        return view;
    }

}

Fragment布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:text="这个是我的Fragment"
        android:gravity="center"
        android:layout_width="match_parent"
        android:layout_height="30dp" />
    
</LinearLayout>

 

 

参考代码 无积分，免费的