Android实现3D层叠式卡片图片展示

2023-08-10 03:42:06 69

本文实例为大家分享了Android实现3D层叠式卡片图片展示的具体代码，供大家参考，具体内容如下

先看效果

好了效果看了，感兴趣的往下看哦！

整体实现思路

1、重写RelativeLayout实现锁定宽高比例的RelativeLayout

2、自定义一个支持滑动的面板继承ViewGroup

3、卡片View绘制

4、页面中使用布局

首先为了更好的展示图片我们重写一下RelativeLayout编写一个锁定宽高比例的RelativeLayout

AutoScaleRelativeLayout

publicclassAutoScaleRelativeLayoutextendsRelativeLayout{
//宽高比例
privatefloatwidthHeightRate=0.35f;

publicAutoScaleRelativeLayout(Contextcontext){
this(context,null);
}

publicAutoScaleRelativeLayout(Contextcontext,AttributeSetattrs){
this(context,attrs,0);
}

publicAutoScaleRelativeLayout(Contextcontext,AttributeSetattrs,intdefStyleAttr){
super(context,attrs,defStyleAttr);
//通过布局获取宽高比例
TypedArraya=context.obtainStyledAttributes(attrs,R.styleable.card,0,0);
widthHeightRate=a.getFloat(R.styleable.card_widthHeightRate,widthHeightRate);
a.recycle();
}

@Override
protectedvoidonMeasure(intwidthMeasureSpec,intheightMeasureSpec){
super.onMeasure(widthMeasureSpec,heightMeasureSpec);

//调整高度
intwidth=getMeasuredWidth();
intheight=(int)(width*widthHeightRate);
ViewGroup.LayoutParamslp=getLayoutParams();
lp.height=height;
setLayoutParams(lp);
}
}

这样我们就编写好了我们想要的父布局

使用方法

接下来就是主要布局，也就是展示图片的布局了

为了实现滑动我们编写一个支持滑动的画板

//事件处理
@Override
publicbooleandispatchTouchEvent(MotionEventev){
intaction=ev.getActionMasked();
//按下时保存坐标信息
if(action==MotionEvent.ACTION_DOWN){
this.downPoint.x=(int)ev.getX();
this.downPoint.y=(int)ev.getY();
}
returnsuper.dispatchTouchEvent(ev);
}

/*touch事件的拦截与处理都交给mDraghelper来处理*/
@Override
publicbooleanonInterceptTouchEvent(MotionEventev){
booleanshouldIntercept=mDragHelper.shouldInterceptTouchEvent(ev);
booleanmoveFlag=moveDetector.onTouchEvent(ev);
intaction=ev.getActionMasked();
if(action==MotionEvent.ACTION_DOWN){
//ACTION_DOWN的时候就对view重新排序
if(mDragHelper.getViewDragState()==ViewDragHelper.STATE_SETTLING){
mDragHelper.abort();
}
orderViewStack();

//保存初次按下时arrowFlagView的Y坐标
//action_down时就让mDragHelper开始工作，否则有时候导致异常
mDragHelper.processTouchEvent(ev);
}

returnshouldIntercept&&moveFlag;
}

@Override
publicbooleanonTouchEvent(MotionEvente){
try{
//统一交给mDragHelper处理，由DragHelperCallback实现拖动效果
//该行代码可能会抛异常，正式发布时请将这行代码加上trycatch
mDragHelper.processTouchEvent(e);
}catch(Exceptionex){
ex.printStackTrace();
}
returntrue;
}
//计算
@Override
protectedvoidonMeasure(intwidthMeasureSpec,intheightMeasureSpec){
measureChildren(widthMeasureSpec,heightMeasureSpec);
intmaxWidth=MeasureSpec.getSize(widthMeasureSpec);
intmaxHeight=MeasureSpec.getSize(heightMeasureSpec);
setMeasuredDimension(
resolveSizeAndState(maxWidth,widthMeasureSpec,0),
resolveSizeAndState(maxHeight,heightMeasureSpec,0));

allWidth=getMeasuredWidth();
allHeight=getMeasuredHeight();
}
//定位
@Override
protectedvoidonLayout(booleanchanged,intleft,inttop,intright,
intbottom){
//布局卡片view
intsize=viewList.size();
for(inti=0;i2){
//备用的view
offset=yOffsetStep*2;
scale=1-SCALE_STEP*2;
}

viewItem.offsetTopAndBottom(offset);
viewItem.setScaleX(scale);
viewItem.setScaleY(scale);
}

//布局底部按钮的View
if(null!=bottomLayout){
intlayoutTop=viewList.get(0).getBottom()+bottomMarginTop;
bottomLayout.layout(left,layoutTop,right,layoutTop
+bottomLayout.getMeasuredHeight());
}

//初始化一些中间参数
initCenterViewX=viewList.get(0).getLeft();
initCenterViewY=viewList.get(0).getTop();
childWith=viewList.get(0).getMeasuredWidth();
}
//onFinishInflate当View中所有的子控件均被映射成xml后触发
@Override
protectedvoidonFinishInflate(){
super.onFinishInflate();
//渲染完成，初始化卡片view列表
viewList.clear();
intnum=getChildCount();
for(inti=num-1;i>=0;i--){
ViewchildView=getChildAt(i);
if(childView.getId()==R.id.card_bottom_layout){
bottomLayout=childView;
initBottomLayout();
}else{
//for循环取view的时候，是从外层往里取
CardItemViewviewItem=(CardItemView)childView;
viewItem.setParentView(this);
viewItem.setTag(i+1);
viewItem.maskView.setOnClickListener(btnListener);
viewList.add(viewItem);
}
}

CardItemViewbottomCardView=viewList.get(viewList.size()-1);
bottomCardView.setAlpha(0);
}

卡片View绘制

privatevoidinitSpring(){
SpringConfigspringConfig=SpringConfig.fromBouncinessAndSpeed(15,20);
SpringSystemmSpringSystem=SpringSystem.create();
springX=mSpringSystem.createSpring().setSpringConfig(springConfig);
springY=mSpringSystem.createSpring().setSpringConfig(springConfig);

springX.addListener(newSimpleSpringListener(){
@Override
publicvoidonSpringUpdate(Springspring){
intxPos=(int)spring.getCurrentValue();
setScreenX(xPos);
parentView.onViewPosChanged(CardItemView.this);
}
});

springY.addListener(newSimpleSpringListener(){
@Override
publicvoidonSpringUpdate(Springspring){
intyPos=(int)spring.getCurrentValue();
setScreenY(yPos);
parentView.onViewPosChanged(CardItemView.this);
}
});
}
//装载数据
publicvoidfillData(CardDataItemitemData){
Glide.with(getContext()).load(itemData.imagePath).into(imageView);


}
/**
*动画移动到某个位置
*/
publicvoidanimTo(intxPos,intyPos){
setCurrentSpringPos(getLeft(),getTop());
springX.setEndValue(xPos);
springY.setEndValue(yPos);
}

/**
*设置当前spring位置
*/
privatevoidsetCurrentSpringPos(intxPos,intyPos){
springX.setCurrentValue(xPos);
springY.setCurrentValue(yPos);
}

接下来我们需要使用它编写Fragment布局

代码中的使用

privatevoidinitView(ViewrootView){
CardSlidePanelslidePanel=(CardSlidePanel)rootView
.findViewById(R.id.image_slide_panel);
cardSwitchListener=newCardSlidePanel.CardSwitchListener(){

@Override
publicvoidonShow(intindex){
Toast.makeText(getContext(),"CardFragment"+"正在显示="+index,Toast.LENGTH_SHORT).show();

}
//type0=右边，-1=左边
@Override
publicvoidonCardVanish(intindex,inttype){
Toast.makeText(getContext(),"CardFragment"+"正在消失="+index+"消失type="+type,Toast.LENGTH_SHORT).show();
}

@Override
publicvoidonItemClick(ViewcardView,intindex){
Toast.makeText(getContext(),"CardFragment"+"卡片点击="+index,Toast.LENGTH_SHORT).show();
}
};
slidePanel.setCardSwitchListener(cardSwitchListener);
prepareDataList();
slidePanel.fillData(dataList);
}
//封装数据
privatevoidprepareDataList(){
intnum=imagePaths.length;
//重复添加数据10次（测试数据太少）
for(intj=0;j<10;j++){
for(inti=0;i
到此主要逻辑代码就编写完了

详细说明代码中已经注释，全部代码请看源码

源码：github源码
源码中的TestCardFragment为使用模板
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

Android实现3D层叠式卡片图片展示

热门推荐

随机推荐