Android如何通过gradientui类库实现渐变切换icon效果

在Android开发里面经常会遇到渐变切换的效果，比如颜色渐变切换效果，移动动画效果。

这些都可以用属性动画来做。

但是属性动画也有自己的局限性，属性动画只能在控件的get和set方法可以对控件进行操作的时候才能生效，不是所有的效果都可以实现的。比如我们现在要把一个图片渐变的切换成另外一个图片，图片只是颜色风格发生了变化而已，这时候用属性动画是没办法做到的。效果如图：



就像图中的我们把图片从黑色渐变切换成灰色，在我这里的实现其实就是两张同样大小的图片，只是颜色不同。

怎么实现渐变切换图标的效果

在AndroidStudio中导入gradientui类库，在build.gradle中添加如下代码：

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

在layout.xml文件中配置相关属性。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:gravity="center"
android:orientation="vertical"
tools:context=".MainActivity">

<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical">

<com.david.gradientuilibrary.GradientIconView
android:id="@+id/apple_icon"
app:bottom_icon="@mipmap/apple_1998"
app:top_icon="@mipmap/apple_2007"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />

<com.david.gradientuilibrary.GradientTextView
android:id="@+id/apple_label"
app:bottom_text_color="@color/apple_black"
app:text="@string/apple_logo"
app:text_size="32sp"
app:top_text_color="@color/apple_gray"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />

</LinearLayout>

<SeekBar
android:id="@+id/gradientui_seekbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="40dp"/>

</LinearLayout>

代码中实现

package com.david.gradientuisample;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.widget.SeekBar;

import com.david.gradientuilibrary.GradientIconView;
import com.david.gradientuilibrary.GradientTextView;

public class MainActivity extends AppCompatActivity {

private GradientIconView mAppleLogo;
private GradientTextView mAppleLabel;
private SeekBar mSeekbar;

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

private void initView() {
mAppleLogo = (GradientIconView) findViewById(R.id.apple_icon);
mAppleLabel = (GradientTextView) findViewById(R.id.apple_label);
mSeekbar = (SeekBar) findViewById(R.id.gradientui_seekbar);
mSeekbar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
@Override
public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
mAppleLogo.setIconAlpha((progress * 1.0f) / 100);
mAppleLabel.setTextViewAlpha((progress * 1.0f) / 100);
}

@Override
public void onStartTrackingTouch(SeekBar seekBar) {

}

@Override
public void onStopTrackingTouch(SeekBar seekBar) {

}
});
}
}

微信的主界面的切换效果也是这种类似的。



写在最后：

这里的切换效果用到的控件介绍请看这里，高仿微信6.0Tab bar

github地址：https://github.com/wangdong20/AndroidGradientUI  欢迎大家点赞

如果大家有兴趣怎么在AndroidStudio将开源项目发布到jcenter仓库，欢迎点击这里 AndroidStudio怎么将开源项目发布到jcenter