Android TV开发:实现3D仿Gallery效果的实例代码

2023-09-12 20:29:05 52

本文讲述了AndroidTV开发:实现3D仿Gallery效果的实例代码。分享给大家供大家参考，具体如下：

1.实现效果：

滚动翻页+页面点击+页码指示器+焦点控制

2.实现这个效果之前必须要了解

Android高级图片滚动控件实现3D版图片轮播器这篇文章，我是基于他的代码进行修改的，主要为了移植到电视上做了按键事件和焦点控制。

3.具体代码：

publicclassImage3DSwitchViewextendsLinearLayout{
privateintcurrentPage=0;//定义当前第几页
/**
*图片左右两边的空白间距
*/
publicstaticfinalintIMAGE_PADDING=5;
privatestaticfinalintTOUCH_STATE_REST=0;
privatestaticfinalintTOUCH_STATE_SCROLLING=1;
/**
*滚动到下一张图片的速度
*/
privatestaticfinalintSNAP_VELOCITY=600;

/**
*表示滚动到下一张图片这个动作
*/
privatestaticfinalintSCROLL_NEXT=0;
/**
*表示滚动到上一张图片这个动作
*/
privatestaticfinalintSCROLL_PREVIOUS=1;
/**
*表示滚动回原图片这个动作
*/
privatestaticfinalintSCROLL_BACK=2;
privatestaticHandlerhandler=newHandler();
/**
*控件宽度
*/
publicstaticintmWidth;
privateVelocityTrackermVelocityTracker;//主要用跟踪触摸屏事件(flinging事件和其他gestures手势事件)的速率
privateScrollermScroller;
/**
*图片滚动监听器，当图片发生滚动时回调这个接口
*/
privateOnImageSwitchListenermListener;
/**
*记录当前的触摸状态
*/
privateintmTouchState=TOUCH_STATE_REST;
/**
*记录被判定为滚动运动的最小滚动值
*/
privateintmTouchSlop;
/**
*记录控件高度
*/
privateintmHeight;
/**
*记录每张图片的宽度
*/
privateintmImageWidth;
/**
*记录图片的总数量
*/
privateintmCount;
/**
*记录当前显示图片的坐标
*/
privateintmCurrentImage;
/**
*记录上次触摸的横坐标值
*/
privatefloatmLastMotionX;
/**
*是否强制重新布局
*/
privatebooleanforceToRelayout;
privateint[]mItems;
publicImage3DSwitchView(Contextcontext,AttributeSetattrs){
super(context,attrs);
mTouchSlop=ViewConfiguration.get(getContext()).getScaledTouchSlop();
mScroller=newScroller(context);
//设置可以获得焦点
setFocusable(true);
}
@Override
protectedvoidonLayout(booleanchanged,intl,intt,intr,intb){
if(changed||forceToRelayout){
mCount=getChildCount();
//图片数量必须大于5，不然无法正常显示
if(mCount<5){
return;
}
mWidth=getMeasuredWidth();
mHeight=getMeasuredHeight();
//每张图片的宽度设定为控件宽度的百分之六十
mImageWidth=(int)(mWidth*0.6);
if(mCurrentImage>=0&&mCurrentImagemTouchSlop){
mTouchState=TOUCH_STATE_SCROLLING;
}
break;
caseMotionEvent.ACTION_UP:
default:
mTouchState=TOUCH_STATE_REST;
break;
}
returnmTouchState!=TOUCH_STATE_REST;
}
@Override
publicvoidcomputeScroll(){
if(mScroller.computeScrollOffset()){
scrollTo(mScroller.getCurrX(),mScroller.getCurrY());
refreshImageShowing();
postInvalidate();
}
}
/**
*设置图片滚动的监听器，每当有图片滚动时会回调此接口。
*
*@paramlistener图片滚动监听器
*/
publicvoidsetOnImageSwitchListener(OnImageSwitchListenerlistener){
mListener=listener;
}
/**
*设置当前显示图片的下标，注意如果该值小于零或大于等于图片的总数量，图片则无法正常显示。
*
*@paramcurrentImage图片的下标
*/
publicvoidsetCurrentImage(intcurrentImage){
mCurrentImage=currentImage;
requestLayout();
}
/**
*滚动到下一张图片。
*/
publicvoidscrollToNext(){
if(mScroller.isFinished()){
currentPage++;
intdisX=mImageWidth-getScrollX();
checkImageSwitchBorder(SCROLL_NEXT);
if(mListener!=null){
mListener.onImageSwitch(mCurrentImage);
}
beginScroll(getScrollX(),0,disX,0,SCROLL_NEXT);
}
}
/**
*滚动到上一张图片。
*/
publicvoidscrollToPrevious(){
if(mScroller.isFinished()){
if(currentPage==0){
currentPage=7;
}else
currentPage--;
intdisX=-mImageWidth-getScrollX();
checkImageSwitchBorder(SCROLL_PREVIOUS);
if(mListener!=null){
mListener.onImageSwitch(mCurrentImage);
}
beginScroll(getScrollX(),0,disX,0,SCROLL_PREVIOUS);
}
}
/**
*滚动回原图片。
*/
publicvoidscrollBack(){
if(mScroller.isFinished()){
beginScroll(getScrollX(),0,-getScrollX(),0,SCROLL_BACK);
}
}
/**
*回收所有图片对象，释放内存。
*/
publicvoidclear(){
for(inti=0;imCount-1){
index=index-mCount;
}
returnindex;
}
/**
*刷新所有图片的显示状态，包括当前的旋转角度。
*/
privatevoidrefreshImageShowing(){
for(inti=0;i=mCount){
mCurrentImage=0;
}elseif(action==SCROLL_PREVIOUS&&--mCurrentImage<0){
mCurrentImage=mCount-1;
}
}
/**
*判断是否应该滚动到下一张图片。
*/
privatebooleanshouldScrollToNext(intvelocityX){
returnvelocityX<-SNAP_VELOCITY||getScrollX()>mImageWidth/2;
}
/**
*判断是否应该滚动到上一张图片。
*/
privatebooleanshouldScrollToPrevious(intvelocityX){
returnvelocityX>SNAP_VELOCITY||getScrollX()<-mImageWidth/2;
}
/**
*图片滚动的监听器
*/
publicinterfaceOnImageSwitchListener{
/**
*当图片滚动时会回调此方法
*
*@paramcurrentImage当前图片的坐标
*/
voidonImageSwitch(intcurrentImage);
}
}

publicclassImage3DViewextendsImageView{
/**
*旋转角度的基准值
*/
privatestaticfinalfloatBASE_DEGREE=50f;
/**
*旋转深度的基准值
*/
privatestaticfinalfloatBASE_DEEP=150f;
privateCameramCamera;
privateMatrixmMaxtrix;
privateBitmapmBitmap;
/**
*当前图片对应的下标
*/
privateintmIndex;
/**
*在前图片在X轴方向滚动的距离
*/
privateintmScrollX;
/**
*Image3DSwitchView控件的宽度
*/
privateintmLayoutWidth;
/**
*当前图片的宽度
*/
privateintmWidth;
/**
*当前旋转的角度
*/
privatefloatmRotateDegree;
/**
*旋转的中心点
*/
privatefloatmDx;
/**
*旋转的深度
*/
privatefloatmDeep;
publicImage3DView(Contextcontext,AttributeSetattrs){
super(context,attrs);
mCamera=newCamera();
mMaxtrix=newMatrix();
//设置可获焦&可点击
setFocusable(true);
setClickable(true);
}
/**
*初始化Image3DView所需要的信息，包括图片宽度，截取背景图等。
*/
publicvoidinitImageViewBitmap(){
if(mBitmap==null){
//我们要获取cache首先要通过setDrawingCacheEnable方法开启cache，然后再调用getDrawingCache方法就可以获得view的cache图片了。
setDrawingCacheEnabled(true);
buildDrawingCache();
mBitmap=getDrawingCache();
}
mLayoutWidth=Image3DSwitchView.mWidth;
mWidth=getWidth()+Image3DSwitchView.IMAGE_PADDING*2;
}
/**
*设置旋转角度。
*
*@paramindex当前图片的下标
*@paramscrollX当前图片在X轴方向滚动的距离
*/
publicvoidsetRotateData(intindex,intscrollX){
mIndex=index;
mScrollX=scrollX;
}
/**
*回收当前的Bitmap对象，以释放内存。
*/
publicvoidrecycleBitmap(){
if(mBitmap!=null&&!mBitmap.isRecycled()){
mBitmap.recycle();
}
}
@Override
publicvoidsetImageResource(intresId){
super.setImageResource(resId);
mBitmap=null;
initImageViewBitmap();
}
@Override
publicvoidsetImageBitmap(Bitmapbm){
super.setImageBitmap(bm);
mBitmap=null;
initImageViewBitmap();
}
@Override
publicvoidsetImageDrawable(Drawabledrawable){
super.setImageDrawable(drawable);
mBitmap=null;
initImageViewBitmap();
}
@Override
publicvoidsetImageURI(Uriuri){
super.setImageURI(uri);
mBitmap=null;
initImageViewBitmap();
}
@Override
protectedvoidonDraw(Canvascanvas){
if(mBitmap==null){
//如果Bitmap对象还不存在，先使用父类的onDraw方法进行绘制
super.onDraw(canvas);
}else{
if(isImageVisible()){
//绘图时需要注意，只有当图片可见的时候才进行绘制，这样可以节省运算效率
computeRotateData();
mCamera.save();
mCamera.translate(0.0f,0.0f,mDeep);
mCamera.rotateY(mRotateDegree);
mCamera.getMatrix(mMaxtrix);
mCamera.restore();
mMaxtrix.preTranslate(-mDx,-getHeight()/2);
mMaxtrix.postTranslate(mDx,getHeight()/2);
canvas.drawBitmap(mBitmap,mMaxtrix,null);
}
}
}
/**
*在这里计算所有旋转所需要的数据。
*/
privatevoidcomputeRotateData(){
floatdegreePerPix=BASE_DEGREE/mWidth;
floatdeepPerPix=BASE_DEEP/((mLayoutWidth-mWidth)/2);
switch(mIndex){
case0:
mDx=mWidth;
mRotateDegree=360f-(2*mWidth+mScrollX)*degreePerPix;
if(mScrollX<-mWidth){
mDeep=0;
}else{
mDeep=(mWidth+mScrollX)*deepPerPix;
}
break;
case1:
if(mScrollX>0){
mDx=mWidth;
mRotateDegree=(360f-BASE_DEGREE)-mScrollX*degreePerPix;
mDeep=mScrollX*deepPerPix;
}else{
if(mScrollX<-mWidth){
mDx=-Image3DSwitchView.IMAGE_PADDING*2;
mRotateDegree=(-mScrollX-mWidth)*degreePerPix;
}else{
mDx=mWidth;
mRotateDegree=360f-(mWidth+mScrollX)*degreePerPix;
}
mDeep=0;
}
break;
case2:
if(mScrollX>0){
mDx=mWidth;
mRotateDegree=360f-mScrollX*degreePerPix;
mDeep=0;
if(mScrollX>mWidth){
mDeep=(mScrollX-mWidth)*deepPerPix;
}
}else{
mDx=-Image3DSwitchView.IMAGE_PADDING*2;
mRotateDegree=-mScrollX*degreePerPix;
mDeep=0;
if(mScrollX<-mWidth){
mDeep=-(mWidth+mScrollX)*deepPerPix;
}
}
break;
case3:
if(mScrollX<0){
mDx=-Image3DSwitchView.IMAGE_PADDING*2;
mRotateDegree=BASE_DEGREE-mScrollX*degreePerPix;
mDeep=-mScrollX*deepPerPix;
}else{
if(mScrollX>mWidth){
mDx=mWidth;
mRotateDegree=360f-(mScrollX-mWidth)*degreePerPix;
}else{
mDx=-Image3DSwitchView.IMAGE_PADDING*2;
mRotateDegree=BASE_DEGREE-mScrollX*degreePerPix;
}
mDeep=0;
}
break;
case4:
mDx=-Image3DSwitchView.IMAGE_PADDING*2;
mRotateDegree=(2*mWidth-mScrollX)*degreePerPix;
if(mScrollX>mWidth){
mDeep=0;
}else{
mDeep=(mWidth-mScrollX)*deepPerPix;
}
break;
}
}
/**
*判断当前图片是否可见。
*
*@return当前图片可见返回true，不可见返回false。
*/
privatebooleanisImageVisible(){
booleanisVisible=false;
switch(mIndex){
case0:
if(mScrollX<(mLayoutWidth-mWidth)/2-mWidth){
isVisible=true;
}else{
isVisible=false;
}
break;
case1:
if(mScrollX>(mLayoutWidth-mWidth)/2){
isVisible=false;
}else{
isVisible=true;
}
break;
case2:
if(mScrollX>mLayoutWidth/2+mWidth/2
||mScrollX<-mLayoutWidth/2-mWidth/2){
isVisible=false;
}else{
isVisible=true;
}
break;
case3:
if(mScrollX<-(mLayoutWidth-mWidth)/2){
isVisible=false;
}else{
isVisible=true;
}
break;
case4:
if(mScrollX>mWidth-(mLayoutWidth-mWidth)/2){
isVisible=true;
}else{
isVisible=false;
}
break;
}
returnisVisible;
}
}

publicclassMainActivityextendsAppCompatActivity{
privateButtonbtn;
privateImage3DSwitchViewimage3DSwitchView;
@Override
protectedvoidonCreate(BundlesavedInstanceState){
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
btn=(Button)findViewById(R.id.btn);
image3DSwitchView=(Image3DSwitchView)findViewById(R.id.image_switch_view);
btn.setOnKeyListener(newView.OnKeyListener(){
@Override
publicbooleanonKey(Viewv,intkeyCode,KeyEventevent){
if(keyCode==KeyEvent.KEYCODE_DPAD_UP&&event.getAction()==KeyEvent.ACTION_DOWN)
image3DSwitchView.requestFocus();
returntrue;
}
});
//设置监听，并实现接口
image3DSwitchView.setonFocusListener(newImage3DSwitchView.OnFocusListener(){
@Override
publicvoidonFocus(){
btn.requestFocus();
}
@Override
publicvoidsetValue(Stringvalue){
btn.setText(value+"/7");
}

});
}
}

4.自己的成长点：

①响应遥控器按键事件：重写Image3DSwitchView类的dispatchKeyEvent()函数

@Override
publicbooleandispatchKeyEvent(KeyEventevent){
if(event.getAction()==KeyEvent.ACTION_DOWN){
switch(event.getKeyCode()){
//按下键响应回调
caseKeyEvent.KEYCODE_DPAD_DOWN:
if(onFocusListener!=null){onFocusListener.onFocus();}
break;
//按确定键
caseKeyEvent.KEYCODE_DPAD_CENTER:
Toast.makeText(getContext(),"点击了图片"+(currentPage%7+1),Toast.LENGTH_SHORT).show();
break;
//右键
caseKeyEvent.KEYCODE_DPAD_RIGHT:
scrollToNext();
if(onFocusListener!=null){
onFocusListener.setValue((currentPage%7+1)+"");
}
break;
//左键
caseKeyEvent.KEYCODE_DPAD_LEFT:
scrollToPrevious();
if(onFocusListener!=null){
onFocusListener.setValue((currentPage%7+1)+"");
}
break;
}
}
returntrue;
}

注意:要能响应点击事件的前提必须是控件可以获得焦点，所以在构造函数中加上

setFocusable(true);

②回调机制：类似AndroidTV开发：使用RecycleView实现横向的Listview并响应点击事件的代码的原理。越来越发现回调技术的好用：轻松通过接口函数里面的参数把动态变化的变量传递到mainActivity

publicinterfaceOnFocusListener{
voidonFocus();//处理焦点
voidsetValue(Stringvalue);//处理当前页码
}
privateOnFocusListeneronFocusListener;
publicvoidsetonFocusListener(OnFocusListeneronFocusListener){
this.onFocusListener=onFocusListener;
www.nhooo.com/article/140153.htm}
@Override
publicbooleandispatchKeyEvent(KeyEventevent){
if(event.getAction()==KeyEvent.ACTION_DOWN){
switch(event.getKeyCode()){
//按下键响应回调
caseKeyEvent.KEYCODE_DPAD_DOWN:
if(onFocusListener!=null){onFocusListener.onFocus();}
break;
//按确定键
caseKeyEvent.KEYCODE_DPAD_CENTER:
Toast.makeText(getContext(),"点击了图片"+(currentPage%7+1),Toast.LENGTH_SHORT).show();
break;
//右键
caseKeyEvent.KEYCODE_DPAD_RIGHT:
scrollToNext();
if(onFocusListener!=null){
onFocusListener.setValue((currentPage%7+1)+"");
}
break;
//左键
caseKeyEvent.KEYCODE_DPAD_LEFT:
scrollToPrevious();
if(onFocusListener!=null){
onFocusListener.setValue((currentPage%7+1)+"");
}
break;
}
}
returntrue;
}

在acitivity中调用

image3DSwitchView.setonFocusListener(newImage3DSwitchView.OnFocusListener(){
@Override
publicvoidonFocus(){
btn.requestFocus();//让Image3DSwitchView控件下的按钮获得焦点
}
@Override
publicvoidsetValue(Stringvalue){
btn.setText(value+"/7");//给按钮设置第几页/共几页
}
});

5.源码+apk下载地址

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

Android TV开发:实现3D仿Gallery效果的实例代码

热门推荐

随机推荐