Android仿微信發(fā)朋友圈瀏覽圖片效果
先看一下效果吧:
下面就來(lái)說(shuō)一下具體怎么實(shí)現(xiàn)的:
實(shí)現(xiàn)思路
- 1.首先我們要獲取數(shù)據(jù)源,數(shù)據(jù)源就是我們的每條說(shuō)說(shuō)(包括姓名、標(biāo)題、圖片數(shù)組)
- 2.自定義適配器(ListView嵌套著GridView)
- 3.圖片點(diǎn)擊瀏覽圖片(Fragment+ViewPager)
具體實(shí)現(xiàn)
1.初始化數(shù)據(jù)源,設(shè)置適配器,看一下代碼:
public class MyActivity extends Activity { /*圖片顯示列表*/ private ListView listView; /*圖片URL數(shù)組*/ private List<ContentBean> contentBeans; /*說(shuō)說(shuō)適配器*/ 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(); } /** * 初始化數(shù)據(jù) */ 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); } }
這里面的圖片是我上傳到七牛的網(wǎng)絡(luò)圖片,加載圖片是用ImageLoader,下面也有具體的ImageLoader配置。
2.看一下適配器內(nèi)容
在說(shuō)說(shuō)列表適配器中去設(shè)置圖片的適配器,圖片的GridView是重寫了一個(gè)不能滑動(dòng)的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())); } /** * 圖片列表點(diǎn)擊事件 */ 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.然后就是圖片瀏覽,這個(gè)網(wǎng)上也有好多的Demo,也有詳細(xì)的講解,直接拽過(guò)來(lái)用就可以了,下面的圖片數(shù)量是監(jiān)聽setOnPageChangeListener()來(lái)改變下面的圖片索引值
/** * 圖片查看器 */ 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); // 更新下標(biāo) 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); } } }
圖片F(xiàn)ragment的詳細(xì)界面,里面有長(zhǎng)按點(diǎn)擊事件,和圖片加載的狀態(tài)
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 = "下載錯(cuò)誤"; break; case DECODING_ERROR: message = "圖片無(wú)法顯示"; break; case NETWORK_DENIED: message = "網(wǎng)絡(luò)有問(wèn)題,無(wú)法下載"; break; case OUT_OF_MEMORY: message = "圖片太大無(wú)法顯示"; break; case UNKNOWN: message = "未知的錯(cuò)誤"; 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); }
以上就是關(guān)于Android仿微信發(fā)朋友圈瀏覽圖片效果的全部?jī)?nèi)容,希望對(duì)大家學(xué)習(xí)Android軟件編程有所幫助。
- Android實(shí)現(xiàn)微信朋友圈發(fā)本地視頻功能
- Android 仿微信朋友圈點(diǎn)贊和評(píng)論彈出框功能
- Android自定義SwipeRefreshLayout高仿微信朋友圈下拉刷新
- Android 高仿微信朋友圈動(dòng)態(tài)支持雙擊手勢(shì)放大并滑動(dòng)查看圖片效果
- Android仿微信朋友圈圖片查看器
- Android仿微信朋友圈點(diǎn)擊加號(hào)添加圖片功能
- Android GridView仿微信朋友圈顯示圖片
- Android仿微信朋友圈點(diǎn)贊和評(píng)論功能
- Android+Html5混合開發(fā)仿微信朋友圈
- Android實(shí)現(xiàn)微信朋友圈圖片和視頻播放
相關(guān)文章
android Launcher AppWidget添加步驟介紹
大家好,本篇文章主要講的是android Launcher AppWidget添加步驟介紹,感興趣的同學(xué)趕快來(lái)看一看吧,對(duì)你有幫助的話記得收藏一下,方便下次瀏覽2022-01-01Android提高之SQLite分頁(yè)表格實(shí)現(xiàn)方法
這篇文章主要介紹了Android提高之SQLite分頁(yè)表格實(shí)現(xiàn)方法,在項(xiàng)目開發(fā)中有很高的實(shí)用價(jià)值,需要的朋友可以參考下2014-08-08Android開發(fā)中聽筒無(wú)法播放音樂(lè)的解決方法
這篇文章主要介紹了Android開發(fā)中聽筒無(wú)法播放音樂(lè)的解決方法,涉及Android權(quán)限控制中的相關(guān)屬性設(shè)置技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2016-10-10Android在不使用數(shù)據(jù)庫(kù)的情況下存儲(chǔ)數(shù)據(jù)的方法
這篇文章主要介紹了Android在不使用數(shù)據(jù)庫(kù)的情況下存儲(chǔ)數(shù)據(jù)的方法,涉及Android存儲(chǔ)數(shù)據(jù)的相關(guān)技巧,需要的朋友可以參考下2015-04-04Android?Studio實(shí)現(xiàn)帶三角函數(shù)對(duì)數(shù)運(yùn)算功能的高級(jí)計(jì)算器
這篇文章主要為大家詳細(xì)介紹了Android?Studio實(shí)現(xiàn)帶三角函數(shù)對(duì)數(shù)運(yùn)算功能的高級(jí)計(jì)算器,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-05-05Android編程實(shí)現(xiàn)將時(shí)間轉(zhuǎn)化成幾分鐘前、幾天前等形式的工具類
這篇文章主要介紹了Android編程實(shí)現(xiàn)將時(shí)間轉(zhuǎn)化成幾分鐘前、幾天前等形式的工具類,涉及Android針對(duì)日期時(shí)間的相關(guān)運(yùn)算與判斷簡(jiǎn)單操作技巧,需要的朋友可以參考下2018-02-02android使用DataBinding來(lái)設(shè)置空狀態(tài)
本篇文章主要介紹了android使用DataBinding來(lái)設(shè)置空狀態(tài),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下。2017-03-03