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

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

先看效果

好了效果看了,感兴趣的往下看哦!

整体实现思路

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

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

3、卡片View绘制

4、页面中使用布局

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

AutoScaleRelativeLayout

public class AutoScaleRelativeLayout extends RelativeLayout {
 //宽高比例
 private float widthHeightRate = 0.35f;

 public AutoScaleRelativeLayout(Context context) {
  this(context, null);
 }

 public AutoScaleRelativeLayout(Context context, AttributeSet attrs) {
  this(context, attrs, 0);
 }

 public AutoScaleRelativeLayout(Context context, AttributeSet attrs, int defStyleAttr) {
  super(context, attrs, defStyleAttr);
  //通过布局获取宽高比例
  TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.card, 0, 0);
  widthHeightRate = a.getFloat(R.styleable.card_widthHeightRate, widthHeightRate);
  a.recycle();
 }

 @Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
  super.onMeasure(widthMeasureSpec, heightMeasureSpec);

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

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

使用方法

<com.petterp.toos.ImageCard.AutoScaleRelativeLayout
  android:id="@+id/card_top_layout"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  card:widthHeightRate="0.6588">
<!--  widthHeightRate:就是设置宽高的百分比-->
  <ImageView
   android:id="@+id/card_image_view"
   android:layout_width="fill_parent"
   android:layout_height="match_parent"
   android:scaleType="fitXY" />
<!--    这是我们展示的图片-->
  <View
   android:id="@+id/maskView"
   android:layout_width="fill_parent"
   android:layout_height="match_parent"
   android:background="?android:attr/selectableItemBackground"
   android:clickable="true" />
<!--  这个是为了让我们图片上有波纹-->
</com.petterp.toos.ImageCard.AutoScaleRelativeLayout>

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

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

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

 /* touch事件的拦截与处理都交给mDraghelper来处理 */
 @Override
 public boolean onInterceptTouchEvent(MotionEvent ev) {
  boolean shouldIntercept = mDragHelper.shouldInterceptTouchEvent(ev);
  boolean moveFlag = moveDetector.onTouchEvent(ev);
  int action = 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);
  }

  return shouldIntercept && moveFlag;
 }

 @Override
 public boolean onTouchEvent(MotionEvent e) {
  try {
   // 统一交给mDragHelper处理,由DragHelperCallback实现拖动效果
   // 该行代码可能会抛异常,正式发布时请将这行代码加上try catch
   mDragHelper.processTouchEvent(e);
  } catch (Exception ex) {
   ex.printStackTrace();
  }
  return true;
 }
 //计算
 @Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
  measureChildren(widthMeasureSpec, heightMeasureSpec);
  int maxWidth = MeasureSpec.getSize(widthMeasureSpec);
  int maxHeight = MeasureSpec.getSize(heightMeasureSpec);
  setMeasuredDimension(
    resolveSizeAndState(maxWidth, widthMeasureSpec, 0),
    resolveSizeAndState(maxHeight, heightMeasureSpec, 0));

  allWidth = getMeasuredWidth();
  allHeight = getMeasuredHeight();
 }
 //定位
 @Override
 protected void onLayout(boolean changed, int left, int top, int right,
       int bottom) {
  // 布局卡片view
  int size = viewList.size();
  for (int i = 0; i < size; i++) {
   View viewItem = viewList.get(i);
   int childHeight = viewItem.getMeasuredHeight();
   int viewLeft = (getWidth() - viewItem.getMeasuredWidth()) / 2;
   viewItem.layout(viewLeft, itemMarginTop, viewLeft + viewItem.getMeasuredWidth(), itemMarginTop + childHeight);
   int offset = yOffsetStep * i;
   float scale = 1 - SCALE_STEP * i;
   if (i > 2) {
    // 备用的view
    offset = yOffsetStep * 2;
    scale = 1 - SCALE_STEP * 2;
   }

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

  // 布局底部按钮的View
  if (null != bottomLayout) {
   int layoutTop = 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
 protected void onFinishInflate() {
  super.onFinishInflate();
  // 渲染完成,初始化卡片view列表
  viewList.clear();
  int num = getChildCount();
  for (int i = num - 1; i >= 0; i--) {
   View childView = getChildAt(i);
   if (childView.getId() == R.id.card_bottom_layout) {
    bottomLayout = childView;
    initBottomLayout();
   } else {
    // for循环取view的时候,是从外层往里取
    CardItemView viewItem = (CardItemView) childView;
    viewItem.setParentView(this);
    viewItem.setTag(i + 1);
    viewItem.maskView.setOnClickListener(btnListener);
    viewList.add(viewItem);
   }
  }

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

卡片View绘制

private void initSpring() {
  SpringConfig springConfig = SpringConfig.fromBouncinessAndSpeed(15, 20);
  SpringSystem mSpringSystem = SpringSystem.create();
  springX = mSpringSystem.createSpring().setSpringConfig(springConfig);
  springY = mSpringSystem.createSpring().setSpringConfig(springConfig);

  springX.addListener(new SimpleSpringListener() {
   @Override
   public void onSpringUpdate(Spring spring) {
    int xPos = (int) spring.getCurrentValue();
    setScreenX(xPos);
    parentView.onViewPosChanged(CardItemView.this);
   }
  });

  springY.addListener(new SimpleSpringListener() {
   @Override
   public void onSpringUpdate(Spring spring) {
    int yPos = (int) spring.getCurrentValue();
    setScreenY(yPos);
    parentView.onViewPosChanged(CardItemView.this);
   }
  });
 }
 //装载数据
 public void fillData(CardDataItem itemData) {
  Glide.with(getContext()).load(itemData.imagePath).into(imageView);

 }
 /**
  * 动画移动到某个位置
  */
 public void animTo(int xPos, int yPos) {
  setCurrentSpringPos(getLeft(), getTop());
  springX.setEndValue(xPos);
  springY.setEndValue(yPos);
 }

 /**
  * 设置当前spring位置
  */
 private void setCurrentSpringPos(int xPos, int yPos) {
  springX.setCurrentValue(xPos);
  springY.setCurrentValue(yPos);
 }

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

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:card="http://schemas.android.com/apk/res-auto"
    android:background="#fff"
    android:orientation="vertical">

 <com.petterp.toos.ImageCard.CardSlidePanel
  android:id="@+id/image_slide_panel"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  card:bottomMarginTop="38dp"
  card:itemMarginTop="10dp"
  card:yOffsetStep="26dp">

  <LinearLayout
   android:id="@+id/card_bottom_layout"
   android:layout_width="fill_parent"
   android:layout_height="wrap_content"
   android:gravity="center"
   android:orientation="horizontal">

   <Button
    android:background="#03A9F4"
    android:text="右侧移除"
    android:id="@+id/card_left_btn"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
   />

   <Button
    android:background="#03A9F4"
    android:text="右侧移除"
    android:id="@+id/card_right_btn"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginLeft="10dp"
    />
  </LinearLayout>

  <com.petterp.toos.ImageCard.CardItemView
   android:layout_width="match_parent"
   android:layout_height="wrap_content" />

  <com.petterp.toos.ImageCard.CardItemView
   android:layout_width="match_parent"
   android:layout_height="wrap_content" />

  <com.petterp.toos.ImageCard.CardItemView
   android:layout_width="match_parent"
   android:layout_height="wrap_content" />

  <com.petterp.toos.ImageCard.CardItemView
   android:layout_width="match_parent"
   android:layout_height="wrap_content" />

 </com.petterp.toos.ImageCard.CardSlidePanel>

</LinearLayout>

代码中的使用

private void initView(View rootView) {
  CardSlidePanel slidePanel = (CardSlidePanel) rootView
    .findViewById(R.id.image_slide_panel);
  cardSwitchListener = new CardSlidePanel.CardSwitchListener() {

   @Override
   public void onShow(int index) {
    Toast.makeText(getContext(), "CardFragment"+"正在显示=" +index, Toast.LENGTH_SHORT).show();

   }
   //type 0=右边 ,-1=左边
   @Override
   public void onCardVanish(int index, int type) {
    Toast.makeText(getContext(), "CardFragment"+ "正在消失=" + index + " 消失type=" + type, Toast.LENGTH_SHORT).show();
   }

   @Override
   public void onItemClick(View cardView, int index) {
    Toast.makeText(getContext(), "CardFragment"+"卡片点击=" + index, Toast.LENGTH_SHORT).show();
   }
  };
  slidePanel.setCardSwitchListener(cardSwitchListener);
  prepareDataList();
  slidePanel.fillData(dataList);
 }
 //封装数据
 private void prepareDataList() {
  int num = imagePaths.length;
  //重复添加数据10次(测试数据太少)
  for (int j = 0; j < 10; j++) {
   for (int i = 0; i < num; i++) {
    CardDataItem dataItem = new CardDataItem();
    dataItem.imagePath = imagePaths[i];
    dataList.add(dataItem);
   }
  }
 }

到此主要逻辑代码就编写完了

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

源码:github源码

源码中的TestCardFragment 为使用模板

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

(0)

相关推荐

  • Android编程实现下载图片及在手机中展示的方法

    本文实例讲述了Android编程实现下载图片及在手机中展示的方法.分享给大家供大家参考,具体如下: 在项目开发中从互联网上下载图片是经常用到的功能,再次总结一下 1.普通的下载方式 布局文件: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android

  • Android学习教程之九宫格图片展示(13)

    本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下 MainActivity.java代码: package siso.ninegridimg; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; public class MainActivity extends AppCompatActivity { @Override protected void onCrea

  • Android实现轮播图片展示效果

    本文实例为大家分享了Android轮播图片的展示,供大家参考,具体内容如下 实现逻辑 1.创建XML布局文件,使用ViewPager完成轮播图片 2.初始化ViewPager控件,然后为控件设置适配器,创建出来的适配器实现里面的四个方法 3.四个方法分别是getCount isViewFromObject instantiateItem destroyItem 4.在onCreat方法中,加载图片资源,将图片ID存在集合中,使图片能够在页面中显示,(图片之所以能够在页面中显示,是因为在适配器中的

  • Android开发之使用GridView展示图片的方法

    本文实例讲述了Android使用GridView展示图片的方法.分享给大家供大家参考,具体如下: 今天说说GridView的使用. 所谓GvidView翻译过来就是网格布局:是一个ViewGroup以网格显示它的子视图(view)元素,即二维的.可滚动的网格.网格元素通过ListAdapter自动插入到网格. 这个GridView用处特别多,我这里是用来展示广告的.2*3的广告位置. 废话少说先看个效果图,有图就可以说个XX,对吧,大家都懂的. 大家可以看到搜索下面的那6个块,效果布局还行吧,哈

  • Android通过Movie展示Gif格式图片

    本文实例为大家分享Android通过Movie展示Gif格式图片的相关代码,供大家参考,具体内容如下 public class CommonGifView extends View { private Resources mResources; private Movie mMovie; private long startTime = 0; private float widthRatio; private float heightRatio; public CommonGifView(Con

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

    本文实例为大家分享了Android实现3D层叠式卡片图片展示的具体代码,供大家参考,具体内容如下 先看效果 好了效果看了,感兴趣的往下看哦! 整体实现思路 1.重写RelativeLayout 实现 锁定宽高比例的 RelativeLayout 2.自定义一个支持滑动的面板 继承 ViewGroup 3.卡片View绘制 4.页面中使用布局 首先为了更好的展示图片我们重写一下 RelativeLayout 编写一个锁定宽高比例的 RelativeLayout AutoScaleRelativeL

  • Android实现3D标签云简单效果

    本文实例为大家分享了Android实现3D标签云效果展示的具体代码,供大家参考,具体内容如下 一.关于3D标签云 TagCloudView是一个完全基于Android ViewGroup编写的控件,支持将一组View展示为一个3D标签云,并支持全方向滚动. GitHub中的链接地址 (一)效果 页面上标签的数据可以自己定义,数据页面可以滑动选择. (二)AndroidStudio中使用 1.在build.gradle中添加 compile 'com.moxun:tagcloudlib:1.0.3

  • Android从系统Gallery获取图片具体实现

    前言 在Android应用中,经常有场景会需要使用到设备上存储的图片,而直接从路径中获取无疑是非常不便利的.所以一般推荐调用系统的Gallery应用,选择图片,然后使用它.本篇博客将讲解如何在Android中通过系统Gallery获取图片. Gallery应用 Android原生内置了很多App,而Gallery为图库,用于操作设备上的图片,它会在开机的时候主动扫描设备上存储的图片,并可以使用Gallery操作它们.既然要使用Gallery,那么先看看它的AndroidManifest.xml清

  • Android 自定义 HorizontalScrollView 打造多图片OOM 的横向滑动效果(实例代码)

    自从Gallery被谷歌废弃以后,Google推荐使用ViewPager和HorizontalScrollView来实现Gallery的效果.的确HorizontalScrollView可以实现Gallery的效果,但是HorizontalScrollView存在一个很大的问题,如果你仅是用来展示少量的图片,应该是没问题的,但是如果我希望HorizontalScrollView可以想ViewPager一样,既可以绑定数据集(动态改变图片),还能做到,不管多少图片都不会OOM(ViewPager内

  • Android实现从网络获取图片显示并保存到SD卡的方法

    本文实例讲述了Android实现从网络获取图片显示并保存到SD卡的方法.分享给大家供大家参考,具体如下: 问题: 如何不断获取图片并显示出来,达到视频的效果? 代码: public class GetPictureFromInternetActivity extends Activity { private ImageView imageView; public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInst

  • Android二级缓存加载图片实现照片墙功能

    实现二级缓存加载图片的功能,在使用DiskLruCache时,需先在工程中添加名为libcore.io的包,并将DiskLruCache.Java文件放进去.DiskLruCache直接百度下载即可. 在GridView的适配器中,为ImageView添加图片时,先从内存缓存中加载,内存中无缓存的话则在磁盘缓存中加载,磁盘缓存也没有的话开启线程下载,然后将下载的图片缓存到磁盘,内存中.下载的图片最好先进行压缩,文章最后给出了压缩代码,但本例中并未实现压缩. /*二级缓存实现图片墙功能,先在内存中

  • Android中使用imageviewswitcher 实现图片切换轮播导航的方法

    前面写过了使用ViewFlipper和ViewPager实现屏幕中视图切换的效果(ViewPager未实现轮播)附链接: ANDROID中使用VIEWFLIPPER类实现屏幕切换(关于坐标轴的问题已补充更改) Android 中使用 ViewPager实现屏幕页面切换和页面轮播效果 今天我们在换一种实现方式ImageViewSwitcher. ImageSwitcher是Android中控制图片展示效果的一个控件,如:幻灯片效果 ImageSwitcher粗略的理解就是ImageView的选择器

  • Android仿微信微博多图展示效果

    1.简介 这是一个用于实现像微信朋友圈和微博的类似的九宫格图片展示控件,通过自定义viewgroup实现,使用方便. 多图根据屏幕适配,单张图片时需要自己指定图片的宽高: 2.使用方法 引用: compile 'com.w4lle.library:NineLayout:1.0.0' 使用: 在项目的layout文件中添加如下xml即可加入到布局文件 <com.w4lle.library.NineGridlayout android:layout_marginTop="8dp" a

  • Android实现网络加载图片点击大图后浏览可缩放

    本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下 找了一些demo感觉没有自己想要的效果,于是借鉴一些改造一下并记录下来: 1.主Activity public class PictureViewFra extends Activity { private PicGallery gallery; // private ViewGroup tweetLayout; // 弹层 private boolean mTweetShow = false; // 弹层是否

随机推荐