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

最新推荐文章于 2021-06-18 19:26:33 发布
最新推荐文章于 2021-06-18 19:26:33 发布
阅读量1.4k 收藏 3
点赞数 2
分类专栏： android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014748504/article/details/51115242
版权

原文

   http://blog.csdn.net/chdjj/article/details/21564503
主题  ViewPager

显示效果：

 

实现过程：

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

这里仅贴出其中一个：

Tab2： 
package com.example.viewpagerdemo3;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.Toast;

public class Tab2 extends Fragment
{
  private Button but = null;
  @Override
  public View onCreateView(LayoutInflater inflater, ViewGroup container,
      Bundle savedInstanceState)
  {
    View view = inflater.inflate(R.layout.tab2,null);//注意不要指定父视图
    but = (Button) view.findViewById(R.id.but);
    return view;
  }
  @Override
  public void onActivityCreated(Bundle savedInstanceState)
  {
    super.onActivityCreated(savedInstanceState);
    but.setOnClickListener(new OnClickListener()
    {
      @Override
      public void onClick(View v)
      {
        Toast.makeText(Tab2.this.getActivity(),"hahah", 0).show();
      }
    });
  }
}
布局：  
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:background="#00ff00"
  android:orientation="vertical" >
  
  <TextView 
    android:id="@+id/tab1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="我是第二个界面"
    />
  <Button 
    android:id="@+id/but"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="我是按钮"
    />
</LinearLayout>

剩下两个Fragment类似。

2.主界面布局 
<LinearLayout xmlns: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=".MainActivity" >
  <LinearLayout
    android:id="@+id/linearLayout1"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:background="#FFFFFF"
    android:orientation="horizontal" >
    <TextView
      android:id="@+id/text1"
      android:layout_width="fill_parent"
      android:layout_height="fill_parent"
      android:layout_weight="1.0"
      android:gravity="center"
      android:text="页卡1"
      android:textColor="#000000"
      android:textSize="22.0dip" />
    <TextView
      android:id="@+id/text2"
      android:layout_width="fill_parent"
      android:layout_height="fill_parent"
      android:layout_weight="1.0"
      android:gravity="center"
      android:text="页卡2"
      android:textColor="#000000"
      android:textSize="22.0dip" />
    <TextView
      android:id="@+id/text3"
      android:layout_width="fill_parent"
      android:layout_height="fill_parent"
      android:layout_weight="1.0"
      android:gravity="center"
      android:text="页卡3"
      android:textColor="#000000"
      android:textSize="22.0dip" />
  </LinearLayout>
  <ImageView
    android:id="@+id/cursor"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:scaleType="matrix"
    android:src="@drawable/line" />
  <android.support.v4.view.ViewPager
    android:id="@+id/vPager"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:background="#000000"
    android:flipInterval="30"
    android:persistentDrawingCache="animation"
     />
</LinearLayout>

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

3.实现activity。

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

     
     

      
      

       
       

        
        [java] 
        
        view plain
        
         copy
        
         print
        
        ?
       
       

      
      

      
      
  1. <?xml version="1.0" encoding="utf-8"?> 
  2. <resources>  
  3.   
  4.     <attr name="icon" format="reference" /> 
  5.     <attr name="color" format="color" /> 
  6.     <attr name="text" format="string" /> 
  7.     <attr name="text_size" format="dimension" /> 
  8.   
  9.     <declare-styleable name="ChangeColorIconView"> 
  10.         <attr name="icon" /> 
  11.         <attr name="color" /> 
  12.         <attr name="text" /> 
  13.         <attr name="text_size" /> 
  14.     </declare-styleable>  
  15.   
  16. </resources>  

     
     

b、在布局文件中使用

    
    

     
     

      
      

       
       [html] 
       
       view plain
       
        copy
       
        print
       
       ?
      
      

     
     

     
     
  1. <com.zhy.weixin6.ui.ChangeColorIconWithTextView  
  2.            android:id="@+id/id_indicator_one"  
  3.            android:layout_width="0dp"  
  4.            android:layout_height="fill_parent"  
  5.            android:layout_weight="1"  
  6.            android:padding="5dp"  
  7.            zhy:icon="@drawable/ic_menu_start_conversation"  
  8.            zhy:text="@string/tab_weixin"  
  9.            zhy:text_size="12sp" />  

    
    
 <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" />

自己注意命名空间的写法，xmlns:zhy="http://schemas.android.com/apk/res/应用的包名"。
c、在构造方法中获取

    
    

     
     

      
      

       
       [java] 
       
       view plain
       
        copy
       
        print
       
       ?
       
       在CODE上查看代码片
       
       派生到我的代码片
      
      

     
     

     
     
  1. public class ChangeColorIconWithTextView extends View  
  2. {  
  3.   
  4.     private Bitmap mBitmap;  
  5.     private Canvas mCanvas;  
  6.     private Paint mPaint;  
  7.     /** 
  8.      * 颜色 
  9.      */  
  10.     private int mColor = 0xFF45C01A;  
  11.     /** 
  12.      * 透明度 0.0-1.0 
  13.      */  
  14.     private float mAlpha = 0f;  
  15.     /** 
  16.      * 图标 
  17.      */  
  18.     private Bitmap mIconBitmap;  
  19.     /** 
  20.      * 限制绘制icon的范围 
  21.      */  
  22.     private Rect mIconRect;  
  23.     /** 
  24.      * icon底部文本 
  25.      */  
  26.     private String mText = "微信";  
  27.     private int mTextSize = (int) TypedValue.applyDimension(  
  28.             TypedValue.COMPLEX_UNIT_SP, 10, getResources().getDisplayMetrics());  
  29.     private Paint mTextPaint;  
  30.     private Rect mTextBound = new Rect();  
  31.   
  32.     public ChangeColorIconWithTextView(Context context)  
  33.     {  
  34.         super(context);  
  35.     }  
  36.   
  37.     /** 
  38.      * 初始化自定义属性值 
  39.      *  
  40.      * @param context 
  41.      * @param attrs 
  42.      */  
  43.     public ChangeColorIconWithTextView(Context context, AttributeSet attrs)  
  44.     {  
  45.         super(context, attrs);  
  46.   
  47.         // 获取设置的图标  
  48.         TypedArray a = context.obtainStyledAttributes(attrs,  
  49.                 R.styleable.ChangeColorIconView);  
  50.   
  51.         int n = a.getIndexCount();  
  52.         for (int i = 0; i < n; i++)  
  53.         {  
  54.   
  55.             int attr = a.getIndex(i);  
  56.             switch (attr)  
  57.             {  
  58.             case R.styleable.ChangeColorIconView_icon:  
  59.                 BitmapDrawable drawable = (BitmapDrawable) a.getDrawable(attr);  
  60.                 mIconBitmap = drawable.getBitmap();  
  61.                 break;  
  62.             case R.styleable.ChangeColorIconView_color:  
  63.                 mColor = a.getColor(attr, 0x45C01A);  
  64.                 break;  
  65.             case R.styleable.ChangeColorIconView_text:  
  66.                 mText = a.getString(attr);  
  67.                 break;  
  68.             case R.styleable.ChangeColorIconView_text_size:  
  69.                 mTextSize = (int) a.getDimension(attr, TypedValue  
  70.                         .applyDimension(TypedValue.COMPLEX_UNIT_SP, 10,  
  71.                                 getResources().getDisplayMetrics()));  
  72.                 break;  
  73.   
  74.             }  
  75.         }  
  76.   
  77.         a.recycle();  
  78.   
  79.         mTextPaint = new Paint();  
  80.         mTextPaint.setTextSize(mTextSize);  
  81.         mTextPaint.setColor(0xff555555);  
  82.         // 得到text绘制范围  
  83.         mTextPaint.getTextBounds(mText, 0, mText.length(), mTextBound);  
  84.   
  85.     }  

    
    
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);

	}

可以看到，我们在构造方法中获取了自定义的属性，并且计算了文本占据的控件存在我们的mTextBound中。
2、图标的绘制区域的选择
我们考虑下，有了属性，我们需要绘制一个文本，文本之上一个图标，我们怎么去控制绘制的区域呢？
我们的View显示区域，无非以下三种情况：

针对这三种情况，我门的图标的边长应该是什么呢？
我觉得边长应该是：控件的高度-文本的高度-内边距   与  控件的宽度-内边距  两者的小值；大家仔细推敲一下；
好了，有了上面的边长的结论，我们就开始计算图标的绘制范围了：

    
    

     
     

      
      

       
       [java] 
       
       view plain
       
        copy
       
        print
       
       ?
       
       在CODE上查看代码片
       
       派生到我的代码片
      
      

     
     

     
     
  1. @Override  
  2. protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)  
  3. {  
  4.     super.onMeasure(widthMeasureSpec, heightMeasureSpec);  
  5.   
  6.     // 得到绘制icon的宽  
  7.     int bitmapWidth = Math.min(getMeasuredWidth() - getPaddingLeft()  
  8.             - getPaddingRight(), getMeasuredHeight() - getPaddingTop()  
  9.             - getPaddingBottom() - mTextBound.height());  
  10.   
  11.     int left = getMeasuredWidth() / 2 - bitmapWidth / 2;  
  12.     int top = (getMeasuredHeight() - mTextBound.height()) / 2 - bitmapWidth  
  13.             / 2;  
  14.     // 设置icon的绘制范围  
  15.     mIconRect = new Rect(left, top, left + bitmapWidth, top + bitmapWidth);  
  16.   
  17. }  

    
    
	@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);

	}


 
3、绘制图标
绘制图标有很多步骤呀，我来列一列
1、计算alpha（默认为0）
2、绘制原图
3、在绘图区域，绘制一个纯色块（设置了alpha），此步绘制在内存的bitmap上
4、设置mode，针对内存中的bitmap上的paint
5、绘制我们的图标，此步绘制在内存的bitmap上
6、绘制原文本
7、绘制设置alpha和颜色后的文本
8、将内存中的bitmap绘制出来
根据上面的步骤，可以看出来，我们的图标其实绘制了两次，为什么要绘制原图呢，因为我觉得比较好看。
3-5步骤，就是我们上面分析的原理
6-7步，是绘制文本，可以看到，我们的文本就是通过设置alpha实现的

    
    

     
     

      
      

       
       [java] 
       
       view plain
       
        copy
       
        print
       
       ?
       
       在CODE上查看代码片
       
       派生到我的代码片
      
      

     
     

     
     
  1. @Override  
  2.     protected void onDraw(Canvas canvas)  
  3.     {  
  4.   
  5.         int alpha = (int) Math.ceil((255 * mAlpha));  
  6.         canvas.drawBitmap(mIconBitmap, null, mIconRect, null);  
  7.         setupTargetBitmap(alpha);  
  8.         drawSourceText(canvas, alpha);  
  9.         drawTargetText(canvas, alpha);  
  10.         canvas.drawBitmap(mBitmap, 0, 0, null);  
  11.   
  12.     }  
  13.       
  14.     private void setupTargetBitmap(int alpha)  
  15.     {  
  16.         mBitmap = Bitmap.createBitmap(getMeasuredWidth(), getMeasuredHeight(),  
  17.                 Config.ARGB_8888);  
  18.         mCanvas = new Canvas(mBitmap);  
  19.         mPaint = new Paint();  
  20.         mPaint.setColor(mColor);  
  21.         mPaint.setAntiAlias(true);  
  22.         mPaint.setDither(true);  
  23.         mPaint.setAlpha(alpha);  
  24.         mCanvas.drawRect(mIconRect, mPaint);  
  25.         mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));  
  26.         mPaint.setAlpha(255);  
  27.         mCanvas.drawBitmap(mIconBitmap, null, mIconRect, mPaint);  
  28.     }  
  29.   
  30.     private void drawSourceText(Canvas canvas, int alpha)  
  31.     {  
  32.         mTextPaint.setTextSize(mTextSize);  
  33.         mTextPaint.setColor(0xff333333);  
  34.         mTextPaint.setAlpha(255 - alpha);  
  35.         canvas.drawText(mText, mIconRect.left + mIconRect.width() / 2  
  36.                 - mTextBound.width() / 2,  
  37.                 mIconRect.bottom + mTextBound.height(), mTextPaint);  
  38.     }  
  39.       
  40.     private void drawTargetText(Canvas canvas, int alpha)  
  41.     {  
  42.         mTextPaint.setColor(mColor);  
  43.         mTextPaint.setAlpha(alpha);  
  44.         canvas.drawText(mText, mIconRect.left + mIconRect.width() / 2  
  45.                 - mTextBound.width() / 2,  
  46.                 mIconRect.bottom + mTextBound.height(), mTextPaint);  
  47.           
  48.     }  

    
    
@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);
		
	}

关于绘制文本区域的计算，首先是起点x：mIconRect.left + mIconRect.width() / 2- mTextBound.width() / 2 有点长哈，文本mIconRect.left + mIconRect.width() / 2这个位置，在图标水平区域的中心点，这个应该没有疑问；图标水平区域的中点- mTextBound.width() / 2 开始绘制文本，是不是就是居中在图标的下面；
有人可能会问：你怎么知道文本宽度小于图标，我有5个字咋办？5个字怎么了，照样是居中显示，不信你试试~~
4、公布设置透明度的方法
到此，我们的图标控件写完了，但是还没有把我们的控制icon的方法放出去：

    
    

     
     

      
      

       
       [java] 
       
       view plain
       
        copy
       
        print
       
       ?
       
       在CODE上查看代码片
       
       派生到我的代码片
      
      

     
     

     
     
  1. public void setIconAlpha(float alpha)  
  2. {  
  3.     this.mAlpha = alpha;  
  4.     invalidateView();  
  5. }  
  6.   
  7. private void invalidateView()  
  8. {  
  9.     if (Looper.getMainLooper() == Looper.myLooper())  
  10.     {  
  11.         invalidate();  
  12.     } else  
  13.     {  
  14.         postInvalidate();  
  15.     }  
  16. }  

    
    
	public void setIconAlpha(float alpha)
	{
		this.mAlpha = alpha;
		invalidateView();
	}

	private void invalidateView()
	{
		if (Looper.getMainLooper() == Looper.myLooper())
		{
			invalidate();
		} else
		{
			postInvalidate();
		}
	}

我们叫做setIconAlpha，避免了和setAlpha冲突，设置完成后，invalidate一下~~~

到此就真的结束了，接下来看用法。

4、实战

    
    

     
     

    
    
1、布局文件

    
    

     
     

      
      

       
       [html] 
       
       view plain
       
        copy
       
        print
       
       ?
       
       在CODE上查看代码片
       
       派生到我的代码片
      
      

     
     

     
     
  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     xmlns:zhy="http://schemas.android.com/apk/res/com.zhy.weixin6.ui"  
  3.     xmlns:tools="http://schemas.android.com/tools"  
  4.     android:layout_width="match_parent"  
  5.     android:layout_height="match_parent"  
  6.     android:orientation="vertical" >  
  7.   
  8.     <android.support.v4.view.ViewPager  
  9.         android:id="@+id/id_viewpager"  
  10.         android:layout_width="fill_parent"  
  11.         android:layout_height="0dp"  
  12.         android:layout_weight="1" >  
  13.     </android.support.v4.view.ViewPager>  
  14.   
  15.     <LinearLayout  
  16.         android:layout_width="fill_parent"  
  17.         android:layout_height="60dp"  
  18.         android:background="@drawable/tabbg"  
  19.         android:orientation="horizontal" >  
  20.   
  21.         <com.zhy.weixin6.ui.ChangeColorIconWithTextView  
  22.             android:id="@+id/id_indicator_one"  
  23.             android:layout_width="0dp"  
  24.             android:layout_height="fill_parent"  
  25.             android:layout_weight="1"  
  26.             android:padding="5dp"  
  27.             zhy:icon="@drawable/ic_menu_start_conversation"  
  28.             zhy:text="@string/tab_weixin"  
  29.             zhy:text_size="12sp" />  
  30.   
  31.         <com.zhy.weixin6.ui.ChangeColorIconWithTextView  
  32.             android:id="@+id/id_indicator_two"  
  33.             android:layout_width="0dp"  
  34.             android:layout_height="fill_parent"  
  35.             android:layout_weight="1"  
  36.             android:padding="5dp"  
  37.             zhy:icon="@drawable/ic_menu_friendslist"  
  38.             zhy:text="@string/tab_contact"  
  39.             zhy:text_size="12sp" />  
  40.   
  41.         <com.zhy.weixin6.ui.ChangeColorIconWithTextView  
  42.             android:id="@+id/id_indicator_three"  
  43.             android:layout_width="0dp"  
  44.             android:layout_height="fill_parent"  
  45.             android:layout_weight="1"  
  46.             android:padding="5dp"  
  47.             zhy:icon="@drawable/ic_menu_emoticons"  
  48.             zhy:text="@string/tab_find"  
  49.             zhy:text_size="12sp" />  
  50.   
  51.         <com.zhy.weixin6.ui.ChangeColorIconWithTextView  
  52.             android:id="@+id/id_indicator_four"  
  53.             android:layout_width="0dp"  
  54.             android:layout_height="fill_parent"  
  55.             android:layout_weight="1"  
  56.             android:padding="5dp"  
  57.             zhy:icon="@drawable/ic_menu_allfriends"  
  58.             zhy:text="@string/tab_me"  
  59.             zhy:text_size="12sp" />  
  60.     </LinearLayout>  
  61.   
  62. </LinearLayout>  

    
    
<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>

 
2、MainActivity

    
    

     
     

      
      

       
       [java] 
       
       view plain
       
        copy
       
        print
       
       ?
       
       在CODE上查看代码片
       
       派生到我的代码片
      
      

     
     

     
     
  1. package com.zhy.weixin6.ui;  
  2.   
  3. import java.lang.reflect.Field;  
  4. import java.lang.reflect.Method;  
  5. import java.util.ArrayList;  
  6. import java.util.List;  
  7.   
  8. import android.annotation.SuppressLint;  
  9. import android.os.Bundle;  
  10. import android.support.v4.app.Fragment;  
  11. import android.support.v4.app.FragmentActivity;  
  12. import android.support.v4.app.FragmentPagerAdapter;  
  13. import android.support.v4.view.ViewPager;  
  14. import android.support.v4.view.ViewPager.OnPageChangeListener;  
  15. import android.view.Menu;  
  16. import android.view.View;  
  17. import android.view.View.OnClickListener;  
  18. import android.view.ViewConfiguration;  
  19. import android.view.Window;  
  20.   
  21. @SuppressLint("NewApi")  
  22. public class MainActivity extends FragmentActivity implements  
  23.         OnPageChangeListener, OnClickListener  
  24. {  
  25.     private ViewPager mViewPager;  
  26.     private List<Fragment> mTabs = new ArrayList<Fragment>();  
  27.     private FragmentPagerAdapter mAdapter;  
  28.   
  29.     private String[] mTitles = new String[] { "First Fragment!",  
  30.             "Second Fragment!", "Third Fragment!", "Fourth Fragment!" };  
  31.   
  32.     private List<ChangeColorIconWithTextView> mTabIndicator = new ArrayList<ChangeColorIconWithTextView>();  
  33.   
  34.     @Override  
  35.     protected void onCreate(Bundle savedInstanceState)  
  36.     {  
  37.         super.onCreate(savedInstanceState);  
  38.         setContentView(R.layout.activity_main);  
  39.   
  40.         setOverflowShowingAlways();  
  41.         getActionBar().setDisplayShowHomeEnabled(false);  
  42.         mViewPager = (ViewPager) findViewById(R.id.id_viewpager);  
  43.   
  44.         initDatas();  
  45.   
  46.         mViewPager.setAdapter(mAdapter);  
  47.         mViewPager.setOnPageChangeListener(this);  
  48.     }  
  49.   
  50.     private void initDatas()  
  51.     {  
  52.   
  53.         for (String title : mTitles)  
  54.         {  
  55.             TabFragment tabFragment = new TabFragment();  
  56.             Bundle args = new Bundle();  
  57.             args.putString("title", title);  
  58.             tabFragment.setArguments(args);  
  59.             mTabs.add(tabFragment);  
  60.         }  
  61.   
  62.         mAdapter = new FragmentPagerAdapter(getSupportFragmentManager())  
  63.         {  
  64.   
  65.             @Override  
  66.             public int getCount()  
  67.             {  
  68.                 return mTabs.size();  
  69.             }  
  70.   
  71.             @Override  
  72.             public Fragment getItem(int arg0)  
  73.             {  
  74.                 return mTabs.get(arg0);  
  75.             }  
  76.         };  
  77.   
  78.         initTabIndicator();  
  79.   
  80.     }  
  81.   
  82.     @Override  
  83.     public boolean onCreateOptionsMenu(Menu menu)  
  84.     {  
  85.         getMenuInflater().inflate(R.menu.main, menu);  
  86.         return true;  
  87.     }  
  88.   
  89.     private void initTabIndicator()  
  90.     {  
  91.         ChangeColorIconWithTextView one = (ChangeColorIconWithTextView) findViewById(R.id.id_indicator_one);  
  92.         ChangeColorIconWithTextView two = (ChangeColorIconWithTextView) findViewById(R.id.id_indicator_two);  
  93.         ChangeColorIconWithTextView three = (ChangeColorIconWithTextView) findViewById(R.id.id_indicator_three);  
  94.         ChangeColorIconWithTextView four = (ChangeColorIconWithTextView) findViewById(R.id.id_indicator_four);  
  95.   
  96.         mTabIndicator.add(one);  
  97.         mTabIndicator.add(two);  
  98.         mTabIndicator.add(three);  
  99.         mTabIndicator.add(four);  
  100.   
  101.         one.setOnClickListener(this);  
  102.         two.setOnClickListener(this);  
  103.         three.setOnClickListener(this);  
  104.         four.setOnClickListener(this);  
  105.   
  106.         one.setIconAlpha(1.0f);  
  107.     }  
  108.   
  109.     @Override  
  110.     public void onPageSelected(int arg0)  
  111.     {  
  112.     }  
  113.   
  114.     @Override  
  115.     public void onPageScrolled(int position, float positionOffset,  
  116.             int positionOffsetPixels)  
  117.     {  
  118.         // Log.e("TAG", "position = " + position + " , positionOffset = "  
  119.         // + positionOffset);  
  120.   
  121.         if (positionOffset > 0)  
  122.         {  
  123.             ChangeColorIconWithTextView left = mTabIndicator.get(position);  
  124.             ChangeColorIconWithTextView right = mTabIndicator.get(position + 1);  
  125.   
  126.             left.setIconAlpha(1 - positionOffset);  
  127.             right.setIconAlpha(positionOffset);  
  128.         }  
  129.   
  130.     }  
  131.   
  132.     @Override  
  133.     public void onPageScrollStateChanged(int state)  
  134.     {  
  135.   
  136.     }  
  137.   
  138.     @Override  
  139.     public void onClick(View v)  
  140.     {  
  141.   
  142.         resetOtherTabs();  
  143.   
  144.         switch (v.getId())  
  145.         {  
  146.         case R.id.id_indicator_one:  
  147.             mTabIndicator.get(0).setIconAlpha(1.0f);  
  148.             mViewPager.setCurrentItem(0, false);  
  149.             break;  
  150.         case R.id.id_indicator_two:  
  151.             mTabIndicator.get(1).setIconAlpha(1.0f);  
  152.             mViewPager.setCurrentItem(1, false);  
  153.             break;  
  154.         case R.id.id_indicator_three:  
  155.             mTabIndicator.get(2).setIconAlpha(1.0f);  
  156.             mViewPager.setCurrentItem(2, false);  
  157.             break;  
  158.         case R.id.id_indicator_four:  
  159.             mTabIndicator.get(3).setIconAlpha(1.0f);  
  160.             mViewPager.setCurrentItem(3, false);  
  161.             break;  
  162.   
  163.         }  
  164.   
  165.     }  
  166.   
  167.     /** 
  168.      * 重置其他的Tab 
  169.      */  
  170.     private void resetOtherTabs()  
  171.     {  
  172.         for (int i = 0; i < mTabIndicator.size(); i++)  
  173.         {  
  174.             mTabIndicator.get(i).setIconAlpha(0);  
  175.         }  
  176.     }  
  177.   
  178.     @Override  
  179.     public boolean onMenuOpened(int featureId, Menu menu)  
  180.     {  
  181.         if (featureId == Window.FEATURE_ACTION_BAR && menu != null)  
  182.         {  
  183.             if (menu.getClass().getSimpleName().equals("MenuBuilder"))  
  184.             {  
  185.                 try  
  186.                 {  
  187.                     Method m = menu.getClass().getDeclaredMethod(  
  188.                             "setOptionalIconsVisible", Boolean.TYPE);  
  189.                     m.setAccessible(true);  
  190.                     m.invoke(menu, true);  
  191.                 } catch (Exception e)  
  192.                 {  
  193.                 }  
  194.             }  
  195.         }  
  196.         return super.onMenuOpened(featureId, menu);  
  197.     }  
  198.   
  199.     private void setOverflowShowingAlways()  
  200.     {  
  201.         try  
  202.         {  
  203.             // true if a permanent menu key is present, false otherwise.  
  204.             ViewConfiguration config = ViewConfiguration.get(this);  
  205.             Field menuKeyField = ViewConfiguration.class  
  206.                     .getDeclaredField("sHasPermanentMenuKey");  
  207.             menuKeyField.setAccessible(true);  
  208.             menuKeyField.setBoolean(config, false);  
  209.         } catch (Exception e)  
  210.         {  
  211.             e.printStackTrace();  
  212.         }  
  213.     }  
  214.   
  215. }  

    
    
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();
		}
	}

}


Activity里面代码虽然没什么注释，但是很简单哈，就是初始化Fragment，得到我们的适配器，然后设置给ViewPager；
initTabIndicator我们初始化我们的自定义控件，以及加上了点击事件；
唯一一个需要指出的就是：
我们在onPageScrolled中，动态的获取position以及positionOffset，然后拿到左右两个View，设置positionOffset ；
这里表示下惭愧，曾经在高仿微信5.2.1主界面架构 包含消息通知 的onPageScrolled中写了一堆的if else，在视频上线后，也有同学立马就提出了，一行代码搞定~~
所以，我们这里简单找了下规律，已经没有if else的身影了~~~
还剩两个反射的方法，是控制Actionbar的图标的，和点击menu按键，将ActionBar的menu显示在正常区域的~~
3、TabFragment

    
    

     
     

      
      

       
       [java] 
       
       view plain
       
        copy
       
        print
       
       ?
       
       在CODE上查看代码片
       
       派生到我的代码片
      
      

     
     

     
     
  1. package com.zhy.weixin6.ui;  
  2.   
  3. import android.graphics.Color;  
  4. import android.os.Bundle;  
  5. import android.support.v4.app.Fragment;  
  6. import android.view.Gravity;  
  7. import android.view.LayoutInflater;  
  8. import android.view.View;  
  9. import android.view.ViewGroup;  
  10. import android.widget.TextView;  
  11.   
  12. public class TabFragment extends Fragment  
  13. {  
  14.     private String mTitle = "Default";  
  15.       
  16.   
  17.     public TabFragment()  
  18.     {  
  19.     }  
  20.   
  21.     @Override  
  22.     public View onCreateView(LayoutInflater inflater, ViewGroup container,  
  23.             Bundle savedInstanceState)  
  24.     {  
  25.         if (getArguments() != null)  
  26.         {  
  27.             mTitle = getArguments().getString("title");  
  28.         }  
  29.   
  30.         TextView textView = new TextView(getActivity());  
  31.         textView.setTextSize(20);  
  32.         textView.setBackgroundColor(Color.parseColor("#ffffffff"));  
  33.         textView.setGravity(Gravity.CENTER);  
  34.         textView.setText(mTitle);  
  35.         return textView;  
  36.     }  
  37. }  

    
    
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;
	}
}



 

好了，到此我们的整个案例就结束了~~
大家可以在布局文件中设置各种颜色，4个不同颜色也可以，尽情的玩耍吧~~


源码点击下载




我建了一个QQ群，方便大家交流。群号：55032675
----------------------------------------------------------------------------------------------------------
博主部分视频已经上线，如果你不喜欢枯燥的文本，请猛戳（初录，期待您的支持）：
1、Android 自定义控件实战 电商活动中的刮刮卡
2、Android自定义控件实战  打造Android流式布局和热门标签
3、Android智能机器人“小慕”的实现
4、高仿QQ5.0侧滑
5、高仿微信5.2.1主界面及消息提醒
 
 
 
Android ViewPager+RadioGroup+Fragment超高仿微信6.0底部滑动菜单,可通过左右滑动或点击底部RadioButton切换Fragment。
下载源码地址：http://download.csdn.net/download/shenyuanqing/9428333
效果图：

MainActivity.java

    
    

     
     

      
      

       
       [java] 
       
       view plain
       
        copy
       
        print
       
       ?
       
       在CODE上查看代码片
       
       派生到我的代码片
      
      

     
     

     
     
  1. package com.example.administrator.wechat.activity;  
  2.   
  3. import android.os.Bundle;  
  4. import android.support.v4.app.Fragment;  
  5. import android.support.v4.app.FragmentActivity;  
  6. import android.support.v4.view.ViewPager;  
  7. import android.widget.RadioButton;  
  8. import android.widget.RadioGroup;  
  9.   
  10. import com.example.administrator.wechat.R;  
  11. import com.example.administrator.wechat.adapter.MyFragmentPagerAdapter;  
  12. import com.example.administrator.wechat.fragment.ContactsFragment;  
  13. import com.example.administrator.wechat.fragment.DiscoveryFragment;  
  14. import com.example.administrator.wechat.fragment.MeFragment;  
  15. import com.example.administrator.wechat.fragment.ChatFragment;  
  16.   
  17. import java.util.ArrayList;  
  18. import java.util.List;  
  19.   
  20.   
  21. public class MainActivity extends FragmentActivity {  
  22.     private ViewPager viewPager;  
  23.     private RadioGroup radioGroup;  
  24.     private RadioButton rbChat, rbContacts, rbDiscovery, rbMe;  
  25.   
  26.     @Override  
  27.     protected void onCreate(Bundle savedInstanceState) {  
  28.         super.onCreate(savedInstanceState);  
  29.         setContentView(R.layout.activity_main);  
  30.   
  31.         initView();  
  32.     }  
  33.   
  34.     private void initView() {  
  35.         /** 
  36.          * RadioGroup部分 
  37.          */  
  38.         radioGroup = (RadioGroup) findViewById(R.id.radioGroup);  
  39.         rbChat = (RadioButton) findViewById(R.id.rb_chat);  
  40.         rbContacts = (RadioButton) findViewById(R.id.rb_contacts);  
  41.         rbDiscovery = (RadioButton) findViewById(R.id.rb_discovery);  
  42.         rbMe = (RadioButton) findViewById(R.id.rb_me);  
  43.         //RadioGroup选中状态改变监听  
  44.         radioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {  
  45.             @Override  
  46.             public void onCheckedChanged(RadioGroup group, int checkedId) {  
  47.                 switch (checkedId) {  
  48.                     case R.id.rb_chat:  
  49.                         /** 
  50.                          * setCurrentItem第二个参数控制页面切换动画 
  51.                          * true:打开/false:关闭 
  52.                          */  
  53.                         viewPager.setCurrentItem(0, false);  
  54.                         break;  
  55.                     case R.id.rb_contacts:  
  56.                         viewPager.setCurrentItem(1, false);  
  57.                         break;  
  58.                     case R.id.rb_discovery:  
  59.                         viewPager.setCurrentItem(2, false);  
  60.                         break;  
  61.                     case R.id.rb_me:  
  62.                         viewPager.setCurrentItem(3, false);  
  63.                         break;  
  64.                 }  
  65.             }  
  66.         });  
  67.   
  68.         /** 
  69.          * ViewPager部分 
  70.          */  
  71.         viewPager = (ViewPager) findViewById(R.id.viewPager);  
  72.         ChatFragment weChatFragment = new ChatFragment();  
  73.         ContactsFragment contactsFragment = new ContactsFragment();  
  74.         DiscoveryFragment discoveryFragment = new DiscoveryFragment();  
  75.         MeFragment meFragment = new MeFragment();  
  76.         List<Fragment> alFragment = new ArrayList<Fragment>();  
  77.         alFragment.add(weChatFragment);  
  78.         alFragment.add(contactsFragment);  
  79.         alFragment.add(discoveryFragment);  
  80.         alFragment.add(meFragment);  
  81.         //ViewPager设置适配器  
  82.         viewPager.setAdapter(new MyFragmentPagerAdapter(getSupportFragmentManager(), alFragment));  
  83.         //ViewPager显示第一个Fragment  
  84.         viewPager.setCurrentItem(0);  
  85.         //ViewPager页面切换监听  
  86.         viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {  
  87.             @Override  
  88.             public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {  
  89.   
  90.             }  
  91.   
  92.             @Override  
  93.             public void onPageSelected(int position) {  
  94.                 switch (position) {  
  95.                     case 0:  
  96.                         radioGroup.check(R.id.rb_chat);  
  97.                         break;  
  98.                     case 1:  
  99.                         radioGroup.check(R.id.rb_contacts);  
  100.                         break;  
  101.                     case 2:  
  102.                         radioGroup.check(R.id.rb_discovery);  
  103.                         break;  
  104.                     case 3:  
  105.                         radioGroup.check(R.id.rb_me);  
  106.                         break;  
  107.                 }  
  108.             }  
  109.   
  110.             @Override  
  111.             public void onPageScrollStateChanged(int state) {  
  112.   
  113.             }  
  114.         });  
  115.     }  
  116. }  

    
    
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) {

            }
        });
    }
}
activity_main.xml

    
    

     
     

      
      

       
       [html] 
       
       view plain
       
        copy
       
        print
       
       ?
       
       在CODE上查看代码片
       
       派生到我的代码片
      
      

     
     

     
     
  1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     android:layout_width="match_parent"  
  3.     android:layout_height="match_parent">  
  4.   
  5.     <RadioGroup  
  6.         android:id="@+id/radioGroup"  
  7.         android:layout_width="match_parent"  
  8.         android:layout_height="55dp"  
  9.         android:layout_alignParentBottom="true"  
  10.         android:background="@color/white"  
  11.         android:orientation="horizontal">  
  12.   
  13.         <RadioButton  
  14.             android:id="@+id/rb_chat"  
  15.             android:checked="true"  
  16.             android:text="@string/chat"  
  17.             android:drawableTop="@drawable/rb_chat_selector"  
  18.             style="@style/style_RadioButton"/>  
  19.   
  20.         <RadioButton  
  21.             android:id="@+id/rb_contacts"  
  22.             android:text="@string/contacts"  
  23.             android:drawableTop="@drawable/rb_contacts_selector"  
  24.             style="@style/style_RadioButton"/>  
  25.   
  26.         <RadioButton  
  27.             android:id="@+id/rb_discovery"  
  28.             android:text="@string/discovery"  
  29.             android:drawableTop="@drawable/rb_discovery_selector"  
  30.             style="@style/style_RadioButton"/>  
  31.   
  32.         <RadioButton  
  33.             android:id="@+id/rb_me"  
  34.             android:text="@string/me"  
  35.             android:drawableTop="@drawable/rb_me_selector"  
  36.             style="@style/style_RadioButton"/>  
  37.     </RadioGroup>  
  38.   
  39.     <android.support.v4.view.ViewPager  
  40.         android:id="@+id/viewPager"  
  41.         android:layout_width="match_parent"  
  42.         android:layout_height="match_parent"  
  43.         android:layout_above="@id/radioGroup" />  
  44. </RelativeLayout>  

    
    
<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>
MyFragmentPagerAdapter

    
    

     
     

      
      

       
       [java] 
       
       view plain
       
        copy
       
        print
       
       ?
       
       在CODE上查看代码片
       
       派生到我的代码片
      
      

     
     

     
     
  1. package com.example.administrator.wechat.adapter;  
  2.   
  3. import android.support.v4.app.Fragment;  
  4. import android.support.v4.app.FragmentManager;  
  5. import android.support.v4.app.FragmentPagerAdapter;  
  6.   
  7. import java.util.List;  
  8.   
  9. /** 
  10.  * Created by Administrator on 2015/6/24. 
  11.  */  
  12. public class MyFragmentPagerAdapter extends FragmentPagerAdapter {  
  13.     private List<Fragment> list;  
  14.   
  15.     public MyFragmentPagerAdapter(FragmentManager fm, List<Fragment> list) {  
  16.         super(fm);  
  17.         this.list = list;  
  18.     }  
  19.   
  20.     @Override  
  21.     public Fragment getItem(int position) {  
  22.         return list.get(position);  
  23.     }  
  24.   
  25.     @Override  
  26.     public int getCount() {  
  27.         return list.size();  
  28.     }  
  29. }  

    
    
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();
    }
}
style.xml

    
    

     
     

      
      

       
       [html] 
       
       view plain
       
        copy
       
        print
       
       ?
       
       在CODE上查看代码片
       
       派生到我的代码片
      
      

     
     

     
     
  1. <resources>  
  2.   
  3.     <!-- Base application theme. -->  
  4.     <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">  
  5.         <!-- Customize your theme here. -->  
  6.         <item name="android:colorPrimary">@color/green</item>  
  7.     </style>  
  8.   
  9.     <style name="style_RadioButton">  
  10.         <item name="android:layout_width">match_parent</item>  
  11.         <item name="android:layout_height">wrap_content</item>  
  12.         <item name="android:button">@null</item>  
  13.         <item name="android:background">@null</item>  
  14.         <item name="android:layout_weight">1</item>  
  15.         <item name="android:gravity">center</item>  
  16.         <item name="android:layout_gravity">center</item>  
  17.         <item name="android:textColor">@drawable/rb_focus_color</item>  
  18.         <item name="android:textSize">12sp</item>  
  19.     </style>  
  20.   
  21. </resources>  

    
    
 
 
 
 
 
 
心多大，路多远
关注
专栏目录
android viewpager 切换fragment,Android App中使用ViewPager+Fragment实现滑动切换效果
weixin_36057373的博客
05-27 720
在android应用中，多屏滑动是一种很常见的风格，没有采用viewpager的代码实现会很长，如果采用ViewPager，代码就会短很多，但是使用ViewPager也有弊端：需要导入android-support-v4.jar、细节无法控制。不过现在情况已经不一样了，android-support-v4中提供了很多实用的功能，以至于现在新建一个android工程默认都会导入这个jar包。那我们就...
ViewPager+RadioGroup+Fragment实现选项卡
05-24
此外，还可以考虑添加动画效果，使选项卡切换更加流畅和吸引人。 总结起来，`ViewPager+RadioGroup+Fragment`的组合为开发者提供了一种灵活、可扩展的方式来构建选项卡式界面。通过巧妙地组合这三个组件，可以创建...
仿微信6.1Tab 颜色渐变实现 Android
02-07
Android 仿微信 6.1tab 栏之间图标和字体切换颜色渐变效果，
Android 高仿微信6.0主界面 带你玩转切换图标变色
modabobo
11-17 339
转载请标明出处：http://blog.csdn.net/lmj623565791/article/details/41087219，本文出自：【张鸿洋的博客】1、概述 学习Android少不了模仿各种app的界面，自从微信6.0问世以后，就觉得微信切换时那个变色的Tab图标屌屌的，今天我就带大家自定义控件，带你变色变得飞起~~ 好了，下面先看下效果图： 清晰度不太好，大家凑合看~~有木有觉得这...
微信底部滑动时图标渐变色的实现
IZZY
05-23 6758
周末想实现一下微信底部的渐变图案，折腾了一波，效果总算得上是差强人意。 下面是QQ的微信图标首先想到两个方案就是设置背景透明度，和属性动画。但效果都被否决了，属性动画效果逼真一些，但是顶多算是B货。要实现高仿的A货，尽管不喜欢用还是得自定义View了。 折腾了好久尽管效果很接近，但是效果还是有所区别。但是自从看了微信的图片资源后，立马就反应过来了，原来这玩意是这样设计的。利用两张同样大小的图片，
ViewPager (下)-- 利用 Fragment 实现美丽的 页面切换
weixin_30483697的博客
06-12 77
之前用的ViewPager适用于简单的广告切换,但实现页面间的切换最好是用官方推荐的Fragment来处理. 本人力争做到最简单、最有用,是想以后用到的时候能够方便的拿过来复制就能够了. 效果图： 功能:可点击button切换页面,也可滑动界面切换页面. 文件:java文件5个、xml文件4个、.9图片4张 java主类: <spa...
ViewPager+Fragment实现选项卡效果滑动切换
12-25
总的来说，`ViewPager`和`Fragment`结合使用是实现选项卡滑动切换效果的常用方法，这不仅提供了良好的用户体验，还方便了应用的模块化设计。通过熟练掌握这两种组件，开发者可以构建出更复杂、更具互动性的Android...
Android使用TabLayou+fragment+viewpager实现滑动切换页面效果
08-30
Android 使用 TabLayout+Fragment+ViewPager 实现滑动切换页面效果 Android 是一个流行的移动操作系统，它提供了多种方式来实现滑动切换页面效果。其中，使用 TabLayout+Fragment+ViewPager 是一种常见的实现方法...
viewpager+fragment实现仿QQ选项卡
09-17
在Android应用开发中，"ViewPager+Fragment实现仿QQ选项卡"是一种常见的设计模式，用于创建一个界面，其中用户可以通过滑动在多个视图之间切换，每个视图通常代表不同的功能或内容区域。这个设计灵感来源于QQ应用的...
Fragment+ViewPager实现仿微信点击和滑动切换界面
longduyuan的博客
12-18 475
这是在我写的新闻App中实现的界面切换 贴出切换界面的主要代码： xml代码： &lt;span style="font-size:14px;"&gt; &lt;android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="wrap_con...
Android 使用Fragment模仿微信界面的实例代码
08-30
自从Android 3.0中引入fragments 的概念，根据词海的翻译可以译为:碎片、片段。其目的是为了解决不同屏幕分辩率的动态和灵活UI设计。下面通过本文给大家分享Android 使用Fragment模仿微信界面的实例代码，需要的的朋友参考下吧
Android中使用ViewPager和Fragment实现底部导航栏
qq_46269365的博客
04-16 803
（1）新建三个blank fragment，我自己的是HomeFragment，RecommendFragment，MineFragment。（2）三个fragment的布局文件也都一样。附：中间部分可以左右滑动。
android tab滑动动画,Android Studio使用ViewPager+Fragment实现滑动菜单Tab效果
weixin_33588445的博客
05-25 362
本文为大家分享了Android Studio实现滑动菜单Tab效果的具体代码，供大家参考，具体内容如下描述：之前有做过一个记账本APP，拿来练手的，做的很简单，是用Eclipse开发的；最近想把这个APP重新完善一下，添加了一些新的功能，并选用Android Studio来开发；APP已经完善了一部分，现在就想把已经做好的功能整理一下，记录下来。效果图：可以手动滑动菜单也可以通过点击头部菜单进行切...
小牛的安卓笔记-----底部导航栏的实现以及用TabLayout+ViewPager+Fragment实现页面滑动切换
cj19960617的博客
08-01 2078
昨夜西风凋碧树，独上高楼，望尽天涯路。 今天难得有时间，准备写一写我们在APP中经常用到的页面形式，废话不多说，直接一张图看看页面效果你就知道为啥是常用的页面形式。先看看逻辑和最后的效果是怎么样的： 底部导航栏的实现：底部用Linearlayout放控件以供点击，点击相应的功能就动态加载相应的Fragment。 滑动的实现：首先要有一个Fragment的List，然后编写viewpager的Adapter并绑定，最后不要忘了绑定TabLayout和Viewpager。 图1：HomeFragme.
android viewpager和fragment相结合，实现菜单的滑动效果
sky_918的博客
09-20 1995
ViewPager是SDK自带的可以控制界面滑动一个控件。现在可以上效果图给大家看看。                效果就是如上图一样，可以左右滑动下面菜单栏可以改变颜色和微信有点相似。   1 布局的介绍  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xml
Android仿QQ微信开场导航以及登陆界面
赠人玫瑰,手留余香.
12-21 1031
转自：http://blog.csdn.net/eyu8874521/article/details/8332366 相信大家对于微信等社交应用的UI界面已经都很熟悉了，该UI最值得借鉴的莫过于第一次使用的时候一些列产品介绍的图片，可以左右滑动浏览，最后进入应用，这一效果适用于多种项目中，相信今后开发应用一定会用得到。网路上也有不少这样的例子可以参考，不过看别人的代码是一回事，自己实际做起来
android 仿微信demo————微信发现界面实现
stormzhuo的博客
06-18 1万+
以往文章 android 仿微信demo————微信启动页实现 android 仿微信demo————注册功能实现（移动端） android 仿微信demo————注册功能实现（服务端） android 仿微信demo————登录功能实现（移动端） android 仿微信demo————登录功能实现（服务端） android 仿微信demo————微信主界面功能实现 android 仿微信demo————微信消息界面功能实现（移动端） android 仿微信demo————微信消息界面功能实现（服务端） a
Android ViewPager + Fragment 实现选项卡详解
在Android开发中，实现选项卡功能通常...5. 处理选项卡切换事件，比如`onOptionsItemSelected()`方法。 遵循这些步骤，开发者能够构建出一个功能强大的Android选项卡界面，使得用户可以轻松浏览和操作不同的内容区域。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值