這篇文章主要給大家介紹了關於Android輪播圖點擊圖片放大效果的實現方法,文中通過示例代碼介紹的非常詳細,對各位Android開發者們具有一定的參考學習價值,需要的朋友們下面來一起學習學習吧
前言
最近項目中需要實現輪播圖顯示商品圖片,當用戶點擊商品圖片的時候,需要圖片放大顯示,當然用戶還能進行多張圖片的滑動切換,放大,縮小圖片等操作,實現起來相對還是比較簡單的,話不多說,咱們是用代碼說話的,直接上代碼。
實現步驟:
1.效果圖的展示
2.項目中添加相關的依賴
3.主界面實現輪播圖的效果
4.點擊輪播圖進入圖片放大展示頁面
5.圖片放大展示頁面所需的適配器
6.獲取fragment需要展示圖片的url
7.圖片縮放時遇到Bug解決
實現過程:
1.效果圖的展示
2.項目中添加相關的依賴
implementation 'com.youth.banner:banner:1.4.9' implementation 'com.github.bumptech.glide:glide:4.5.0' implementation 'com.commit451:PhotoView:1.2.4'
3.主界面實現輪播圖的效果
public class MainActivity extends AppCompatActivity implements OnBannerListener { private Banner banner; private ArrayList<String> list_path; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); initView(); initData(); initListener(); } private void initView() { banner = findViewById(R.id.banner); } private void initData() { setBanner();//設置輪播圖 } private void initListener() { } /** * 設置輪播圖 */ private void setBanner() { //放圖片地址的集合 list_path = new ArrayList<>(); //設置圖片數據 list_path.add("https://sami-1256315447.picgz.myqcloud.com/article/201908/2a919def19fc47e3aa0d75d8c227ab1b.jpg"); list_path.add("https://sami-1256315447.picgz.myqcloud.com/article/201908/d027d1efc0564c44bb979ba0bd21f560.jpg"); list_path.add("https://sami-1256315447.picgz.myqcloud.com/article/201908/bbb930d66e5a48baa8d3c143544d7631.jpg"); list_path.add("https://sami-1256315447.picgz.myqcloud.com/article/201908/fb1721b8c9be4da9949fcdd26fc902a2.jpg"); list_path.add("https://sami-1256315447.picgz.myqcloud.com/article/201908/08b58dde9b284638b44e2d03c4cb9acf.jpg"); list_path.add("https://sami-1256315447.picgz.myqcloud.com/article/201908/d3caeb6129ee43df87f5c1e1058d96fc.jpg"); list_path.add("https://sami-1256315447.picgz.myqcloud.com/article/201908/9fd01c4add07473db31ba850f20a7232.jpg"); list_path.add("http://a.hiphotos.baidu.com/image/pic/item/00e93901213fb80e3b0a611d3fd12f2eb8389424.jpg"); //設置內置樣式,共有六種可以點入方法內逐一體驗使用。 banner.setBannerStyle(BannerConfig.NUM_INDICATOR); //設置圖片加載器,圖片加載器在下方 banner.setImageLoader(new ImgLoader()); //設置圖片網址或地址的集合 banner.setImages(list_path); //設置輪播的動畫效果,內含多種特效,可點入方法內查找後內逐一體驗 banner.setBannerAnimation(Transformer.Default); //設置輪播間隔時間 banner.setDelayTime(3000); //設置是否爲自動輪播,默認是“是” banner.isAutoPlay(true); //設置指示器的位置,小點點,左中右。 banner.setIndicatorGravity(BannerConfig.CENTER) //以上內容都可寫成鏈式佈局,這是輪播圖的監聽。比較重要。方法在下面。 .setOnBannerListener(this) //必須最後調用的方法,啓動輪播圖。 .start(); } //輪播圖的監聽方法 @Override public void OnBannerClick(int position) { Intent intent = new Intent(this, BigImgActivity.class); intent.putStringArrayListExtra("imgData", list_path); intent.putExtra("clickPosition", position); startActivity(intent); } //自定義的圖片加載器 private class ImgLoader extends ImageLoader { @Override public void displayImage(Context context, Object path, ImageView imageView) { Glide.with(context).load((String) path).into(imageView); } } }
4.點擊輪播圖進入圖片放大展示頁面
public class BigImgActivity extends AppCompatActivity { private ViewPagerFixed viewPager; private TextView tvNum; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_big_img); initView(); } private void initView() { viewPager = findViewById(R.id.viewpager); tvNum = findViewById(R.id.tv_num); //接收圖片數據及位置 final ArrayList<String> imgData = getIntent().getStringArrayListExtra("imgData"); int clickPosition = getIntent().getIntExtra("clickPosition", 0); //添加適配器 PhotoPagerAdapter viewPagerAdapter = new PhotoPagerAdapter(getSupportFragmentManager(), imgData); viewPager.setAdapter(viewPagerAdapter); viewPager.setCurrentItem(clickPosition);//設置選中圖片位置 viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() { @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { tvNum.setText(String.valueOf(position + 1) + "/" + imgData.size()); } @Override public void onPageSelected(int position) { } @Override public void onPageScrollStateChanged(int state) { } }); } }
5.圖片放大展示頁面所需的適配器
/** * 滑動圖片ViewPager適配器 */ public class PhotoPagerAdapter extends FragmentPagerAdapter { private final ArrayList<String> urlList; public PhotoPagerAdapter(FragmentManager fm, ArrayList<String> urlList) { super(fm); this.urlList=urlList; } @Override public Fragment getItem(int position) { return PhotoFragment.newInstance(urlList.get(position)); } @Override public int getCount() { return urlList.size(); } }
6.獲取fragment需要展示圖片的url
public class PhotoFragment extends Fragment { private String url; private PhotoView mPhotoView; /** * 獲取這個fragment需要展示圖片的url * * @param url * @return */ public static PhotoFragment newInstance(String url) { PhotoFragment fragment = new PhotoFragment(); Bundle args = new Bundle(); args.putString("url", url); fragment.setArguments(args); return fragment; } @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); url = getArguments().getString("url"); } @Nullable @Override public View onCreateView(LayoutInflater inflater, final ViewGroup container, Bundle savedInstanceState) { View view = inflater.inflate(R.layout.fragment_img, container, false); mPhotoView = view.findViewById(R.id.photoview); //設置縮放類型,默認ScaleType.CENTER(可以不設置) // mPhotoView.setScaleType(ImageView.ScaleType.CENTER); //長按事件 mPhotoView.setOnLongClickListener(new View.OnLongClickListener() { @Override public boolean onLongClick(View view) { //Toast.makeText(getActivity(), "長按事件", Toast.LENGTH_SHORT).show(); return true; } }); //點擊事件 mPhotoView.setOnPhotoTapListener(new PhotoViewAttacher.OnPhotoTapListener() { @Override public void onPhotoTap(View view, float x, float y) { //Toast.makeText(getActivity(), "點擊事件,真實項目中可關閉activity", Toast.LENGTH_SHORT).show(); getActivity().finish(); } }); Glide.with(getContext()) .load(url) // .placeholder(R.mipmap.ic_launcher)//加載過程中圖片未顯示時顯示的本地圖片 // .error(R.mipmap.ic_launcher)//加載異常時顯示的圖片 //.centerCrop()//圖片圖填充ImageView設置的大小 // .fitCenter()//縮放圖像測量出來等於或小於ImageView的邊界範圍,該圖像將會完全顯示 .into(mPhotoView); return view; } }
7.圖片縮放時遇到Bug解決
在測試的過程中,對放大的圖片進行縮放的時候,遇到下面的Bug:
java.lang.IllegalArgumentException: pointerIndex out of range
在做多點觸控放大縮小,操作自己所繪製的圖形時發生這個異常,如果是操作圖片的放大縮小多點觸控不會出現這個錯誤
這個bug是Android系統原因 。
問題解決方案:
自定義ViewPager,重寫onTouchEvent 和onInterceptTouchEvent
public class ViewPagerFixed extends android.support.v4.view.ViewPager { public ViewPagerFixed(Context context) { super(context); } public ViewPagerFixed(Context context, AttributeSet attrs) { super(context, attrs); } @Override public boolean onTouchEvent(MotionEvent ev) { try { return super.onTouchEvent(ev); } catch (IllegalArgumentException ex) { ex.printStackTrace(); } return false; } @Override public boolean onInterceptTouchEvent(MotionEvent ev) { try { return super.onInterceptTouchEvent(ev); } catch (IllegalArgumentException ex) { ex.printStackTrace(); } return false; } }
佈局文件:
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#fff"> <com.showly.testimagedemo.view.ViewPagerFixed android:id="@+id/viewpager" android:layout_width="match_parent" android:layout_height="match_parent" /> <TextView android:id="@+id/tv_num" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:textColor="#ffffff" android:textSize="30sp" /> </RelativeLayout>
實現過程就這樣完成了。
需要Demo源碼:點擊這裏。
總結
以上就是這篇文章的全部內容了,希望本文的內容對大家的學習或者工作具有一定的參考學習價值,謝謝大家對神馬文庫的支持。