使用ViewPager+Fragment实现选项卡切换效果
参考链接：http://www.jianshu.com/p/7bc9a1ff137e
http://www.devstore.cn/code/info/245.html
http://www.tuicool.com/articles/FfeiumV
本人参考了三篇文章来写这个页面，但是运行这上面给出的源码，发现每个fragment的flag并不能实现切换。
要实现的效果如下：
在activity_main.xml中设置布局。xml内容如下：
<LinearLayoutxmlns: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"tools:context="com.example.fengzhengapp.MainActivity"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="48dp"android:orientation="horizontal"><TextViewandroid:id="@+id/tv_hot"android:layout_width="wrap_content"android:layout_height="fill_parent"android:layout_weight="1.0"android:background="#ffEAEAEA"android:gravity="center"android:text="@string/tab_hot"android:textSize="18sp"/><TextViewandroid:id="@+id/tv_news"android:layout_width="wrap_content"android:layout_height="fill_parent"android:layout_weight="1.0"android:background="#ffEAEAEA"android:gravity="center"android:text="@string/tab_news"android:textSize="18sp"/><TextViewandroid:id="@+id/tv_fav"android:layout_width="wrap_content"android:layout_height="fill_parent"android:layout_weight="1.0"android:background="#ffEAEAEA"android:gravity="center"android:text="@string/tab_favorite"android:textSize="18sp"/></LinearLayout><LinearLayoutandroid:layout_width="match_parent"android:layout_height="3dp"android:orientation="horizontal"><Viewandroid:id="@+id/activity_order_flag_all"android:layout_height="match_parent"android:layout_width="0dp"android:layout_weight="1"android:layout_marginLeft="36dp"android:layout_marginRight="36dp"android:background="@color/app_style_red"android:gravity="center"/><Viewandroid:id="@+id/activity_order_flag_uncomplete"android:layout_height="match_parent"android:layout_width="0dp"android:layout_weight="1"android:layout_marginLeft="36dp"android:layout_marginRight="36dp"android:background="@color/app_style_red"android:gravity="center"android:visibility="invisible"/><Viewandroid:id="@+id/activity_order_flag_complete"android:layout_height="match_parent"android:layout_width="0dp"android:layout_weight="1"android:layout_marginLeft="36dp"android:layout_marginRight="36dp"android:background="@color/app_style_red"android:gravity="center"android:visibility="invisible"/></LinearLayout><android.support.v4.view.ViewPagerandroid:id="@+id/myViewPager"android:layout_width="match_parent"android:layout_height="0dp"android:layout_weight="1"android:flipInterval="30"></android.support.v4.view.ViewPager></LinearLayout>
接下来，增加3个Fragment布局页 ，分别在里面填充简单的内容
第一个：
<?xmlversion="1.0"encoding="utf-8"?><LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"><TextViewandroid:id="@+id/txtHot"android:layout_width="match_parent"android:layout_height="match_parent"android:layout_weight="1"android:text="thisisthehottab"></TextView></LinearLayout>
第二个：
<?xmlversion="1.0"encoding="utf-8"?><LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"><TextViewandroid:id="@+id/txtNews"android:layout_width="match_parent"android:layout_height="match_parent"android:layout_gravity="center"android:gravity="center"android:text="frag_1"android:textSize="30dp"android:textStyle="bold"android:textColor="#000000"/></LinearLayout>
第三个:
<?xmlversion="1.0"encoding="utf-8"?><LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"><TextViewandroid:id="@+id/txtFav"android:layout_width="match_parent"android:layout_height="match_parent"android:layout_weight="1"android:text="thisistheFavtab"></TextView></LinearLayout>
以上3个Fragment的布局文件已创建完毕，每个文件中只显示简单的文本内容，用做演示。
加载3个Fragment到Activity中。
首先实现3个Fragment对应的后台类
热门布局页对应的类：importandroid.os.Bundle;importandroid.support.v4.app.Fragment;importandroid.view.LayoutInflater;importandroid.view.View;importandroid.view.ViewGroup;importorg.ganinfo.interfacepractice.R;publicclassFragmentHotextendsFragment{@OverridepublicViewonCreateView(LayoutInflaterinflater,ViewGroupcontainer,BundlesavedInstanceState){Viewview=inflater.inflate(R.layout.fragmenthot,container,false);returnview;}}
news布局页对应的类：
importandroid.os.Bundle;importandroid.support.v4.app.Fragment;importandroid.view.LayoutInflater;importandroid.view.View;importandroid.view.ViewGroup;importorg.ganinfo.interfacepractice.R;publicclassFragmentNewsextendsFragment{@OverridepublicViewonCreateView(LayoutInflaterinflater,ViewGroupcontainer,BundlesavedInstanceState){Viewview=inflater.inflate(R.layout.fragmentnews,container,false);returnview;}}
收藏布局页对应的类：
importandroid.os.Bundle;importandroid.support.v4.app.Fragment;importandroid.view.LayoutInflater;importandroid.view.View;importandroid.view.ViewGroup;importorg.ganinfo.interfacepractice.R;publicclassFragmentFavoriteextendsFragment{@OverridepublicViewonCreateView(LayoutInflaterinflater,ViewGroupcontainer,BundlesavedInstanceState){Viewview=inflater.inflate(R.layout.fragmentfav,container,false);returnview;}}
之后再activity中初始化这3个Fragment
注意要点：
MainActivity继承自FragmentActivity
要实现一个FragmentPagerAdapter，内容如下：
importandroid.support.v4.app.Fragment;importandroid.support.v4.app.FragmentManager;importandroid.support.v4.app.FragmentPagerAdapter;importjava.util.ArrayList;publicclassMyFragmentAdapterextendsFragmentPagerAdapter{ArrayList<Fragment>list;publicMyFragmentAdapter(FragmentManagerfm,ArrayList<Fragment>list){super(fm);this.list=list;}@OverridepublicFragmentgetItem(intarg0){returnlist.get(arg0);}@OverridepublicintgetCount(){returnlist.size();}}
然后在MainActivity中实现切换和动画效果，代码如下：
importandroid.os.Bundle;importandroid.support.v4.app.Fragment;importandroid.support.v4.app.FragmentActivity;importandroid.support.v4.view.ViewPager;importandroid.view.MenuItem;importandroid.view.View;importandroid.widget.TextView;importjava.util.ArrayList;importadapter.MyFragmentAdapter;importfragment.FragmentFavorite;importfragment.FragmentHot;importfragment.FragmentNews;publicclassMainActivityextendsFragmentActivityimplementsView.OnClickListener{privateViewPagermViewPager;privateArrayListfragments;privateTextViewview1,view2,view3;privateintmCurrentOption=0;privateViewflag0,flag1,flag2;@OverrideprotectedvoidonCreate(BundlesavedInstanceState){super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);initViewPager();initView();}@OverridepublicbooleanonOptionsItemSelected(MenuItemitem){intid=item.getItemId();if(id==R.id.action_settings){returntrue;}returnsuper.onOptionsItemSelected(item);}privatevoidinitView(){view1=(TextView)findViewById(R.id.tv_hot);view2=(TextView)findViewById(R.id.tv_news);view3=(TextView)findViewById(R.id.tv_fav);flag0=findViewById(R.id.activity_order_flag_all);flag1=findViewById(R.id.activity_order_flag_uncomplete);flag2=findViewById(R.id.activity_order_flag_complete);view1.setOnClickListener(this);view2.setOnClickListener(this);view3.setOnClickListener(this);}@OverridepublicvoidonClick(Viewv){switch(v.getId()){caseR.id.tv_hot:if(mCurrentOption==0)return;mCurrentOption=0;flag0.setVisibility(View.VISIBLE);flag1.setVisibility(View.INVISIBLE);flag2.setVisibility(View.INVISIBLE);mViewPager.setCurrentItem(mCurrentOption);break;caseR.id.tv_news:if(mCurrentOption==1)return;mCurrentOption=1;flag0.setVisibility(View.INVISIBLE);flag1.setVisibility(View.VISIBLE);flag2.setVisibility(View.INVISIBLE);mViewPager.setCurrentItem(mCurrentOption);break;caseR.id.tv_fav:if(mCurrentOption==2)return;mCurrentOption=2;flag0.setVisibility(View.INVISIBLE);flag1.setVisibility(View.INVISIBLE);flag2.setVisibility(View.VISIBLE);mViewPager.setCurrentItem(mCurrentOption);break;default:return;}}privatevoidinitViewPager(){mViewPager=(ViewPager)findViewById(R.id.myViewPager);fragments=newArrayList<Fragment>();FragmentfragmentHot=newFragmentHot();FragmentfragmentNews=newFragmentNews();FragmentfragmentFav=newFragmentFavorite();fragments.add(fragmentHot);fragments.add(fragmentNews);fragments.add(fragmentFav);mViewPager.setAdapter(newMyFragmentAdapter(getSupportFragmentManager(),fragments));mViewPager.setCurrentItem(0);mViewPager.setOnPageChangeListener(newViewPager.OnPageChangeListener(){@OverridepublicvoidonPageScrolled(inti,floatv,inti2){}@OverridepublicvoidonPageSelected(inti){switch(i){case0:flag0.setVisibility(View.VISIBLE);flag1.setVisibility(View.INVISIBLE);flag2.setVisibility(View.INVISIBLE);break;case1:flag0.setVisibility(View.INVISIBLE);flag1.setVisibility(View.VISIBLE);flag2.setVisibility(View.INVISIBLE);break;case2:flag0.setVisibility(View.INVISIBLE);flag1.setVisibility(View.INVISIBLE);flag2.setVisibility(View.VISIBLE);break;default:return;}}@OverridepublicvoidonPageScrollStateChanged(inti){}});}}
-------------------------------------------------------------------------------------
packagecom.ganinfo.collect.activity;importjava.util.ArrayList;importcom.ganinfo.collect.R;importcom.ganinfo.collect.fragment.GzMyFragment;importcom.ganinfo.collect.fragment.GzTaskFragment;importcom.ganinfo.collect.utils.GzLog;importcom.ganinfo.collect.utils.GzNetwork;importcom.ganinfo.collect.widget.MyFragmentAdapter;importandroid.annotation.SuppressLint;importandroid.app.AlertDialog;importandroid.os.Bundle;importandroid.support.v4.view.ViewPager;importandroid.view.MenuItem;importandroid.view.View;importandroid.widget.ImageView;importandroid.widget.TextView;@SuppressLint("ResourceAsColor")publicclassGzMainActivityextendsGzBaseActivity{privateStringTAG="GzMainActivity";privatelonglastTime=0;//再按一次退出的时间标志privateArrayList<android.support.v4.app.Fragment>fragments;privateintmCurrentOption=0;privateViewPagermViewPager;privateImageViewmTaskIV,mTaskMyIV;privateTextViewmTaskTV,mTaskMyTV;@OverrideprotectedvoidonCreate(BundlesavedInstanceState){super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);GzLog.d(TAG,"onCreate");initview();initViewPager();CheckNetwork();}privatevoidinitview(){mTaskIV=(ImageView)findViewById(R.id.main_iv_shop);mTaskMyIV=(ImageView)findViewById(R.id.main_iv_my);mTaskTV=(TextView)findViewById(R.id.main_tv_shop);mTaskMyTV=(TextView)findViewById(R.id.main_tv_my);}@OverridepublicbooleanonOptionsItemSelected(MenuItemitem){intid=item.getItemId();if(id==R.id.action_settings){returntrue;}returnsuper.onOptionsItemSelected(item);}privatevoidCheckNetwork(){if(!GzNetwork.isNetworkAvailable()){newAlertDialog.Builder(this).setMessage(R.string.network_not_avail).setPositiveButton(R.string.ok,null).create().show();}}privatevoidinitViewPager(){mViewPager=(ViewPager)findViewById(R.id.main_viewpager);fragments=newArrayList<android.support.v4.app.Fragment>();GzTaskFragmentfragmentTask=newGzTaskFragment();GzMyFragmentfragmentMy=newGzMyFragment();fragments.add(fragmentTask);fragments.add(fragmentMy);mViewPager.setAdapter(newMyFragmentAdapter(getSupportFragmentManager(),fragments));mViewPager.setCurrentItem(mCurrentOption);mViewPager.setOnPageChangeListener(newViewPager.OnPageChangeListener(){@OverridepublicvoidonPageSelected(inti){if(mCurrentOption==i){}}@OverridepublicvoidonPageScrolled(intarg0,floatarg1,intarg2){}@OverridepublicvoidonPageScrollStateChanged(intarg0){}});}@SuppressLint("ResourceAsColor")publicvoidonClickTab(Viewview){switch(view.getId()){caseR.id.main_fg_task:if(mCurrentOption==0)return;mCurrentOption=0;mViewPager.setCurrentItem(mCurrentOption);mTaskTV.setTextColor(R.color.app_style_normal);break;caseR.id.main_fg_my:if(mCurrentOption==1)return;mCurrentOption=1;mViewPager.setCurrentItem(mCurrentOption);mTaskMyTV.setTextColor(R.color.app_style_normal);break;default:return;}}@OverridepublicvoidonBackPressed(){if(System.currentTimeMillis()-lastTime>2000){showToast(R.string.back_hint);lastTime=System.currentTimeMillis();return;}super.onBackPressed();}}
声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。
