机顶盒 页面 选中后的 动画

前面已经说过了,对于机顶盒的焦点的处理.
相信有不少人看过,小米机顶盒应用中的效果了.选中的图片,放大,还有阴影.

也有不少的应用有这种效果的.

今天不讨论布局的处理,这部分可以自定义行列,也可以固定的.

说的是选中的放大效果.
对于机顶盒,时刻需要保持着焦点,使用这种放大的效果,可以有增强的效果.但是所有的控件都采用这种选中放大的效果,我只能说  某xx研究院 的xx,你们都有病. 在没有其它对比控件的时候 , 却不处理焦点 , ....

废话不说,实现原理:

一般这种页面的布局是一个imageview,或者加一个textview,有显示一些文本,也可以把这两个结合在一起,然后设置一直显示文本,或者在控件选中时显示文本.
比如我使用的是自定义组合控件:relativelayout,里包含两个控件:
private ImageView mImageView;
    private TextView mTextView;
//是否总显示文本
    private boolean alwaysShowTxt=false;
关于其它的初始化等不介绍了.
@Override
    protected void onFocusChanged(boolean gainFocus, int direction, Rect previouslyFocusedRect) {
        super.onFocusChanged(gainFocus, direction, previouslyFocusedRect);
        if (!alwaysShowTxt) {
            if (gainFocus) {
                if (mTextView.getVisibility()==GONE) {
                    mTextView.setVisibility(VISIBLE);
                    mTextView.requestLayout();
                }
            } else {
                if (mTextView.getVisibility()==VISIBLE) {
                    mTextView.setVisibility(GONE);
                }
            }
        }
    }
这样的组合 就可以在选中一个控件后,显示文本,不选中后,就隐藏了.

以这个Layout为一个控件,然后取其背景,或者取它的ImageView的背景.
依旧是原来的处理方式.

<RelativeLayout>
<layout>这里填充主体布局,原来如何就是如何的.
</layout>
<bglayout>
这里填充一个选中后的布局,如果使用一个图片+文本,就可以使用上面的 组合控件,或者就在xml中写两个,一个是imageview,一个是textview.
</bglayout>
</RelativeLayout>

可以使用getDrawable(),但是这个是单例的 , 开始时,在动画处理中,把原来的选中的背景直接拿来,放在bglayout中,实现放大后,焦点变换,原来的图片无法恢复,因为drawable是同一个,在使用后要恢复原状.

focus_img2 如果没有文本,可以只是一个图片,如果包含文本,可以是一个ViewGroup.
private View.OnFocusChangeListener mFocusListener=new View.OnFocusChangeListener() {

        @Override
        public void onFocusChange(View v, boolean hasFocus) {
            if (hasFocus) {
                focus_img2.setVisibility(View.VISIBLE);
                setFocusImageView2(v, hasFocus);
            } else {
                focus_img2.setVisibility(View.INVISIBLE);
            }
        }
    };
对于控件设置焦点监听.比如ViewGroup a=findViewById();a.setonfocuschanged(mFocusListener);

然后选中后,就会触发,然后在setFocusImageView2(v, hasFocus);处理选中后的效果.


private void setFocusImageView2(View view, boolean hasFocus) {
        Rect r=new Rect();

        view.getGlobalVisibleRect(r);
        Rect rAll=new Rect();
        mRoot.getGlobalVisibleRect(rAll);

//这里取原控件的大小,然后再加上一部分的高宽,就有放大的效果了.再加上阴影的.9背景
        float xOffset=40f;
        float yOffset=40f;

        ViewGroup.LayoutParams params;
        params=focus_img2.getLayoutParams();
        params.height=r.height()+(int) (yOffset*2);
        params.width=r.width()+(int) (xOffset*2);
        focus_img2.setLayoutParams(params);

focus_img2.setImageResource();
这里的图片资源,可以使用view.getDrawable(),但是会出现上面所说的状况.如果想恢复,还是要修改上面的params.应该是在onFocusChange()中else部分修改.
这里说另一种处理方式.比如知道了view中的图片资源的url,一般也是存储于内存中的,然后对于
focus_img2设置了大小高,设置图片为url对应的图片,然后再设置一个背景,这个背景是边有阴影的.9图片,这样看上去效果就好多了.图片放大后,就是遮住了底部的一部分内容,将这个focus_img2在焦点上方.


        //用动画效果将图片移到目标位置
        PropertyValuesHolder pvhX=PropertyValuesHolder.ofFloat("x", (r.left-rAll.left-xOffset));
        PropertyValuesHolder pvhY=PropertyValuesHolder.ofFloat("y", (r.top-rAll.top-yOffset));
        ObjectAnimator oa=ObjectAnimator.ofPropertyValuesHolder(focus_img2, pvhX, pvhY);
oa.setDuration(10);
oa.start();

}
还有一个重要的问题就是,对于bglayout不应该设置margin,这会影响第一次选中后焦点框的位置.

评论

4 楼 Jerome_XX 2014-01-26  

您好 可以给发个Demo么？谢谢 [e-mail] 真的谢谢

3 楼 phenom 2014-01-19  

暂时没有时间做了 , 有思路已经挺好的了 .

2 楼 xutian2008 2014-01-18  

能给发个demo么？[e-mail]

1 楼 xutian2008 2014-01-18  

很有用的思路