Android开发仿微信发朋友圈浏览图片效果实例代码

先看一下效果吧：

下面就来说一下具体怎么实现的：

实现思路

• 1.首先我们要获取数据源，数据源就是我们的每条说说（包括姓名、标题、图片数组）

• 2.自定义适配器（ListView嵌套着GridView）

• 3.图片点击浏览图片（Fragment+ViewPager）

具体实现

1.初始化数据源，设置适配器，看一下代码：

public class MyActivity extends Activity {    /*图片显示列表*/    private ListView listView;    /*图片URL数组*/    private List<ContentBean> contentBeans;    /*说说适配器*/    private MyAdapter adapter;      /**     * Called when the activity is first created.     */    @Override    public void onCreate(Bundle savedInstanceState) {      super.onCreate(savedInstanceState);      setContentView(R.layout.main);      initData();      initViews();    }      /**     * 初始化数据     */    private void initData(){      contentBeans = new ArrayList<ContentBean>();      ArrayList<String> imgUrls1 = new ArrayList<String>();      imgUrls1.add("http://7xojuc.com1.z0.glb.clouddn.com/110H2E40-6.jpg?attname=&e=1448288962&token=KDsCqUAWz3P-YT6In6oPnT56Eh2cig4zgQd12SJ_:AlTjfYD9SBFOdB4jmmZuKXAMOp8");      ContentBean cb1 = new ContentBean(1,"java","Sun Microsystems",imgUrls1);      contentBeans.add(cb1);        ArrayList<String> imgUrls2 = new ArrayList<String>();      imgUrls2.add("http://7xojuc.com1.z0.glb.clouddn.com/110H2E40-6.jpg?attname=&e=1448288962&token=KDsCqUAWz3P-YT6In6oPnT56Eh2cig4zgQd12SJ_:AlTjfYD9SBFOdB4jmmZuKXAMOp8");      imgUrls2.add("http://7xojuc.com1.z0.glb.clouddn.com/110H2E40-6.jpg?attname=&e=1448288962&token=KDsCqUAWz3P-YT6In6oPnT56Eh2cig4zgQd12SJ_:AlTjfYD9SBFOdB4jmmZuKXAMOp8");      imgUrls2.add("http://7xojuc.com1.z0.glb.clouddn.com/110H2E40-6.jpg?attname=&e=1448288962&token=KDsCqUAWz3P-YT6In6oPnT56Eh2cig4zgQd12SJ_:AlTjfYD9SBFOdB4jmmZuKXAMOp8");      ContentBean cb2 = new ContentBean(2,"OC","Stepstone",imgUrls2);      contentBeans.add(cb2);        ArrayList<String> imgUrls3 = new ArrayList<String>();      imgUrls3.add("http://7xojuc.com1.z0.glb.clouddn.com/110H2E40-6.jpg?attname=&e=1448288962&token=KDsCqUAWz3P-YT6In6oPnT56Eh2cig4zgQd12SJ_:AlTjfYD9SBFOdB4jmmZuKXAMOp8");      imgUrls3.add("http://7xojuc.com1.z0.glb.clouddn.com/110H2E40-6.jpg?attname=&e=1448288962&token=KDsCqUAWz3P-YT6In6oPnT56Eh2cig4zgQd12SJ_:AlTjfYD9SBFOdB4jmmZuKXAMOp8");      imgUrls3.add("http://7xojuc.com1.z0.glb.clouddn.com/110H2E40-6.jpg?attname=&e=1448288962&token=KDsCqUAWz3P-YT6In6oPnT56Eh2cig4zgQd12SJ_:AlTjfYD9SBFOdB4jmmZuKXAMOp8");      imgUrls3.add("http://7xojuc.com1.z0.glb.clouddn.com/110H2E40-6.jpg?attname=&e=1448288962&token=KDsCqUAWz3P-YT6In6oPnT56Eh2cig4zgQd12SJ_:AlTjfYD9SBFOdB4jmmZuKXAMOp8");      imgUrls3.add("http://7xojuc.com1.z0.glb.clouddn.com/110H2E40-6.jpg?attname=&e=1448288962&token=KDsCqUAWz3P-YT6In6oPnT56Eh2cig4zgQd12SJ_:AlTjfYD9SBFOdB4jmmZuKXAMOp8");      imgUrls3.add("http://7xojuc.com1.z0.glb.clouddn.com/110H2E40-6.jpg?attname=&e=1448288962&token=KDsCqUAWz3P-YT6In6oPnT56Eh2cig4zgQd12SJ_:AlTjfYD9SBFOdB4jmmZuKXAMOp8");      imgUrls3.add("http://7xojuc.com1.z0.glb.clouddn.com/110H2E40-6.jpg?attname=&e=1448288962&token=KDsCqUAWz3P-YT6In6oPnT56Eh2cig4zgQd12SJ_:AlTjfYD9SBFOdB4jmmZuKXAMOp8");      imgUrls3.add("http://7xojuc.com1.z0.glb.clouddn.com/110H2E40-6.jpg?attname=&e=1448288962&token=KDsCqUAWz3P-YT6In6oPnT56Eh2cig4zgQd12SJ_:AlTjfYD9SBFOdB4jmmZuKXAMOp8");      imgUrls3.add("http://7xojuc.com1.z0.glb.clouddn.com/110H2E40-6.jpg?attname=&e=1448288962&token=KDsCqUAWz3P-YT6In6oPnT56Eh2cig4zgQd12SJ_:AlTjfYD9SBFOdB4jmmZuKXAMOp8");      ContentBean cb3 = new ContentBean(3,"python","Guido van Rossum",imgUrls3);      contentBeans.add(cb3);    }        private void initViews(){      listView = (ListView) findViewById(R.id.lv_my);      adapter = new MyAdapter(MyActivity.this,contentBeans);      listView.setAdapter(adapter);    }  }

这里面的图片是我上传到七牛的网络图片，加载图片是用ImageLoader,下面也有具体的ImageLoader配置。 在说说列表适配器中去设置图片的适配器，图片的GridView是重写了一个不能滑动的GridView，重写一下OnMeasure();

public class MyAdapter extends BaseAdapter {      private Context context;    private List<ContentBean> data;      public MyAdapter(Context context, List<ContentBean> data) {      this.context = context;      this.data = data;    }      @Override    public int getCount() {      return data.size();    }      @Override    public Object getItem(int i) {      return data.get(i);    }      @Override    public long getItemId(int i) {      return i;    }      @Override    public View getView(int i, View view, ViewGroup viewGroup) {      ViewHolder holder;      if (view == null) {        holder = new ViewHolder();        view = View.inflate(context, R.layout.item, null);        holder.gridView = (NoScrollGridView) view.findViewById(R.id.gridview);        holder.tvName = (TextView) view.findViewById(R.id.tv_name);        holder.tvTitle = (TextView) view.findViewById(R.id.tv_title);        view.setTag(holder);      } else {        holder = (ViewHolder) view.getTag();      }        final ContentBean bean = data.get(i);        holder.tvName.setText(bean.getName());      holder.tvTitle.setText(bean.getTitle());        if (data != null && data.size() > 0) {        holder.gridView.setAdapter(new ImageGridAdapter(context, bean.getImgUrls()));      }      /**       * 图片列表点击事件       */      holder.gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {        @Override        public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {          Intent intent = new Intent(context, ImagePagerActivity.class);          intent.putExtra(ImagePagerActivity.EXTRA_IMAGE_URLS, (Serializable) bean.getImgUrls());          intent.putExtra(ImagePagerActivity.EXTRA_IMAGE_INDEX, i);          context.startActivity(intent);        }      });        return view;    }      class ViewHolder {      TextView tvName, tvTitle;      NoScrollGridView gridView;    }  }

3.然后就是图片浏览，这个网上也有好多的Demo，也有详细的讲解，直接拽过来用就可以了，下面的图片数量是监听setOnPageChangeListener（）来改变下面的图片索引值

/**   * 图片查看器   */  public class ImagePagerActivity extends FragmentActivity {    private static final String STATE_POSITION = "STATE_POSITION";    public static final String EXTRA_IMAGE_INDEX = "image_index";     public static final String EXTRA_IMAGE_URLS = "image_urls";      private HackyViewPager mPager;    private int pagerPosition;    private TextView indicator;      @Override     public void onCreate(Bundle savedInstanceState) {      super.onCreate(savedInstanceState);      setContentView(R.layout.image_detail_pager);        pagerPosition = getIntent().getIntExtra(EXTRA_IMAGE_INDEX, 0);      ArrayList<String> urls = getIntent().getStringArrayListExtra(EXTRA_IMAGE_URLS);        mPager = (HackyViewPager) findViewById(R.id.pager);      ImagePagerAdapter mAdapter = new ImagePagerAdapter(getSupportFragmentManager(), urls);      mPager.setAdapter(mAdapter);      indicator = (TextView) findViewById(R.id.indicator);        CharSequence text = getString(R.string.viewpager_indicator, 1, mPager.getAdapter().getCount());      indicator.setText(text);      // 更新下标      mPager.setOnPageChangeListener(new OnPageChangeListener() {          @Override        public void onPageScrollStateChanged(int arg0) {        }          @Override        public void onPageScrolled(int arg0, float arg1, int arg2) {        }          @Override        public void onPageSelected(int arg0) {          CharSequence text = getString(R.string.viewpager_indicator, arg0 + 1, mPager.getAdapter().getCount());          indicator.setText(text);        }        });      if (savedInstanceState != null) {        pagerPosition = savedInstanceState.getInt(STATE_POSITION);      }        mPager.setCurrentItem(pagerPosition);    }      @Override    public void onSaveInstanceState(Bundle outState) {      outState.putInt(STATE_POSITION, mPager.getCurrentItem());    }      private class ImagePagerAdapter extends FragmentStatePagerAdapter {        public ArrayList<String> fileList;        public ImagePagerAdapter(FragmentManager fm, ArrayList<String> fileList) {        super(fm);        this.fileList = fileList;      }        @Override      public int getCount() {        return fileList == null ? 0 : fileList.size();      }        @Override      public Fragment getItem(int position) {        String url = fileList.get(position);        return ImageDetailFragment.newInstance(url);      }      }  }

图片Fragment的详细界面，里面有长按点击事件，和图片加载的状态

package com.hankkin.WeiXinLookImgsDemo.activty;    import android.graphics.Bitmap;  import android.os.Bundle;  import android.support.v4.app.Fragment;  import android.view.LayoutInflater;  import android.view.View;  import android.view.ViewGroup;  import android.widget.ImageView;  import android.widget.ProgressBar;  import android.widget.Toast;    import com.hankkin.WeiXinLookImgsDemo.R;  import com.nostra13.universalimageloader.core.ImageLoader;  import com.nostra13.universalimageloader.core.assist.FailReason;  import com.nostra13.universalimageloader.core.listener.SimpleImageLoadingListener;  import com.others.PhotoViewAttacher;    /**   * 单张图片显示Fragment   */  public class ImageDetailFragment extends Fragment {    private String mImageUrl;    private ImageView mImageView;    private ProgressBar progressBar;    private PhotoViewAttacher mAttacher;      public static ImageDetailFragment newInstance(String imageUrl) {      final ImageDetailFragment f = new ImageDetailFragment();        final Bundle args = new Bundle();      args.putString("url", imageUrl);      f.setArguments(args);        return f;    }      @Override    public void onCreate(Bundle savedInstanceState) {      super.onCreate(savedInstanceState);      mImageUrl = getArguments() != null ? getArguments().getString("url") : null;    }      @Override    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {      final View v = inflater.inflate(R.layout.image_detail_fragment, container, false);      mImageView = (ImageView) v.findViewById(R.id.image);      mAttacher = new PhotoViewAttacher(mImageView);        mAttacher.setOnPhotoTapListener(new PhotoViewAttacher.OnPhotoTapListener() {          @Override        public void onPhotoTap(View arg0, float arg1, float arg2) {          getActivity().finish();        }      });      mAttacher.setOnLongClickListener(new View.OnLongClickListener() {        @Override        public boolean onLongClick(View view) {          Toast.makeText(getActivity().getApplicationContext(),"保存",Toast.LENGTH_SHORT).show();          return false;        }      });      progressBar = (ProgressBar) v.findViewById(R.id.loading);      return v;    }      @Override    public void onActivityCreated(Bundle savedInstanceState) {      super.onActivityCreated(savedInstanceState);        ImageLoader.getInstance().displayImage(mImageUrl, mImageView, new SimpleImageLoadingListener() {        @Override        public void onLoadingStarted(String imageUri, View view) {          progressBar.setVisibility(View.VISIBLE);        }          @Override        public void onLoadingFailed(String imageUri, View view, FailReason failReason) {          String message = null;          switch (failReason.getType()) {          case IO_ERROR:            message = "下载错误";            break;          case DECODING_ERROR:            message = "图片无法显示";            break;          case NETWORK_DENIED:            message = "网络有问题，无法下载";            break;          case OUT_OF_MEMORY:            message = "图片太大无法显示";            break;          case UNKNOWN:            message = "未知的错误";            break;          }          Toast.makeText(getActivity(), message, Toast.LENGTH_SHORT).show();          progressBar.setVisibility(View.GONE);        }          @Override        public void onLoadingComplete(String imageUri, View view, Bitmap loadedImage) {          progressBar.setVisibility(View.GONE);          mAttacher.update();        }      });    }  }

忘了ImageLoader的初始化工作了，给大家加上吧，我写到Application里了。

private MyApplication context;      @Override    public void onCreate() {      super.onCreate();      context = this;      initImageLoader(context);    }      /**     * 初始化Imageloader     * by Hankkin at:2015-11-22 23:20:29     * @param context     */    public static void initImageLoader(Context context){      DisplayImageOptions options = new DisplayImageOptions.Builder()          .showImageOnLoading(R.drawable.ic_launcher)          .showImageOnFail(R.drawable.ic_launcher)          .resetViewBeforeLoading(false) // default          .delayBeforeLoading(0)          .cacheInMemory(true) // default          .cacheOnDisk(true) // default          .considerExifParams(true) // default          .imageScaleType(ImageScaleType.IN_SAMPLE_POWER_OF_2) // default          .bitmapConfig(Bitmap.Config.ARGB_8888) // default          .displayer(new SimpleBitmapDisplayer()) // default          .handler(new Handler()) // default          .build();      File picPath = new File(Environment.getExternalStorageDirectory().getPath() + File.separator + "weixinlookimgdemo" + File.separator + "files");        ImageLoaderConfiguration config = new ImageLoaderConfiguration.Builder(context)          .memoryCacheExtraOptions(480, 800) // default = device screen dimensions          .diskCacheExtraOptions(480, 800, null)          .threadPoolSize(3) // default          .threadPriority(Thread.NORM_PRIORITY - 1) // default          .tasksProcessingOrder(QueueProcessingType.FIFO) // default          .denyCacheImageMultipleSizesInMemory()          .memoryCache(new LruMemoryCache(2 * 1024 * 1024))          .memoryCacheSize(2 * 1024 * 1024)          .memoryCacheSizePercentage(13) // default          .diskCache(new UnlimitedDiscCache(picPath)) // default          .diskCacheSize(50 * 1024 * 1024)          .diskCacheFileCount(1000)          .diskCacheFileNameGenerator(new HashCodeFileNameGenerator()) // default          .imageDownloader(new BaseImageDownloader(context)) // default          .imageDecoder(new BaseImageDecoder(true)) // default          .defaultDisplayImageOptions(options) // default          .writeDebugLogs()          .build();      // Initialize ImageLoader with configuration.      ImageLoader.getInstance().init(config);    }

以上就是关于Android仿微信发朋友圈浏览图片效果的全部内容，希望对大家学习Android软件编程有所帮助。

以上就是Android开发仿微信发朋友圈浏览图片效果实例代码的详细内容，更多内容请关注技术你好其它相关文章！