Android開發仿微信發朋友圈瀏覽圖片效果實例代碼-微信開發-PHP中文網

首頁

微信小程式

微信開發

Android開發仿微信發朋友圈瀏覽圖片效果實例代碼

高洛峰

Mar 23, 2017 pm 01:30 PM

這篇文章主要介紹了Android仿微信發朋友圈瀏覽圖片效果的相關資料,需要的朋友可以參考下

先看一下效果吧：

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配置。

2.看一下適配器內容
在說說列表適配器中去設定圖片的適配器，圖片的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開發仿微信發朋友圈瀏覽圖片效果實例代碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

AI Hentai Generator

免費產生 AI 無盡。

熱工具

VSCode Windows 64位元下載

微軟推出的免費、功能強大的一款IDE編輯器

MantisBT

Mantis是一個易於部署的基於Web的缺陷追蹤工具，用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。

ZendStudio 13.5.1 Mac

強大的PHP整合開發環境

Dreamweaver Mac版

視覺化網頁開發工具

MinGW - Minimalist GNU for Windows

這個專案正在遷移到osdn.net/projects/mingw的過程中，你可以繼續在那裡關注我們。 MinGW：GNU編譯器集合（GCC）的本機Windows移植版本，可自由分發的導入函式庫和用於建置本機Windows應用程式的頭檔；包括對MSVC執行時間的擴展，以支援C99功能。 MinGW的所有軟體都可以在64位元Windows平台上運作。

Android開發仿微信發朋友圈瀏覽圖片效果實例代碼

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

熱門文章

熱工具

VSCode Windows 64位元下載

MantisBT

ZendStudio 13.5.1 Mac

Dreamweaver Mac版

MinGW - Minimalist GNU for Windows

熱門話題

Android開發仿微信發朋友圈瀏覽圖片效果實例代碼

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

熱門文章

熱工具

VSCode Windows 64位元 下載

MantisBT

ZendStudio 13.5.1 Mac

Dreamweaver Mac版

MinGW - Minimalist GNU for Windows

熱門話題

VSCode Windows 64位元下載