使用ViewPager+Fragment实现选项卡切换效果

以你之姓@ 2022-07-26 11:22 261阅读 0赞

原文

http://blog.csdn.net/chdjj/article/details/21564503

主题 ViewPager

显示效果：

RJnEru.png_web3yyqqa.png_web

实现过程：

1.创建3个选项卡中的内容，即三个Fragment。

这里仅贴出其中一个：

Tab2：

  1. package com.example.viewpagerdemo3;
  3. import android.os.Bundle;
  4. import android.support.v4.app.Fragment;
  5. import android.view.LayoutInflater;
  6. import android.view.View;
  7. import android.view.View.OnClickListener;
  8. import android.view.ViewGroup;
  9. import android.widget.Button;
  10. import android.widget.Toast;
  12. public class Tab2 extends Fragment { 
  13.  private Button but = null;
  14.  @Override
  15.  public View onCreateView(LayoutInflater inflater, ViewGroup container,
  16.  Bundle savedInstanceState)
  17.  {
  18.  View view = inflater.inflate(R.layout.tab2,null);//注意不要指定父视图
  19.  but = (Button) view.findViewById(R.id.but);
  20.  return view;
  21.  }
  22.  @Override
  23.  public void onActivityCreated(Bundle savedInstanceState)
  24.  {
  25.  super.onActivityCreated(savedInstanceState);
  26.  but.setOnClickListener(new OnClickListener()
  27.  {
  28.  @Override
  29.  public void onClick(View v)
  30.  {
  31.  Toast.makeText(Tab2.this.getActivity(),"hahah", 0).show();
  32.  }
  33.  });
  34.  }
  35. }

布局： 

  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="match_parent"
  5.  android:background="#00ff00"
  6.  android:orientation="vertical" >
  8.   <TextView 
  9.  android:id="@+id/tab1"
  10.  android:layout_width="match_parent"
  11.  android:layout_height="wrap_content"
  12.  android:text="我是第二个界面"
  13.  />
  14.   <Button 
  15.  android:id="@+id/but"
  16.  android:layout_width="match_parent"
  17.  android:layout_height="wrap_content"
  18.  android:text="我是按钮"
  19.  />
  20. </LinearLayout>

剩下两个Fragment类似。

2.主界面布局

  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=".MainActivity" >
  7.   <LinearLayout android:id="@+id/linearLayout1"
  8.  android:layout_width="fill_parent"
  9.  android:layout_height="wrap_content"
  10.  android:background="#FFFFFF"
  11.  android:orientation="horizontal" >
  12.     <TextView android:id="@+id/text1"
  13.  android:layout_width="fill_parent"
  14.  android:layout_height="fill_parent"
  15.  android:layout_weight="1.0"
  16.  android:gravity="center"
  17.  android:text="页卡1"
  18.  android:textColor="#000000"
  19.  android:textSize="22.0dip" />
  20.     <TextView android:id="@+id/text2"
  21.  android:layout_width="fill_parent"
  22.  android:layout_height="fill_parent"
  23.  android:layout_weight="1.0"
  24.  android:gravity="center"
  25.  android:text="页卡2"
  26.  android:textColor="#000000"
  27.  android:textSize="22.0dip" />
  28.     <TextView android:id="@+id/text3"
  29.  android:layout_width="fill_parent"
  30.  android:layout_height="fill_parent"
  31.  android:layout_weight="1.0"
  32.  android:gravity="center"
  33.  android:text="页卡3"
  34.  android:textColor="#000000"
  35.  android:textSize="22.0dip" />
  36.   </LinearLayout>
  37.   <ImageView android:id="@+id/cursor"
  38.  android:layout_width="fill_parent"
  39.  android:layout_height="wrap_content"
  40.  android:scaleType="matrix"
  41.  android:src="@drawable/line" />
  42.   <android.support.v4.view.ViewPager android:id="@+id/vPager"
  43.  android:layout_width="wrap_content"
  44.  android:layout_height="wrap_content"
  45.  android:layout_gravity="center"
  46.  android:background="#000000"
  47.  android:flipInterval="30"
  48.  android:persistentDrawingCache="animation"
  49.   />
  50. </LinearLayout>

三个TextView代表选项卡标题，ImageView代表选项卡下的下划线。

3.实现activity。

  1. package com.example.viewpagerdemo3; import android.graphics.BitmapFactory; import android.graphics.Color; import android.graphics.Matrix; import android.os.Bundle; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentActivity; import android.support.v4.app.FragmentPagerAdapter; import android.support.v4.view.ViewPager; import android.support.v4.view.ViewPager.OnPageChangeListener; import android.util.DisplayMetrics; import android.view.animation.Animation; import android.view.animation.TranslateAnimation; import android.widget.ImageView; import android.widget.TextView; public class MainActivity extends FragmentActivity { private ViewPager vPager = null; /** * 代表选项卡下的下划线的imageview */ private ImageView cursor = null; /** * 选项卡下划线长度 */ private static int lineWidth = 0; /** * 偏移量 * （手机屏幕宽度/3-选项卡长度）/2 */ private static int offset = 0; /** * 选项卡总数 */ private static final int TAB_COUNT = 3; /** * 当前显示的选项卡位置 */ private int current_index = 0; /** * 选项卡标题 */ private TextView text1,text2,text3; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); vPager = (ViewPager) findViewById(R.id.vPager); initImageView(); text1 = (TextView) findViewById(R.id.text1); text2 = (TextView) findViewById(R.id.text2); text3 = (TextView) findViewById(R.id.text3); final TextView[] titles = {text1,text2,text3}; vPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) { @Override public int getCount() { return TAB_COUNT; } @Override public Fragment getItem(int index)//直接创建fragment对象并返回 { switch (index) { case 0: return new Tab1(); case 1: return new Tab2(); case 2: return new Tab3(); } return null; } }); vPager.setOnPageChangeListener(new OnPageChangeListener() { int one = offset * 2 + lineWidth;// 页卡1 -> 页卡2 偏移量 @Override public void onPageSelected(int index)//设置标题的颜色以及下划线的移动效果 { Animation animation = new TranslateAnimation(one*current_index,one*index, 0,0); animation.setFillAfter(true); animation.setDuration(300); cursor.startAnimation(animation); titles[current_index].setTextColor(Color.BLACK); titles[index].setTextColor(Color.RED); current_index = index; } @Override public void onPageScrolled(int arg0, float arg1, int arg2) { } @Override public void onPageScrollStateChanged(int index) { } }); } private void initImageView() { cursor = (ImageView) findViewById(R.id.cursor); //获取图片宽度 lineWidth = BitmapFactory.decodeResource(getResources(),R.drawable.line).getWidth(); DisplayMetrics dm = new DisplayMetrics(); getWindowManager().getDefaultDisplay().getMetrics(dm); //获取屏幕宽度 int screenWidth = dm.widthPixels; Matrix matrix = new Matrix(); offset = (int) ((screenWidth/(float)TAB_COUNT - lineWidth)/2); matrix.postTranslate(offset, 0); //设置初始位置 cursor.setImageMatrix(matrix); } }           转载请标明出处：http://blog.csdn.net/lmj623565791/article/details/41087219，本文出自：【张鸿洋的博客】 1、概述 学习Android少不了模仿各种app的界面，自从微信6.0问世以后，就觉得微信切换时那个变色的Tab图标屌屌的，今天我就带大家自定义控件，带你变色变得飞起~~ 好了，下面先看下效果图： 清晰度不太好，大家凑合看~~有木有觉得这个颜色弱爆了了的，，，下面我动动手指给你换个颜色： 有没有这个颜色比较妖一点~~~好了~下面开始介绍原理。 2、原理介绍 通过上面的效果图，大家可能也猜到了，我们的图标并非是两张图片，而是一张图，并且目标颜色是可定制的，谁让现在动不动就谈个性化呢。 那么我们如何做到，可以让图标随心所遇的变色了，其实原理，在我的博客中出现了很多次了，下面你将看到一张熟悉的图： 有没有很熟悉的感脚，我们实际上还是利用了Paint的Xfermode，这次我们使用的是：Mode.DST_IN Dst_IN回顾一下什么效果，先绘制Dst，设置Mode，再绘制Src，则显示的是先后绘图的交集区域，且是Dst. 再仔细观察下我们的图标： 为了方便大家的观看，我特意拿ps选择了一下我们图标的非透明区域，可以看到，我们这个小机器人非透明区域就是被线框起来的部分。 然后，我们图标变色的原理就出现了： 1、先绘制一个颜色（例如：粉红） 2、设置Mode=DST_IN 3、绘制我们这个可爱的小机器人 回答我，显示什么，是不是显示交集，交集是什么？交集是我们的小机器人的非透明区域，也就是那张脸，除了两个眼； 好了，那怎么变色呢？ 我绘制一个颜色的时候，难道不能设置alpha么~~~ 到此，大家应该已经了解了我们图标的绘制的原理了吧。 如果你对Mode不熟悉：建议移步至：Android 自定义控件实现刮刮卡效果 真的就只是刮刮卡么 3、自定义图标控件 我们的整个界面不用说，是ViewPager+Fragment ，现在关注的是底部~~ 接下来我们考虑，底部的Tab，Tab我们的布局是LinearLayout，内部四个View，通过设置weight达到均分~~ 这个View就是我们的自定义的图标控件了，我们叫做：ChangeColorIconWithTextView 接下来考虑，应该有什么属性公布出来 1、自定义属性 想了一下，我决定把图标，图标颜色，图标下显示的文字，文字大小这四个属性作为自定义属性。 那就自定义属性走起了： a、values/attr.xml 
  3.       [java] view plain copy print ? <?xml version="1.0" encoding="utf-8"?> <resources> <attr name="icon" format="reference" /> <attr name="color" format="color" /> <attr name="text" format="string" /> <attr name="text_size" format="dimension" /> <declare-styleable name="ChangeColorIconView"> <attr name="icon" /> <attr name="color" /> <attr name="text" /> <attr name="text_size" /> </declare-styleable> </resources> <?xml version="1.0" encoding="utf-8"?>
  4. <resources>
  6.     <attr name="icon" format="reference" />
  7.     <attr name="color" format="color" />
  8.     <attr name="text" format="string" />
  9.     <attr name="text_size" format="dimension" />
  11.     <declare-styleable name="ChangeColorIconView">
  12.         <attr name="icon" />
  13.         <attr name="color" />
  14.         <attr name="text" />
  15.         <attr name="text_size" />
  16.     </declare-styleable>
  18. </resources> 
  19. b、在布局文件中使用 
  23.       [html] view plain copy print ? 
  25.       <com.zhy.weixin6.ui.ChangeColorIconWithTextView android:id="@+id/id_indicator_one" android:layout_width="0dp" android:layout_height="fill_parent" android:layout_weight="1" android:padding="5dp" zhy:icon="@drawable/ic_menu_start_conversation" zhy:text="@string/tab_weixin" zhy:text_size="12sp" /> 
  27.       <com.zhy.weixin6.ui.ChangeColorIconWithTextView
  28.             android:id="@+id/id_indicator_one"
  29.             android:layout_width="0dp"
  30.             android:layout_height="fill_parent"
  31.             android:layout_weight="1"
  32.             android:padding="5dp"
  33.             zhy:icon="@drawable/ic_menu_start_conversation"
  34.             zhy:text="@string/tab_weixin"
  35.             zhy:text_size="12sp" /> 
  36. 自己注意命名空间的写法，xmlns:zhy="http://schemas.android.com/apk/res/应用的包名"。 c、在构造方法中获取 
  40.       [java] view plain copy print ? 
  42.       public class ChangeColorIconWithTextView extends View { private Bitmap mBitmap; private Canvas mCanvas; private Paint mPaint; /** * 颜色 */ private int mColor = 0xFF45C01A; /** * 透明度 0.0-1.0 */ private float mAlpha = 0f; /** * 图标 */ private Bitmap mIconBitmap; /** * 限制绘制icon的范围 */ private Rect mIconRect; /** * icon底部文本 */ private String mText = "微信"; private int mTextSize = (int) TypedValue.applyDimension( TypedValue.COMPLEX_UNIT_SP, 10, getResources().getDisplayMetrics()); private Paint mTextPaint; private Rect mTextBound = new Rect(); public ChangeColorIconWithTextView(Context context) { super(context); } /** * 初始化自定义属性值 * * @param context * @param attrs */ public ChangeColorIconWithTextView(Context context, AttributeSet attrs) { super(context, attrs); // 获取设置的图标 TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.ChangeColorIconView); int n = a.getIndexCount(); for (int i = 0; i < n; i++) { int attr = a.getIndex(i); switch (attr) { case R.styleable.ChangeColorIconView_icon: BitmapDrawable drawable = (BitmapDrawable) a.getDrawable(attr); mIconBitmap = drawable.getBitmap(); break; case R.styleable.ChangeColorIconView_color: mColor = a.getColor(attr, 0x45C01A); break; case R.styleable.ChangeColorIconView_text: mText = a.getString(attr); break; case R.styleable.ChangeColorIconView_text_size: mTextSize = (int) a.getDimension(attr, TypedValue .applyDimension(TypedValue.COMPLEX_UNIT_SP, 10, getResources().getDisplayMetrics())); break; } } a.recycle(); mTextPaint = new Paint(); mTextPaint.setTextSize(mTextSize); mTextPaint.setColor(0xff555555); // 得到text绘制范围 mTextPaint.getTextBounds(mText, 0, mText.length(), mTextBound); } 
  44.      public class ChangeColorIconWithTextView extends View
  45. {
  47.     private Bitmap mBitmap;
  48.     private Canvas mCanvas;
  49.     private Paint mPaint;
  50.     /**
  51.      * 颜色
  52.      */
  53.     private int mColor = 0xFF45C01A;
  54.     /**
  55.      * 透明度 0.0-1.0
  56.      */
  57.     private float mAlpha = 0f;
  58.     /**
  59.      * 图标
  60.      */
  61.     private Bitmap mIconBitmap;
  62.     /**
  63.      * 限制绘制icon的范围
  64.      */
  65.     private Rect mIconRect;
  66.     /**
  67.      * icon底部文本
  68.      */
  69.     private String mText = "微信";
  70.     private int mTextSize = (int) TypedValue.applyDimension(
  71.             TypedValue.COMPLEX_UNIT_SP, 10, getResources().getDisplayMetrics());
  72.     private Paint mTextPaint;
  73.     private Rect mTextBound = new Rect();
  75.     public ChangeColorIconWithTextView(Context context)
  76.     {
  77.         super(context);
  78.     }
  80.     /**
  81.      * 初始化自定义属性值
  82.      * 
  83.      * @param context
  84.      * @param attrs
  85.      */
  86.     public ChangeColorIconWithTextView(Context context, AttributeSet attrs)
  87.     {
  88.         super(context, attrs);
  90.         // 获取设置的图标
  91.         TypedArray a = context.obtainStyledAttributes(attrs,
  92.                 R.styleable.ChangeColorIconView);
  94.         int n = a.getIndexCount();
  95.         for (int i = 0; i < n; i++)
  96.         {
  98.             int attr = a.getIndex(i);
  99.             switch (attr)
  100.             {
  101.             case R.styleable.ChangeColorIconView_icon:
  102.                 BitmapDrawable drawable = (BitmapDrawable) a.getDrawable(attr);
  103.                 mIconBitmap = drawable.getBitmap();
  104.                 break;
  105.             case R.styleable.ChangeColorIconView_color:
  106.                 mColor = a.getColor(attr, 0x45C01A);
  107.                 break;
  108.             case R.styleable.ChangeColorIconView_text:
  109.                 mText = a.getString(attr);
  110.                 break;
  111.             case R.styleable.ChangeColorIconView_text_size:
  112.                 mTextSize = (int) a.getDimension(attr, TypedValue
  113.                         .applyDimension(TypedValue.COMPLEX_UNIT_SP, 10,
  114.                                 getResources().getDisplayMetrics()));
  115.                 break;
  117.             }
  118.         }
  120.         a.recycle();
  122.         mTextPaint = new Paint();
  123.         mTextPaint.setTextSize(mTextSize);
  124.         mTextPaint.setColor(0xff555555);
  125.         // 得到text绘制范围
  126.         mTextPaint.getTextBounds(mText, 0, mText.length(), mTextBound);
  128.     } 
  129. 可以看到，我们在构造方法中获取了自定义的属性，并且计算了文本占据的控件存在我们的mTextBound中。 2、图标的绘制区域的选择 我们考虑下，有了属性，我们需要绘制一个文本，文本之上一个图标，我们怎么去控制绘制的区域呢？
  130. 我们的View显示区域，无非以下三种情况： 
  131.  针对这三种情况，我门的图标的边长应该是什么呢？ 我觉得边长应该是：控件的高度-文本的高度-内边距   与  控件的宽度-内边距  两者的小值；大家仔细推敲一下； 好了，有了上面的边长的结论，我们就开始计算图标的绘制范围了： 
  135.       [java] view plain copy print ? 
  137.       @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, heightMeasureSpec); // 得到绘制icon的宽 int bitmapWidth = Math.min(getMeasuredWidth() - getPaddingLeft() - getPaddingRight(), getMeasuredHeight() - getPaddingTop() - getPaddingBottom() - mTextBound.height()); int left = getMeasuredWidth() / 2 - bitmapWidth / 2; int top = (getMeasuredHeight() - mTextBound.height()) / 2 - bitmapWidth / 2; // 设置icon的绘制范围 mIconRect = new Rect(left, top, left + bitmapWidth, top + bitmapWidth); } 
  139.          @Override
  140.     protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
  141.     {
  142.         super.onMeasure(widthMeasureSpec, heightMeasureSpec);
  144.         // 得到绘制icon的宽
  145.         int bitmapWidth = Math.min(getMeasuredWidth() - getPaddingLeft()
  146.                 - getPaddingRight(), getMeasuredHeight() - getPaddingTop()
  147.                 - getPaddingBottom() - mTextBound.height());
  149.         int left = getMeasuredWidth() / 2 - bitmapWidth / 2;
  150.         int top = (getMeasuredHeight() - mTextBound.height()) / 2 - bitmapWidth
  151.                 / 2;
  152.         // 设置icon的绘制范围
  153.         mIconRect = new Rect(left, top, left + bitmapWidth, top + bitmapWidth);
  155.     }
  157.   3、绘制图标 绘制图标有很多步骤呀，我来列一列 1、计算alpha（默认为0） 2、绘制原图 3、在绘图区域，绘制一个纯色块（设置了alpha），此步绘制在内存的bitmap上 4、设置mode，针对内存中的bitmap上的paint 5、绘制我们的图标，此步绘制在内存的bitmap上 6、绘制原文本 7、绘制设置alpha和颜色后的文本 8、将内存中的bitmap绘制出来 根据上面的步骤，可以看出来，我们的图标其实绘制了两次，为什么要绘制原图呢，因为我觉得比较好看。 3-5步骤，就是我们上面分析的原理 6-7步，是绘制文本，可以看到，我们的文本就是通过设置alpha实现的 
  161.       [java] view plain copy print ? 
  163.       @Override protected void onDraw(Canvas canvas) { int alpha = (int) Math.ceil((255 * mAlpha)); canvas.drawBitmap(mIconBitmap, null, mIconRect, null); setupTargetBitmap(alpha); drawSourceText(canvas, alpha); drawTargetText(canvas, alpha); canvas.drawBitmap(mBitmap, 0, 0, null); } private void setupTargetBitmap(int alpha) { mBitmap = Bitmap.createBitmap(getMeasuredWidth(), getMeasuredHeight(), Config.ARGB_8888); mCanvas = new Canvas(mBitmap); mPaint = new Paint(); mPaint.setColor(mColor); mPaint.setAntiAlias(true); mPaint.setDither(true); mPaint.setAlpha(alpha); mCanvas.drawRect(mIconRect, mPaint); mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN)); mPaint.setAlpha(255); mCanvas.drawBitmap(mIconBitmap, null, mIconRect, mPaint); } private void drawSourceText(Canvas canvas, int alpha) { mTextPaint.setTextSize(mTextSize); mTextPaint.setColor(0xff333333); mTextPaint.setAlpha(255 - alpha); canvas.drawText(mText, mIconRect.left + mIconRect.width() / 2 - mTextBound.width() / 2, mIconRect.bottom + mTextBound.height(), mTextPaint); } private void drawTargetText(Canvas canvas, int alpha) { mTextPaint.setColor(mColor); mTextPaint.setAlpha(alpha); canvas.drawText(mText, mIconRect.left + mIconRect.width() / 2 - mTextBound.width() / 2, mIconRect.bottom + mTextBound.height(), mTextPaint); } 
  165.      @Override
  166.     protected void onDraw(Canvas canvas)
  167.     {
  169.         int alpha = (int) Math.ceil((255 * mAlpha));
  170.         canvas.drawBitmap(mIconBitmap, null, mIconRect, null);
  171.         setupTargetBitmap(alpha);
  172.         drawSourceText(canvas, alpha);
  173.         drawTargetText(canvas, alpha);
  174.         canvas.drawBitmap(mBitmap, 0, 0, null);
  176.     }
  178.     private void setupTargetBitmap(int alpha)
  179.     {
  180.         mBitmap = Bitmap.createBitmap(getMeasuredWidth(), getMeasuredHeight(),
  181.                 Config.ARGB_8888);
  182.         mCanvas = new Canvas(mBitmap);
  183.         mPaint = new Paint();
  184.         mPaint.setColor(mColor);
  185.         mPaint.setAntiAlias(true);
  186.         mPaint.setDither(true);
  187.         mPaint.setAlpha(alpha);
  188.         mCanvas.drawRect(mIconRect, mPaint);
  189.         mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));
  190.         mPaint.setAlpha(255);
  191.         mCanvas.drawBitmap(mIconBitmap, null, mIconRect, mPaint);
  192.     }
  194.     private void drawSourceText(Canvas canvas, int alpha)
  195.     {
  196.         mTextPaint.setTextSize(mTextSize);
  197.         mTextPaint.setColor(0xff333333);
  198.         mTextPaint.setAlpha(255 - alpha);
  199.         canvas.drawText(mText, mIconRect.left + mIconRect.width() / 2
  200.                 - mTextBound.width() / 2,
  201.                 mIconRect.bottom + mTextBound.height(), mTextPaint);
  202.     }
  204.     private void drawTargetText(Canvas canvas, int alpha)
  205.     {
  206.         mTextPaint.setColor(mColor);
  207.         mTextPaint.setAlpha(alpha);
  208.         canvas.drawText(mText, mIconRect.left + mIconRect.width() / 2
  209.                 - mTextBound.width() / 2,
  210.                 mIconRect.bottom + mTextBound.height(), mTextPaint);
  212.     } 
  213. 关于绘制文本区域的计算，首先是起点x：mIconRect.left + mIconRect.width() / 2- mTextBound.width() / 2 有点长哈，文本mIconRect.left + mIconRect.width() / 2这个位置，在图标水平区域的中心点，这个应该没有疑问；图标水平区域的中点- mTextBound.width() / 2 开始绘制文本，是不是就是居中在图标的下面； 有人可能会问：你怎么知道文本宽度小于图标，我有5个字咋办？5个字怎么了，照样是居中显示，不信你试试~~ 4、公布设置透明度的方法 到此，我们的图标控件写完了，但是还没有把我们的控制icon的方法放出去： 
  217.       [java] view plain copy print ? 
  219.       public void setIconAlpha(float alpha) { this.mAlpha = alpha; invalidateView(); } private void invalidateView() { if (Looper.getMainLooper() == Looper.myLooper()) { invalidate(); } else { postInvalidate(); } } 
  221.          public void setIconAlpha(float alpha)
  222.     {
  223.         this.mAlpha = alpha;
  224.         invalidateView();
  225.     }
  227.     private void invalidateView()
  228.     {
  229.         if (Looper.getMainLooper() == Looper.myLooper())
  230.         {
  231.             invalidate();
  232.         } else
  233.         {
  234.             postInvalidate();
  235.         }
  236.     } 
  237. 我们叫做setIconAlpha，避免了和setAlpha冲突，设置完成后，invalidate一下~~~ 
  238.  到此就真的结束了，接下来看用法。 
  239.  4、实战
  246.      1、布局文件 
  250.       [html] view plain copy print ? 
  252.       <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:zhy="http://schemas.android.com/apk/res/com.zhy.weixin6.ui" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <android.support.v4.view.ViewPager android:id="@+id/id_viewpager" android:layout_width="fill_parent" android:layout_height="0dp" android:layout_weight="1" > </android.support.v4.view.ViewPager> <LinearLayout android:layout_width="fill_parent" android:layout_height="60dp" android:background="@drawable/tabbg" android:orientation="horizontal" > <com.zhy.weixin6.ui.ChangeColorIconWithTextView android:id="@+id/id_indicator_one" android:layout_width="0dp" android:layout_height="fill_parent" android:layout_weight="1" android:padding="5dp" zhy:icon="@drawable/ic_menu_start_conversation" zhy:text="@string/tab_weixin" zhy:text_size="12sp" /> <com.zhy.weixin6.ui.ChangeColorIconWithTextView android:id="@+id/id_indicator_two" android:layout_width="0dp" android:layout_height="fill_parent" android:layout_weight="1" android:padding="5dp" zhy:icon="@drawable/ic_menu_friendslist" zhy:text="@string/tab_contact" zhy:text_size="12sp" /> <com.zhy.weixin6.ui.ChangeColorIconWithTextView android:id="@+id/id_indicator_three" android:layout_width="0dp" android:layout_height="fill_parent" android:layout_weight="1" android:padding="5dp" zhy:icon="@drawable/ic_menu_emoticons" zhy:text="@string/tab_find" zhy:text_size="12sp" /> <com.zhy.weixin6.ui.ChangeColorIconWithTextView android:id="@+id/id_indicator_four" android:layout_width="0dp" android:layout_height="fill_parent" android:layout_weight="1" android:padding="5dp" zhy:icon="@drawable/ic_menu_allfriends" zhy:text="@string/tab_me" zhy:text_size="12sp" /> </LinearLayout> </LinearLayout> 
  254.      <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  255.     xmlns:zhy="http://schemas.android.com/apk/res/com.zhy.weixin6.ui"
  256.     xmlns:tools="http://schemas.android.com/tools"
  257.     android:layout_width="match_parent"
  258.     android:layout_height="match_parent"
  259.     android:orientation="vertical" >
  261.     <android.support.v4.view.ViewPager
  262.         android:id="@+id/id_viewpager"
  263.         android:layout_width="fill_parent"
  264.         android:layout_height="0dp"
  265.         android:layout_weight="1" >
  266.     </android.support.v4.view.ViewPager>
  268.     <LinearLayout
  269.         android:layout_width="fill_parent"
  270.         android:layout_height="60dp"
  271.         android:background="@drawable/tabbg"
  272.         android:orientation="horizontal" >
  274.         <com.zhy.weixin6.ui.ChangeColorIconWithTextView
  275.             android:id="@+id/id_indicator_one"
  276.             android:layout_width="0dp"
  277.             android:layout_height="fill_parent"
  278.             android:layout_weight="1"
  279.             android:padding="5dp"
  280.             zhy:icon="@drawable/ic_menu_start_conversation"
  281.             zhy:text="@string/tab_weixin"
  282.             zhy:text_size="12sp" />
  284.         <com.zhy.weixin6.ui.ChangeColorIconWithTextView
  285.             android:id="@+id/id_indicator_two"
  286.             android:layout_width="0dp"
  287.             android:layout_height="fill_parent"
  288.             android:layout_weight="1"
  289.             android:padding="5dp"
  290.             zhy:icon="@drawable/ic_menu_friendslist"
  291.             zhy:text="@string/tab_contact"
  292.             zhy:text_size="12sp" />
  294.         <com.zhy.weixin6.ui.ChangeColorIconWithTextView
  295.             android:id="@+id/id_indicator_three"
  296.             android:layout_width="0dp"
  297.             android:layout_height="fill_parent"
  298.             android:layout_weight="1"
  299.             android:padding="5dp"
  300.             zhy:icon="@drawable/ic_menu_emoticons"
  301.             zhy:text="@string/tab_find"
  302.             zhy:text_size="12sp" />
  304.         <com.zhy.weixin6.ui.ChangeColorIconWithTextView
  305.             android:id="@+id/id_indicator_four"
  306.             android:layout_width="0dp"
  307.             android:layout_height="fill_parent"
  308.             android:layout_weight="1"
  309.             android:padding="5dp"
  310.             zhy:icon="@drawable/ic_menu_allfriends"
  311.             zhy:text="@string/tab_me"
  312.             zhy:text_size="12sp" />
  313.     </LinearLayout>
  315. </LinearLayout> 
  316.   2、MainActivity 
  320.       [java] view plain copy print ? 
  322.       package com.zhy.weixin6.ui; import java.lang.reflect.Field; import java.lang.reflect.Method; import java.util.ArrayList; import java.util.List; import android.annotation.SuppressLint; import android.os.Bundle; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentActivity; import android.support.v4.app.FragmentPagerAdapter; import android.support.v4.view.ViewPager; import android.support.v4.view.ViewPager.OnPageChangeListener; import android.view.Menu; import android.view.View; import android.view.View.OnClickListener; import android.view.ViewConfiguration; import android.view.Window; @SuppressLint("NewApi") public class MainActivity extends FragmentActivity implements OnPageChangeListener, OnClickListener { private ViewPager mViewPager; private List<Fragment> mTabs = new ArrayList<Fragment>(); private FragmentPagerAdapter mAdapter; private String[] mTitles = new String[] { "First Fragment!", "Second Fragment!", "Third Fragment!", "Fourth Fragment!" }; private List<ChangeColorIconWithTextView> mTabIndicator = new ArrayList<ChangeColorIconWithTextView>(); @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); setOverflowShowingAlways(); getActionBar().setDisplayShowHomeEnabled(false); mViewPager = (ViewPager) findViewById(R.id.id_viewpager); initDatas(); mViewPager.setAdapter(mAdapter); mViewPager.setOnPageChangeListener(this); } private void initDatas() { for (String title : mTitles) { TabFragment tabFragment = new TabFragment(); Bundle args = new Bundle(); args.putString("title", title); tabFragment.setArguments(args); mTabs.add(tabFragment); } mAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) { @Override public int getCount() { return mTabs.size(); } @Override public Fragment getItem(int arg0) { return mTabs.get(arg0); } }; initTabIndicator(); } @Override public boolean onCreateOptionsMenu(Menu menu) { getMenuInflater().inflate(R.menu.main, menu); return true; } private void initTabIndicator() { ChangeColorIconWithTextView one = (ChangeColorIconWithTextView) findViewById(R.id.id_indicator_one); ChangeColorIconWithTextView two = (ChangeColorIconWithTextView) findViewById(R.id.id_indicator_two); ChangeColorIconWithTextView three = (ChangeColorIconWithTextView) findViewById(R.id.id_indicator_three); ChangeColorIconWithTextView four = (ChangeColorIconWithTextView) findViewById(R.id.id_indicator_four); mTabIndicator.add(one); mTabIndicator.add(two); mTabIndicator.add(three); mTabIndicator.add(four); one.setOnClickListener(this); two.setOnClickListener(this); three.setOnClickListener(this); four.setOnClickListener(this); one.setIconAlpha(1.0f); } @Override public void onPageSelected(int arg0) { } @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { // Log.e("TAG", "position = " + position + " , positionOffset = " // + positionOffset); if (positionOffset > 0) { ChangeColorIconWithTextView left = mTabIndicator.get(position); ChangeColorIconWithTextView right = mTabIndicator.get(position + 1); left.setIconAlpha(1 - positionOffset); right.setIconAlpha(positionOffset); } } @Override public void onPageScrollStateChanged(int state) { } @Override public void onClick(View v) { resetOtherTabs(); switch (v.getId()) { case R.id.id_indicator_one: mTabIndicator.get(0).setIconAlpha(1.0f); mViewPager.setCurrentItem(0, false); break; case R.id.id_indicator_two: mTabIndicator.get(1).setIconAlpha(1.0f); mViewPager.setCurrentItem(1, false); break; case R.id.id_indicator_three: mTabIndicator.get(2).setIconAlpha(1.0f); mViewPager.setCurrentItem(2, false); break; case R.id.id_indicator_four: mTabIndicator.get(3).setIconAlpha(1.0f); mViewPager.setCurrentItem(3, false); break; } } /** * 重置其他的Tab */ private void resetOtherTabs() { for (int i = 0; i < mTabIndicator.size(); i++) { mTabIndicator.get(i).setIconAlpha(0); } } @Override public boolean onMenuOpened(int featureId, Menu menu) { if (featureId == Window.FEATURE_ACTION_BAR && menu != null) { if (menu.getClass().getSimpleName().equals("MenuBuilder")) { try { Method m = menu.getClass().getDeclaredMethod( "setOptionalIconsVisible", Boolean.TYPE); m.setAccessible(true); m.invoke(menu, true); } catch (Exception e) { } } } return super.onMenuOpened(featureId, menu); } private void setOverflowShowingAlways() { try { // true if a permanent menu key is present, false otherwise. ViewConfiguration config = ViewConfiguration.get(this); Field menuKeyField = ViewConfiguration.class .getDeclaredField("sHasPermanentMenuKey"); menuKeyField.setAccessible(true); menuKeyField.setBoolean(config, false); } catch (Exception e) { e.printStackTrace(); } } } 
  324.      package com.zhy.weixin6.ui;
  326. import java.lang.reflect.Field;
  327. import java.lang.reflect.Method;
  328. import java.util.ArrayList;
  329. import java.util.List;
  331. import android.annotation.SuppressLint;
  332. import android.os.Bundle;
  333. import android.support.v4.app.Fragment;
  334. import android.support.v4.app.FragmentActivity;
  335. import android.support.v4.app.FragmentPagerAdapter;
  336. import android.support.v4.view.ViewPager;
  337. import android.support.v4.view.ViewPager.OnPageChangeListener;
  338. import android.view.Menu;
  339. import android.view.View;
  340. import android.view.View.OnClickListener;
  341. import android.view.ViewConfiguration;
  342. import android.view.Window;
  344. @SuppressLint("NewApi")
  345. public class MainActivity extends FragmentActivity implements
  346.         OnPageChangeListener, OnClickListener
  347. {
  348.     private ViewPager mViewPager;
  349.     private List<Fragment> mTabs = new ArrayList<Fragment>();
  350.     private FragmentPagerAdapter mAdapter;
  352.     private String[] mTitles = new String[] { "First Fragment!",
  353.             "Second Fragment!", "Third Fragment!", "Fourth Fragment!" };
  355.     private List<ChangeColorIconWithTextView> mTabIndicator = new ArrayList<ChangeColorIconWithTextView>();
  357.     @Override
  358.     protected void onCreate(Bundle savedInstanceState)
  359.     {
  360.         super.onCreate(savedInstanceState);
  361.         setContentView(R.layout.activity_main);
  363.         setOverflowShowingAlways();
  364.         getActionBar().setDisplayShowHomeEnabled(false);
  365.         mViewPager = (ViewPager) findViewById(R.id.id_viewpager);
  367.         initDatas();
  369.         mViewPager.setAdapter(mAdapter);
  370.         mViewPager.setOnPageChangeListener(this);
  371.     }
  373.     private void initDatas()
  374.     {
  376.         for (String title : mTitles)
  377.         {
  378.             TabFragment tabFragment = new TabFragment();
  379.             Bundle args = new Bundle();
  380.             args.putString("title", title);
  381.             tabFragment.setArguments(args);
  382.             mTabs.add(tabFragment);
  383.         }
  385.         mAdapter = new FragmentPagerAdapter(getSupportFragmentManager())
  386.         {
  388.             @Override
  389.             public int getCount()
  390.             {
  391.                 return mTabs.size();
  392.             }
  394.             @Override
  395.             public Fragment getItem(int arg0)
  396.             {
  397.                 return mTabs.get(arg0);
  398.             }
  399.         };
  401.         initTabIndicator();
  403.     }
  405.     @Override
  406.     public boolean onCreateOptionsMenu(Menu menu)
  407.     {
  408.         getMenuInflater().inflate(R.menu.main, menu);
  409.         return true;
  410.     }
  412.     private void initTabIndicator()
  413.     {
  414.         ChangeColorIconWithTextView one = (ChangeColorIconWithTextView) findViewById(R.id.id_indicator_one);
  415.         ChangeColorIconWithTextView two = (ChangeColorIconWithTextView) findViewById(R.id.id_indicator_two);
  416.         ChangeColorIconWithTextView three = (ChangeColorIconWithTextView) findViewById(R.id.id_indicator_three);
  417.         ChangeColorIconWithTextView four = (ChangeColorIconWithTextView) findViewById(R.id.id_indicator_four);
  419.         mTabIndicator.add(one);
  420.         mTabIndicator.add(two);
  421.         mTabIndicator.add(three);
  422.         mTabIndicator.add(four);
  424.         one.setOnClickListener(this);
  425.         two.setOnClickListener(this);
  426.         three.setOnClickListener(this);
  427.         four.setOnClickListener(this);
  429.         one.setIconAlpha(1.0f);
  430.     }
  432.     @Override
  433.     public void onPageSelected(int arg0)
  434.     {
  435.     }
  437.     @Override
  438.     public void onPageScrolled(int position, float positionOffset,
  439.             int positionOffsetPixels)
  440.     {
  441.         // Log.e("TAG", "position = " + position + " , positionOffset = "
  442.         // + positionOffset);
  444.         if (positionOffset > 0)
  445.         {
  446.             ChangeColorIconWithTextView left = mTabIndicator.get(position);
  447.             ChangeColorIconWithTextView right = mTabIndicator.get(position + 1);
  449.             left.setIconAlpha(1 - positionOffset);
  450.             right.setIconAlpha(positionOffset);
  451.         }
  453.     }
  455.     @Override
  456.     public void onPageScrollStateChanged(int state)
  457.     {
  459.     }
  461.     @Override
  462.     public void onClick(View v)
  463.     {
  465.         resetOtherTabs();
  467.         switch (v.getId())
  468.         {
  469.         case R.id.id_indicator_one:
  470.             mTabIndicator.get(0).setIconAlpha(1.0f);
  471.             mViewPager.setCurrentItem(0, false);
  472.             break;
  473.         case R.id.id_indicator_two:
  474.             mTabIndicator.get(1).setIconAlpha(1.0f);
  475.             mViewPager.setCurrentItem(1, false);
  476.             break;
  477.         case R.id.id_indicator_three:
  478.             mTabIndicator.get(2).setIconAlpha(1.0f);
  479.             mViewPager.setCurrentItem(2, false);
  480.             break;
  481.         case R.id.id_indicator_four:
  482.             mTabIndicator.get(3).setIconAlpha(1.0f);
  483.             mViewPager.setCurrentItem(3, false);
  484.             break;
  486.         }
  488.     }
  490.     /**
  491.      * 重置其他的Tab
  492.      */
  493.     private void resetOtherTabs()
  494.     {
  495.         for (int i = 0; i < mTabIndicator.size(); i++)
  496.         {
  497.             mTabIndicator.get(i).setIconAlpha(0);
  498.         }
  499.     }
  501.     @Override
  502.     public boolean onMenuOpened(int featureId, Menu menu)
  503.     {
  504.         if (featureId == Window.FEATURE_ACTION_BAR && menu != null)
  505.         {
  506.             if (menu.getClass().getSimpleName().equals("MenuBuilder"))
  507.             {
  508.                 try
  509.                 {
  510.                     Method m = menu.getClass().getDeclaredMethod(
  511.                             "setOptionalIconsVisible", Boolean.TYPE);
  512.                     m.setAccessible(true);
  513.                     m.invoke(menu, true);
  514.                 } catch (Exception e)
  515.                 {
  516.                 }
  517.             }
  518.         }
  519.         return super.onMenuOpened(featureId, menu);
  520.     }
  522.     private void setOverflowShowingAlways()
  523.     {
  524.         try
  525.         {
  526.             // true if a permanent menu key is present, false otherwise.
  527.             ViewConfiguration config = ViewConfiguration.get(this);
  528.             Field menuKeyField = ViewConfiguration.class
  529.                     .getDeclaredField("sHasPermanentMenuKey");
  530.             menuKeyField.setAccessible(true);
  531.             menuKeyField.setBoolean(config, false);
  532.         } catch (Exception e)
  533.         {
  534.             e.printStackTrace();
  535.         }
  536.     }
  538. }
  540. Activity里面代码虽然没什么注释，但是很简单哈，就是初始化Fragment，得到我们的适配器，然后设置给ViewPager； initTabIndicator我们初始化我们的自定义控件，以及加上了点击事件；
  541.  唯一一个需要指出的就是： 我们在onPageScrolled中，动态的获取position以及positionOffset，然后拿到左右两个View，设置positionOffset ； 这里表示下惭愧，曾经在高仿微信5.2.1主界面架构 包含消息通知 的onPageScrolled中写了一堆的if else，在视频上线后，也有同学立马就提出了，一行代码搞定~~ 所以，我们这里简单找了下规律，已经没有if else的身影了~~~ 还剩两个反射的方法，是控制Actionbar的图标的，和点击menu按键，将ActionBar的menu显示在正常区域的~~ 3、TabFragment 
  545.       [java] view plain copy print ? 
  547.       package com.zhy.weixin6.ui; import android.graphics.Color; import android.os.Bundle; import android.support.v4.app.Fragment; import android.view.Gravity; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.TextView; public class TabFragment extends Fragment { private String mTitle = "Default"; public TabFragment() { } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { if (getArguments() != null) { mTitle = getArguments().getString("title"); } TextView textView = new TextView(getActivity()); textView.setTextSize(20); textView.setBackgroundColor(Color.parseColor("#ffffffff")); textView.setGravity(Gravity.CENTER); textView.setText(mTitle); return textView; } } 
  549.      package com.zhy.weixin6.ui;
  551. import android.graphics.Color;
  552. import android.os.Bundle;
  553. import android.support.v4.app.Fragment;
  554. import android.view.Gravity;
  555. import android.view.LayoutInflater;
  556. import android.view.View;
  557. import android.view.ViewGroup;
  558. import android.widget.TextView;
  560. public class TabFragment extends Fragment
  561. {
  562.     private String mTitle = "Default";
  565.     public TabFragment()
  566.     {
  567.     }
  569.     @Override
  570.     public View onCreateView(LayoutInflater inflater, ViewGroup container,
  571.             Bundle savedInstanceState)
  572.     {
  573.         if (getArguments() != null)
  574.         {
  575.             mTitle = getArguments().getString("title");
  576.         }
  578.         TextView textView = new TextView(getActivity());
  579.         textView.setTextSize(20);
  580.         textView.setBackgroundColor(Color.parseColor("#ffffffff"));
  581.         textView.setGravity(Gravity.CENTER);
  582.         textView.setText(mTitle);
  583.         return textView;
  584.     }
  585. }
  589.  好了，到此我们的整个案例就结束了~~ 大家可以在布局文件中设置各种颜色，4个不同颜色也可以，尽情的玩耍吧~~ 
  591.  源码点击下载 
  595.  我建了一个QQ群，方便大家交流。群号：55032675 ---------------------------------------------------------------------------------------------------------- 博主部分视频已经上线，如果你不喜欢枯燥的文本，请猛戳（初录，期待您的支持）： 1、Android 自定义控件实战 电商活动中的刮刮卡 2、Android自定义控件实战 打造Android流式布局和热门标签
  596.  3、Android智能机器人“小慕”的实现
  597.  4、高仿QQ5.0侧滑
  598.  5、高仿微信5.2.1主界面及消息提醒       Android ViewPager+RadioGroup+Fragment超高仿微信6.0底部滑动菜单,可通过左右滑动或点击底部RadioButton切换Fragment。 下载源码地址：http://download.csdn.net/download/shenyuanqing/9428333 效果图： 
  599.  MainActivity.java 
  603.       [java] view plain copy print ? 
  605.       package com.example.administrator.wechat.activity; import android.os.Bundle; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentActivity; import android.support.v4.view.ViewPager; import android.widget.RadioButton; import android.widget.RadioGroup; import com.example.administrator.wechat.R; import com.example.administrator.wechat.adapter.MyFragmentPagerAdapter; import com.example.administrator.wechat.fragment.ContactsFragment; import com.example.administrator.wechat.fragment.DiscoveryFragment; import com.example.administrator.wechat.fragment.MeFragment; import com.example.administrator.wechat.fragment.ChatFragment; import java.util.ArrayList; import java.util.List; public class MainActivity extends FragmentActivity { private ViewPager viewPager; private RadioGroup radioGroup; private RadioButton rbChat, rbContacts, rbDiscovery, rbMe; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); initView(); } private void initView() { /** * RadioGroup部分 */ radioGroup = (RadioGroup) findViewById(R.id.radioGroup); rbChat = (RadioButton) findViewById(R.id.rb_chat); rbContacts = (RadioButton) findViewById(R.id.rb_contacts); rbDiscovery = (RadioButton) findViewById(R.id.rb_discovery); rbMe = (RadioButton) findViewById(R.id.rb_me); //RadioGroup选中状态改变监听 radioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() { @Override public void onCheckedChanged(RadioGroup group, int checkedId) { switch (checkedId) { case R.id.rb_chat: /** * setCurrentItem第二个参数控制页面切换动画 * true:打开/false:关闭 */ viewPager.setCurrentItem(0, false); break; case R.id.rb_contacts: viewPager.setCurrentItem(1, false); break; case R.id.rb_discovery: viewPager.setCurrentItem(2, false); break; case R.id.rb_me: viewPager.setCurrentItem(3, false); break; } } }); /** * ViewPager部分 */ viewPager = (ViewPager) findViewById(R.id.viewPager); ChatFragment weChatFragment = new ChatFragment(); ContactsFragment contactsFragment = new ContactsFragment(); DiscoveryFragment discoveryFragment = new DiscoveryFragment(); MeFragment meFragment = new MeFragment(); List<Fragment> alFragment = new ArrayList<Fragment>(); alFragment.add(weChatFragment); alFragment.add(contactsFragment); alFragment.add(discoveryFragment); alFragment.add(meFragment); //ViewPager设置适配器 viewPager.setAdapter(new MyFragmentPagerAdapter(getSupportFragmentManager(), alFragment)); //ViewPager显示第一个Fragment viewPager.setCurrentItem(0); //ViewPager页面切换监听 viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() { @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { } @Override public void onPageSelected(int position) { switch (position) { case 0: radioGroup.check(R.id.rb_chat); break; case 1: radioGroup.check(R.id.rb_contacts); break; case 2: radioGroup.check(R.id.rb_discovery); break; case 3: radioGroup.check(R.id.rb_me); break; } } @Override public void onPageScrollStateChanged(int state) { } }); } } 
  607.      package com.example.administrator.wechat.activity;
  609. import android.os.Bundle;
  610. import android.support.v4.app.Fragment;
  611. import android.support.v4.app.FragmentActivity;
  612. import android.support.v4.view.ViewPager;
  613. import android.widget.RadioButton;
  614. import android.widget.RadioGroup;
  616. import com.example.administrator.wechat.R;
  617. import com.example.administrator.wechat.adapter.MyFragmentPagerAdapter;
  618. import com.example.administrator.wechat.fragment.ContactsFragment;
  619. import com.example.administrator.wechat.fragment.DiscoveryFragment;
  620. import com.example.administrator.wechat.fragment.MeFragment;
  621. import com.example.administrator.wechat.fragment.ChatFragment;
  623. import java.util.ArrayList;
  624. import java.util.List;
  627. public class MainActivity extends FragmentActivity {
  628.     private ViewPager viewPager;
  629.     private RadioGroup radioGroup;
  630.     private RadioButton rbChat, rbContacts, rbDiscovery, rbMe;
  632.     @Override
  633.     protected void onCreate(Bundle savedInstanceState) {
  634.         super.onCreate(savedInstanceState);
  635.         setContentView(R.layout.activity_main);
  637.         initView();
  638.     }
  640.     private void initView() {
  641.         /**
  642.          * RadioGroup部分
  643.          */
  644.         radioGroup = (RadioGroup) findViewById(R.id.radioGroup);
  645.         rbChat = (RadioButton) findViewById(R.id.rb_chat);
  646.         rbContacts = (RadioButton) findViewById(R.id.rb_contacts);
  647.         rbDiscovery = (RadioButton) findViewById(R.id.rb_discovery);
  648.         rbMe = (RadioButton) findViewById(R.id.rb_me);
  649.         //RadioGroup选中状态改变监听
  650.         radioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
  651.             @Override
  652.             public void onCheckedChanged(RadioGroup group, int checkedId) {
  653.                 switch (checkedId) {
  654.                     case R.id.rb_chat:
  655.                         /**
  656.                          * setCurrentItem第二个参数控制页面切换动画
  657.                          * true:打开/false:关闭
  658.                          */
  659.                         viewPager.setCurrentItem(0, false);
  660.                         break;
  661.                     case R.id.rb_contacts:
  662.                         viewPager.setCurrentItem(1, false);
  663.                         break;
  664.                     case R.id.rb_discovery:
  665.                         viewPager.setCurrentItem(2, false);
  666.                         break;
  667.                     case R.id.rb_me:
  668.                         viewPager.setCurrentItem(3, false);
  669.                         break;
  670.                 }
  671.             }
  672.         });
  674.         /**
  675.          * ViewPager部分
  676.          */
  677.         viewPager = (ViewPager) findViewById(R.id.viewPager);
  678.         ChatFragment weChatFragment = new ChatFragment();
  679.         ContactsFragment contactsFragment = new ContactsFragment();
  680.         DiscoveryFragment discoveryFragment = new DiscoveryFragment();
  681.         MeFragment meFragment = new MeFragment();
  682.         List<Fragment> alFragment = new ArrayList<Fragment>();
  683.         alFragment.add(weChatFragment);
  684.         alFragment.add(contactsFragment);
  685.         alFragment.add(discoveryFragment);
  686.         alFragment.add(meFragment);
  687.         //ViewPager设置适配器
  688.         viewPager.setAdapter(new MyFragmentPagerAdapter(getSupportFragmentManager(), alFragment));
  689.         //ViewPager显示第一个Fragment
  690.         viewPager.setCurrentItem(0);
  691.         //ViewPager页面切换监听
  692.         viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
  693.             @Override
  694.             public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
  696.             }
  698.             @Override
  699.             public void onPageSelected(int position) {
  700.                 switch (position) {
  701.                     case 0:
  702.                         radioGroup.check(R.id.rb_chat);
  703.                         break;
  704.                     case 1:
  705.                         radioGroup.check(R.id.rb_contacts);
  706.                         break;
  707.                     case 2:
  708.                         radioGroup.check(R.id.rb_discovery);
  709.                         break;
  710.                     case 3:
  711.                         radioGroup.check(R.id.rb_me);
  712.                         break;
  713.                 }
  714.             }
  716.             @Override
  717.             public void onPageScrollStateChanged(int state) {
  719.             }
  720.         });
  721.     }
  722. } activity_main.xml 
  726.       [html] view plain copy print ? 
  728.       <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <RadioGroup android:id="@+id/radioGroup" android:layout_width="match_parent" android:layout_height="55dp" android:layout_alignParentBottom="true" android:background="@color/white" android:orientation="horizontal"> <RadioButton android:id="@+id/rb_chat" android:checked="true" android:text="@string/chat" android:drawableTop="@drawable/rb_chat_selector" style="@style/style_RadioButton"/> <RadioButton android:id="@+id/rb_contacts" android:text="@string/contacts" android:drawableTop="@drawable/rb_contacts_selector" style="@style/style_RadioButton"/> <RadioButton android:id="@+id/rb_discovery" android:text="@string/discovery" android:drawableTop="@drawable/rb_discovery_selector" style="@style/style_RadioButton"/> <RadioButton android:id="@+id/rb_me" android:text="@string/me" android:drawableTop="@drawable/rb_me_selector" style="@style/style_RadioButton"/> </RadioGroup> <android.support.v4.view.ViewPager android:id="@+id/viewPager" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_above="@id/radioGroup" /> </RelativeLayout> 
  730.      <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  731.     android:layout_width="match_parent"
  732.     android:layout_height="match_parent">
  734.     <RadioGroup
  735.         android:id="@+id/radioGroup"
  736.         android:layout_width="match_parent"
  737.         android:layout_height="55dp"
  738.         android:layout_alignParentBottom="true"
  739.         android:background="@color/white"
  740.         android:orientation="horizontal">
  742.         <RadioButton
  743.             android:id="@+id/rb_chat"
  744.             android:checked="true"
  745.             android:text="@string/chat"
  746.             android:drawableTop="@drawable/rb_chat_selector"
  747.             style="@style/style_RadioButton"/>
  749.         <RadioButton
  750.             android:id="@+id/rb_contacts"
  751.             android:text="@string/contacts"
  752.             android:drawableTop="@drawable/rb_contacts_selector"
  753.             style="@style/style_RadioButton"/>
  755.         <RadioButton
  756.             android:id="@+id/rb_discovery"
  757.             android:text="@string/discovery"
  758.             android:drawableTop="@drawable/rb_discovery_selector"
  759.             style="@style/style_RadioButton"/>
  761.         <RadioButton
  762.             android:id="@+id/rb_me"
  763.             android:text="@string/me"
  764.             android:drawableTop="@drawable/rb_me_selector"
  765.             style="@style/style_RadioButton"/>
  766.     </RadioGroup>
  768.     <android.support.v4.view.ViewPager
  769.         android:id="@+id/viewPager"
  770.         android:layout_width="match_parent"
  771.         android:layout_height="match_parent"
  772.         android:layout_above="@id/radioGroup" />
  773. </RelativeLayout> MyFragmentPagerAdapter 
  777.       [java] view plain copy print ? 
  779.       package com.example.administrator.wechat.adapter; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentManager; import android.support.v4.app.FragmentPagerAdapter; import java.util.List; /** * Created by Administrator on 2015/6/24. */ public class MyFragmentPagerAdapter extends FragmentPagerAdapter { private List<Fragment> list; public MyFragmentPagerAdapter(FragmentManager fm, List<Fragment> list) { super(fm); this.list = list; } @Override public Fragment getItem(int position) { return list.get(position); } @Override public int getCount() { return list.size(); } } 
  781.      package com.example.administrator.wechat.adapter;
  783. import android.support.v4.app.Fragment;
  784. import android.support.v4.app.FragmentManager;
  785. import android.support.v4.app.FragmentPagerAdapter;
  787. import java.util.List;
  789. /**
  790.  * Created by Administrator on 2015/6/24.
  791.  */
  792. public class MyFragmentPagerAdapter extends FragmentPagerAdapter {
  793.     private List<Fragment> list;
  795.     public MyFragmentPagerAdapter(FragmentManager fm, List<Fragment> list) {
  796.         super(fm);
  797.         this.list = list;
  798.     }
  800.     @Override
  801.     public Fragment getItem(int position) {
  802.         return list.get(position);
  803.     }
  805.     @Override
  806.     public int getCount() {
  807.         return list.size();
  808.     }
  809. } style.xml
  814.       [html] view plain copy print ? 
  816.       <resources> <!-- Base application theme. --> <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"> <!-- Customize your theme here. --> <item name="android:colorPrimary">@color/green</item> </style> <style name="style_RadioButton"> <item name="android:layout_width">match_parent</item> <item name="android:layout_height">wrap_content</item> <item name="android:button">@null</item> <item name="android:background">@null</item> <item name="android:layout_weight">1</item> <item name="android:gravity">center</item> <item name="android:layout_gravity">center</item> <item name="android:textColor">@drawable/rb_focus_color</item> <item name="android:textSize">12sp</item> </style> </resources>

发表评论

表情：
评论列表 （有 0 条评论，261人围观）

还没有评论，来说两句吧...

相关阅读

    相关 选项卡切换

    一个选项卡，意思就是切换选项，一个最简单的列子，爱玩手机和电脑的肯定用过，选项卡和滚动条我觉得是差不多一个意思，当然只是差不多，并不绝对。 因为两者都是屏幕高度不够，而设计出

    ゞ 浴缸里的玫瑰ゞ 浴缸里的玫瑰/ 0 赞/ 277 阅读

    相关 JS实现选项卡切换

    面是用JS简单地实现选项卡功能的实例。 > 注意点：（1）闭包后，要使用立即执行函数； > > （2）绑定事件注意参数； > > （3）思路：将当前div显示，其余隐藏，

    悠悠悠悠/ 0 赞/ 509 阅读