代码项目github地址 IMAlbum
封装原则:基础单一原则、简单、无业务耦合
一.产品业务场景
1.发送消息==>选择图片==>本地图片预览+" 勾选、取消选择"按钮、"发送"按钮
2.聊天界面的图片==>点击图片消息类型==>网咯图片预览(支持小图预览)+ "查看聊天图片"按钮 + 长安菜单
3.公众号文章中图片浏览==>点击webview中任意的一张图片==>网咯图片预览(无小图)+ "右上角"菜单按钮 + 长安菜单
4.发表动态选择好照片==>查看选择的照片==>本地图片预览+ 右上角删除按钮
5.动态浏览图片==>网咯图片预览(支持小图预览)+本地图片预览(未发送上传完成的图片预览) + 长安菜单
二.控件封装
滑动预览的基础类 ==> 逻辑类view ==>业务层activity
滑动预览的基础类:viewpager滑动切图、长安、单击;支持显示GIF、显示网络缩略图、本地图片、网络大图.
逻辑类 view:设置图片url数据、初始化viewpager显示位置,暴露接口
public interface IImageActionCallback {
public void onPageSelected(int index);
public void onImageLongClick();
public void onGifLongClick();
public void OnGifOnclick();
public void OnImageOnclick();
}
业务层activity:activity跳转数据传递、通过暴露addview来添加扩展业务控件
三、数据万能匹配
一直有个忽略的问题:由于各个业务图片的实体bean对象不一致,那么怎么达到一变应万变??
有人说定义 一个基类,声明几个变量locatPath、thumbNetPath、originalNetPath.这个方案有点代码洁癖的人都觉得浪费内存.这个方案多了几个变量会给人带来使用问题
定义一个抽象类几个抽象方法
/**
* 图片翻页的数据基础类 *
@author zhangjianlin *
*/
public abstract class ImagePagerUri implements Serializable{
/**
* 网络图片地址
* @return */
public abstract String getImgUrl();
/**
* 本地图片地址;没有填空
* @return
*/
public abstract String getLocalPath();
/**
* 图片的缩略图
* @return
*/
public abstract String getSmallImgUrl();
public String cropFileSchem(String pathFile) {
if(TextUtils.isEmpty(pathFile))return "";
return "file://" + pathFile;
}
}
四、基础的图片浏览activity只负责"显示"与"暴露操作接口"
/**
* * BaseImagesViewPagerFrameLayout ==> ImageDetailViewFrameLayOut ==>
ImageDetailAct ==> ImageDetailMoreAct、ImageDetailDelAct
* 滑动预览的基础类 ==> 逻辑类 ==>业务层
* @Description:业务层
*/
public class ImageDetailAct extends Activity{
protected ImageDetailViewFrameLayOut shop_gallery_relayout;
public IImageActionCallback mIImageActionCallback;
@Override
protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.gallery_image);
shop_gallery_relayout = (ImageDetailViewFrameLayOut) findViewById(R.id.shop_gallery_relayout);
ArrayList mImageList = getExtraImageList();
String mPhotoCheck = getIntent().getStringExtra("imageDetailCheck");
int checkIndex = getIntent().getIntExtra("imageDetailCheckPositon", -1);
if(checkIndex >= mImageList.size())
{checkIndex = 0;}
setAction();
shop_gallery_relayout.setIImageActionCallback(mIImageActionCallback);
shop_gallery_relayout.setImages(mImageList, mPhotoCheck, checkIndex);
}
/**
* @Description:外部传值的方法
* @return
*/
protected ArrayList getExtraImageList()
{
return (ArrayList) getIntent().getSerializableExtra("imageListBean");
}
protected void setAction()
{
}
public void addView(View child)
{
shop_gallery_relayout.addView(child);
}
private void printList(ArrayList mImageList)
{
String strtmp = "";
for(ImagePagerUri mImagePagerUri: mImageList)
{
strtmp += mImagePagerUri.getImgUrl();
}
Log.d("mImageList", strtmp);
}
private void printListLocal(ArrayList mImageList)
{
String strtmp = "";
for(ImagePagerUri mImagePagerUri: mImageList)
{
strtmp += mImagePagerUri.getLocalPath();
}
Log.d("mImageListLocal", strtmp);
}
}
五、业务层实现.关键代码通过继承ImageDetailAct,然后addView把需要"业务逻辑View"加到布局上
以<4.发表动态选择好照片==>查看选择的照片==>本地图片预览+ 右上角删除按钮">为例
public class ImageDetailDelAct extends ImageDetailAct implements OnClickListener {
private View childView = null;
private ImageView title_right_iv;// 删除
private TextView left;
private TextView title;
/** 选择结果，返回为 ArrayList 图片路径集合 */
public static final String EXTRA_RESULT = "imgdel_select_result";
public static final int REQUEST_IMAGE = 13000;
private int PageNum = 0;
@Override
protected void onCreate(Bundle savedInstanceState) {
childView = LayoutInflater.from(this).inflate(R.layout.activity_dynamic_imgdel_item, null);
title_right_iv = (ImageView) childView.findViewById(R.id.title_right_iv);
title_right_iv.setImageResource(R.drawable.icon_dynamic_delete_picture);
title = (TextView) childView.findViewById(R.id.title);
childView.findViewById(R.id.right).setVisibility(View.GONE);
title_right_iv.setVisibility(View.VISIBLE);
title.setVisibility(View.VISIBLE);
title_right_iv.setOnClickListener(this);
childView.findViewById(R.id.left).setVisibility(View.VISIBLE);
childView.findViewById(R.id.left).setOnClickListener(this);
childView.findViewById(R.id.rl_title).setOnClickListener(this);
super.onCreate(savedInstanceState);
addView(childView);
}
@Override
protected void setAction() {
mIImageActionCallback = new IImageActionCallback() {
@Override
public void onPageSelected(int index) {
// TODO Auto-generated method stub
PageNum = index;
title.setText(index + 1 + "/" + shop_gallery_relayout.getPageSize());
}
@Override
public void onImageLongClick() {
// TODO Auto-generated method stub
}
@Override
public void onGifLongClick() {
// TODO Auto-generated method stub
}
@Override
public void OnGifOnclick() {}
@Override
public void OnImageOnclick() {}
};
}
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.title_right_iv:
if (shop_gallery_relayout.getPageSize() > 0) {
shop_gallery_relayout.delImage();
if (shop_gallery_relayout.getPageSize() == 0) {
exitAndResetImgs();
}
} else {
exitAndResetImgs();
}
break;
case R.id.left:
exitAndResetImgs();
break;
case R.id.rl_title:// 防止点了标题之后没有拦截点击事件后会放大
break;
default:
break;
}
}
@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
if (keyCode == KeyEvent.KEYCODE_BACK) {
exitAndResetImgs();
return true;
}
return super.onKeyDown(keyCode, event);
}
private void exitAndResetImgs() {
Intent data = new Intent();
data.putExtra(EXTRA_RESULT, shop_gallery_relayout.getImageUriList());
setResult(Activity.RESULT_OK, data);
finish();
}
}
项目git地址