最近項目中需要實作輪播圖顯示商品圖檔,當使用者點選商品圖檔的時候,需要圖檔放大顯示,當然使用者還能進行多張圖檔的滑動切換,放大,縮小圖檔等操作,實作起來相對還是比較簡單的,話不多說,咱們是用代碼說話的,直接上代碼。
實作步驟:
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 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