FragmentPagerAdapter+ViewPager实现Tab切换效果

1.Activity  加载布局文件,获取Viewpager控件   给ViewPager填充适配器.

  1. import android.app.ActionBar;  
  2. import android.app.ActionBar.Tab;  
  3. import android.app.Activity;  
  4. import android.app.Fragment;  
  5. import android.app.FragmentTransaction;  
  6. import android.content.Context;  
  7. import android.os.Bundle;  
  8. import android.support.v13.app.FragmentPagerAdapter;  
  9. import android.support.v4.view.ViewPager;  
  10. import android.view.ActionMode;  
  11.   
  12. import java.util.ArrayList;  
  13.   
  14. public class MainActivity extends Activity {  
  15.     private static final String INSTANCESTATE_TAB = "tab";  
  16.     ViewPager mViewPager;  
  17.     TabsAdapter mTabsAdapter;  
  18.     ActionMode mActionMode;  
  19.   
  20.     @Override  
  21.     protected void onCreate(Bundle savedInstanceState) {  
  22.         super.onCreate(savedInstanceState);  
  23.   
  24.         setContentView(R.layout.fragment_pager);  
  25.         mViewPager = (ViewPager) findViewById(R.id.pager);  
  26.   
  27.         final ActionBar bar = getActionBar();  
  28.         bar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);  
  29.         bar.setDisplayOptions(0, ActionBar.DISPLAY_SHOW_TITLE | ActionBar.DISPLAY_SHOW_HOME);  
  30.   
  31.         mTabsAdapter = new TabsAdapter(this, mViewPager);  
  32.         mTabsAdapter.addTab(bar.newTab().setText(R.string.tab_sd),  
  33.                 Fragment1.class, null);  
  34.         mTabsAdapter.addTab(bar.newTab().setText(R.string.tab_remote),  
  35.                 Fragment2.class, null);  
  36.         if (savedInstanceState != null) {  
  37.             bar.setSelectedNavigationItem(savedInstanceState.getInt(INSTANCESTATE_TAB, 0));  
  38.         }  
  39.     }  
  40.   
  41.     @Override  
  42.     protected void onSaveInstanceState(Bundle outState) {  
  43.         super.onSaveInstanceState(outState);  
  44.         outState.putInt(INSTANCESTATE_TAB, getActionBar().getSelectedNavigationIndex());  
  45.     }  
  46.   
  47.     public void setActionMode(ActionMode actionMode) {  
  48.         mActionMode = actionMode;  
  49.     }  
  50.   
  51.     public ActionMode getActionMode() {  
  52.         return mActionMode;  
  53.     }  
  54.   
  55.     public static class TabsAdapter extends FragmentPagerAdapter  
  56.             implements ActionBar.TabListener, ViewPager.OnPageChangeListener {  
  57.         private final Context mContext;  
  58.         private final ActionBar mActionBar;  
  59.         private final ViewPager mViewPager;  
  60.         private final ArrayList<TabInfo> mTabs = new ArrayList<TabInfo>();  
  61.   
  62.         static final class TabInfo {  
  63.             private final Class<?> clss;  
  64.             private final Bundle args;  
  65.             private Fragment fragment;  
  66.   
  67.             TabInfo(Class<?> _class, Bundle _args) {  
  68.                 clss = _class;  
  69.                 args = _args;  
  70.             }  
  71.         }  
  72.   
  73.         public TabsAdapter(Activity activity, ViewPager pager) {  
  74.             super(activity.getFragmentManager());  
  75.             mContext = activity;  
  76.             mActionBar = activity.getActionBar();  
  77.             mViewPager = pager;  
  78.             mViewPager.setAdapter(this);  
  79.             mViewPager.setOnPageChangeListener(this);  
  80.         }  
  81.   
  82.         public void addTab(ActionBar.Tab tab, Class<?> clss, Bundle args) {  
  83.             TabInfo info = new TabInfo(clss, args);  
  84.             tab.setTag(info);  
  85.             tab.setTabListener(this);  
  86.             mTabs.add(info);  
  87.             mActionBar.addTab(tab);  
  88.             notifyDataSetChanged();  
  89.         }  
  90.   
  91.         @Override  
  92.         public int getCount() {  
  93.             return mTabs.size();  
  94.         }  
  95.   
  96.         @Override  
  97.         public Fragment getItem(int position) {  
  98.             TabInfo info = mTabs.get(position);  
  99.             if (info.fragment == null) {  
  100.                 info.fragment = Fragment.instantiate(mContext, info.clss.getName(), info.args);  
  101.             }  
  102.             return info.fragment;  
  103.         }  
  104.           
  105.   
  106.         @Override  
  107.         public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {  
  108.         }  
  109.   
  110.         @Override  
  111.         public void onPageSelected(int position) {  
  112.             mActionBar.setSelectedNavigationItem(position);  
  113.         }  
  114.   
  115.         @Override  
  116.         public void onPageScrollStateChanged(int state) {  
  117.         }  
  118.   
  119.         @Override  
  120.         public void onTabSelected(Tab tab, FragmentTransaction ft) {  
  121.             Object tag = tab.getTag();  
  122.             for (int i=0; i<mTabs.size(); i++) {  
  123.                 if (mTabs.get(i) == tag) {  
  124.                     mViewPager.setCurrentItem(i);  
  125.                 }  
  126.             }  
  127.             if(!tab.getText().equals(mContext.getString(R.string.tab_sd))) {  
  128.                 ActionMode actionMode = ((MainActivity) mContext).getActionMode();  
  129.                 if (actionMode != null) {  
  130.                     actionMode.finish();  
  131.                 }  
  132.             }  
  133.         }  
  134.   
  135.         @Override  
  136.         public void onTabUnselected(Tab tab, FragmentTransaction ft) {  
  137.         }  
  138.   
  139.         @Override  
  140.         public void onTabReselected(Tab tab, FragmentTransaction ft) {  
  141.         }  
  142.     }  
  143. }  

2.fragment_pager.xml布局文件   里面就一个ViewPager控件   大家记得导入v4包

  1. <?xml version="1.0" encoding="utf-8"?>  
  2.   
  3. <android.support.v4.view.ViewPager  
  4.     xmlns:android="http://schemas.android.com/apk/res/android"  
  5.     android:id="@+id/pager"  
  6.     android:layout_width="match_parent"  
  7.     android:layout_height="match_parent">  
  8. </android.support.v4.view.ViewPager>  

3.Fragment1.java

  1. import android.app.Fragment;  
  2. import android.os.Bundle;  
  3. import android.view.LayoutInflater;  
  4. import android.view.View;  
  5. import android.view.ViewGroup;  
  6.   
  7. public class Fragment1 extends Fragment{  
  8.     @Override  
  9.     public View onCreateView(LayoutInflater inflater, ViewGroup container,  
  10.             Bundle savedInstanceState) {  
  11. //      return View.inflate(getActivity(), R.layout.fragment1, null);  
  12.         return inflater.inflate(R.layout.fragment1,container, false);  
  13.     }  
  14. }  

4.fragment1.xml布局文件

  1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     xmlns:tools="http://schemas.android.com/tools"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent">  
  5.   
  6.     <TextView  
  7.         android:layout_width="wrap_content"  
  8.         android:layout_height="wrap_content"  
  9.         android:text="这是第一个页面" />  
  10.   
  11. </RelativeLayout>  

效果图如下:

时间: 2024-10-28 05:21:40

FragmentPagerAdapter+ViewPager实现Tab切换效果的相关文章

android tab切换效果如图???求实现思路

问题描述 android tab切换效果如图???求实现思路 解决方案 Android实现Tab切换效果总结 解决方案二: 其实这个效果分块解释,这样的效果不难.上面的四个按钮要做style,选择和非选择要有相应的图片背景就ok了. 解决方案三: 谢谢,我真正想问的是 上边 白色 和 灰色倾斜的的圆角只能用图片?? 解决方案四: 上边的白色和灰色,用图片实现比较快,而且方便.也可以做动画什么的. 解决方案五: 上边的是使用图片显示,下面使用Viewpager就行了.

jquery实现的tab切换效果

  以下是源代码: 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>div

jQuery简单tab切换效果实现方法

 本文实例讲述了jQuery简单tab切换效果实现方法.分享给大家供大家参考.具体如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 <script src="js/jquery-latest.js"></script> <SCRIPT language=javascript ty

js中常用的Tab切换效果(推荐)_javascript技巧

如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>tab</title> <style> *{margin:0; padding:0; list-style:none;} .box{ width: 1000px; overflow: hidden; margin:100px auto

js实现tab切换效果实例_javascript技巧

直接先来个真相吧:   [HTML代码] <div id="menu"> <!--tag标题--> <ul id="nav"> <li><a href="#" class="selected">tab1</a></li> <li><a href="#" class="">tab2&

jQuery实现的一个tab切换效果内部还嵌有切换_jquery

大致效果如图 下面是代码:自己导入jQuery包. 样式: <style type="text/css"> body,ul,li,div,a{margin:0px;padding:0px;} body{margin-top:10px;margin-left:15px;} #all{border-left:1px solid #ccc;border-right:1px solid #ccc;border-bottom:1px solid #ccc;width:255px;}

jQuery简单tab切换效果实现方法_jquery

本文实例讲述了jQuery简单tab切换效果实现方法.分享给大家供大家参考.具体如下: <script src="js/jquery-latest.js"></script> <SCRIPT language=javascript type=text/javascript> $(document).ready(function () { $('.tabtitle li').click(function () { var index = $(this)

JS简单实现tab切换效果的多窗口显示功能_javascript技巧

本文实例讲述了JS简单实现tab切换效果的多窗口显示功能.分享给大家供大家参考,具体如下: <div style=" text-align:center; margin-top:40px;"> <div class="menubox"> <span id="newstab1" class="hover" onmouseover="setTab('newstab',1,3)"&g

JS封装的选项卡TAB切换效果示例_javascript技巧

本文实例讲述了JS封装的选项卡TAB切换效果.分享给大家供大家参考,具体如下: <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>JS封装的选项卡TAB代码</title> <style type="text/css"> *{ padding:0; margin:0;}