Use Fragment + ViewPager to implement multi-page Tab switching and fragmentviewpager

Use Fragment + ViewPager to simulate multi-page Tab switching and fragmentviewpager

The following figure shows how to slide the Tab of a Home Page:

Guo Lin has a blog post titled.

Through viewpager, we can fully implement the effect.

Let's take a look at my implementation:

Homepage code

Package com. example. fragmentdemo; import java. util. arrayList; import android. graphics. color; import android. OS. bundle; import android. support. v4.app. fragment; import android. support. v4.app. fragmentActivity; import android. support. v4.view. viewPager; import android. support. v4.view. viewPager. onPageChangeListener; import android. view. view; import android. view. view. onClickListener; import android. view. window; impo Rt android. widget. imageView; import android. widget. textView;/*** @ author luyecong **/public class MainActivity extends FragmentActivity implements OnClickListener, attributes {private Fragment homeFragment = new HomeFragment (); private Fragment attributes = new attributes (); private Fragment moreFragment = new MoreFragment (); private View homeLayout; private View settingLayout; priv Ate View moreLayout; private ImageView homeImage; private ImageView settingImage; private ImageView moreImage; private TextView homeText; private TextView settingText; private TextView moreText; private ViewPager viewPager; @ jsonvoid onCreate (Bundle created) {super. onCreate (savedInstanceState); requestWindowFeature (Window. FEATURE_NO_TITLE); setContentView (R. layout. activity_main); ini TViews (); final ArrayList <Fragment> fragmentList = new ArrayList <Fragment> (); fragmentList. add (homeFragment); fragmentList. add (settingFragment); fragmentList. add (moreFragment); viewPager. setAdapter (new TabPagerAdapter (getSupportFragmentManager (), fragmentList); viewPager. setOnPageChangeListener (this); setTabSelection (0);}/*** get the instances of each required control and set the necessary click events for them. */Private void initViews () {viewPager = (ViewPager) findViewById (R. id. content); homeLayout = findViewById (R. id. home_layout); settingLayout = findViewById (R. id. setting_layout); moreLayout = findViewById (R. id. more_layout); homeImage = (ImageView) findViewById (R. id. home_image); settingImage = (ImageView) findViewById (R. id. setting_image); moreImage = (ImageView) findViewById (R. id. more_image); homeText = (Tex TView) findViewById (R. id. home_text); settingText = (TextView) findViewById (R. id. setting_text); moreText = (TextView) findViewById (R. id. more_text); homeLayout. setOnClickListener (this); settingLayout. setOnClickListener (this); moreLayout. setOnClickListener (this) ;}@ Overridepublic void onClick (View v) {switch (v. getId () {case R. id. home_layout: setTabSelection (0); viewPager. setCurrentItem (0); break; case R. id. s Etting_layout: setTabSelection (1); viewPager. setCurrentItem (1); break; case R. id. more_layout: setTabSelection (2); viewPager. setCurrentItem (2); break; default: break;}/*** clear all selected States. */Private void clearSelection () {homeImage. setImageResource (R. drawable. tabbar_home); homeText. setTextColor (Color. parseColor ("# 82858b"); settingImage. setImageResource (R. drawable. tabbar_setting); settingText. setTextColor (Color. parseColor ("# 82858b"); moreImage. setImageResource (R. drawable. tabbar_more); moreText. setTextColor (Color. parseColor ("# 82858b");} @ Overridepublic void evaluate (int arg0) {// TODO Auto-generated method stub} @ Overridepublic void onPageScrolled (int arg0, float arg1, int arg2) {// TODO Auto-generated method stub} @ Overridepublic void onPageSelected (int arg0) {setTabSelection (arg0);} private void setTabSelection (int index) {// clear the selected status clearSelection () before each selection; switch (index) {case 0: // when you click the homepage tab, changes the color of homeImage. setImageResource (R. drawable. tabbar_home_s); homeText. setTextColor (Color. BLUE); break; case 1: // when you click the language settings tab, change the color of the widget's image and text settingImage. setImageResource (R. drawable. tabbar_setting_s); settingText. setTextColor (Color. BLUE); break; case 2: // when more tabs are clicked, the widget's image and text color moreImage are changed. setImageResource (R. drawable. tabbar_more_s); moreText. setTextColor (Color. BLUE); break; case 3: default: break ;}}}

package com.example.fragmentdemo;import java.util.List;import android.support.v4.app.Fragment;import android.support.v4.app.FragmentManager;import android.support.v4.app.FragmentStatePagerAdapter;public class TabPagerAdapter extends FragmentStatePagerAdapter {private List<Fragment> list;public TabPagerAdapter(FragmentManager fm, List<Fragment> list) {super(fm);this.list = list;}@Overridepublic Fragment getItem(int arg0) {return list.get(arg0);}@Overridepublic int getCount() {return list.size();}}

Homepage Layout

<LinearLayout xmlns: android = "http://schemas.android.com/apk/res/android" android: layout_width = "match_parent" android: layout_height = "match_parent" android: orientation = "vertical"> <android. support. v4.view. viewPager android: id = "@ + id/content" android: layout_width = "match_parent" android: layout_height = "0dp" android: layout_weight = "1"> </android. support. v4.view. viewPager> <LinearLayout android: layout_width = "match_parent" android: layout_height = "60dp" android: background = "@ drawable/tabbar_bg"> <RelativeLayout android: id = "@ + id/home_layout" android: layout_width = "0dp" android: layout_height = "match_parent" android: layout_weight = "1"> <LinearLayout android: layout_width = "match_parent" android: layout_height = "wrap_content" android: layout_centerVertical = "true" android: orientation = "vertical"> <ImageView android: id = "@ + id/home_image" android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: layout_gravity = "center_horizontal" android: src = "@ drawable/tabbar_home"/> <TextView android: id = "@ + id/home_text" android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: layout_gravity = "center_horizontal" android: text = "Homepage" android: textColor = "# 82858b"/> </LinearLayout> </RelativeLayout> <RelativeLayout android: id = "@ + id/setting_layout" android: layout_width = "0dp" android: layout_height = "match_parent" android: layout_weight = "1"> <LinearLayout android: layout_width = "match_parent" android: layout_height = "wrap_content" android: layout_centerVertical = "true" android: orientation = "vertical"> <ImageView android: id = "@ + id/setting_image" android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: layout_gravity = "center_horizontal" android: src = "@ drawable/tabbar_setting"/> <TextView android: id = "@ + id/setting_text" android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: layout_gravity = "center_horizontal" android: text = "language Settings" android: textColor = "# 82858b"/> </LinearLayout> </RelativeLayout> <RelativeLayout android: id = "@ + id/more_layout" android: layout_width = "0dp" android: layout_height = "match_parent" android: layout_weight = "1"> <LinearLayout android: layout_width = "match_parent" android: layout_height = "wrap_content" android: layout_centerVertical = "true" android: orientation = "vertical"> <ImageView android: id = "@ + id/more_image" android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: layout_gravity = "center_horizontal" android: src = "@ drawable/tabbar_more"/> <TextView android: id = "@ + id/more_text" android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: layout_gravity = "center_horizontal" android: text = "more" android: textColor = "# 82858b"/> </LinearLayout> </RelativeLayout> </LinearLayout>

Fragment Layout

<? 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"> <com. example. fragmentdemo. title android: id = "@ + id/title" android: layout_height = "50dp" android: layout_width = "fill_parent" android: layout_alignParentTop = "true" android: clickable = "true" android: focusable = "true"/> <LinearLayout android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: layout_centerInParent = "true" android: orientation = "vertical"> <TextView android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: layout_gravity = "center_horizontal" android: padding = "10dp" android: text = "this is the homepage" android: textSize = "20sp"/> </LinearLayout> </RelativeLayout>