项目实战（三）：banner加载网络图片，不变形，可缩放可完全显示

Banner图片加载

在项目中难免会遇到遇到轮播图这种功能需求，而大多数都是用Banner去实现。在项目中尽量从后端获取bannerlist列表数据并进行展示，这样进行更新时只需要后台更改即可，而不需要重新编码，测试，发包，上线。。。

布局代码：

 <com.stx.xhb.xbanner.XBanner
                        android:id="@+id/banner"
                        android:layout_width="match_parent"
                        android:layout_height="333dp"
                        app:AutoPlayTime="3000"
                        app:isAutoPlay="true"
                        app:pageChangeDuration="800"
                        app:pointNormal="@drawable/banner_select_no"
                        app:pointSelect="@drawable/banner_select"
                        app:pointsVisibility="true"
                        tools:background="@drawable/icon_img_banner"
                        />

其中app：的属性是自定义属性。在com.stx.xhb.xbanner.XBanner包里的，很多，就不赘述了。

关于自定义属性format的取值，可以去了解一下。

1. AutoPlayTime="3000"：轮播切换时间

2. isAutoPlay="true"：是否轮播

3. pageChangeDuration="800" 图片切换速度

4. pointNormal：指定某一资源

5. pointsVisibility 是否可见

banner实现图片数据绑定：

  mBinding.banner.loadImage((banner, model, view, position) -> {
                CouponDetailsMobile.RspdataBean.DetailImageinfolistBean dataMobile = bannerMobiles.get(position);
                if (ObjectUtils.isNotEmpty(dataMobile)) {
                    ImageView imageView = (ImageView) view;
                    imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
                    RelativeLayout.LayoutParams params= (RelativeLayout.LayoutParams) banner.getLayoutParams();
                    int height=params.height;
                    //占满imageView全部，但图片显示完整 方法一
                    LoadImg.getInstance().loadImg(getActivity, dataMobile.getImg(), imageView, dataMobile.getWidth(), dataMobile.getHeight());
                    //图片显示完整，但是会留白 方法二
//                    LoadImg.getInstance().loadImgBanner(getActivity, dataMobile.getImg(), imageView, dataMobile.getWidth(), dataMobile.getHeight(), height);
                }
            });

loadImage是banner自带的方法，首先从

CouponDetailsMobile.RspdataBean.DetailImageinfolistBean dataMobile = bannerMobiles.get(position)

datamobie获取bannerMobiles.get(position)数据，position是指图片列表里图片的位置，定义一个imageView控件显示图片，

imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);

这个setScaleType属性很重要，他决定了图片在容器里如何显示：

属性值网上有很多，这个图不怎么清晰，不过解释的很好，

方法一：
LoadImg.getInstance().loadImg(getActivity, dataMobile.getImg(), imageView, dataMobile.getWidth(), dataMobile.getHeight());

方法二
LoadImg.getInstance().loadImgBanner(getActivity, dataMobile.getImg(), imageView, dataMobile.getWidth(), dataMobile.getHeight(), height);

这俩个是封装的方法，第一个方法，不改变ImageView控件的setScaleType属性，图片会居中显示，但是图片显示不完整。

第二个方法，imageView.setScaleType(ImageView.ScaleType.FIT_CENTER);

更改属性，是的图片会按照比例缩放展示图片，不过会留白，具体取向与那个就看个人选择。

 /**
     * 图片
     *
     * @param context
     * @param strImg
     * @param imageView
     * @param width     加载图片尺寸,宽，单位px
     * @param height    加载图片尺寸,高，单位px
     */
    public void loadImg(Context context, String strImg, ImageView imageView, int width, int height) {
        if (!ObjectUtils.isEmpty(Utils.checkContext(context))) {
            if (App.DEBUG)

                Log.d("加载图片尺寸", "宽：" + width + "高：" + height);
            GlideApp
                    .with(context)
                    .load(strImg)
                    .placeholder(R.drawable.icon_img_c)
                    .error(R.drawable.icon_img_c_no)
                    .centerCrop()
                    .override(width, height)
                    .into(imageView);
        }
    }

在Gilde方法里设置scaletype无效，记得要先在imageView设置sacleType属性。第二个方法里多用到height属性，是因为banner是固定高度的，传入高度可算出图片显示的宽度。

    /**
     * 图片
     *
     * @param context
     * @param strImg
     * @param imageView
     * @param width     加载图片尺寸,宽，单位px
     * @param height    加载图片尺寸,高，单位px
     */
    public void loadImgBanner(Context context, String strImg, ImageView imageView, int width, int height,int parantHeight) {
        if (!ObjectUtils.isEmpty(Utils.checkContext(context))) {
            if (App.DEBUG)
                Log.d("加载图片尺寸", "宽：" + width + "高：" + height);
            int parantWidth;
            imageView.setScaleType(ImageView.ScaleType.FIT_CENTER);
            parantWidth=(width*parantHeight)/height;
            GlideApp
                    .with(context)
                    .load(strImg)
                    .placeholder(R.drawable.icon_img_c)
                    .error(R.drawable.icon_img_c_no)
                    .override(parantWidth, parantHeight)
                    .fitCenter()
                    .into(imageView);
        }
    }

此外屏幕适配要注意dp和px的转换。网上有很多方法，可以去找找哦，也有封装好的方法可以直接调用。

工作总结，不足之处欢迎指正交流。