java - 基于片段位置的图像之间的淡入淡出

Question

**以下所有信息均与 gif 右侧所示的图标有关。

我创建了一个简单的工具栏，它有一个按钮，可以根据片段的位置更改图像。一切正常，但是，我似乎无法正确地褪色。我希望图像随着片段的变化而很好地褪色。现在，从中心（位置 1）到左侧（位置 0）有一个很好的淡入淡出。图标从均衡器变为聊天图标。但是，从左侧（位置 0）返回到中心（位置 1）会使图像弹出到帧中（而不是淡入淡出）。此外，从中心（位置 1）到右侧（位置 2）也观察到相同的情况，反之亦然。在这种情况下也没有褪色。

我认为问题出在 if else 语句和 setAlpha 上。

• 位置 0（左侧）
• 位置 1（中）
• 位置 2（右侧）

Gif 演示（当前代码的作用）：

https://imgur.com/a/vNEJZAJ

代码：

public class TopVariableFunctionalityButtonView extends FrameLayout implements ViewPager.OnPageChangeListener {

  // Initialize content
  private ImageView mVariableFunctionalityButtonImageView;
  private ImageView mVariableFunctionalityButtonBackgroundImageView;

  private ArgbEvaluator mArgbEvaluator;

  // Initialize color change
  private int mCenterVariableFunctionalityButtonColor;
  private int mSideVariableFunctionalityButtonColor;

  private int mCenterVariableFunctionalityButtonBackgroundColor;
  private int mSideVariableFunctionalityButtonBackgroundColor;

  public TopVariableFunctionalityButtonView(@NonNull Context context) {
    this(context, null);
  }

  public TopVariableFunctionalityButtonView(@NonNull Context context, @Nullable AttributeSet attrs) {
    this(context, attrs, 0);
  }

  public TopVariableFunctionalityButtonView(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    init();
  }

  public void setUpWithViewPager(ViewPager viewPager) {
    viewPager.addOnPageChangeListener(this);

    mVariableFunctionalityButtonImageView.setOnClickListener(new OnClickListener() {
      @Override
      public void onClick(View view) {
        if (viewPager.getCurrentItem() == 2)
          HomeActivity.openSettings(getContext());
      }
    });
  }

  private void init() {
    LayoutInflater.from(getContext()).inflate(R.layout.view_top_variable_functionality_button, this, true);

    // Initialize top variable functionality button image
    mVariableFunctionalityButtonImageView = findViewById(R.id.view_top_variable_functionality_button_image_view);

    // Initialize top variable functionality button image background
    mVariableFunctionalityButtonBackgroundImageView = findViewById(R.id.view_top_variable_functionality_button_background_image_view);


    // Set start color and end color for button icons
    mCenterVariableFunctionalityButtonColor = ContextCompat.getColor(getContext(), R.color.white);
    mSideVariableFunctionalityButtonColor = ContextCompat.getColor(getContext(), R.color.iconColor);

    mCenterVariableFunctionalityButtonBackgroundColor = ContextCompat.getColor(getContext(), R.color.transparentSearch);
    mSideVariableFunctionalityButtonBackgroundColor = ContextCompat.getColor(getContext(), R.color.secondaryColor);

    // Evaluate the difference between colors
    mArgbEvaluator = new ArgbEvaluator();
  }

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

    if (position == 0) {

      // Change color of icons based on view
      setColor(1 - positionOffset);

      // Change variable button image
      mVariableFunctionalityButtonImageView.setAlpha(1 - positionOffset);
      mVariableFunctionalityButtonImageView.setBackgroundResource(R.drawable.ic_chat);

    } else if (position == 1) {

      // Change color of icons based on view
      setColor(positionOffset + 1);

      // Change variable button image
      mVariableFunctionalityButtonImageView.setAlpha(positionOffset + 1);
      mVariableFunctionalityButtonImageView.setBackgroundResource(R.drawable.ic_equalizer);

    } else if (position == 2) {

      // Change color of icons based on view
      setColor(positionOffset + 1);

      // Change variable button image
      mVariableFunctionalityButtonImageView.setAlpha(positionOffset + 1);
      mVariableFunctionalityButtonImageView.setBackgroundResource(R.drawable.ic_settings);

    }
  }

  @Override
  public void onPageSelected(int position) {

  }

  @Override
  public void onPageScrollStateChanged(int state) {

  }

  private void setColor(float fractionFromCenter) {
    int variableFunctionalityButtonColor = (int) mArgbEvaluator.evaluate(fractionFromCenter,
      mCenterVariableFunctionalityButtonColor, mSideVariableFunctionalityButtonColor);
    int variableFunctionalityButtonBackgroundColor = (int) mArgbEvaluator.evaluate(fractionFromCenter,
      mCenterVariableFunctionalityButtonBackgroundColor, mSideVariableFunctionalityButtonBackgroundColor);

    mVariableFunctionalityButtonImageView.setColorFilter(variableFunctionalityButtonColor);
    mVariableFunctionalityButtonBackgroundImageView.setColorFilter(variableFunctionalityButtonBackgroundColor);
  }
}

标签： javaandroidandroid-fragments