Android ViewPager+Fragment的使用

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

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

代码实战 该案例实现了用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