Android仿微信底部按钮滑动变色

Android仿微信底部按钮滑动变色,这里只针对使用Fragment为Tab页的滑动操作,进行简单的变色讲解。

首先说下OnPageChangeListener这个监听

//这个监听有三个方法
public abstract void onPageScrollStateChanged (int state) 

public abstract void onPageScrolled (int position,float positionOffset,int positionOffsetPixels) 

public abstract void onPageSelected (int position) 

//第一个方法onPageScrollStateChanged 中的参数state,有三个可取的值

public static final int SCROLL_STATE_DRAGGING 
Constant Value: 1 (0x00000001) //手指按在ViewPager上滑动时

public static final int SCROLL_STATE_IDLE 
Constant Value: 0 (0x00000000) //手指松开后,ViewPager自动滑动期间

public static final int SCROLL_STATE_SETTLING 
Constant Value: 2 (0x00000002) //ViewPager进入了某个Page

//如果在onPageScrollStateChanged 中输出state的值,你会发现每次都是按顺序打印出“1---2---0”

//第二个方法onPageScrolled的三个参数

position://滑动时,屏幕左侧显示的第一个page

positionOffset://滑动比例,值的范围为[0,1),手指往左滑动,该值递增,反之递减

positionOffsetPixels://滑动距离,和屏幕有关,手指往左滑动,该值递增,反之递减

//我们经常需要检查viewpager的滑动方向并作出一些操作,这时你只需要通过position和positionOffset两个值即可实现该功能。

//比如实现微信底部图标颜色渐变 向左滑动时

ChangeColorIconWithTextView left = mTabIndicator.get(position); //左侧显示的第一个page页面上底部图标和文字的初始化
ChangeColorIconWithTextView right = mTabIndicator.get(position + 1); //右侧显示的Page底部图标和文字的初始化

left.setIconAlpha(1 - positionOffset); //设置图标的透明度 此时positionOffset值递增 左侧图标的颜色变浅
right.setIconAlpha(positionOffset); //右侧图标的颜色逐渐变深

//第三个方法onPageSelected的三个参数

position://当前选择的page序号

//该方法被调用的时间比较特别,在上面的第一个方法中的“1---2----0”中的2执行之后,onPageSelected就执行,然后执行“1---2----0”中的0。就是手指松开屏幕之后,onPageSelected被执行。

上面提到了ChangeColorIconWithTextView 主要类

package com.mhealth.nursestation.app.pda.business.login.base.ui.fragmentutil;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Bitmap;
import android.graphics.Bitmap.Config;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.graphics.Rect;
import android.graphics.drawable.BitmapDrawable;
import android.os.Bundle;
import android.os.Looper;
import android.os.Parcelable;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.view.View;

import com.mhealth.nursestation.app.pda.R;


/**
 * 此类用于修改颜色渐变
 */
public class ChangeColorIconWithTextView extends View {

  private Bitmap mBitmap;
  private Canvas mCanvas;
  private Paint mPaint;
  /**
   * 颜色
   */
  private int mColor = 0XFF07B7C4;
  /**
   * 透明度 0.0-1.0 初始化必须是0 不是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,0x07B7C4);
        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,getResources().getDisplayMetrics()));
        break;

      }
    }

    a.recycle();

    mTextPaint = new Paint();
    mTextPaint.setTextSize(mTextSize);
    mTextPaint.setColor(0xff07B7C4);
    mTextPaint.setAntiAlias(true); 
    // 得到text绘制范围
    mTextPaint.getTextBounds(mText,mText.length(),mTextBound);

  }

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

  }

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

  /**
   * 透明度 255
   * 
   * @param canvas
   * @param alpha
   */
  private void drawSourceText(Canvas canvas,int alpha) {
    mTextPaint.setTextSize(mTextSize);
    mTextPaint.setColor(0x00333333);
    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,mTextPaint);

  }

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

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

  public void setIconColor(int color) {
    mColor = color;
  }

  public void setIcon(int resId) {
    this.mIconBitmap = BitmapFactory.decodeResource(getResources(),resId);
    if (mIconRect != null)
      invalidateView();
  }

  public void setIcon(Bitmap iconBitmap) {
    this.mIconBitmap = iconBitmap;
    if (mIconRect != null)
      invalidateView();
  }

  private static final String INSTANCE_STATE = "instance_state";
  private static final String STATE_ALPHA = "state_alpha";

  @Override
  protected Parcelable onSaveInstanceState() {
    Bundle bundle = new Bundle();
    bundle.putParcelable(INSTANCE_STATE,super.onSaveInstanceState());
    bundle.putFloat(STATE_ALPHA,mAlpha);
    return bundle;
  }

  @Override
  protected void onRestoreInstanceState(Parcelable state) {
    if (state instanceof Bundle) {
      Bundle bundle = (Bundle) state;
      mAlpha = bundle.getFloat(STATE_ALPHA);
      super.onRestoreInstanceState(bundle.getParcelable(INSTANCE_STATE));
    } else {
      super.onRestoreInstanceState(state);
    }
  }
}

在Activity里面实现监听操作

@Override
  public void onPageScrolled(int position,int positionOffsetPixels) {

    if (positionOffset > 0) {
      ChangeColorIconWithTextView left = mTabIndicator.get(position);
      ChangeColorIconWithTextView right = mTabIndicator.get(position + 1);

      left.setIconAlpha(1 - positionOffset);
      right.setIconAlpha(positionOffset);
    }
  }

定义一个集合,将所有变色控件装载进去

private List<ChangeColorIconWithTextView> mTabIndicator = new ArrayList<ChangeColorIconWithTextView>();

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 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);
      mAppContext.has_new_talk = false;

      break;
    case R.id.id_indicator_four:
      mTabIndicator.get(3).setIconAlpha(1.0f);
      mViewPager.setCurrentItem(3,false);
      break;

    }
  }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程小技巧。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


文章浏览阅读8.8k次,点赞9次,收藏20次。本文操作环境:win10/Android studio 3.21.环境配置 在SDK Tools里选择 CMAKE/LLDB/NDK点击OK 安装这些插件. 2.创建CMakeLists.txt文件 在Project 目录下,右键app,点击新建File文件,命名为CMakeLists.txt点击OK,创建完毕! 3.配置文件 在CMa..._link c++ project with gradle
文章浏览阅读1.2w次,点赞15次,收藏69次。实现目的:由mainActivity界面跳转到otherActivity界面1.写好两个layout文件,activity_main.xml和otherxml.xmlactivity_main.xml&lt;?xml version="1.0" encoding="utf-8"?&gt;&lt;RelativeLayout ="http://schemas..._android studio 界面跳转
文章浏览阅读3.8w次。前言:最近在找Android上的全局代理软件来用,然后发现了这两款神作,都是外国的软件,而且都是开源的软件,因此把源码下载了下来,给有需要研究代理这方面的童鞋看看。不得不说,国外的开源精神十分浓,大家相互使用当前基础的开源软件,然后组合成一个更大更强的大开源软件。好吧,废话不多说,下面简单介绍一下这两款开源项目。一、ProxyDroid:ProxyDroid功能比较强大,用到的技术也比较多,源码也_proxydroid
文章浏览阅读2.5w次,点赞17次,收藏6次。创建项目后,运行项目时Gradle Build 窗口却显示错误:程序包R不存在通常情况下是不会出现这个错误的。我是怎么遇到这个错误的呢?第一次创建项目,company Domain我使用的是:aven.com,但是创建过程在卡在了Building 'Calculator' Gradle Project info这个过程中,于是我选择了“Cancel”第二次创建项目,我还是使用相同的项目名称和项目路_r不存在
文章浏览阅读8.9w次,点赞4次,收藏43次。前言:在Android上使用系统自带的代理,限制灰常大,仅支持系统自带的浏览器。这样像QQ、飞信、微博等这些单独的App都不能使用系统的代理。如何让所有软件都能正常代理呢?ProxyDroid这个软件能帮你解决!使用方法及步骤如下:一、推荐从Google Play下载ProxyDroid,目前最新版本是v2.6.6。二、对ProxyDroid进行配置(基本配置:) (1) Auto S_proxydroid使用教程
文章浏览阅读1.1w次,点赞4次,收藏17次。Android Studio提供了一个很实用的工具Android设备监视器(Android device monitor),该监视器中最常用的一个工具就是DDMS(Dalvik Debug Monitor Service),是 Android 开发环境中的Dalvik虚拟机调试监控服务。可以进行的操作有:为测试设备截屏,查看特定进程中正在运行的线程以及堆栈信息、Logcat、广播状态信息、模拟电话_安卓摄像头调试工具
文章浏览阅读2.1k次。初学Android游戏开发的朋友,往往会显得有些无所适从,他们常常不知道该从何处入手,每当遇到自己无法解决的难题时,又往往会一边羡慕于 iPhone下有诸如Cocos2d-iphone之类的免费游戏引擎可供使用,一边自暴自弃的抱怨Android平台游戏开发难度太高,又连个像样的游 戏引擎也没有,甚至误以为使用Java语言开发游戏是一件费力不讨好且没有出路的事情。事实上,这种想法完全是没有必_有素材的游戏引擎
文章浏览阅读3.2k次,点赞2次,收藏2次。2014年12月从csdn专家福利获得的一本书《Android游戏开发技术实战详解》,尘封了一年多的时间,今天才翻开来看。我认识中的Android,提到Android最先浮现在我脑海中的是那可爱的机器人图标:这个Logo是由Ascender公司设计的,诞生于2010年,其设计灵感源于男女厕所门上的图形符号(真的是灵感无处不在),于是布洛克绘制了一个简单的机器人,它的躯干就像锡罐的形状,头上还有两根_智能手机的特点有哪些?
文章浏览阅读8.1k次,点赞9次,收藏11次。首先,Android是不是真的找工作越来越难呢?这个可能是大家最关心的。这个受大的经济环境以及行业发展前景的影响,同时也和个人因素有关。2016-08-26近期一方面是所在的公司招聘Java开发人员很难招到合适的,投简历的人很少;而另一方面,经常听身边的人说Android、iOS方面找工作不好找,特别是没什么经验的,经验比较少的!说是不好找,但在我家所在的吉林省省会长春,会Unity3D+Maya_android 开发和asp.net哪个好 site:blog.csdn.net
文章浏览阅读6.1k次。在上篇“走进Android开发的世界,HelloWorld”,我们创建了一个Android 项目 HelloWorld,并演示了如何通过USB连接手机查看运行效果;而如果没有手机或没有对应型号的手机,又想做对应型号(屏幕尺寸、Android系统版本)的适配,应该怎么办呢?这时Android模拟器就派上用场了。Android模拟器Android SDK自带一个移动模拟器。它是一个可以运行在你电脑上的_安卓移动开发软件怎样预览
文章浏览阅读8.9k次。Google IO 2017 上宣布,将Kotlin语言作为安卓开发的官方语言。Kotlin由JetBrains公司开发,与Java 100%互通,并具备诸多Java尚不支持的新特性。谷歌称还将与JetBrains公司合作,为Kotlin设立一个非盈利基金会。Kotlin 是一个基于 JVM 的静态类型编程语言,Kotlin可以编译成Java字节码,也可以编译成JavaScript,方便在没有JV_kotlin为什么被嫌弃
文章浏览阅读9.6w次,点赞17次,收藏35次。有些情况下,不方便使用断点的方式来调试,而是希望在控制台打印输出日志,使用过Eclipse的同学都知道Java可以使用 System.out.println(""); 来在控制台打印输出日志,但是在android studio中却是不行的,还是有差别的,那应该用什么呢?android.util.Log在调试代码的时候我们需要查看调试信息,那我们就需要用Android Log类。android.ut_andirod.studio 为什么不在控制台打印输出
文章浏览阅读8.2k次,点赞2次,收藏8次。在上篇“走进Android开发的世界,HelloWorld”,我们创建了一个Android 项目 HelloWorld,并演示了如何通过USB连接手机查看运行效果;这里讲一下如何为应用添加一个按钮,并为按钮添加Click单击事件处理程序,显示/隐藏另一个按钮。添加按钮在HelloWorld项目的基础上,打开界面布局文件:activity_main.xml切换到Design(设计)模式;在组件But_activity_main.xml按钮隐藏
文章浏览阅读2.9k次,点赞3次,收藏9次。android 开发工具主流的还是Android Studio,当然也有很多人喜欢用Eclipse,也有人喜欢用IntelliJ IDEA ;还有Xamarin这种只需要编写一次代码,可以编译多种平台可运行的强大工具。但是它又真的强大吗?就我看来没有,身边很多人还是在用Android Studio、XCode开发应用,没见谁在用Xamarin之类的工具。系统要求WindowsMicrosoft®_android开发下载安装
文章浏览阅读4.2k次,点赞7次,收藏26次。你知道Hello World程序的由来吗?对于大多数编程语言的学习来说,真正入门的一课就是 Hello World!会而不难,难而不会。虽然很多人写过关于Android开发Hello World的文章,但随着时间的推移,开发工具、技术的进步,可能有些已经过时了。我就记录一下当下我所经历的第一个Android APP HelloWorld。一、准备1、开发环境参考:Android Studio 下载_android helloworld textview 句柄获取
这篇“android轻量级无侵入式管理数据库自动升级组件怎么实现”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定...
今天小编给大家分享一下Android实现自定义圆形进度条的常用方法有哪些的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文...
这篇文章主要讲解了“Android如何解决字符对齐问题”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Android...
这篇文章主要介绍“Android岛屿数量算法怎么使用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Android岛屿数量算...
本篇内容主要讲解“Android如何开发MQTT协议的模型及通信”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Andro...