Android ViewPager+Fragment的使用

Android ViewPager+Fragment的使用

-1. 概述
-2. 代码实战
-3. 源码地址

1. 概述
   ViewPager + Fragment在Android App中广泛使用到，本文用案例简单讲述ViewPager + Fragment的使用

2. 代码实战
   该案例实现了用ViewPager + Fragement的简单使用，点击页面下方的四个按钮可以跳转到不同的Fragment，并且Fragment之间也可以通过滑动进行切换
   MainActivity布局activity_main.xml

<?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:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.gui.abc.tabtest.MainActivity">
    <android.support.v4.view.ViewPager
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:id="@+id/vp"
        android:layout_weight="1"
        >
    </android.support.v4.view.ViewPager>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:orientation="horizontal"
        android:padding="5dp">
        <Button
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:text="Tab1"
            android:id="@+id/btn_tab1"
            android:background="#CCCCCC"
            />
        <Button
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:text="Tab1"
            android:id="@+id/btn_tab2"
            android:background="#CCCCCC"
            />
        <Button
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:text="Tab1"
            android:id="@+id/btn_tab3"
            android:background="#CCCCCC"
            />
        <Button
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:text="Tab1"
            android:id="@+id/btn_tab4"
            android:background="#CCCCCC"
            />
    </LinearLayout>
</LinearLayout>

自定义Fragment类TabFragment

public class TabFragment extends Fragment {
    private String mTitle = "Default";

    public static final String TITLE = "title";

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        if(getArguments() != null){
            mTitle = getArguments().getString(TITLE);
        }

        TextView tv = new TextView(getActivity());
        tv.setText(mTitle);
        tv.setBackgroundColor(Color.WHITE);
        tv.setTextSize(20);
        tv.setGravity(Gravity.CENTER);
        return tv;
    }
}

MainActivity类：

public class MainActivity extends AppCompatActivity implements View.OnClickListener{

    private ViewPager viewPager;
    private FragmentPagerAdapter mAdapter;
    private List<Fragment> mTabs = new ArrayList<>();
    private List<Button> mTabIndicators = new ArrayList<Button>();
    private String mTitles[] = new String[]{
            "第一个Fragment", "第二个Fragment", "第三个Fragment", "第四个Fragment"
    };
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();

        initEvent();
        initDatas();

        viewPager.setAdapter(mAdapter);

    }

    private void initView() {
        viewPager = (ViewPager) findViewById(R.id.vp);
        Button tabOne = (Button) findViewById(R.id.btn_tab1);
        mTabIndicators.add(tabOne);
        Button tabTow = (Button) findViewById(R.id.btn_tab2);
        mTabIndicators.add(tabTow);
        Button tabThree = (Button) findViewById(R.id.btn_tab3);
        mTabIndicators.add(tabThree);
        Button tabFour = (Button) findViewById(R.id.btn_tab4);
        mTabIndicators.add(tabFour);

        tabOne.setOnClickListener(this);
        tabTow.setOnClickListener(this);
        tabThree.setOnClickListener(this);
        tabFour.setOnClickListener(this);

        tabOne.setBackgroundColor(Color.RED);
    }

    public void initEvent(){
        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {

            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
    }
    public void initDatas(){
        for(String title : mTitles){
            TabFragment tabFrament = new TabFragment();
            Bundle bundle = new Bundle();
            bundle.putString(TabFragment.TITLE, title);
            tabFrament.setArguments(bundle);
            mTabs.add(tabFrament);
        }

        mAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) {
            @Override
            public Fragment getItem(int position) {
                return mTabs.get(position);
            }

            @Override
            public int getCount() {
                return mTabs.size();
            }
        };
    }
    @Override
    public void onClick(View view) {
        clickTab(view);
    }

    private void clickTab(View view) {
        clearOtherTabs();

        switch (view.getId()){
            case R.id.btn_tab1:
                mTabIndicators.get(0).setBackgroundColor(Color.RED);
                viewPager.setCurrentItem(0, false);
                break;
            case R.id.btn_tab2:
                mTabIndicators.get(1).setBackgroundColor(Color.RED);
                viewPager.setCurrentItem(1, false);
                break;
            case R.id.btn_tab3:
                mTabIndicators.get(2).setBackgroundColor(Color.RED);
                viewPager.setCurrentItem(2, false);
                break;
            case R.id.btn_tab4:
                mTabIndicators.get(3).setBackgroundColor(Color.RED);
                viewPager.setCurrentItem(3, false);
                break;
        }
    }

    private void clearOtherTabs() {
        for(int i = 0; i < mTabIndicators.size(); i++){
            mTabIndicators.get(i).setBackgroundColor(Color.parseColor("#CCCCCC"));
        }
    }

}

3.源码地址
源码地址: https://github.com/guizhongyun/TabTest