本篇博文的重点是如何将一张图片切成指定行列的小切片,然后进行显示。为了突出切图逻辑,切了一张正方形图片,切出来的也是宽高相等的小切片。为了增强灵活性,使用了SeekBar并指定最大进度值为40来模拟当我们传入N列时,切图逻辑就切出N*N张切片,并封装到List集合中返回。(有密集恐惧症的同学把最大进度值40改小点吧,因为当切片数达到一定数目时,看着确实有感)有了切片的List集合,我们就可以进行显示了,关于显示部分不了本博文中重点,所以我决定采用最容易理解的方式来显示,在XML布局中定义一个LinearLayout,让其orientation为垂直排列,然后循环行数,创建每一行的LinearLayout,让其orientation为水平,然后循环列数,创建每一列的ImageView,为其设置对应位置的切片,最后每循环一列将其添加到对应行的LinearLayout中,而每循环完一行,将其添加到XML布局中定义的那个LinearLayout中,到此就将所有行列的切片显示到了界面上。当然实际开发中我们完全可以把切片与显示的逻辑全部放到一个自定义布局中,但这样的话可能需要自定义布局相关的技术加入进来,增加了本博文的复杂度,同时也干扰了我们对本博文重点的介绍,因此关于自定义的实现方式可能会放到升级版博文中。轻装上阵开始本博文的重点学习。
案例效果:
布局实现:
布局这块首先是一个存放多行多列切片控件的LinearLayout容器,具体的切片控件需要在代码中动态生成并addView到这个容器中,然后就是一个控制图片被切割的多少行多少列的SeekBar,具体布局实现如下:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:id="@+id/ll_pic"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:background="@android:color/darker_gray"
android:orientation="vertical"
android:padding="1dp" >
</LinearLayout>
<SeekBar
android:id="@+id/sb"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/ll_pic"
android:layout_margin="20dp"
android:max="40" />
</RelativeLayout>