OTT界面开发中焦点移动框和获取焦点后图片变化效果实现
OTT界面开发中焦点移动框和获取焦点后图片变化效果实现
OTT开发和手机开发最大的区别是，手机以触摸点击事件为主，而OTT大部分操作是通过遥控器，所以呈现给用户的大部分是焦点切换事件，即onfocuschange监听事件
整体launcher布局是主页中加入四个fragment相互切换
主页activity：MainActivity代码如下
public class MainActivity extends FragmentActivity
{
private static final String TAG = "MainActivity";
private ViewPager mViewPager;
private FragmentPagerAdapter mAdapter;
private List mFragments = new ArrayList();
private Button mTabBtnLive;
private Button mTabBtnHD;
private Button mTabBtnLookback;
private Button mTabBtnApplication;
//整体布局
private LinearLayout mainLayout;
// headbar上的下划线
private ImageView headbar_underline;
// headbar下划线上一次位置所在
private static int headbar_underline_lastPos = 0;
// 视频坑位尺寸
public static int extra_button_width;
public static int extra_button_height;
// 当tab的index
public static int currentIndex = 0;
// 总页数
public static final int PAGE_NUM = 4;
// 应用操作
private ApplicationOperation applicationOperation;
public static RelativeLayout main_bottom;
private LinearLayout tips;
private String preContentDes;
@Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
mAdapter = new TabAdapter(getSupportFragmentManager());
mViewPager.setOffscreenPageLimit(PAGE_NUM);
mViewPager.setAdapter(mAdapter);
mViewPager.setOnPageChangeListener(new TabChangeLis());
}
@Override
protected void onResume()
{
super.onResume();
}
@Override
protected void onPause()
{
super.onPause();
}
@Override
protected void onDestroy()
{
super.onDestroy();
}
/**
* head bar上的tab按钮焦点效果清除
* */
protected void defocusTabBtn()
{
mTabBtnLive.setTextColor(getResources().getColor(R.color.white_50));
mTabBtnHD.setTextColor(getResources().getColor(R.color.white_50));
mTabBtnLookback.setTextColor(getResources().getColor(R.color.white_50));
mTabBtnApplication.setTextColor(getResources().getColor(R.color.white_50));
}
/**
*初始化工作
* */
private void initView()
{
mainLayout = (LinearLayout) findViewById(R.id.mainLayout);
mViewPager = (ViewPager) findViewById(R.id.id_viewpager);
// tab按钮初始化
mTabBtnLive = (Button) findViewById(R.id.tab_btn_recommend);
mTabBtnHD = (Button) findViewById(R.id.tab_btn_movie);
mTabBtnLookback = (Button) findViewById(R.id.tab_btn_game);
mTabBtnApplication = (Button) findViewById(R.id.tab_btn_child);
// 各个分界面, 按顺序添加
mFragments.add(new MainTabLive(getApplicationContext()));
mFragments.add(new MainTabLookback(getApplicationContext()));
mFragments.add(new MainTabHD(getApplicationContext()));
mFragments.add(new MainTabApplication(getApplicationContext()));
// tab按钮添加监听
TabBtnFocLis tabBtnFocLis = new TabBtnFocLis();
mTabBtnLive.setOnFocusChangeListener(tabBtnFocLis);
mTabBtnHD.setOnFocusChangeListener(tabBtnFocLis);
mTabBtnLookback.setOnFocusChangeListener(tabBtnFocLis);
mTabBtnApplication.setOnFocusChangeListener(tabBtnFocLis);
// headbar下划线
headbar_underline = (ImageView) findViewById(R.id.headbar_underline);
extra_button_width = (int) getResources().getDimension(
R.dimen.extra_button_width);
extra_button_height = (int) getResources().getDimension(
R.dimen.extra_button_height);
// 底部视图
main_bottom = (RelativeLayout) findViewById(R.id.main_bottom);
tips = (LinearLayout) findViewById(R.id.tips);
mViewPager.setCurrentItem(0);
}
/**
* 获取tab内容页的顺序
* */
public int getTabOrder(View v)
{
switch (v.getId())
{
case R.id.tab_btn_recommend:
return 0;
case R.id.tab_btn_movie:
return 1;
case R.id.tab_btn_game:
return 2;
case R.id.tab_btn_child:
return 3;
default:
return 0;
}
}
class TabChangeLis implements OnPageChangeListener
{
@Override
public void onPageSelected(int position)
{
defocusTabBtn();
// 显示推荐页下面的下拉提示箭头按钮
if (position == 0)
{
main_bottom.setVisibility(View.VISIBLE);
}
else
{
main_bottom.setVisibility(View.INVISIBLE);
}
switch (position)
{
case 0:
mTabBtnLive.setTextColor(getResources().getColor(
R.color.white));
break;
case 1:
mTabBtnHD.setTextColor(getResources()
.getColor(R.color.white));
break;
case 2:
mTabBtnLookback
.setTextColor(getResources().getColor(R.color.white));
break;
case 3:
mTabBtnApplication.setTextColor(getResources()
.getColor(R.color.white));
break;
}
currentIndex = position;
startLineAnimation(position);// 显示headbar的下划线效果
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2)
{
}
@Override
public void onPageScrollStateChanged(int arg0)
{
}
}
class TabAdapter extends FragmentPagerAdapter
{
public TabAdapter(FragmentManager fm)
{
super(fm);
}
@Override
public int getCount()
{
return mFragments.size();
}
@Override
public Fragment getItem(int arg0)
{
return mFragments.get(arg0);
}
}
/**
* head bar上的tab按钮焦点状态变化监听
* */
class TabBtnFocLis implements OnFocusChangeListener
{
@Override
public void onFocusChange(View v, boolean hasFocus)
{
if (hasFocus)
{
headbar_underline
.setBackgroundResource(R.drawable.headbar_focus_underline);
mViewPager.setCurrentItem(getTabOrder(v));
if (!v.hasFocus())
{
v.requestFocus();
}
}
else
{
headbar_underline
.setBackgroundResource(R.color.transparent_100);
}
}
}
/**
*
* 调整HorizontalScrollView的位置
* */
public void adjustScrollViewPos(HorizontalScrollView hScrollView, View currentFocus)
{
// 当焦点在tab标题切换时，tab下方的内容横向坐标置为0
if (hScrollView != null
&& currentFocus != null
&& currentFocus.getContentDescription()!=null
&& currentFocus.getContentDescription().equals("headbar"))
{
hScrollView.scrollTo(0, 0);
}
}
/**
*
* headbar下划线移动
* */
private void startLineAnimation(int index)
{
if (index < 0 || index >= mFragments.size())
{
return;
}
int stepLength = ((int) getResources().getDimension(
R.dimen.headbar_title_width))
+ ((int) getResources().getDimension(
R.dimen.headbar_divide_width));// 移动步长
int underline_to_left = (int) getResources().getDimension(
R.dimen.headbar_underline_to_left);
Animation animation = null;
animation = new TranslateAnimation(headbar_underline_lastPos,
stepLength * index, 0, 0);// 下滑线动画
headbar_underline_lastPos = stepLength * index;
animation.setFillAfter(true);
animation.setDuration(300);
headbar_underline.startAnimation(animation);
}
@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
if (keyCode == KeyEvent.KEYCODE_BACK )
{
return false;
}
return super.onKeyDown(keyCode, event);
}
}
第一个fragment中的内容
public class MainTabLive extends Fragment implements OnClickListener
{
private static final String TAG = "MainTabRecommend";
private Context mContext;
public static SurfaceView button1_1;
public static Button button1_51;
public static Button button1_52;
public static Button button1_2;
public static Button button1_3;
public static Button button1_4;
public static Button button1_5;
public static Button button1_6;
public static Button button1_7;
public static Button button1_8;
public static Button button1_9;
public static Button button1_10;
public static ImageView focus_img;
public static Button message_spot;
public static ImageView video_play_icon;
public static Boolean isPlaying = false;
public MediaPlayer mediaPlayer;
private static MainTabLive mainTabLive = null;
public AVPlayerManager aVPlayerManager = null;
public ProgManager proManager = null;
private static String curr_prog_num;// 当前台号
public static int volume = 16; //声音初始值
//当前fragment处于用户可见状态时的时间
public static long visible_time = 0;
//当前fragment处于用户不可见状态时的时间
public static long invisible_time = 0;
private HorizontalScrollView horizontalScrollView;
public MainTabLive()
{
}
public MainTabLive(Context context)
{
super();
mContext = context;
}
/*public static MainTabLive getInstance(){
return mainTabLive;
}
*/
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState)
{
View recommendLayout = inflater.inflate(R.layout.main_tab_live,
container, false);
initView(recommendLayout);
return recommendLayout;
}
@Override
public void onResume()
{
DVB.GetInstance().SetDVBStatus(1);
aVPlayerManager.startPlayer();
aVPlayerManager.setPlayerVolume(volume);
aVPlayerManager.setPlayerWindow(50, 110, 470, 350);
super.onResume();
}
@Override
public void onPause() {
if(aVPlayerManager != null){
aVPlayerManager.stopPlayer();
}
DVB.GetInstance().ReleaseResource();
super.onPause();
}
@Override
public void onStop() {
super.onStop();
}
@Override
public void onDestroy() {
super.onDestroy();
}
/**
* 初始化视觉控件
* */
public void initView(View view)
{
//horizontalScrollView = (HorizontalScrollView) view.findViewById(R.id.main_recommend);
button1_1 = (SurfaceView) view.findViewById(R.id.button1_1);
button1_2 = (Button) view.findViewById(R.id.button1_2);
button1_3 = (Button) view.findViewById(R.id.button1_3);
button1_51 = (Button) view.findViewById(R.id.button1_51);
button1_52 = (Button) view.findViewById(R.id.button1_52);
button1_4 = (Button) view.findViewById(R.id.button1_4);
button1_5 = (Button) view.findViewById(R.id.button1_5);
button1_6 = (Button) view.findViewById(R.id.button1_6);
button1_7 = (Button) view.findViewById(R.id.button1_7);
button1_8 = (Button) view.findViewById(R.id.button1_8);
button1_9 = (Button) view.findViewById(R.id.button1_9);
button1_10 = (Button) view.findViewById(R.id.button1_10);
focus_img = (ImageView) view.findViewById(R.id.recommend_focus_img);
video_play_icon = (ImageView) view.findViewById(R.id.video_play_icon);
//video_pause_shadow = (Button) view.findViewById(R.id.video_pause_shadow);
button1_2.setNextFocusUpId(R.id.tab_btn_recommend);
button1_3.setNextFocusUpId(R.id.tab_btn_recommend);
button1_4.setNextFocusUpId(R.id.tab_btn_recommend);
button1_1.setNextFocusUpId(R.id.tab_btn_recommend);
OnFocusChangeLis focusChangeListener = new OnFocusChangeLis();
OnFocusChangeBig focusChangeBig = new OnFocusChangeBig();
button1_1.setOnFocusChangeListener(focusChangeBig);
button1_2.setOnFocusChangeListener(focusChangeListener);
button1_3.setOnFocusChangeListener(focusChangeListener);
button1_51.setOnFocusChangeListener(focusChangeListener);
button1_52.setOnFocusChangeListener(focusChangeListener);
button1_4.setOnFocusChangeListener(focusChangeListener);
button1_5.setOnFocusChangeListener(focusChangeListener);
button1_6.setOnFocusChangeListener(focusChangeListener);
button1_7.setOnFocusChangeListener(focusChangeListener);
button1_8.setOnFocusChangeListener(focusChangeListener);
button1_9.setOnFocusChangeListener(focusChangeListener);
button1_10.setOnFocusChangeListener(focusChangeListener);
button1_1.setOnClickListener(this);
button1_2.setOnClickListener(this);
button1_3.setOnClickListener(this);
button1_51.setOnClickListener(this);
button1_52.setOnClickListener(this);
button1_4.setOnClickListener(this);
button1_5.setOnClickListener(this);
button1_6.setOnClickListener(this);
button1_7.setOnClickListener(this);
button1_8.setOnClickListener(this);
button1_9.setOnClickListener(this);
button1_10.setOnClickListener(this);
aVPlayerManager = AVPlayerManager.getInstance();
proManager = ProgManager.getInstance();
if(null != aVPlayerManager.getCurrProgShowInfoByMap())
{
curr_prog_num = aVPlayerManager.getCurrProgShowInfoByMap().get("PROG_NUM");
}else{
curr_prog_num = null;
}
}
@Override
public void onClick(View v) {
String numId = null;
if(null != aVPlayerManager.getCurrProgShowInfoByMap())
{
curr_prog_num = aVPlayerManager.getCurrProgShowInfoByMap().get("PROG_NUM");
}else{
curr_prog_num = null;
}
if(curr_prog_num!=null){
switch (v.getId()) {
case R.id.button1_1:
gotoOutPakage(curr_prog_num);
break;
case R.id.button1_2: //CCTV-1
numId = proManager.getProgNumByServiceid(4001);
if(numId!=null){
gotoOutPakage(numId);
}
break;
case R.id.button1_3: //CCTV-3
// numId = proManager.getProgNumByServiceid(78);
/*if(numId!=null){
gotoOutPakage(numId);
}*/
break;
case R.id.button1_4: //CCTV-5
numId = proManager.getProgNumByServiceid(4101);
if(numId!=null){
gotoOutPakage(numId);
}
break;
case R.id.button1_5: //CCTV-6
//numId = proManager.getProgNumByServiceid(4001);
/*if(numId!=null){
gotoOutPakage(numId);
}*/
break;
case R.id.button1_6: //CCTV-9
numId = proManager.getProgNumByServiceid(4102);
if(numId!=null){
gotoOutPakage(numId);
}
break;
case R.id.button1_7: //北京高清
numId = proManager.getProgNumByServiceid(4201);
if(numId!=null){
gotoOutPakage(numId);
}
break;
case R.id.button1_8: //浙江高清
numId = proManager.getProgNumByServiceid(4601);
if(numId!=null){
gotoOutPakage(numId);
}
break;
case R.id.button1_9: //江苏高清
numId = proManager.getProgNumByServiceid(4501);
if(numId!=null){
gotoOutPakage(numId);
}
break;
case R.id.button1_10: //湖南高清
numId = proManager.getProgNumByServiceid(4401);
if(numId!=null){
gotoOutPakage(numId);
}
break;
default:
break;
}
}
}
private void gotoOutPakage(String proNum) {
ComponentName comp = new ComponentName("android.test.ui", "android.test.ui.Topmost");
Intent intent = new Intent();
intent.putExtra("num",proNum);
intent.setComponent(comp);
startActivity(intent);
}
@Override
public void setUserVisibleHint(boolean isVisibleToUser)
{
super.setUserVisibleHint(isVisibleToUser);
if(isVisibleToUser)
{
Intent intent = new Intent();
intent.putExtra("page", 1);
intent.setAction("com.konka.launcher.PAGE_VISIBILITY");
getActivity().sendBroadcast(intent);
}
}
}
利用framelayout布局，将边框图片先隐藏，根据用户焦点变化获取当前view大小和位置，当图片获取焦点，选择框覆盖显示，同时设置图片和选择框动画，所有变化放在onfocuschange中处理
public class OnFocusChangeLis implements OnFocusChangeListener {
//public Context mContext;
public Animation focusAnimation;
public Animation defocusAnimation;
public Animation focusPicAnimation;
public Animation defocusPicAnimation;
public ImageView focus_img;
public ImageButton imageButton;
private int normal_focus_width_diff;
private int normal_focus_height_diff;
public OnFocusChangeLis(){
// 焦点框宽高差异值
normal_focus_width_diff = 48;
normal_focus_height_diff =50;
focusAnimation = new ScaleAnimation(1.0f,1.1f,1.0f,1.1f,Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f);
focusAnimation.setDuration(100);
focusAnimation.setFillAfter(true);
defocusAnimation = new ScaleAnimation(1.0f,1.0f,1.0f,1.0f,Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f);
defocusAnimation.setDuration(50);
defocusAnimation.setFillAfter(false);
focusPicAnimation = new ScaleAnimation(1.0f,1.1f,1.0f,1.1f,Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f);
focusPicAnimation.setDuration(100);
focusPicAnimation.setFillAfter(true);
defocusPicAnimation = new ScaleAnimation(1.0f,1.0f,1.0f,1.0f,Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f);
defocusPicAnimation.setDuration(50);
defocusPicAnimation.setFillAfter(false);
}
@Override
public void onFocusChange(View v, boolean hasFocus) {
focus_img = Refrences.getFocusImg(v);
//focus_img = MainTabLive.focus_img;
if(hasFocus){
showFocusImg(v);
}
else{
dismissFocusImg();
v.startAnimation(defocusPicAnimation);
}
}
public void dismissFocusImg() {
focus_img.startAnimation(defocusAnimation);
focus_img.setVisibility(View.INVISIBLE);
}
public void showFocusImg(View v) {
if (v == null)
{
return;
}
FrameLayout.LayoutParams focusImgParams = (FrameLayout.LayoutParams) focus_img.getLayoutParams();
focusImgParams.width = v.getWidth()
+ normal_focus_width_diff;
focusImgParams.height = v.getHeight()
+ normal_focus_height_diff;
focusImgParams.leftMargin = v.getLeft()- normal_focus_width_diff / 2-2;
focusImgParams.topMargin = v.getTop()- normal_focus_height_diff / 2;
focus_img.setLayoutParams(focusImgParams);
focus_img.setVisibility(View.VISIBLE);
focus_img.startAnimation(focusAnimation);
v.startAnimation(focusPicAnimation);
focus_img.bringToFront();
}
}
源码下载地址：http://download.csdn.net/detail/u011403718/9005397