Android Fragment实践- ViewPager +Fragment实现页面滑动效果

简介：

Android系统中提供的ViewPager与Fragment一起使用，可以更加方便的管理每个Page的生命周期。最常用的场景是，在一个页面内，可以进行左右滑动，从而显示不同的内容。
本篇给出一个典型的ViewPager + Fragment，来实现这种滑动。

代码：

（1）Activity：

package com.test;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.view.KeyEvent;
import android.view.Window;

import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;

import shu.shi.com.R;
import shu.shi.com.shushi.MyFragment;
import shu.shi.com.tools.MyLog;


public class TestFragmentActivity extends AppCompatActivity {

    private static final String TAG = "ShushiHomeActivity_bak";

    private List<Fragment> mFragmentList = new ArrayList<Fragment>();

    //adapter
    TestAdaptor mTestAdaptor;

    //ui
    protected TabLayout mTabs;

    protected ViewPager mViewPager;

    /////////////////////////function begin/////////////////////////////

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.test_activity_basic_main);
        initTabs();

        //初始化frament
        initFragment(savedInstanceState);
        setViewPager();
    }

    @Override
    protected void onResume() {
        super.onResume();
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();

    }

    @Override
    protected void onSaveInstanceState(Bundle outState) {
        super.onSaveInstanceState(outState);
        FragmentManager manager = getSupportFragmentManager();

    }

    private void initTabs() {
        mTabs = (TabLayout) findViewById(R.id.qa_tab);
        mViewPager = (ViewPager)findViewById(R.id.viewpager);

        mTabs.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                int position = tab.getPosition();
                MyLog.i(TAG,"====mTabs.getPosition()=======" +position);
                if (position >= 0) {
                    CharSequence cs = tab.getText();
                    if (cs!=null && cs.length()>0) {
                        String tabStr = cs.toString();
                        MyLog.i(TAG,"====mTabs.getPosition() tabStr=======" + tabStr);
                    }
                }
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {

            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {

            }
        });

    }


    ///////////////////////////////////////////fragment and list and scrool page /////////////////
    /**
     * 初始化fragment的记忆状态
     *
     * @param savedInstanceState
     */
    private void initFragment(Bundle savedInstanceState) {
        FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
        if (savedInstanceState != null) {
            for (int i = 0; i< 5; i++) {
                String key = "MyFragment" + i;
                MyFragment fragment = (MyFragment)getSupportFragmentManager().getFragment(savedInstanceState, key);
                mFragmentList.add(fragment);
            }

        } else {
            for (int i = 0; i< 5; i++) {
                MyFragment fragment = new MyFragment();
                mFragmentList.add(fragment);
            }
        }

    }

    /**
     * 填充ViewPager内容
     */
    private void setViewPager() {
        String[] titleName = {
                "C",
                "C++",
                "Java",
                "Python",
                "Go"
        };

        mTestAdaptor = new TestAdaptor(getSupportFragmentManager(), mFragmentList,Arrays.asList(titleName));

        mViewPager.setAdapter(mTestAdaptor);

        mTabs.setupWithViewPager(mViewPager);
        mTabs.setTabTextColors(getResources().getColor(R.color.white_00cccc), getResources().getColor(R.color.white));
    }

    /**
     * 入口
     *
     * @param activity
     */
    public static void startAction(Activity activity) {
        Intent intent = new Intent(activity, TestFragmentActivity.class);
        activity.startActivity(intent);
        activity.overridePendingTransition(R.anim.quan_fade_in,
                R.anim.quan_fade_out);
    }

    ////////////exit///////////


    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {

        if (keyCode == KeyEvent.KEYCODE_BACK) {

            return true;
        }
        return super.onKeyDown(keyCode, event);
    }

}

说明：

mFragmentList是一个List，用于保存要操作的Fragment对象；

mTestAdaptor是一个适配器，用于和mFragmentList进行绑定，从而可以动态调整Fragment的个数；

mViewPager是ViewPager对象，在布局文件中有定义，然后通过findViewById进行初始化：

        mViewPager = (ViewPager)findViewById(R.id.viewpager);
 

mViewPager通过调用它的setAdapter进行适配器的设置；

TabLayout mTabs： 有几个fragment，就需要定义几个TabLayout对象，用于标题的显示；

（2）frameng：

package shu.shi.com.shushi;

import android.content.Context;
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 android.widget.TextView;

import shu.shi.com.R;

public class MyFragment extends Fragment {
    private static final String TAG = "MyFragment";

    private View convertView;
    private TextView mTextView;

    @Override
    public void onAttach(Context context) {
        super.onAttach(context);
    }

    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        if (convertView == null) {
            convertView = inflater.inflate(R.layout.fragment_mytest, container, false);
            mTextView = convertView.findViewById(R.id.fragment_textview);
        }
        return convertView;
    }

    @Override
    public void onDetach() {
        super.onDetach();
    }

}

说明：

在Fragment中，通过mTextView来显示当前Fragment的文本内容；

Fragment通过convertView.findViewById来获取控件对象；

Fragment有自己的生命周期； 

（2）Actiivty对应的布局文件：

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"

    >

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        style="@style/Theme.AppCompat.Light"
        app:elevation="0dp">

        <android.support.v7.widget.Toolbar
            android:id="@+id/basic_toolbar"
            android:layout_width="match_parent"

            android:layout_height="?attr/actionBarSize"
            android:background="@color/transparent"

            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/AppTheme.PopupOverlay"
            android:visibility="gone"
            />

        <android.support.design.widget.TabLayout
            android:id="@+id/qa_tab"

            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabBackground="?attr/colorPrimaryDark"
            app:tabIndicatorColor="@color/orage"
            />


    </android.support.design.widget.AppBarLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
    </android.support.v4.view.ViewPager>


</android.support.design.widget.CoordinatorLayout>

 说明：

Activity中，包含TabLayout，ViewPager等的声明。

 （4）fragment所在的布局文件：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    >
    <LinearLayout
        android:layout_marginTop="10dp"
        android:id="@+id/linearLayout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        >
        <TextView
            android:id="@+id/fragment_textview"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="my fragment"
            android:visibility="visible"
            >
        </TextView>
    </LinearLayout>


</LinearLayout>

说明：

Fragment中，TextView是显示的内容。 

（5）Adapter：用于适配fragment。

package com.test;

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;

import shu.shi.com.scquan.utils.CollectionUtils;

/**
 * Created by admin on 2017/11/30.
 */

public class TestAdaptor extends FragmentPagerAdapter {
    protected List<Fragment> fragmentList = new ArrayList<Fragment>();
    protected List<String> mTitles;

    public TestAdaptor(FragmentManager manager, List<Fragment> listFrg, List<String> mTitles) {
        super(manager);
        this.fragmentList = listFrg;
        this.mTitles = mTitles;
    }

    public TestAdaptor(FragmentManager manager, List<Fragment> fragmentList) {
        super(manager);
        this.fragmentList = fragmentList;
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return !CollectionUtils.isNullOrEmpty(mTitles) ? mTitles.get(position) : "";
    }

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

    @Override
    public int getCount() {
        return fragmentList.size();
    }

    protected void setListFragment(List<Fragment> listFrg,List<String> titles) {
        fragmentList = listFrg;
        mTitles = titles;
    }
}

说明：

 TestAdaptor集成自FragmentPagerAdapter，用于和fragment的联动。

总结：使用viewpager+fragment，可以实现强大的页面滑动效果。 

---