图片切割以及ViewPager刷新

项目中一个展示图片数据的地方，原本的广告是在图片上方的，然后被要求将广告放到图片中间。因为广告是有高度的，所以首先是想将图片切割成上下两块，然后将广告上到中间。

切割图片发现网上有一种很简单的方法，你想切成几块就切成几块，几行代码的事儿，主要用到了Bitmap的一个静态方法，这个方法可以让你从指定位置开始截取指定宽高的的图片。

@param xValue        起始x坐标
@param yValue        起始y坐标
@param pieceWidth    要裁剪的图的宽度
@param pieceHeight   要裁剪的图的宽度
Bitmap.createBitmap(bitmap, xValue, yValue,pieceWidth, pieceHeight)

中间一刀切无非就是(0,1/2h,w,1/2h)，有点像String.subString()，其实图片在内存中就是用一个二维数据来保存的。然后将切割后的图片展示到界面上正美滋滋的时候老板说这不行啊，要是刚好切到了字那不就看不清了，于是将参数一改，中间重叠一部分就可以了。

int width = bitmap.getWidth();
int height = bitmap.getHeight();

//碎片的宽高是一样的和原图片相同。
int splitedWidth = width;
//高度稍微加一点。
int splitedHeight = height/2+overlapping;

//第一片
Bitmap top = Bitmap.createBitmap(bitmap, 0, 0,splitedWidth, splitedHeight);
//第二片 起始位置有变化了 为一半的高度还要减去重叠高度
Bitmap bottom = Bitmap.createBitmap(bitmap, 0, 1/2*height-overlapping,splitedWidth, splitedHeight);

这样发现图片就切割完成了。

图片切割完了后突然发现，卧槽这样不行啊，因为如果是将广告放到页面，每次页面切换(ViewPager)的时候广告就会重新加载，这不sb了嘛。

想了半天，也没想到什么比较优的解决方案，只能在Activity的布局中搞一个显示广告的布局(正中间)和ViewPager用FrameLayout一起套着，然后在ViewPager的Item布局中同样的位置放一块View将上下两个ImageView分开来，产生广告是镶嵌在图片中的假象，不过一翻页就暴露了。

不过这也会有问题，当图片过小的时图片就会在所拥有的空白地方居中显示，然后图片和广告之间有很大的缝隙，所以就在ImageView的外面套一层RelativeLayout，然后将ImageView设置为与父容器底部对齐，这样就差不多上下两块图片都紧挨着广告了。

//layout_acitivity
<FrameLayout
     android:layout_width="match_parent"
     android:layout_height="match_parent">
  <ViewPager
         android:layout_gravity="center_vertical"
         android:id="@+id/view_pager"
         android:layout_width="match_parent"
         android:layout_height="match_parent" />
  <FrameLayout
         android:id="@+id/adContainer"
         android:layout_gravity="center_vertical"
         android:layout_width="match_parent"
         android:layout_height="wrap_content">
  </FrameLayout>
</FrameLayout>

//item_viewpager
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
    android:background="@color/color_white">

    <!--用来展示完整图片 默认是有加载广告的 所以这个默认不可见-->
    <LinearLayout
        android:id="@+id/ll_full"
        android:visibility="gone"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <ImageView
            android:id="@+id/iv"
            android:scaleType="centerCrop"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            />
    </LinearLayout>

    <!--这个是用来展示两半的图片的代码-->
    <LinearLayout
        android:id="@+id/ll_splite"
        android:layout_width="match_parent"
        android:orientation="vertical"
        android:layout_height="match_parent">
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_weight="1"
            android:layout_height="0dp">
            <ImageView
                android:layout_alignParentBottom="true"
                android:id="@+id/top"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />
        </RelativeLayout>

        <FrameLayout
            android:id="@+id/adContainer"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
        </FrameLayout>

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_weight="1"
            android:layout_height="0dp">
            <ImageView
                android:layout_alignParentTop="true"
                android:id="@+id/bottom"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />
        </RelativeLayout>
    </LinearLayout>
</FrameLayout>

用户将广告关闭了后就需要将未切割的图片展示出来，我这使用了一个笨办法，就是将两个小IV和一个大IV用一个FrameLayout来包裹起来，默认显示两个分割后的图片。

当用户关闭了广告后就需要将小IV隐藏掉，让大IV显示出来。但是这里又有问题了，原生的ViewPager会缓存3个页面(数据不太严谨)，所以当显示第一个页面时会预加载第二个页面，这样预加载的也是切割后的图片(Adapter中用一个标记来记录是否切割)，所以当用户在第一个页面关闭了广告的时候，当前页面中间还会在相同位置留下一个广告大小空白区域。而且用户翻到第二页的时候会发现中间还是有个空白区域。参考ListView或者RecyclerView，调用ViewPager的Adapter的notifyDataSetChanged方法发现没个卵用，看下方法源码发现getItemPosition这个方法默认返回POSITION_UNCHANGED，这就意味着默认情况下系统是认为数据无变化的所以不会刷新。于是就重写这个方法，直接返回POSITION_NONE。因为我们刚好需要刷新所有已经缓存了的数据。

@Override
public int getItemPosition(Object obj){
    return POSITION_NONE;
}

如果我们只需要刷新当前页面，可以给View添加tag。

在instantiateItem()方法中给当前页面添加一个tag(当前页面数,int)，然后在getItemPosition判断当参数的tag是不是当前页的index，如果是说明是当前页，如果不是说明是缓存页。

@Override
public Object instantiateItem(ViewGroup container, final int position) {
    View view = LayoutInflater.from(mContext).inflate(R.layout.ids, container,false);
    view.setTag(position);
}
@Override
public int getItemPosition(Object obj){
    //当前页需要刷新
    if(mCurrentPageIndex == (int)(View(obj)).getTag()){
        return POSITION_NONE;
    }
    //其他缓存页面不需要刷新
    return POSITION_UNCHANGED;
}