实现微信tab颜色渐变效果
用过微信的朋友都知道,现在微信的的下端有一个颜色渐变的tab选项,根据手指滑动程度大小来动态确定颜色的深浅,非常给力,很屌的样子。那好我就分享一下我实现这种功能思路和代码的方法,希望对感兴趣的朋友有帮助。
先来看看我的程序界面(机器人肚子上的绿颜色区间是变化范围):
一、实现思路:
1:准备两张tab背景图片(必须是大小比例都一样的),一张是未选中状态,另一张是选中状态。如下:
未选中状态
选中状态
2:每个Tab使用LinearLayout包含两个FrameLayout的布局(一个是图片FrameLayout,另一个是字体FrameLayout),向图片FrameLayout分别添加选中状态和未选中状态的图片,并且把选中状态图片设置为不可见。(当切换到当前tab的时候再把选中状态图片设置为显示)。
3:使用ViewPager动态获页面滑动比例,从而通过第三方库nineoldandroids.jar实现选中图片为逐渐显示或者逐渐消失,最后当确认界面跳转后再把选中的tab图片设置为可见,其他的tab选中图片设置不可见,特别注意,整个过程中,未选中图片一直可见,变化的只是选中图片,从而造成一种tab图片中颜色在变化的假象。
4:接下来是字体的变化,与图片变化一样。选中字体和未选中字体所处的FameLayout与图片FrameLayout处于同一个LinearLayout,对LinearLayout进行监听,实现点击LinearLayout切换界面功能。
这是我的主要代码图:
好了,废话不多说,直接上代码。
一、MainActivity类:
package com.tielizi.wechattabdemo;import android.graphics.Color;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;
import android.support.v4.view.ViewPager;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;import com.nineoldandroids.view.ViewHelper;//第三方包滑动特效库import java.util.ArrayList;
import java.util.List;//注意要想使用getSupportFragmentManager()的话,必须继承FragmentActivity类
public class MainActivity extends FragmentActivity implements ViewPager.OnPageChangeListener,View.OnClickListener {private ViewPager viewpager;private List<Fragment> list;private MyFragmentPagerAdapter myFragmentPagerAdapter;private int mCurrentPageIndex;// 当前页面号码在这里0代表页码1,1代表页码2private MyFragment1 myFragment1;private MyFragment2 myFragment2;private MyFragment3 myFragment3;private LinearLayout tab_1,tab_2,tab_3;//三个Tab布局用于点击切换页面private TextView tab_text_1,tab_text_2,tab_text_3;//表面字private TextView textbackground_1,textbackground_2,textbackground_3;//背景显示字private ImageView background_tab_image_1,background_tab_image_2,background_tab_image_3;//背景填充图片@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);background_tab_image_1 = (ImageView) findViewById(R.id.tab_image_1);background_tab_image_2 = (ImageView) findViewById(R.id.tab_image_2);background_tab_image_3 = (ImageView) findViewById(R.id.tab_image_3);tab_1 = (LinearLayout) findViewById(R.id.tab_1);tab_2 = (LinearLayout) findViewById(R.id.tab_2);tab_3 = (LinearLayout) findViewById(R.id.tab_3);tab_1.setOnClickListener(this);tab_2.setOnClickListener(this);tab_3.setOnClickListener(this);tab_text_1 = (TextView) findViewById(R.id.tab_text_1);tab_text_2 = (TextView) findViewById(R.id.tab_text_2);tab_text_3 = (TextView) findViewById(R.id.tab_text_3);textbackground_1 = (TextView) findViewById(R.id.tab_text_1_background);textbackground_2 = (TextView) findViewById(R.id.tab_text_2_background);textbackground_3 = (TextView) findViewById(R.id.tab_text_3_background);viewpager = (ViewPager) findViewById(R.id.viewpager);viewpager.setOnPageChangeListener(this);list = new ArrayList<Fragment>();myFragment1 = new MyFragment1();myFragment2 = new MyFragment2();myFragment3 = new MyFragment3();list.add(myFragment1);list.add(myFragment2);list.add(myFragment3);myFragmentPagerAdapter = new MyFragmentPagerAdapter(getSupportFragmentManager(), list);viewpager.setAdapter(myFragmentPagerAdapter);}@Overridepublic void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {//这里你可以用调试打印日志来弄懂Log.e("TAG", position + " , "+"mCurrentPageIndex "+mCurrentPageIndex+" " + positionOffset + " , "+ positionOffsetPixels);//positionOffset表示页面偏移相对于屏幕比例(右滑动在区间(0-1)变化,左滑动在区间(1-0)变化)// positionOffsetPixels表示页面偏移像素,右滑动从0增加到最大像素,左滑动从最大像素减小到0//mCurrentPageIndex无论左滑动还是右滑动,一直都是表示当前页码数,通过调试,我得出的结论是,向右滑动时position表示的时当前页码数,向左滑动时,position表示的时即将到达页面数if (mCurrentPageIndex == 0 && position == 0)// 1->2{//使用ViewHelper,必须添加nineoldandroids.jar第三方库,实现复杂的滑动特效变化tab_text_2.setVisibility(View.VISIBLE);ViewHelper.setAlpha(tab_text_1, 1 - positionOffset);ViewHelper.setAlpha(tab_text_2, positionOffset);background_tab_image_2.setVisibility(View.VISIBLE);ViewHelper.setAlpha(background_tab_image_1, 1-positionOffset);ViewHelper.setAlpha(background_tab_image_2, positionOffset);} else if (mCurrentPageIndex == 1 && position == 0)// 2->1{tab_text_1.setVisibility(View.VISIBLE);ViewHelper.setAlpha(tab_text_1, 1-positionOffset);ViewHelper.setAlpha(tab_text_2, positionOffset);background_tab_image_1.setVisibility(View.VISIBLE);ViewHelper.setAlpha(background_tab_image_1, 1-positionOffset);ViewHelper.setAlpha(background_tab_image_2, positionOffset);} else if (mCurrentPageIndex == 1 && position == 1) // 2->3{tab_text_3.setVisibility(View.VISIBLE);ViewHelper.setAlpha(tab_text_3, positionOffset);ViewHelper.setAlpha(tab_text_2, 1-positionOffset);background_tab_image_3.setVisibility(View.VISIBLE);ViewHelper.setAlpha(background_tab_image_2, 1-positionOffset);ViewHelper.setAlpha(background_tab_image_3, positionOffset);} else if (mCurrentPageIndex == 2 && position == 1) // 3->2{tab_text_2.setVisibility(View.VISIBLE);ViewHelper.setAlpha(tab_text_2, 1-positionOffset);ViewHelper.setAlpha(tab_text_3, positionOffset);background_tab_image_2.setVisibility(View.VISIBLE);ViewHelper.setAlpha(background_tab_image_2, 1-positionOffset);ViewHelper.setAlpha(background_tab_image_3, positionOffset);}}@Overridepublic void onPageSelected(int position) {//页面确定下来时候Tab的状态处理Log.i("px",position+"");reSetTab();mCurrentPageIndex = position;switch (position) {case 0:tab_text_1.setVisibility(View.VISIBLE);textbackground_1.setVisibility(View.INVISIBLE);background_tab_image_1.setVisibility(View.VISIBLE);break;case 1:tab_text_2.setVisibility(View.VISIBLE);textbackground_2.setVisibility(View.INVISIBLE);background_tab_image_2.setVisibility(View.VISIBLE);break;case 2:tab_text_3.setVisibility(View.VISIBLE);textbackground_3.setVisibility(View.INVISIBLE);background_tab_image_3.setVisibility(View.VISIBLE);break;}}@Overridepublic void onPageScrollStateChanged(int state) {}@Overridepublic void onClick(View v) {switch (v.getId()) {//切换页面case R.id.tab_1:Log.i("px","1");viewpager.setCurrentItem(0);break;case R.id.tab_2:Log.i("px", "2");viewpager.setCurrentItem(1);break;case R.id.tab_3:Log.i("px", "3");viewpager.setCurrentItem(2);break;}}class MyFragmentPagerAdapter extends FragmentStatePagerAdapter {private List<Fragment> listMyFragment;public MyFragmentPagerAdapter(FragmentManager fm,List<Fragment> listMyFragments) {super(fm);this.listMyFragment = listMyFragments;}@Overridepublic android.support.v4.app.Fragment getItem(int arg0) {return listMyFragment.get(arg0);}@Overridepublic int getCount() {return listMyFragment.size();}}private void reSetTab(){//重置Tab状态tab_1.setBackgroundColor(Color.parseColor("#D3D3D3"));tab_2.setBackgroundColor(Color.parseColor("#D3D3D3"));tab_3.setBackgroundColor(Color.parseColor("#D3D3D3"));textbackground_1.setVisibility(View.VISIBLE);textbackground_2.setVisibility(View.VISIBLE);textbackground_3.setVisibility(View.VISIBLE);background_tab_image_1.setVisibility(View.GONE);background_tab_image_2.setVisibility(View.GONE);background_tab_image_3.setVisibility(View.GONE);tab_text_1.setVisibility(View.GONE);tab_text_2.setVisibility(View.GONE);tab_text_3.setVisibility(View.GONE);}
}
二、MyFragment1类 (这里我就只写一个了)
package com.tielizi.wechattabdemo;import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;/*** Created by Administrator on 2015/9/11.*/
public class MyFragment1 extends Fragment {@Overridepublic void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);}@Nullable@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {View view = inflater.inflate(R.layout.pager1,container,false);return view;}
}
欧拉,主要代码就这些了。
微信tab源码下载
PS:最高SDK22兼容到SDK16
更多博主文章分享:
继承与View在画布上画出贪吃蛇
贪吃蛇android源码分享
手机弹幕实现
android app引导界面实现
实现微信tab颜色渐变效果相关推荐
- html5做文字颜色渐变代码,神奇!js+CSS+DIV实现文字颜色渐变效果_javascript技巧
本文实例为大家分享了DIV+CSS+JS实现的文字颜色渐变效果,供大家参考,具体内容如下 下面是 CSS 部分代码: body{ font:12px/1.5 Microsoft Yahei;}h3{ ...
- Android 字体颜色渐变效果 Span实现
Android 实现字体颜色渐变效果 废话留在后面直接上代码 public class LinearGradientFontSpan extends ReplacementSpan {private ...
- 在VC中用GDI+绘制角度可变的颜色渐变效果-.NET教程,VB.Net语言[转]
在VC中用GDI+绘制角度可变的颜色渐变效果-.NET教程,VB.Net语言 作者:网友供稿 点击:4 gdi+ 是gdi(windows 早期版本提供的图形设备接口)的后续版本,是microsoft ...
- 微信android字体颜色,如何用微信打出颜色各异的字
如何用微信打出颜色各异的字 看了是不是觉得特别神奇?小编和别人聊微信时候的字居然是彩色的!好啦,不用羡慕,小编现在来教你怎么在微信里输入彩色的文字,方法其实很简单! 首先打开聊天对话窗口,点击你准备要 ...
- android微信打出彩色字体,如何用微信打出颜色各异的字
如何用微信打出颜色各异的字 看了是不是觉得特别神奇?小编和别人聊微信时候的字居然是彩色的!好啦,不用羡慕,小编现在来教你怎么在微信里输入彩色的文字,方法其实很简单! 首先打开聊天对话窗口,点击你准备要 ...
- JS获取颜色渐变效果数组
JS获取颜色渐变效果数组 function rgbToHex(r,g,b){var hex = ((r << b) | (g << 8) | b).toString(16)re ...
- java按钮鼠标经过渐变_JavaScript实现的鼠标响应颜色渐变效果完整实例
本文实例讲述了JavaScript实现的鼠标响应颜色渐变效果.分享给大家供大家参考,具体如下: 运行效果图如下: 完整代码如下: /p> "http://www.w3.org/TR/x ...
- NGUI之UILabel颜色渐变效果
1. UILabel简介 (1)UILabel支持类型 a.图字:是指根据某些工具,将游戏中需要用到的文字渲染到一张纹理上,并附其纹理信息(包括 id值,尺寸,间距等). b.字库字:是指直接载入tt ...
- CSS:实现动态流光线条效果/动态流光线条颜色渐变效果
需求描述: 需要实现类似下图中的动态流光线条效果: 思路: 提到这种动态绘制矢量图形的需求,一般会想到使用canvas:由于笔者不太熟悉canvas动画也可以考虑用CSS来实现,这里先记录使用CSS实 ...
最新文章
- pyg2plot_画图
- puppet-dashboard 安装(草稿)
- 【杂谈】有三AI季划成员的4大专属权益,你是否已经利用好了?
- 一次看完28个关于ES的性能调优技巧
- zookeeper集群,每个服务器上的数据是相同的,每一个服务器均可以对外提供读和写的服务,这点和redis是相同的,即对客户端来讲每个服务器都是平等的。...
- 查找、插入、删除都很快的数据结构(散列表vs红黑树vs跳表)
- 支付宝封杀比特币,可以说是毫不留情!
- Mac OS X 10.7.2 Lion下快速锁定屏幕
- Zookeeper集群部署及报错分析
- 如何利用ThoughtWorks.QRCode 生成二维码
- 利用JavaScript实现京东自动叠蛋糕+淘宝自动领喵币,叠列车+618全民购物
- docker如何搭建sftp服务器
- 虚拟局域网软件开源_基于开源AUTOSAR的高级驾驶员辅助系统的设计与实现过程...
- MIPS汇编语言学习笔记27:数组
- oracle 9i 启动监听报错误 TNS-12555: TNS:permission denied 解决
- 笔记本计算机无法打开,笔记本电脑开不了机怎么办 笔记本开不了机解决方法【详解】...
- 关于VMware15使用unlocker解锁Mac OS时cmd一闪而过导致失败的问题解决方法
- wps脚注转参考文献格式
- 西南大学计算机学院推免,2020西南大学计算机与信息科学学院推免夏令营通知...
- 20201020 泰克示波器改时间
热门文章
- 微信公众号中如何展开、隐藏内容
- 计算机科学领域科学家H指数排名,谁是优秀的科学家 H指数来预测
- html css字体样式颜色,css字体颜色如何设置?
- js类型转换(隐式类型转换显式类型转换)
- R语言使用epiDisplay包的summ函数计算dataframe中指定变量的描述性统计汇总信息并可视化有序点图、并添加箱图(名称、有效值个数、均值、中位数、标准差、最大值、最小值)
- 按摩枕ROHS认证多少钱?ROHS认证多久可以出证?
- 试题 算法训练 加法运算
- java 在线给 word 文件插入书签
- 我写小程序像菜虚鲲——1、唱,跳,rap,篮球
- matlab优化工具箱解线性规划,用matlab优化工具箱解线性规划