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