OTT界面开发中焦点移动框和获取焦点后图片变化效果实现

OTT界面开发中焦点移动框和获取焦点后图片变化效果实现


OTT开发和手机开发最大的区别是,手机以触摸点击事件为主,而OTT大部分操作是通过遥控器,所以呈现给用户的大部分是焦点切换事件,即onfocuschange监听事件

OTT界面开发中焦点移动框和获取焦点后图片变化效果实现_第1张图片

整体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);
	}
	
}
MainActivity的布局文件



    
    
    
    
    
    
    
    
    
        

第一个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





你可能感兴趣的:(Android)