;
前言:移动智能设备的发展,推动了安卓另一个领域,包括智能电视和智能家居,以及可穿戴设备的大量使用,但是这些设备上的开发并不是和传统手机开发一样,特别是焦点控制和用户操作体验上有很大的区别,本系列博文主要通过用TV播放器的实现去了解下在智能设备上的开发一个APP,实现遥控器控制焦点移动,方向键模拟鼠标,并在线完成视频直播,手机当遥控器使用等相关功能。此UI也适用于车载设备和移动智能家具设备,。
上一篇中 安卓TV开发(四)实现主流智能TV视频播放器UI 初步学习了智能电视上UI的设计,且完成了在电视上可以控制的自定义View(FocusView),在上篇结尾中提到,他并不适合在手机上使用,并且也没实现点击遥控键(KEYCODE_DPAD_CENTER)的item事件,因此本篇也将会继续完善和修复此存在的问题。
一,实现遥控器Ok键Item点击事件
1 通过观察GridView的源码其实继承了 AdapterView<T
extends Adapter>这个类,其中的item事件也是实现此类的 OnItemClickListener接口
源码如下:
/** * Interface definition for a callback to be invoked when an item in this * AdapterView has been clicked. */ public interface OnItemClickListener { /** * Callback method to be invoked when an item in this AdapterView has * been clicked. * <p> * Implementers can call getItemAtPosition(position) if they need * to access the data associated with the selected item. * * @param parent The AdapterView where the click happened. * @param view The view within the AdapterView that was clicked (this * will be a view provided by the adapter) * @param position The position of the view in the adapter. * @param id The row id of the item that was clicked. */ void onItemClick(AdapterView<?> parent, View view, int position, long id); }
以上代码不难理解 AdapterView 提供个一个回调,在我们所用到的actity中或view去实现此接口。本次可以复用以上接口,使开发者习惯安卓系统的条目监听。但由于我们的view并未继承AdapterView,而在回调必须要传入一 AdapterView的父类,因此我们自定义自己的监听器。下面我们也给FocsView定义一个条目点击事件监听器。
/** * FocusView * Interface definition for a callback to be invoked when an item in this * FocusView item has been clicked. * @author liuyongkui. * @param <T> */ public interface OnItemClickListener<T> { /** * @param mFocusView * FoucusView. * @param view * focus View item. * @param col * col Num. * @param row * row Num. * @param id * item id. */ void onItemClick(FocusView mFocusView, View focusView, FocusItemModle<TvModle> focusItem, int Postion, int row, int col, int id); }
同理为了开发者自定义效果,我们也为focusVIew的子条目心新增一个选中事件监听器。
/** * FocusView * Interface definition for a callback to be invoked when an item in this * FocusView item has been Selected. * @author liuyongkui. * @param <T> */ public interface OnItemSelectedListener <T> { /** * @param <T> * @param mFocusView * FoucusView. * @param view * focus View item. * @param col * col Num. * @param row * row Num. * @param id * item id. */ public void onItemSelected(FocusView metroView, View view, T modle, int col, int row, long id); }
2 上列代码发现我用了一个接口泛型,此处原因是为了提高接口的扩展性,比如 开发中你定义的MusicModle ,以上的监听就会有问题了 会拋类型转换异常,因此当我们再给接口传什么Modle,回调的时候就会返回相应的modle.
等完成了接口圆原型,再定义他为FocusView内部属性
/** items mOnItemSelectedListener*/ private OnItemSelectedListener mOnItemSelectedListener; /** items mOnItemClickListener */ private OnItemClickListener mOnItemClickListener;
@SuppressWarnings("rawtypes") public OnItemSelectedListener<?> getmOnItemSelectedListener() { return mOnItemSelectedListener; } public void setOnItemSelectedListener( OnItemSelectedListener mOnItemSelectedListener) { this.mOnItemSelectedListener = mOnItemSelectedListener; }
3 完成以上工作,考虑在何时调用此接口,通过要实现的目标就能知道答案,肯定是在用户点击Ok键时触发此回调,接着重写onKeyUp()事件
继续完善上篇中已实现的上下左右的键盘事件,
case KeyEvent.KEYCODE_DPAD_CENTER: if(mOnItemClickListener != null) { mOnItemClickListener.onItemClick(this, focusItem.getFocusView(), focusItem, focusItem.getPostion(), focusItem.getRow(), focusIt em.getCol(), focusItem.getId()); } break; }
当然到这里代码肯定会有报错,因此我的FocusITemModle 也要随之加入Position,ID等 由于本次代码无adapter,因此我个人是在focusView布局时setPosition,Id也是通通过行数和列数决定,
4 在activty中去实现此接口 ,和一般的listVIew,GrideVIew一样,但是导包必须到导入focusView的OnItemClickListener事件,值得注意的是 实现点此接口时需要我们传入object,在这里我传入: FocusItemModle<TvModle> ,和上篇有很大区别的是这次的FocusItemModle也适用了泛型,目的是为了代码灵活性。
FocusUIActivity extends Activity implements OnItemClickListener<FocusItemModle<TvModle>>
FocusView view = (FocusView) findViewById(R.id.focus_ui); view.setOnItemClickListener(this);
实现接口中的onItemClick()方法:
@Override public void onItemClick(FocusView mFocusView, View focusView, FocusItemModle<TvModle> focusItem, int Postion, int row, int col, long id) { Toast.makeText(getApplicationContext(), "row:" + row + "col:" + col, 1).show(); }
通过以上三步我们完善了在按键Ok时触发的事件,同理选择事件并不需要我们按键触发,而是当Item获得焦点时触发,学习了前面知识的朋友。一定会觉得再简单不过了,这里留给读者去完善。
二,实现触屏Item点击事件
到此我们的代码还并不支持触摸点击,为了兼容手机我为此去实现触摸时触发onItemClick(),所以今天的难点又来了 因为我已经屏蔽了系统的触摸事件,因此继续完善OnTucH事件,首先拿到这样的一个实现需求,我们首先要想到
当用户点击屏幕的模块区域时通过点击的坐标,然后得到当我所在的view,然后触发OnItemClick()即可
1 首先写一个工具类,专门通过X,Y去获取点击的最小View
public final class ViewUtil { private ViewGroup view; private static Context context; /** instance */ private static ViewUtil sInstance; private ViewUtil(ViewGroup view) { this.view = view; this.context =view.getContext(); } /** * @return instance */ public static synchronized ViewUtil getInstance(ViewGroup view) { if (sInstance == null) { sInstance = new ViewUtil(view); } return sInstance; } /** * get Onclicked ItemView * 在重写ViewGroup使用 * * @param X * @param Y * @return getView */ public static View getViewAtActivity(int x, int y) { // 从Activity里获取容器 View root =((Activity)context).getWindow().getDecorView(); return findViewByXY(root, x, y); } /** * get Onclicked ItemView * 在重写ViewGroup使用 * * @param X * @param Y * @return getView */ public View getViewAtViewGroup(int x, int y) { return findViewByXY(view, x, y); } /** * @param view * @param x * @param y * @return */ private static View findViewByXY (View view, int x, int y) { View targetView = null; if (view instanceof ViewGroup) { // 父容器,遍历子控件 ViewGroup v = (ViewGroup) view; for (int i = 0; i < v.getChildCount(); i++) { targetView = findViewByXY(v.getChildAt(i), x, y); if (targetView != null) { break; } } } else { targetView = getTouchTarget(view, x, y); } return targetView; } /** * @param view * @param x * @param y * @return */ private static View getTouchTarget(View view, int x, int y) { View targetView = null; ArrayList<View> TouchableViews = view.getTouchables(); for (View child : TouchableViews) { if (isTouchPointInView(child, x, y)) { targetView = child; break; } } return targetView; } /** * 判断view是否可以聚焦 * @param view * @param x * @param y * @return */ private static boolean isTouchPointInView(View view, int x, int y) { int[] location = new int[2]; view.getLocationOnScreen(location); int left = location[0]; int top = location[1]; int right = left + view.getMeasuredWidth(); int bottom = top + view.getMeasuredHeight(); if (view.isClickable() && y >= top && y <= bottom && x >= left && x <= right) { return true; } return false; } }
2 当拿到当前的view了,但是回调需要一个Modle,因此定义一个集合,用来将view和model一一对应,当返回view,我们可以在集合里去拿出model,在FocuasView初始化onLayout布局的时,去初始化此集合。当触摸事件并且移动距离为零时,触发回调,因为上篇已经实现了触摸滑动翻页功能。
PS:转载请标明出处:http://blog.csdn.net/sk719887916,
//将点击的view和item modle关联起来 protected HashMap< View, FocusItemModle<TvModle>> maps = new HashMap<View, FocusItemModle<TvModle>>();
初始化maps
@Override protected void onLayout(boolean changed, int l, int t, int r, int b) { final int itemCount = mFocusItems.size(); if (itemCount != getChildCount()) throw new IllegalArgumentException("contain unrecorded child"); for (int i = 0; i < itemCount; i++) { final FocusItemModle item = mFocusItems.get(i); final View childView = item.getFocusView(); maps.put(childView ,item); if (childView.getVisibility() != View.GONE) { final int childLeft = getPaddingLeft() + (mColWidth + mGapWidth) * item.getCol(); final int childTop = getPaddingTop() + (mRowHeight + mGapHeight) * item.getRow(); final int childWidth = (mColWidth + mGapWidth) * item.getColSpan() - mGapWidth; final int childHeight = (mRowHeight + mGapHeight) * item.getRowSpan() - mGapHeight; childView.layout(childLeft, childTop, childLeft + childWidth, childTop + childHeight); } } }
3 onTouchEvent()事件里继续处理触摸非滑动逻辑,在第二篇 MotionEvent.ACTION_UP 代码中完善,实现回调onItemClick()
case MotionEvent.ACTION_UP: final VelocityTracker velocityTracker = mVelocityTracker; velocityTracker.computeCurrentVelocity(1000); int velocityX = (int) velocityTracker.getXVelocity(); int velocityY = (int) velocityTracker.getYVelocity(); int row = mCurRow; int col = mCurCol; if (velocityX > SNAP_VELOCITY && mCurCol > 0) { col--; } else if (velocityX < -SNAP_VELOCITY && mCurCol < mColsCount - 1) { col++; } if (velocityY > SNAP_VELOCITY && mCurRow > 0) { row--; } else if (velocityY < -SNAP_VELOCITY && mCurRow < mRowsCount - 1) { row++; } if (row == mCurRow && col == mCurCol) { if (velocityX == 0 && velocityY == 0) { snapToDestination(); } else { mOnX = (int) event.getRawX(); mOnY = (int) event.getRawY(); Log.e(TAG, "rawX =" +mOnX + " rawY ="+ mOnY); //sendMotionEvent(mOnX,mOnY, KeyEvent.ACTION_UP); View onClickItem = getViewAtViewGroup(mOnX,mOnY); FocusItemModle<TvModle> onClickItemModle = maps.get(onClickItem); if(mOnItemClickListener != null && onClickItem != null) { Log.e(TAG, "View 2=" +mOnX + " rawY 2 ="+ mOnY); row = onClickItemModle.getCol(); col = onClickItemModle.getCol(); mOnItemClickListener.onItemClick(this, onClickItem, onClickItemModle, onClickItemModle.getRow(), onClickItemModle.getPostion(), onClickItemModle.getCol(), onClickItemModle.getId()); snapTo(row, col); } } } else { snapTo(row, col); if (mFocusListener != null) mFocusListener.scrollto(row, col); } if (mVelocityTracker != null) { mVelocityTracker.recycle(); mVelocityTracker = null; } mTouchState = TOUCH_STATE_REST; break;
到此一切就绪了,模拟器效果:
效果:
综合以上代码 ,发现我们的View还是存在缺陷,上文就发现,因为没有adapter,导致我们的代码繁琐,并且也不符合一个集合框架(listView,GridView)的开发习惯和
实现逻辑。下篇我会通过上面的代码来优化,完成FcousView和Adapter结合,完成高效的UI框架,使得开发者自定义宽高,翻页动画,显示可见条数,和子item布局,下篇也会成为就是TV视图文章中的终结篇,之后将进行多媒体和直播流的相关知识,欢迎大家阅读。
转载请标明出处:http://blog.csdn.net/sk719887916,作者:skay
源码下载:https://github.com/Tamicer/FocusView
更多技术文章请关注本人微信公众号: