程序博客网 > 网络上的本宫什么意思

Android三种实现Tab界面效果的方法，ViewPager + Fragment

来源：互联网 发布：网络上的本宫什么意思 编辑：程序博客网 时间：2024/05/15 23:51

转载：http://blog.csdn.net/liweijie_chengxuyuan/article/details/45410617

向原作者致敬。


首先，第一种：

他是只使用了ViewPager控件，没有使用FragMent。

他的主要思路是：

在xml文件中添加一个ViewPager控件，然后通过在JAVA代码中使用ViewPager的适配器PagerAdapter来实现侧滑，然后当点击文字tab的时候也会切换不同的条目界面。ViewPager本身就是可以根据不同的需求显示动态不同的界面。

主要的效果如图：他们可以实现的是点击文字或者侧滑时候，切换不同界面，文字颜色改变，而且标签条会随着点击或者滑动移动

        

主要代码：这是MainActivity的

[java] view plain copy
  1. import android.app.Activity;  
  2. import android.content.Context;  
  3. import android.graphics.Color;  
  4. import android.os.Bundle;  
  5. import android.support.v4.view.PagerAdapter;  
  6. import android.support.v4.view.ViewPager;  
  7. import android.support.v4.view.ViewPager.OnPageChangeListener;  
  8. import android.util.DisplayMetrics;  
  9. import android.view.Display;  
  10. import android.view.LayoutInflater;  
  11. import android.view.View;  
  12. import android.view.View.OnClickListener;  
  13. import android.view.ViewGroup;  
  14. import android.view.ViewGroup.LayoutParams;  
  15. import android.widget.ImageView;  
  16. import android.widget.LinearLayout;  
  17. import android.widget.TextView;  
  18.   
  19. public class MainActivity extends Activity implements OnClickListener  
  20. {  
  21.   
  22.     private ViewPager viewPager;  
  23.     private TextView textView_01;// 三个tab标题  
  24.     private TextView textView_02;  
  25.     private TextView textView_03;  
  26.     private List<View> datas;// 需要显示的三个界面  
  27.     private ImageView tabline;// 标题和界面的分割线  
  28.     private int widtd_1_3;// 屏幕的三分之一  
  29.     private int currentPageIndex = 0;// 当前页  
  30.   
  31.     @Override  
  32.     protected void onCreate(Bundle savedInstanceState)  
  33.     {  
  34.         super.onCreate(savedInstanceState);  
  35.         setContentView(R.layout.activity_main);  
  36.         intiView();  
  37.         intiEvent();  
  38.         initTabline();  
  39.         textView_01.setTextColor(Color.parseColor("#008000"));// 首次显示的默认界面条目  
  40.         viewPager.setCurrentItem(0);  
  41.     }  
  42.   
  43.     /** 
  44.      * 初始化tabline 
  45.      */  
  46.     private void initTabline()  
  47.     {  
  48.         Display display = getWindow().getWindowManager().getDefaultDisplay();  
  49.         DisplayMetrics outMetrics = new DisplayMetrics();  
  50.         display.getMetrics(outMetrics);  
  51.         widtd_1_3 = outMetrics.widthPixels / 3;  
  52.         LayoutParams params = tabline.getLayoutParams();  
  53.         params.width = widtd_1_3;  
  54.         tabline.setLayoutParams(params);  
  55.     }  
  56.   
  57.     /** 
  58.      * 初始化事件处理 
  59.      */  
  60.     private void intiEvent()  
  61.     {  
  62.         textView_01.setOnClickListener(this);  
  63.         textView_02.setOnClickListener(this);  
  64.         textView_03.setOnClickListener(this);  
  65.         viewPager.setOnPageChangeListener(new MyOnPageChangeListener());  
  66.     }  
  67.   
  68.     /** 
  69.      * 初始化控件 
  70.      */  
  71.     private void intiView()  
  72.     {  
  73.         viewPager = (ViewPager) this.findViewById(R.id.viewpager);  
  74.         textView_01 = (TextView) this.findViewById(R.id.id_first_tv);  
  75.         textView_02 = (TextView) this.findViewById(R.id.id_second_tv);  
  76.         textView_03 = (TextView) this.findViewById(R.id.id_three_tv);  
  77.           
  78.         datas = new ArrayList<View>();  
  79.         LayoutInflater inflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);  
  80.         View view_01 = inflater.inflate(R.layout.tab01, null);  
  81.         View view_02 = inflater.inflate(R.layout.tab02, null);  
  82.         View view_03 = inflater.inflate(R.layout.tab03, null);  
  83.         datas.add(view_01);  
  84.         datas.add(view_02);  
  85.         datas.add(view_03);  
  86.   
  87.         PagerAdapter adapetr = new PagerAdapter()  
  88.         {  
  89.   
  90.             @Override  
  91.             public void destroyItem(ViewGroup container, int position, Object object)  
  92.             {  
  93.                 container.removeView(datas.get(position));  
  94.             }  
  95.   
  96.             @Override  
  97.             public Object instantiateItem(ViewGroup container, int position)  
  98.             {  
  99.                 View v = datas.get(position);  
  100.                 container.addView(v);  
  101.                 return v;  
  102.             }  
  103.   
  104.             @Override  
  105.             public int getCount()  
  106.             {  
  107.                 return datas.size();  
  108.             }  
  109.   
  110.             @Override  
  111.             public boolean isViewFromObject(View arg0, Object arg1)  
  112.             {  
  113.                 return arg0 == arg1;  
  114.             }  
  115.         };  
  116.   
  117.         viewPager.setAdapter(adapetr);  
  118.   
  119.         tabline = (ImageView) this.findViewById(R.id.id_imageView);  
  120.   
  121.     }  
  122.   
  123.     class MyOnPageChangeListener implements OnPageChangeListener  
  124.     {  
  125.   
  126.         @Override  
  127.         public void onPageScrollStateChanged(int arg0)  
  128.         {  
  129.   
  130.         }  
  131.   
  132.         /* (non-Javadoc) 
  133.          * 当用户正在滑动viewpager的时候触发改事件 
  134.          */  
  135.         @Override  
  136.         public void onPageScrolled(int arg0, float arg1, int arg2)  
  137.         {  
  138.             System.out.println(arg0 + "=arg0 " + arg1 + "=arg1 " + arg2 + "arg2 " + currentPageIndex  
  139.                 + "currentPageIndex");  
  140.             LinearLayout.LayoutParams lp = (android.widget.LinearLayout.LayoutParams) tabline  
  141.                 .getLayoutParams();  
  142.             if (currentPageIndex == arg0)// 从第一页移动到第二页，从第二页移动到第三页，此时的leftMargin应该是越来越大  
  143.             {  
  144.   
  145.                 lp.leftMargin = (int) (widtd_1_3 * (currentPageIndex + arg1));  
  146.   
  147.             } else  
  148.             // 从第二页移动到第一页，从第三页移动到第二页，此时的leftMargin应该是越来越小  
  149.             {  
  150.   
  151.                 lp.leftMargin = (int) (widtd_1_3 * (currentPageIndex - 1 + arg1));  
  152.             }  
  153.             tabline.setLayoutParams(lp);  
  154.         }  
  155.   
  156.         /* (non-Javadoc) 
  157.          * 当viewpager不再滑动的时候触发改事件 
  158.          */  
  159.         @Override  
  160.         public void onPageSelected(int arg0)  
  161.         {  
  162.             resetTextColor();  
  163.             switch (arg0)  
  164.             {  
  165.             case 0:  
  166.                 textView_01.setTextColor(Color.parseColor("#008000"));  
  167.                 break;  
  168.             case 1:  
  169.                 textView_02.setTextColor(Color.parseColor("#008000"));  
  170.                 break;  
  171.             case 2:  
  172.                 textView_03.setTextColor(Color.parseColor("#008000"));  
  173.                 break;  
  174.             }  
  175.             currentPageIndex = arg0;  
  176.         }  
  177.   
  178.     }  
  179.   
  180.     // "#008000"  
  181.     @Override  
  182.     public void onClick(View v)  
  183.     {  
  184.         resetTextColor();  
  185.         switch (v.getId())  
  186.         {  
  187.         case R.id.id_first_tv:  
  188.             textView_01.setTextColor(Color.parseColor("#008000"));  
  189.             if (null != viewPager)  
  190.             {  
  191.                 viewPager.setCurrentItem(0);  
  192.             }  
  193.             break;  
  194.   
  195.         case R.id.id_second_tv:  
  196.             textView_02.setTextColor(Color.parseColor("#008000"));  
  197.             if (null != viewPager)  
  198.             {  
  199.                 viewPager.setCurrentItem(1);  
  200.             }  
  201.             break;  
  202.   
  203.         case R.id.id_three_tv:  
  204.             textView_03.setTextColor(Color.parseColor("#008000"));  
  205.             if (null != viewPager)  
  206.             {  
  207.                 viewPager.setCurrentItem(2);  
  208.             }  
  209.             break;  
  210.         }  
  211.   
  212.     }  
  213.   
  214.     /** 
  215.      * 每一次需要改变viewpager显示的界面时候先重置文字颜色 
  216.      */  
  217.     private void resetTextColor()  
  218.     {  
  219.         textView_01.setTextColor(Color.parseColor("#000000"));  
  220.         textView_02.setTextColor(Color.parseColor("#000000"));  
  221.         textView_03.setTextColor(Color.parseColor("#000000"));  
  222.     }  
  223.   
  224. }  
布局文件是：

[html] view plain copy
  1. <LinearLayout 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.     android:orientation="vertical"  
  6.     tools:context="com.example.mytabdemo_01.MainActivity" >  
  7.   
  8.     <include layout="@layout/top_layout" />  
  9.   
  10.     <ImageView  
  11.         android:id="@+id/id_imageView"  
  12.         android:layout_width="match_parent"  
  13.         android:layout_height="wrap_content"  
  14.         android:background="@drawable/tabline" />  
  15.   
  16.     <android.support.v4.view.ViewPager  
  17.         android:id="@+id/viewpager"  
  18.         android:layout_width="match_parent"  
  19.         android:layout_height="match_parent" >  
  20.     </android.support.v4.view.ViewPager>  
  21.   
  22. </LinearLayout>  
还有文字tab

[html] view plain copy
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="50dp"  
  5.     android:orientation="horizontal" >  
  6.   
  7.     <TextView  
  8.         android:textColor="#000000"  
  9.         android:id="@+id/id_first_tv"  
  10.         android:layout_width="wrap_content"  
  11.         android:layout_height="match_parent"  
  12.         android:layout_weight="1"  
  13.         android:gravity="center"  
  14.         android:text="first"  
  15.         android:textSize="20sp"  
  16.         android:textStyle="bold" />  
  17.   
  18.     <TextView  
  19.         android:textColor="#000000"  
  20.         android:id="@+id/id_second_tv"  
  21.         android:layout_width="wrap_content"  
  22.         android:layout_height="match_parent"  
  23.         android:layout_weight="1"  
  24.         android:gravity="center"  
  25.         android:text="second"  
  26.         android:textSize="20sp"  
  27.         android:textStyle="bold" />  
  28.   
  29.     <TextView  
  30.         android:textColor="#000000"  
  31.         android:id="@+id/id_three_tv"  
  32.         android:layout_width="wrap_content"  
  33.         android:layout_height="match_parent"  
  34.         android:layout_weight="1"  
  35.         android:gravity="center"  
  36.         android:text="three"  
  37.         android:textSize="20sp"  
  38.         android:textStyle="bold" />  
  39.   
  40. </LinearLayout>  
对于显示的三个tab view，比较简单，就yigetextView就不贴出来了。这是第一种方式，这种方式不好的地方是很容易导致代码臃肿，很多的代码都会写在MainActivity中。一般逻辑比较简单的时候才会使用。

第二种实现方式：使用单纯的Fragment，类似于QQ，当在内容界面滑动的时候不会出现界面移动，只有点击按钮的时候android、才会切换切面。大家使用Fragment的时候需要注意的一点就是假如你使用V4包下的Fragment就一直使用该包下的不要使用app下的，反之亦然。

单纯使用Fragment的时候不能实现侧滑，然后在MainActivity的布局文件中需要使用到一个FramLayout，因为我是使用V4包下的Fragment，所以需要继承FragmentActivity，这样才能获得FragmentManager，通过getSupportFragmentManage，假如是使用app下的Fragment，则可以通过getFragmentManager()来获得Fragment管理器。

下面是主要实现代码：实现的效果与上面的类似，只是只有点击文字tab的时候界面才会改变，标签条也会随之改变。

MainActivity

[java] view plain copy
  1. import android.graphics.Color;  
  2. import android.os.Bundle;  
  3. import android.support.v4.app.Fragment;  
  4. import android.support.v4.app.FragmentActivity;  
  5. import android.support.v4.app.FragmentManager;  
  6. import android.support.v4.app.FragmentTransaction;  
  7. import android.util.DisplayMetrics;  
  8. import android.view.Display;  
  9. import android.view.View;  
  10. import android.view.Window;  
  11. import android.view.View.OnClickListener;  
  12. import android.view.ViewGroup.LayoutParams;  
  13. import android.widget.ImageView;  
  14. import android.widget.LinearLayout;  
  15. import android.widget.TextView;  
  16.   
  17. public class MainActivity extends FragmentActivity implements OnClickListener  
  18. {  
  19.     private TextView textView_01;// 三个tab标题  
  20.     private TextView textView_02;  
  21.     private TextView textView_03;  
  22.     private ImageView tabline;// 标题和界面的分割线  
  23.     private int widtd_1_3;// 屏幕的三分之一  
  24.   
  25.     private Fragment firstFragment;  
  26.     private Fragment secondFragment;  
  27.     private Fragment threeFragment;  
  28.   
  29.     @Override  
  30.     protected void onCreate(Bundle savedInstanceState)  
  31.     {  
  32.         super.onCreate(savedInstanceState);  
  33.         requestWindowFeature(Window.FEATURE_NO_TITLE);  
  34.         setContentView(R.layout.activity_main);  
  35.           
  36.         initView();  
  37.         initEvent();  
  38.         initTabline();  
  39.         select(0);  
  40.     }  
  41.   
  42.     private void initTabline()  
  43.     {  
  44.         Display display = getWindow().getWindowManager().getDefaultDisplay();  
  45.         DisplayMetrics outMetrics = new DisplayMetrics();  
  46.         display.getMetrics(outMetrics);  
  47.         widtd_1_3 = outMetrics.widthPixels / 3;  
  48.         LayoutParams lp = tabline.getLayoutParams();  
  49.         lp.width = widtd_1_3;  
  50.         tabline.setLayoutParams(lp);  
  51.     }  
  52.   
  53.     private void initEvent()  
  54.     {  
  55.         textView_01.setOnClickListener(this);  
  56.         textView_02.setOnClickListener(this);  
  57.         textView_03.setOnClickListener(this);  
  58.   
  59.     }  
  60.   
  61.     private void initView()  
  62.     {  
  63.         textView_01 = (TextView) this.findViewById(R.id.id_first_tv);  
  64.         textView_02 = (TextView) this.findViewById(R.id.id_second_tv);  
  65.         textView_03 = (TextView) this.findViewById(R.id.id_three_tv);  
  66.           
  67.         tabline = (ImageView) this.findViewById(R.id.id_imageView);  
  68.     }  
  69.   
  70.     @Override  
  71.     public void onClick(View v)  
  72.     {  
  73.         resetTextColor();  
  74.         switch (v.getId())  
  75.         {  
  76.         case R.id.id_first_tv:  
  77.             textView_01.setTextColor(Color.parseColor("#008000"));  
  78.             select(0);  
  79.             break;  
  80.         case R.id.id_second_tv:  
  81.             textView_02.setTextColor(Color.parseColor("#008000"));  
  82.             select(1);  
  83.             break;  
  84.         case R.id.id_three_tv:  
  85.             textView_03.setTextColor(Color.parseColor("#008000"));  
  86.             select(2);  
  87.             break;  
  88.         }  
  89.   
  90.     }  
  91.   
  92.     /**实现切换不同的Fragment 
  93.      * @param i 点击的第几个按钮 
  94.      */  
  95.     private void select(int i)  
  96.     {  
  97.         FragmentManager fm = getSupportFragmentManager();  
  98.         FragmentTransaction transaction = fm.beginTransaction();  
  99.         LinearLayout.LayoutParams lp = (android.widget.LinearLayout.LayoutParams) tabline  
  100.             .getLayoutParams();  
  101.         hideFragment(transaction);  
  102.         switch (i)  
  103.         {  
  104.         case 0:  
  105.             if (firstFragment == null)  
  106.             {  
  107.                 firstFragment = new FirstFragment();  
  108.                 transaction.add(R.id.id_fragment, firstFragment);  
  109.             } else  
  110.             {  
  111.                 transaction.show(firstFragment);  
  112.                 lp.leftMargin = 0;  
  113.             }  
  114.             break;  
  115.         case 1:  
  116.             if (secondFragment == null)  
  117.             {  
  118.                 secondFragment = new SecondFragment();  
  119.                 transaction.add(R.id.id_fragment, secondFragment);  
  120.             } else  
  121.             {  
  122.                 transaction.show(secondFragment);  
  123.                 lp.leftMargin = widtd_1_3;  
  124.             }  
  125.             break;  
  126.         case 2:  
  127.             if (threeFragment == null)  
  128.             {  
  129.                 threeFragment = new ThreeFragment();  
  130.                 transaction.add(R.id.id_fragment, threeFragment);  
  131.             } else  
  132.             {  
  133.                 transaction.show(secondFragment);  
  134.                 lp.leftMargin = widtd_1_3 * 2;  
  135.             }  
  136.             break;  
  137.         }  
  138.         transaction.commit();  
  139.         tabline.setLayoutParams(lp);  
  140.     }  
  141.   
  142.     /** 
  143.      * 用于每一显示不同的Fragment时候隐藏之前的所有可能显示的Fragment 
  144.      * @param transaction 
  145.      *          事物 
  146.      */  
  147.     private void hideFragment(FragmentTransaction transaction)  
  148.     {  
  149.         if (firstFragment != null)  
  150.         {  
  151.             transaction.hide(firstFragment);  
  152.         }  
  153.         if (secondFragment != null)  
  154.         {  
  155.             transaction.hide(secondFragment);  
  156.         }  
  157.         if (threeFragment != null)  
  158.         {  
  159.             transaction.hide(threeFragment);  
  160.         }  
  161.     }  
  162.   
  163.     /** 
  164.      * 每一次需要改变viewpager显示的界面时候先重置文字颜色 
  165.      */  
  166.     private void resetTextColor()  
  167.     {  
  168.         textView_01.setTextColor(Color.parseColor("#000000"));  
  169.         textView_02.setTextColor(Color.parseColor("#000000"));  
  170.         textView_03.setTextColor(Color.parseColor("#000000"));  
  171.     }  
  172. }  
主布局文件，其中Include中的布局文件与之前的一样，这里就不贴出来，三个Fragment也是继承v4包下的Fragment，他们的布局文件也是与上面的tab一样。

[html] view plain copy
  1. <LinearLayout 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.     android:orientation="vertical"  
  6.     tools:context="com.example.mytabdemo_01.MainActivity" >  
  7.   
  8.     <include layout="@layout/top_layout" />  
  9.   
  10.     <ImageView  
  11.         android:id="@+id/id_imageView"  
  12.         android:layout_width="match_parent"  
  13.         android:layout_height="wrap_content"  
  14.         android:background="@drawable/tabline" />  
  15.   
  16.     <FrameLayout  
  17.         android:id="@+id/id_fragment"  
  18.         android:layout_width="match_parent"  
  19.         android:layout_height="match_parent" >  
  20.     </FrameLayout>  
  21.   
  22. </LinearLayout>  
这样就完成类似于手机qq的界面切换，他的不好的地方就是侧滑内容区域的时候不能改变，只有点击文字按钮才行，但是他的好处是可以为Activity分担代码，有时候可以使用类似于QQ的那种侧滑Item的效果。

第三种：使用Fragment + ViewPager实现，他的大致效果是点击文字tab或者是侧滑，都可以实现页面的改变。类似于第一个的效果，但是使用了Fragment。我这里还是使用了V4包下的Fragment。他需要使用到一个适配器是FragmentPagerAdapter适配器。

MainActivity

[java] view plain copy
  1. import java.util.ArrayList;  
  2. import java.util.List;  
  3.   
  4. import android.graphics.Color;  
  5. import android.os.Bundle;  
  6. import android.support.v4.app.Fragment;  
  7. import android.support.v4.app.FragmentActivity;  
  8. import android.support.v4.app.FragmentPagerAdapter;  
  9. import android.support.v4.view.ViewPager;  
  10. import android.support.v4.view.ViewPager.OnPageChangeListener;  
  11. import android.util.DisplayMetrics;  
  12. import android.view.Display;  
  13. import android.view.View;  
  14. import android.view.View.OnClickListener;  
  15. import android.view.ViewGroup.LayoutParams;  
  16. import android.view.Window;  
  17. import android.widget.ImageView;  
  18. import android.widget.LinearLayout;  
  19. import android.widget.TextView;  
  20.   
  21. public class MainActivity extends FragmentActivity implements OnClickListener  
  22. {  
  23.     private TextView textView_01;// 三个tab标题  
  24.     private TextView textView_02;  
  25.     private TextView textView_03;  
  26.     private ImageView tabline;// 标题和界面的分割线  
  27.     private int widtd_1_3;// 屏幕的三分之一  
  28.     private List<Fragment> datas;  
  29.     private ViewPager viewPager;  
  30.     private FragmentPagerAdapter adapter;//使用该adapter，实现fragment和viewpager的联系  
  31.     int currentPageIndex = 0;  
  32.   
  33.     @Override  
  34.     protected void onCreate(Bundle savedInstanceState)  
  35.     {  
  36.         super.onCreate(savedInstanceState);  
  37.         requestWindowFeature(Window.FEATURE_NO_TITLE);  
  38.         setContentView(R.layout.activity_main);  
  39.         initView();  
  40.         initEvent();  
  41.         initTabline();  
  42.     }  
  43.   
  44.     private void initTabline()  
  45.     {  
  46.         Display display = getWindow().getWindowManager().getDefaultDisplay();  
  47.         DisplayMetrics outMetrics = new DisplayMetrics();  
  48.         display.getMetrics(outMetrics);  
  49.         widtd_1_3 = outMetrics.widthPixels / 3;  
  50.         LayoutParams lp = tabline.getLayoutParams();  
  51.         lp.width = widtd_1_3;  
  52.         tabline.setLayoutParams(lp);  
  53.   
  54.     }  
  55.   
  56.     private void initEvent()  
  57.     {  
  58.         textView_01.setOnClickListener(this);  
  59.         textView_02.setOnClickListener(this);  
  60.         textView_03.setOnClickListener(this);  
  61.         viewPager.setOnPageChangeListener(new MyOnPageChangeListener());  
  62.     }  
  63.   
  64.     private void initView()  
  65.     {  
  66.         textView_01 = (TextView) this.findViewById(R.id.id_first_tv);  
  67.         textView_02 = (TextView) this.findViewById(R.id.id_second_tv);  
  68.         textView_03 = (TextView) this.findViewById(R.id.id_three_tv);  
  69.         tabline = (ImageView) this.findViewById(R.id.id_imageView);  
  70.         viewPager = (ViewPager) this.findViewById(R.id.viewpager);  
  71.   
  72.         FirstFragment firstFragment = new FirstFragment();  
  73.         SecondFragment secondFragment = new SecondFragment();  
  74.         ThreeFragment threeFragment = new ThreeFragment();  
  75.         datas = new ArrayList<Fragment>();  
  76.         datas.add(firstFragment);  
  77.         datas.add(secondFragment);  
  78.         datas.add(threeFragment);  
  79.         adapter = new FragmentPagerAdapter(getSupportFragmentManager())  
  80.         {  
  81.             @Override  
  82.             public int getCount()  
  83.             {  
  84.                 return datas.size();  
  85.             }  
  86.   
  87.             @Override  
  88.             public Fragment getItem(int arg0)  
  89.             {  
  90.                 return datas.get(arg0);  
  91.             }  
  92.         };  
  93.         viewPager.setAdapter(adapter);  
  94.     }  
  95.   
  96.     class MyOnPageChangeListener implements OnPageChangeListener  
  97.     {  
  98.   
  99.         @Override  
  100.         public void onPageScrollStateChanged(int arg0)  
  101.         {  
  102.   
  103.         }  
  104.   
  105.         @Override  
  106.         public void onPageScrolled(int arg0, float arg1, int arg2)  
  107.         {  
  108.             LinearLayout.LayoutParams lp = (android.widget.LinearLayout.LayoutParams) tabline  
  109.                 .getLayoutParams();  
  110.             if (currentPageIndex == arg0)// 从第一页移动到第二页，从第二页移动到第三页，此时的leftMargin应该是越来越大  
  111.             {  
  112.   
  113.                 lp.leftMargin = (int) (widtd_1_3 * (currentPageIndex + arg1));  
  114.   
  115.             } else  
  116.             // 从第二页移动到第一页，从第三页移动到第二页，此时的leftMargin应该是越来越小  
  117.             {  
  118.                 lp.leftMargin = (int) (widtd_1_3 * (currentPageIndex - 1 + arg1));  
  119.             }  
  120.             tabline.setLayoutParams(lp);  
  121.         }  
  122.   
  123.         @Override  
  124.         public void onPageSelected(int arg0)  
  125.         {  
  126.             resetTextColor();  
  127.             switch (arg0)  
  128.             {  
  129.             case 0:  
  130.                 textView_01.setTextColor(Color.parseColor("#008000"));  
  131.                 break;  
  132.             case 01:  
  133.                 textView_02.setTextColor(Color.parseColor("#008000"));  
  134.                 break;  
  135.             case 2:  
  136.                 textView_03.setTextColor(Color.parseColor("#008000"));  
  137.             }  
  138.             currentPageIndex = arg0;  
  139.         }  
  140.     }  
  141.   
  142.     /* (non-Javadoc) 
  143.      * 实现点击文字ta的时候改变不同的viewpager显示出来，同时更改标签条的位置 
  144.      */  
  145.     @Override  
  146.     public void onClick(View v)  
  147.     {  
  148.         LinearLayout.LayoutParams lp = (android.widget.LinearLayout.LayoutParams) tabline  
  149.             .getLayoutParams();  
  150.         resetTextColor();  
  151.         switch (v.getId())  
  152.         {  
  153.         case R.id.id_first_tv://第一页  
  154.             lp.leftMargin = 0;  
  155.             textView_01.setTextColor(Color.parseColor("#008000"));  
  156.             viewPager.setCurrentItem(0);  
  157.             break;  
  158.         case R.id.id_second_tv://第二页  
  159.             lp.leftMargin = widtd_1_3;  
  160.             textView_02.setTextColor(Color.parseColor("#008000"));  
  161.             viewPager.setCurrentItem(1);  
  162.             break;  
  163.         case R.id.id_three_tv://第三页  
  164.             lp.leftMargin = widtd_1_3 * 2;  
  165.             textView_03.setTextColor(Color.parseColor("#008000"));  
  166.             viewPager.setCurrentItem(2);  
  167.             break;  
  168.         }  
  169.         tabline.setLayoutParams(lp);  
  170.     }  
  171.   
  172.     /** 
  173.      * 每一次需要改变viewpager显示的界面时候先重置文字颜色 
  174.      */  
  175.     private void resetTextColor()  
  176.     {  
  177.         textView_01.setTextColor(Color.parseColor("#000000"));  
  178.         textView_02.setTextColor(Color.parseColor("#000000"));  
  179.         textView_03.setTextColor(Color.parseColor("#000000"));  
  180.     }  
  181. }  
其中，他的布局文件和第一个例子的一模一样就不贴出来了，fragment也是很简单的显示一个textview，也不贴出来了。使用Fragment + ViewPager的好处就是他可以有ViewPager 和Fragment的优点，既不会使得MainActivity的代码量很大，同时侧滑时也可以实现改变页面，每个页面的逻辑代码可以写在不同对应的Fragment处。
0 0
网络上的本宫什么意思 网络上的本宫什么意思
原创粉丝点击
热门IT博客
自学c语言看什么书自学c语言看什么书
payload c语言payload c语言
如何成功应聘淘宝客服
xp linux 双系统
武汉理工大网络教育
美宝莲口红怎么样知乎
南京行知基地学农宿舍
win7网络发现已关闭
喜闻乐见网络什么意思
手机密码解锁软件
淘宝网可以买彩票吗
邹侑根个人数据
目前最先进步枪 知乎
公司网络维护合同
数组删除某个元素
sql 合计多少列
微博屏蔽淘宝链接
oppor9s还原网络设置
淘宝热敏打印机软件
js classname赋值
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 房贷利率换锚房子会掉价吗 16g钢筋锚固长度表图片 16g101图集钢筋锚固表 一闪一闪亮晶晶简谱 一闪一闪亮晶晶 一闪一闪亮晶晶儿歌 闪送员一单能挣多少钱 闪一闪亮晶晶 一闪一闪小星星简谱 一闪一闪亮晶晶曲谱 云闪付坐公交车一分钱 手机屏幕一闪一闪怎么修复 一闪一闪亮晶晶吉他谱 云闪付公交一分钱 一闪 一闪一闪小星星中文版 一闪一闪亮晶晶歌词 2018闪送开车一天能挣多少 一闪一闪亮晶晶英文版 一闪一闪亮晶晶儿歌中文版 一闪一闪小星星 一闪一闪亮晶晶儿歌中文 路由器sys一闪一闪 一闪一闪亮晶晶乐谱 电脑屏幕一闪一闪怎么回事 电脑一直闪屏怎么回事 一忽闪 一闪一闪 充电宝充不进电一闪一闪 iphone验证应用闪一下没反应 阕 阕怎么读 靖玄录下阕皇祸篇 千重阕 靖玄录下阕 靖玄录下阕免费观看 服阕 靖玄录下阕樱花在线 阕的读音 上阕 音阕诗听

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里