Android - 可能在浮动按钮内淡化图标?

时间:2016-02-18 12:16:53

标签: android icons fade floating-action-button

我想知道是否可以淡出按钮内的图标,当淡化完成后,淡入新图标。使用的所有按钮都是FloatingActionButtons。

现在,我的“解决方案”就是这样 我有两个按钮,一个在点击之前可见,我们称之为 searchButton 。点击后显示另一个,让我们称之为 backButton 。两个按钮位于同一空间,即左下角。 backButton设置为不可见。

这是searchButton,显示为默认值。

searchButton

这是backButton,这是在按下searchButton并已翻译后显示的。

backButton 我有一个动画,将searchButton转换为屏幕中间,然后淡出searchButton。与此同时,我对backButton有相同的翻译动画,但我将其淡化。

这有效,但不完全符合我的意愿。现在,在两个端点之间的路径中间,按钮实际上不可见。这是因为它是searchButton完全淡出并且backButton刚开始淡入的点。

为了澄清,这是一张图片,显示了路径中间的按钮。

inBetween

我真的不介意图标看起来很混乱,但我不喜欢按钮褪色。

我很乐意提供代码,但我不确定这里有什么有趣的代码。请问,我将提供必要的位。

根据请求,这是我按钮的onClick方法。

public void goToSearch(View view){
    floatingSearchButton = (FloatingActionButton)findViewById(R.id.searchRecipe);
    rotateForward = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.fab_roll_to_right);
    rotateBackward = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.fab_roll_from_right);




    floatingAddButton.setVisibility(View.VISIBLE);
    floatingAddButton.setAlpha(1.0f);

    if(!flagValue){
        editText.animate().alpha(1.0f).translationY(-783f).translationX(110f).setDuration(500);
        editText.setVisibility(View.INVISIBLE);
        //floatingAddButton.animate().translationX(70f).setDuration(500);
        floatingAddButton.startAnimation(rotateForward);
        floatingSearchButton.animate().alpha(0.0f).translationY(-777f).translationX(85f).setDuration(500);

        floatingBackButton.animate().alpha(1.0f).translationY(-777f).translationX(85f).setDuration(500);
        floatingBackButton.setVisibility(View.VISIBLE);
        floatingSearchButton.bringToFront();
        floatingBackButton.setImageResource(R.drawable.ic_undo_white_24dp);
        editText.setOnEditorActionListener(new TextView.OnEditorActionListener() {
            @Override
            public boolean onEditorAction(TextView v, int actionId, KeyEvent event) {
                boolean handled = false;
                if (actionId == EditorInfo.IME_ACTION_SEARCH) {
                    //goToSearchResults(view)
                    handled = true;
                }
                return handled;
            }
        });
        rotateForward.setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {

            }

            @Override
            public void onAnimationEnd(Animation animation) {
                floatingAddButton.setVisibility(View.GONE);
            }

            @Override
            public void onAnimationRepeat(Animation animation) {

            }
        });
        flagValue = true;

    } else {
        /*roll in the add button again
        and roll out the editText again
         */
        editText.animate().alpha(0.0f).translationY(0f).translationX(0f).withEndAction(new Runnable() {
            @Override
            public void run() {
                editText.setVisibility(View.GONE);
                editText.setText("");
            }
        });
        floatingAddButton.startAnimation(rotateBackward);
        rotateBackward.setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {
                floatingAddButton.setVisibility(View.VISIBLE);
            }

            @Override
            public void onAnimationEnd(Animation animation) {

            }

            @Override
            public void onAnimationRepeat(Animation animation) {

            }
        });
        hideKeyboard(this);
        floatingSearchButton.animate().alpha(1.0f).translationY(0f).translationX(0f);
        floatingBackButton.animate().alpha(0.0f).translationY(0f).translationX(0f);
        //floatingSearchButton.setImageResource(R.drawable.ic_search_white_24dp);
        flagValue = false;
    }

这是按钮的XML。

<android.support.design.widget.FloatingActionButton
    android:id="@+id/searchRecipe"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:backgroundTint="#ffeb3b"
    android:src="@drawable/ic_search_white_24dp"
    android:layout_margin="16dp"
    android:tint="#FFFFFF"
    android:scaleType="fitCenter"
    android:onClick="goToSearch"
    android:layout_gravity="bottom|left"
    />

<android.support.design.widget.FloatingActionButton
    android:id="@+id/goBack"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:backgroundTint="#ffeb3b"
    android:src="@drawable/ic_search_white_24dp"
    android:layout_margin="16dp"
    android:tint="#FFFFFF"
    android:scaleType="fitCenter"
    android:onClick="goToSearch"
    android:layout_gravity="bottom|left"
    />

0 个答案:

没有答案