高仿微信6.0Tab bar

微信6.0版本的底部Tab Bar，切换图标变色的效果还不错，之前看过鸿洋大神的Android高仿微信6.0主界面，很是佩服。

不过我发现，真正微信6.0的切换图标变色的效果应该还不是鸿洋大神的那种方法，我们先看一下我做的效果图。



在这个Discover发现图标这里，那个指针部分是从灰色变成透明，而不是从灰色变成绿色。

所以从这里我可以判断微信6.0的这种切换图标效果应该不是用Paint的Xfermodes实现的，

Paint的Xfermodes是首先绘制一个绿色矩形的src，然后再在上面绘制dst图标，

设置Xfermodes为DST_IN，这样就会把src和dst相交的部分一起绘制出来，

也就是说上层的dst的图标被绘制出来了，同时底层的绿色矩形和图标相交的部分被绘制出来，

最后的结果就是图标的非透明部分都会变成绿色。

所以如果按照这种方法，Discover图标的指针部分就应该是从灰色变成绿色，而不是从灰色变成透明。

在这里我们换一个思路，能实现这种效果，其实思路也很简单，我都能写出来，各位看官肯定也不在话下。

就是这种图标转换的效果，其实就是两张形状一样的图片，但是颜色风格不同，叠在一起，

上层的图标设置自己的alpha透明度属性，下层的图标对应的把透明度设置成1 - alpha，

就可以做到两张图片渐变切换的效果。

话不多说，开始码代码：

先定义自定义View的属性，

<?xml version="1.0" encoding="utf-8"?>
<resources>
<attr name="top_icon" format="reference" />
<attr name="bottom_icon" format="reference" />

<declare-styleable name="GradientIconView">
<attr name="top_icon" />
<attr name="bottom_icon" />
</declare-styleable>

<attr name="text" format="string" />
<attr name="text_size" format="dimension" />
<attr name="top_text_color" format="color" />
<attr name="bottom_text_color" format="color" />

<declare-styleable name="GradientTextView">
<attr name="text" />
<attr name="text_size" />
<attr name="top_text_color" />
<attr name="bottom_text_color" />
</declare-styleable>
</resources>

然后根据自定义属性，写代码实现它。

package com.david.wechatsample.gradientuilibrary;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.os.Parcelable;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.widget.FrameLayout;
import android.widget.ImageView;

/**
* Created by David Wong on 2015/10/20.
*/
public class GradientIconView extends FrameLayout {

private ImageView mTopIconView;
private ImageView mBottomIconView;

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

private float mAlpha = 0f;

public GradientIconView(Context context) {
this(context, null, 0);
}

public GradientIconView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}

public GradientIconView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
initView(context);

// 获取设置的图标
TypedArray a = context.obtainStyledAttributes(attrs,
R.styleable.GradientIconView);

BitmapDrawable drawable;

int n = a.getIndexCount();
for (int i = 0; i < n; i++) {

int attr = a.getIndex(i);
if (attr == R.styleable.GradientIconView_top_icon) {
drawable = (BitmapDrawable) a.getDrawable(attr);
setTopIconView(drawable);
} else if (attr == R.styleable.GradientIconView_bottom_icon) {
drawable = (BitmapDrawable) a.getDrawable(attr);
setBottomIconView(drawable);
}
}

a.recycle();
setIconAlpha(mAlpha);
}

private void initView(Context context) {
LayoutInflater.from(context).inflate(R.layout.gradient_icon_layout, this, true);
mTopIconView = (ImageView) findViewById(R.id.top_icon_view);
mBottomIconView = (ImageView) findViewById(R.id.bottom_icon_view);
}

public void setIconAlpha(float alpha) {
mTopIconView.setAlpha(alpha);
mBottomIconView.setAlpha(1 - alpha);
this.mAlpha = alpha;
}

public void setTopIconView(Drawable drawable) {
mTopIconView.setBackgroundDrawable(drawable);
}

public void setBottomIconView(Drawable drawable) {
mBottomIconView.setBackgroundDrawable(drawable);
}

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

}

}

代码中对应的layout文件如下，

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">

<ImageView
android:id="@+id/bottom_icon_view"
android:layout_width="match_parent"
android:layout_height="match_parent" />

<ImageView
android:id="@+id/top_icon_view"
android:layout_width="match_parent"
android:layout_height="match_parent" />

</FrameLayout>

在这里GradientIconView就写完了，代码没有多少行，很简单。

其实这里渐变效果的TextView也是同样的原理，实现代码和GradientIconView几乎差不多，这里就不贴代码了。

最后应该在主界面来测试代码效果了，激动人心啊！

package com.david.wechatsample.wechatsample;

import android.net.Uri;
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.view.View;

import com.david.wechatsample.fragment.AboutMeFragment;
import com.david.wechatsample.fragment.ChatsFragment;
import com.david.wechatsample.fragment.ContactsFragment;
import com.david.wechatsample.fragment.DiscoverFragment;
import com.david.wechatsample.fragment.OnFragmentInteractionListener;
import com.david.wechatsample.gradientuilibrary.GradientIconView;
import com.david.wechatsample.gradientuilibrary.GradientTextView;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends FragmentActivity implements View.OnClickListener, ViewPager.OnPageChangeListener, OnFragmentInteractionListener {

private ViewPager mViewPager;
private List<Fragment> mTabs = new ArrayList<Fragment>();
private FragmentPagerAdapter mAdapter;

private List<GradientIconView> mTabIconIndicator = new ArrayList<GradientIconView>();
private List<GradientTextView> mTabTextIndicator = new ArrayList<GradientTextView>();
private GradientIconView mChatsIconView;
private GradientIconView mContactsIconView;
private GradientIconView mDiscoverIconView;
private GradientIconView mAboutMeIconView;

private GradientTextView mTvChats;
private GradientTextView mTvContacts;
private GradientTextView mTvDiscover;
private GradientTextView mTvAboutMe;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

initView();
}

private void initView() {
mViewPager = (ViewPager) findViewById(R.id.id_viewpager);

mChatsIconView = (GradientIconView) findViewById(R.id.id_iconfont_chat);
mChatsIconView.setOnClickListener(this);
mTabIconIndicator.add(mChatsIconView);
mChatsIconView.setIconAlpha(1.0f);

mContactsIconView = (GradientIconView) findViewById(R.id.id_iconfont_friend);
mContactsIconView.setOnClickListener(this);
mTabIconIndicator.add(mContactsIconView);

mDiscoverIconView = (GradientIconView) findViewById(R.id.id_iconfont_faxian);
mDiscoverIconView.setOnClickListener(this);
mTabIconIndicator.add(mDiscoverIconView);

mAboutMeIconView = (GradientIconView) findViewById(R.id.id_iconfont_me);
mAboutMeIconView.setOnClickListener(this);
mTabIconIndicator.add(mAboutMeIconView);

mTvChats = (GradientTextView) findViewById(R.id.id_chats_tv);
mTvChats.setOnClickListener(this);
mTabTextIndicator.add(mTvChats);
mTvChats.setTextViewAlpha(1.0f);

mTvContacts = (GradientTextView) findViewById(R.id.id_contacts_tv);
mTvContacts.setOnClickListener(this);
mTabTextIndicator.add(mTvContacts);

mTvDiscover = (GradientTextView) findViewById(R.id.id_discover_tv);
mTvDiscover.setOnClickListener(this);
mTabTextIndicator.add(mTvDiscover);

mTvAboutMe = (GradientTextView) findViewById(R.id.id_about_me_tv);
mTvAboutMe.setOnClickListener(this);
mTabTextIndicator.add(mTvAboutMe);

initFragments();
}

private void initFragments() {
mTabs.add(ChatsFragment.newInstance("", ""));
mTabs.add(ContactsFragment.newInstance("", ""));
mTabs.add(DiscoverFragment.newInstance("", ""));
mTabs.add(AboutMeFragment.newInstance("", ""));

mAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) {

@Override
public int getCount() {
return mTabs.size();
}

@Override
public Fragment getItem(int arg0) {
return mTabs.get(arg0);
}
};

mViewPager.setAdapter(mAdapter);
mViewPager.setOnPageChangeListener(this);
}

/**
* 重置其他的Tab
*/
private void resetOtherTabs() {
resetOtherTabIcons();
resetOtherTabText();
}

/**
* 重置其他的Tab icon
*/
private void resetOtherTabIcons() {
for (int i = 0; i < mTabIconIndicator.size(); i++) {
mTabIconIndicator.get(i).setIconAlpha(0);
}
}

/**
* 重置其他的Tab text
*/
private void resetOtherTabText() {
for (int i = 0; i < mTabTextIndicator.size(); i++) {
mTabTextIndicator.get(i).setTextViewAlpha(0);
}
}

@Override
public void onClick(View v) {
resetOtherTabs();
switch (v.getId()) {
case R.id.id_iconfont_chat:
case R.id.id_chats_tv:
mTabIconIndicator.get(0).setIconAlpha(1.0f);
mTabTextIndicator.get(0).setTextViewAlpha(1.0f);
mViewPager.setCurrentItem(0, false);
break;
case R.id.id_iconfont_friend:
case R.id.id_contacts_tv:
mTabIconIndicator.get(1).setIconAlpha(1.0f);
mTabTextIndicator.get(1).setTextViewAlpha(1.0f);
mViewPager.setCurrentItem(1, false);
break;
case R.id.id_iconfont_faxian:
case R.id.id_discover_tv:
mTabIconIndicator.get(2).setIconAlpha(1.0f);
mTabTextIndicator.get(2).setTextViewAlpha(1.0f);
mViewPager.setCurrentItem(2, false);
break;
case R.id.id_iconfont_me:
case R.id.id_about_me_tv:
mTabIconIndicator.get(3).setIconAlpha(1.0f);
mTabTextIndicator.get(3).setTextViewAlpha(1.0f);
mViewPager.setCurrentItem(3, false);
break;
}
}

@Override
public void onFragmentInteraction(Uri uri) {

}

@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
if (positionOffset > 0) {
GradientIconView iconLeft = mTabIconIndicator.get(position);
GradientIconView iconRight = mTabIconIndicator.get(position + 1);

GradientTextView textLeft = mTabTextIndicator.get(position);
GradientTextView textRight = mTabTextIndicator.get(position + 1);

iconLeft.setIconAlpha(1 - positionOffset);
textLeft.setTextViewAlpha(1 - positionOffset);
iconRight.setIconAlpha(positionOffset);
textRight.setTextViewAlpha(positionOffset);
}
}

@Override
public void onPageSelected(int position) {

}

@Override
public void onPageScrollStateChanged(int state) {

}
}

写在最后，控件已上传至jcenter，在AndroidStudio引用如下：

dependencies {
compile 'com.david.gradientuilib:gradientuilibrary:1.0.1'
}

开源地址

https://github.com/wangdong20/AndroidGradientUI