余秋里简历,快乐男声 董小姐,黄段子笑话
前言
相信很多朋友在开发中都会遇到图片上传的情况，尤其是多图上传，最经典的莫过于微信的图片选择了。所有很多情况下会使用到多图选择，所以就有了这篇文章，今天抽点时间写了个控件。
•支持自定义选择图片的样式
•支持设置图片选择数量
•支持图片预览，删除
•支持图片拍照
先来看看效果
实现分析
假如不定义控件，我们要实现这样一个功能，无非是写个gridview在item点击的时候去显示图片进行选择，在返回界面的时候进行gridview的数据刷新。我们把这些逻辑写在我们自定义的gridview中，就成了一个新的控件。
1、gridview的效果展示，逻辑实现。
我要评论
public class imagepickerview extends gridview{
//图片选择数量
int maximagesize = 9;
//添加item布局
private int noimgresource;
//列选择数量
private int columnnumber = 3;
activity context;
imagesadapter adapter;
list<string> imagelist;//图片选择list
private static final int type_show_add = 0;
private static final int type_no_show_add = 1;
private boolean isshowadd = true;
int imagegridsize;
public void setnoimgresource(int noimgresource) {
this.noimgresource = noimgresource;
}
public void setcolumnnumber(int columnnumber) {
if (columnnumber>5){
columnnumber = 5;
}
this.columnnumber = columnnumber;
this.setnumcolumns(columnnumber);
}
public void setshowadd(boolean showadd) {
isshowadd = showadd;
}
public void setimagelist(list<string> imagelist) {
this.imagelist = imagelist;
adapter.setimagelist(imagelist);
}
public list<string> getimagelist() {
return imagelist;
}
public imagepickerview(context context) {
this(context,null);
}
public imagepickerview(context context, attributeset attrs) {
this(context,attrs,0);
}
/**
* 初始化imagepickerview的一些信息
* @param context
* @param attrs
* @param defstyle
*/
public imagepickerview(context context, attributeset attrs, int defstyle) {
super(context, attrs, defstyle);
this.context = (activity) context;
adapter = new imagesadapter();
this.setadapter(adapter);
if (imagelist==null){
imagelist = new arraylist<>();
}
this.setnumcolumns(columnnumber);
this.setverticalspacing(10);
this.sethorizontalspacing(10);
imagegridsize = (this.context.getwindowmanager().getdefaultdisplay().getwidth() - util.dp2px(context, 2) * 2) / columnnumber;
}
/**
* 提供给外部调用用来再activity返回时获取图片信息
* @param requestcode
* @param resultcode
* @param data
*/
public void onactivityresult(int requestcode, int resultcode, intent data) {
if (data!=null&& !textutils.isempty(data.getstringextra("photopath"))){//拍照
imagelist.add(data.getstringextra("photopath"));
}else if (data!=null&&data.getserializableextra("images")!=null){//图片选择
imagelist = (list<string>) data.getserializableextra("images");
}else{
list<imageitem> list = androidimagepicker.getinstance().getselectedimages();
for (int i=0;i<list.size();i++){
imagelist.add(list.get(i).path);
}
}
androidimagepicker.getinstance().setselectlimit(maximagesize-imagelist.size());
adapter.setimagelist(imagelist);
}
class imagesadapter extends baseadapter {
list<string> imagelist;
public imagesadapter() {
this.imagelist = new arraylist();
}
public void setimagelist(list<string> imagelist) {
this.imagelist = imagelist;
notifydatasetchanged();
}
@override
public int getcount() {
if (isshowadd){
if (imagelist == null || imagelist.isempty()) {
return 1;
}
if (imagelist.size() >= maximagesize) {
return maximagesize;
}
return imagelist.size() + 1;
}
if (imagelist.size() >= maximagesize) {
return maximagesize;
}
return imagelist.size()+1;
}
@override
public string getitem(int position) {
if (isshowadd){
if (position==imagelist.size()){
return null;
}
return imagelist.get(position-1);
}
return imagelist.get(position);
}
@override
public long getitemid(int position) {
return 0;
}
@override
public int getviewtypecount() {
return 2;
}
@override
public int getitemviewtype(int position) {
if (isshowadd){
return position==imagelist.size()?type_show_add:type_no_show_add;
}else{
return type_no_show_add;
}
}
@override
public view getview(final int position, view convertview, viewgroup parent) {
int itemviewtype = getitemviewtype(position);
if(itemviewtype == type_show_add){//当前item为添加图片item
if (noimgresource!=0){//加载用户的添加item布局
convertview = layoutinflater.from(context).inflate(noimgresource, parent, false);
}else {//默认的添加item布局
convertview = layoutinflater.from(context).inflate(r.layout.grid_item_camera, parent, false);
}
convertview.settag(null);
convertview.setonclicklistener(new view.onclicklistener() {
@override
public void onclick(view v) {//点击选择图片
intent intent = new intent(context, imagesgridactivity.class);//图片选择
activity activity = context;
activity.startactivityforresult(intent,1001);
}
});
}else{//普通item，加载图片，并对item设置点击进行预览
final viewholder holder;
if(convertview == null){
convertview = layoutinflater.from(context).inflate(r.layout.image_grid_item, null);
holder = new viewholder();
holder.ivpic = (simpledraweeview)convertview.findviewbyid(r.id.iv_thumb);
holder.cbpanel = convertview.findviewbyid(r.id.thumb_check_panel);
convertview.settag(holder);
}else{
holder = (viewholder) convertview.gettag();
}
convertview.setonclicklistener(new onclicklistener() {
@override
public void onclick(view v) {//将选择的图片与当前postion传过去。
intent intent = new intent(context, previewdelactivity.class);
intent.putextra("images", (serializable) imagelist);
intent.putextra("position",position);
context.startactivityforresult(intent,1002);
}
});
imagerequestbuilder requestbuilder = imagerequestbuilder.newbuilderwithsource(
uri.parse(string.format("file://%s", imagelist.get(position))))
.setresizeoptions(new resizeoptions(imagegridsize, imagegridsize))
.setautorotateenabled(true);
pipelinedraweecontroller controller = (pipelinedraweecontroller) fresco.newdraweecontrollerbuilder()
.setoldcontroller(holder.ivpic.getcontroller())
.setimagerequest(requestbuilder.build())
.build();
holder.ivpic.setcontroller(controller);
}
return convertview;
}
}
class viewholder{
simpledraweeview ivpic;
view cbpanel;
}
}
代码比较简单，都加了注释。在view的初始化方法中获取一些信息和gridview的展示信息，并且设置适配器关联。
在gridview的 item中设置了点击事件，并且提供给外部用来刷新数据的onactivityresult方法。
大家看上面的代码应该就明白了。
2、图片预览和删除
这一步很简单，获取到传过来的imagelist和postion对图片进行展示，在点击删除的时候remove掉imagelist对应的数据，并且刷新viewpager
直接上代码
public class previewdelactivity extends appcompatactivity implements view.onclicklistener {
private static final string tag = imagepreviewactivity.class.getsimplename();
textview mtitlecount;
textview mbtnok;
private imageview backbtn;
list<string> mimagelist;
int mshowitemposition = 0;
viewpager mviewpager;
touchimageadapter madapter ;
@override
protected void oncreate(bundle savedinstancestate) {
super.oncreate(savedinstancestate);
setcontentview(r.layout.activity_preview_del);
mimagelist = (list<string>) getintent().getserializableextra("images");
mshowitemposition = getintent().getintextra("position",0);
mbtnok = (textview) findviewbyid(r.id.btn_del);
backbtn = (imageview) findviewbyid(r.id.btn_backpress);
mbtnok.setonclicklistener(this);
backbtn.setonclicklistener(this);
mtitlecount = (textview) findviewbyid(r.id.tv_title_count);
mtitlecount.settext(mshowitemposition+1+"/" + mimagelist.size());// 图片数量和当前图片信息展示
initview();
androidimagepicker.getinstance().clearselectedimages();
}
private void initview() {
mviewpager = (viewpager)findviewbyid(r.id.viewpager);
madapter = new touchimageadapter(getsupportfragmentmanager());
mviewpager.setadapter(madapter);
mviewpager.setcurrentitem(mshowitemposition, false);//设置显示当前的图片
mviewpager.addonpagechangelistener(new viewpager.onpagechangelistener() {
@override
public void onpagescrolled(int position, float positionoffset, int positionoffsetpixels) {
}
@override
public void onpageselected(int position) {
mtitlecount.settext(position+1+"/" + mimagelist.size());//滑动viewpager时更新显示信息
}
@override
public void onpagescrollstatechanged(int state) {
}
});
}
@override
public void onclick(view v) {
int i = v.getid();
if (i == r.id.btn_del) {//删除按钮点击
madapter.remove(mviewpager.getcurrentitem());//
mtitlecount.settext(mviewpager.getcurrentitem()+1+"/" + mimagelist.size());
if (mimagelist.size()==0){
intent intent = new intent();
intent.putextra("images", (serializable) mimagelist);
setresult(result_ok,intent);
finish();
}
}else if (i==r.id.btn_backpress){//返回
intent intent = new intent();
intent.putextra("images", (serializable) mimagelist);
setresult(result_ok,intent);
finish();
}
}
@override
public boolean onkeydown(int keycode, keyevent event) {
if (keycode==keyevent.keycode_back){
intent intent = new intent();
intent.putextra("images", (serializable) mimagelist);
setresult(result_ok,intent);
finish();
return true;
}
return super.onkeydown(keycode, event);
}
class touchimageadapter extends fragmentstatepageradapter {
public touchimageadapter(fragmentmanager fm) {
super(fm);
}
@override
public int getcount() {
return mimagelist.size();
}
public void remove(int position){
mimagelist.remove(position);
notifydatasetchanged();
}
@override
public int getitemposition(object object) {
return position_none;
}
@override
public fragment getitem(int position) {
singlepreviewfragment fragment = new singlepreviewfragment();
bundle bundle = new bundle();
bundle.putserializable(singlepreviewfragment.key_url, mimagelist.get(position));
fragment.setarguments(bundle);
return fragment;
}
}
@suppresslint("validfragment")
private class singlepreviewfragment extends fragment {
public static final string key_url = "key_url";
private photodraweeview photodraweeview;
private string url;
@override
public void oncreate(bundle savedinstancestate) {
super.oncreate(savedinstancestate);
bundle bundle = getarguments();
url = (string) bundle.getserializable(key_url);
log.i(tag, "=====current show image path:" + url);
photodraweeview = new photodraweeview(getactivity());
photodraweeview.setbackgroundcolor(0xff000000);
viewgroup.layoutparams params = new viewgroup.layoutparams(viewgroup.layoutparams.match_parent,viewgroup.layoutparams.match_parent);
photodraweeview.setlayoutparams(params);
photodraweeview.setonphototaplistener(new onphototaplistener() {
@override
public void onphototap(view view, float x, float y) {
getactivity().finish();
}
});
if (!url.startswith("http://") && !url.startswith("https://")) {
url = "file://"+url;
}
imagerequestbuilder requestbuilder = imagerequestbuilder.newbuilderwithsource(
uri.parse(url))
.setresizeoptions(new resizeoptions(768,1280))
.setautorotateenabled(true);
pipelinedraweecontrollerbuilder controller = fresco.newdraweecontrollerbuilder();
controller.setoldcontroller(photodraweeview.getcontroller());
controller.setimagerequest(requestbuilder.build());
controller.setcontrollerlistener(new basecontrollerlistener<imageinfo>() {
@override
public void onfinalimageset(string id, imageinfo imageinfo, animatable animatable) {
super.onfinalimageset(id, imageinfo, animatable);
if (imageinfo == null) {
return;
}
photodraweeview.update(imageinfo.getwidth(), imageinfo.getheight());
}
});
photodraweeview.setcontroller(controller.build());
}
@override
public view oncreateview(layoutinflater inflater, viewgroup container, bundle savedinstancestate) {
return photodraweeview;
}
}
}
相信大家都能看懂上面代码，用viewpager对图片进行加载，在点击回退和删除完图片的时候把imagelist传回去。
这样在onactivityresult中获取到imagelist，刷新adapter，gridview就重新渲染了。
使用
1、布局中引入imagepickerview
<?xml version="1.0" encoding="utf-8"?> <linearlayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingbottom="@dimen/activity_vertical_margin" android:paddingleft="@dimen/activity_horizontal_margin" android:paddingright="@dimen/activity_horizontal_margin" android:paddingtop="@dimen/activity_vertical_margin" android:orientation="vertical" tools:context="com.qiangyu.test.imagepickerviewdemo.mainactivity"> <com.redare.imagepicker.widget.imagepickerview android:id="@+id/imagepicker" android:layout_width="match_parent" android:layout_height="wrap_content"> </com.redare.imagepicker.widget.imagepickerview> <button android:id="@+id/commit_btn" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="提交"/> </linearlayout>
2、在activity中获得imagepickerview,并且在onactivityresult方法中调用imagepickerview数据刷新方法
imagepicker.onactivityresult(requestcode,resultcode,data);
3、获取选择图片的路径
调用imagepicker.getimagelist()即返回图片选择的list
下面是一段代码示例
public class mainactivity extends appcompatactivity {
private imagepickerview imagepicker;
private button commitbtn;
@override
protected void oncreate(bundle savedinstancestate) {
super.oncreate(savedinstancestate);
setcontentview(r.layout.activity_main);
fresco.initialize(this);
imagepicker = (imagepickerview) findviewbyid(r.id.imagepicker);
commitbtn = (button) findviewbyid(r.id.commit_btn);
commitbtn.setonclicklistener(new view.onclicklistener() {
@override
public void onclick(view v) {
for (int i=0;i<imagepicker.getimagelist().size();i++){
log.d("yqy",imagepicker.getimagelist().get(i));
}
}
});
imagepicker.setnoimgresource(r.layout.add_img);//自定义imagepicker add item样式
imagepicker.setcolumnnumber(5);//设置显示5列
}
@override
protected void onactivityresult(int requestcode, int resultcode, intent data) {
imagepicker.onactivityresult(requestcode,resultcode,data);
}
}
结语
看了imagepickerview的实现，是不是发现一个自定义控件其实也很简单。在我们做自定义控件的时候，其实大部分情况只是在android系统提供的功能上多加一点我们的需求而已。站在巨人的肩膀上，才可以看的更远嘛。
关于图片加载和图片选择本文没有提及，图片加载我参考了文章，感兴趣的朋友可以去github查看，https://github.com/easonline/androidimagepicker。我在自己的demo中对源码做了修改，并统一使用了fresco加载图片。
有需要参考源码的同学请参考：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
Android studio开发小型对话机器人app(实例代码)
Android通过Java sdk的方式接入OpenCv的方法
Android 通过cmake的方式接入opencv的方法步骤
Android Studio finish()方法的使用与解决app点击“返回”(直接退出)
Android 进度条 ProgressBar的实现代码(隐藏、出现、加载进度)
网友评论