淡入视图进出,同时保持形状背景 [英] Fade a View in and out while maintaining a Shape background

查看:120
本文介绍了淡入视图进出,同时保持形状背景的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

一个简单的问题,为你们与我已经有相当一些麻烦。

目标:有一个 RelativeLayout的与形状(XML)为背景,并在一些具体的事情发生了,有它从透明到纯红色褪色(保持形状),那回透明后再次。似乎很容易,但我一直无法达到我的目标。

第一次尝试:

RelativeLayout的的形状是 state_ok.xml 为背景开始:

  // state_error.xml
<形状的xmlns:机器人=htt​​p://schemas.android.com/apk/res/android机器人:形状=矩形>
    <边角机器人:半径=11DP/>
    [固体机器人:颜色=#FFFF0000/>
< /形状>

//state_ok.xml
<形状的xmlns:机器人=htt​​p://schemas.android.com/apk/res/android机器人:形状=矩形>
    <边角机器人:半径=11DP/>
    [固体机器人:颜色=#00ff0000/>
< /形状>

// MyView的静态可运行的创造者类容易的缘故。
私有静态类FadeRunnable实现Runnable {
    最后上下文CTX;最后RelativeLayout的布局;从,到最终诠释;
    当然//还有这四个PARAMS构造

    公共无效的run(){
        绘制对象[]颜色= {
                ctx.getResources()。getDrawable(从),
                ctx.getResources()。getDrawable(到)
        };
        TransitionDrawable反=新TransitionDrawable(彩色);
        layout.setBackgroundDrawable(反式);
        trans.startTransition(2500);
    }
}

最后FadeRunnable在=新FadeRunnable(背景下,布局,R.drawable.state_error,R.drawable.state_ok);
最后FadeRunnable OUT =新FadeRunnable(背景下,布局,R.drawable.state_ok,R.drawable.state_error);

螺纹衰落=新的Thread(){
    公共无效的run(){
        MyView.this.context.runOnUiThread(在);
        视频下载(2500);
        MyView.this.context.runOnUiThread(出);
    }
};
fading.start();
 

结果:的,瞬间变成红色,并设置在2500ms后,瞬间变得透明,渐变为纯红色。我不能完成我的头周围。

第二次尝试:使用动画

 最终可运行inRunnable =新的Runnable(){
    @覆盖
    公共无效的run(){
        动画inAnim = AnimationUtils.loadAnimation(背景下,R.anim.fadein);
        layout.startAnimation(inAnim);
    }
};
最终的可运行outRunnable =新的Runnable(){
    @覆盖
    公共无效的run(){
        动画inAnim = AnimationUtils.loadAnimation(背景下,R.anim.fadeout);
        layout.startAnimation(inAnim);
    }
};
新的Thread(){
    公共无效的run(){
        context.runOnUiThread(inRunnable);
        CommonToolkit.sleep(2500);
        context.runOnUiThread(outRunnable);
    }
}。开始();
 

结果:的布局中的内容是由不透明和透明的再次,本身不是背景

其他尝试

之后,我尝试了一个 ValueAnimator ,但也不能工作。

然后我试图改变背景颜色(与环和 setBackgroundColor(INT颜色)),但这样的形状不能保持(我认为这是矫枉过正使256可绘制具有不同的颜色)。

问:
我怎样才能从#00ff0000 视图的颜色更改为#FFFF0000 键,返回到透明的红了起来,同时保持塑造XML的背景?

来源:
如何申请圆角半径为的LinearLayout
的动画渐变闪烁 - 安卓
<一href="http://stackoverflow.com/questions/2614545/animate-change-of-view-background-color-in-android">Animate看背景色的Andr​​oid
变化 如何引用颜色属性在绘制?
<一href="http://stackoverflow.com/questions/18216285/android-animate-color-change-from-color-to-color">android:从动画颜色改变到颜色
动画淡入和淡出
<一href="http://stackoverflow.com/questions/5200811/in-android-how-do-i-smoothly-fade-the-background-from-one-color-to-another-ho">In Android的,我怎么顺利褪色从一种颜色背景到另一个? (如何使用线程)

PS
当我使用code以下时,它保持循环:从透明渐变为红色,然后瞬间又透明,等等,但是,我没有同时真正的循环,所以我不知道这是怎么可能的。我删除从XML布局的背景项。

 发forThread =新的Thread(){
    公共无效的run(){
        的for(int i = 0; I&LT; 256;我++){
            最终诠释J =;
            context.runOnUiThread(新的Runnable(){
                @覆盖
                公共无效的run(){
                    layout.setBackgroundColor(Color.argb(J,0xff的,0,0));
                }
            });
            CommonToolkit.sleep(10);
        }
        对于(INT K = 255; K&GT; -1; k ++){
            最终诠释L = K表;
            context.runOnUiThread(新的Runnable(){
                @覆盖
                公共无效的run(){
                    layout.setBackgroundColor(Color.argb(升,0xff的,0,0));
                }
            });
            CommonToolkit.sleep(10);
        }
    }
};
forThread.start();
 

解决方案

请2绘制XMLS用红色和透明色。 (layout_bg_red,layout_bg_trans)。 创建另一个绘制my_layout_transition为:

 &LT; XML版本=1.0编码=UTF-8&GT?;
&LT;过渡的xmlns:机器人=htt​​p://schemas.android.com/apk/res/android&GT;
    &LT;项目机器人:可绘制=@可绘制/ state_ok/&GT;
    &LT;项目机器人:可绘制=@可绘制/ STATE_ERROR/&GT;
&LT; /转换&GT;
 

指定这个转变XML作为背景视图你想要的。

这2种方法添加到活动:

 公共无效startTransition(INT米利斯,视图V){
    如果(v.getBackground()的instanceof TransitionDrawable){
        TransitionDrawable D =(TransitionDrawable)v.getBackground();
        d.startTransition(米利斯);
    }
}

公共无效reverseTransition(INT米利斯,视图V){
    如果(v.getBackground()的instanceof TransitionDrawable){
        TransitionDrawable D =(TransitionDrawable)v.getBackground();
        d.reverseTransition(米利斯);
    }
}
 

,然后调用startTransition(500,myLayoutView)和reverseTransition(500,myLayoutView);

例子开始,然后反向转换:

 公共无效startAndReverseTransition(最终诠释米利斯,最终的视图V){
    如果(v.getBackground()的instanceof TransitionDrawable){
        最后TransitionDrawable D =(TransitionDrawable)v.getBackground();
        d.startTransition(米利斯);
        v.postDelayed(新的Runnable(){
            @覆盖
            公共无效的run(){
                d.reverseTransition(米利斯);
            }
        },米利斯);
    }
}
 

A simple question for you guys with which I've had quite some trouble.

Goal: Have a RelativeLayout with a shape (xml) as background, and when something specific happens, have it fade from transparent to solid red (maintaining the shape), and after that back to transparent again. Seems easy enough, yet I've been unable to reach my goal.

First attempt:

Relativelayout has shape state_ok.xml as background initially:

//state_error.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
    <corners android:radius="11dp" />
    <solid android:color="#ffff0000" />
</shape>

//state_ok.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
    <corners android:radius="11dp" />
    <solid android:color="#00ff0000" />
</shape>

//MyView with static runnable creator class for easiness's sake.
private static class FadeRunnable implements Runnable {
    final Context ctx; final RelativeLayout layout; final int from, to;
    //of course there's a constructor with these four params

    public void run() {
        Drawable[] color = {
                ctx.getResources().getDrawable(from), 
                ctx.getResources().getDrawable(to)
        };
        TransitionDrawable trans = new TransitionDrawable(color);
        layout.setBackgroundDrawable(trans);
        trans.startTransition(2500);
    }
}

final FadeRunnable in = new FadeRunnable(context, layout, R.drawable.state_error, R.drawable.state_ok);
final FadeRunnable out = new FadeRunnable(context, layout, R.drawable.state_ok, R.drawable.state_error);

Thread fading = new Thread() {
    public void run() {
        MyView.this.context.runOnUiThread(in);
        Thread.sleep(2500);
        MyView.this.context.runOnUiThread(out);
    }
};
fading.start();

Outcome: It instantly becomes red and after 2500ms it instantly becomes transparent and fades to solid red. I can't wrap my head around it.

Second Attempt: using Animations

final Runnable inRunnable = new Runnable() {
    @Override
    public void run() {
        Animation inAnim = AnimationUtils.loadAnimation(context, R.anim.fadein);
        layout.startAnimation(inAnim);
    }
};
final Runnable outRunnable = new Runnable() {
    @Override
    public void run() {
        Animation inAnim = AnimationUtils.loadAnimation(context, R.anim.fadeout);
        layout.startAnimation(inAnim);
    }
};
new Thread() {
    public void run() { 
        context.runOnUiThread(inRunnable);
        CommonToolkit.sleep(2500);
        context.runOnUiThread(outRunnable);
    }
}.start();

Outcome: the contents of the layout are made opaque and transparent again, not the background of itself.

Other Attempts

After that I tried something with a ValueAnimator, but that didn't work either.

Then I tried changing background colors (with for loop and setBackgroundColor(int color)), but that way the shape isn't maintained (and I think it's overkill to make 256 drawables with a different color).

Question:
How can I change the color from a View from #00ff0000 to #ffff0000 and back to transparent red again while maintaining the shape xml background?

sources:
How to Apply Corner Radius to LinearLayout
Fade animation blinks - Android
Animate change of view background color in Android
How to reference colour attribute in drawable?
android: Animate color change from color to color
animation fade in and out
In Android, how do I smoothly fade the background from one color to another? (How to use threads)

PS:
When I use code below, the it keeps looping: it fades from transparent to RED, then instantly transparent again, etc, however, I don't have a while true loop, so I have no clue how this is possible. I removed the background entry from the layout from the xml.

Thread forThread = new Thread() {
    public void run() {
        for (int i = 0; i < 256; i++) {
            final int j = i;
            context.runOnUiThread(new Runnable() {
                @Override
                public void run() {
                    layout.setBackgroundColor(Color.argb(j, 0xff, 0, 0));
                }
            });
            CommonToolkit.sleep(10);
        }
        for (int k = 255; k > -1; k++) {
            final int l = k;
            context.runOnUiThread(new Runnable() { 
                @Override
                public void run() {
                    layout.setBackgroundColor(Color.argb(l, 0xff, 0, 0));
                }
            });
            CommonToolkit.sleep(10);
        }
    }
};
forThread.start();

解决方案

make 2 drawable xmls with red and transparent color. (layout_bg_red, layout_bg_trans). create another drawable "my_layout_transition" as:

<?xml version="1.0" encoding="UTF-8"?>
<transition xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/state_ok" />
    <item android:drawable="@drawable/state_error" />
</transition>

assign this transition xml as background for view you want.

add these 2 methods to activity:

public void startTransition(int millis, View v) {
    if (v.getBackground() instanceof TransitionDrawable) {
        TransitionDrawable d = (TransitionDrawable)v.getBackground();
        d.startTransition(millis);
    }
}

public void reverseTransition(int millis, View v) {
    if (v.getBackground() instanceof TransitionDrawable) {
        TransitionDrawable d = (TransitionDrawable)v.getBackground();
        d.reverseTransition(millis);
    }
}

and then call startTransition(500, myLayoutView) and reverseTransition(500, myLayoutView);

example for start then reverse transition:

public void startAndReverseTransition(final int millis, final View v) {
    if (v.getBackground() instanceof TransitionDrawable) {
        final TransitionDrawable d = (TransitionDrawable)v.getBackground();
        d.startTransition(millis);
        v.postDelayed(new Runnable() {
            @Override
            public void run() {
                d.reverseTransition(millis);
            }
        }, millis);
    }    
}

这篇关于淡入视图进出,同时保持形状背景的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆