机顶盒 页面 选中后的 动画
前面已经说过了,对于机顶盒的焦点的处理.相信有不少人看过,小米机顶盒应用中的效果了.选中的图片,放大,还有阴影.也有不少的应用有这种效果的.今天不讨论布局的处理,这部分可以自定义行列,也可以固定的.说的是选中的放大效果.对于机顶盒,时刻需要保持着焦点,使用这种放大的效果,可以有增强的效果.但是所有的控件都采用这种选中放大的效果,我只能说 某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,这会影响第一次选中后焦点框的位置.