Bmob后端云+ImageLoader框架实现图文列表

Bmob后端云+ImageLoader框架实现图文列表

1.了解什么是Bmob后端云

对于很多Android/ios/wp个人移动开发者来说，开发一个具有网络功能的应用不是一件容易的事，不仅需要购买/租赁服务器，还必须掌握一门诸如Java/.net/php这类的服务器开发语言，每开发一款移动应用程序，就必须开发维护对应的服务器程序。这一切对于移动开发者来说，都是一个冗长的噩梦。
如何让移动开发者从繁琐的机械劳动中解脱出来，将更多精力投入到移动应用程序的创意研发，从而不断提升产品质量呢？Bmob移动应用云存储平台的诞生就很好地解决了以上难题。
在Bmob平台上，您只需注册一个帐号，成功后申请创建任意多个数据库，获得对应的Key，下载对应版本的SDK并将其嵌入到移动应用中，便可以调用存取API，进行数据的任意操作。有了Bmob，您在5分钟内就可以学会如何开发一个云存储的移动应用软件，给应用软件快速添加一个安全灵活的后台管理系统，方便您浏览终端保存的各种信息。

2.了解什么是ImageLoader开源框架

ImageLoader是一个开源的UI组件程序，该项目的目的是提供一个可重复使用的仪器为异步图像加载，缓存和显示。

2.1特征

1、多线程下载图片，图片可以来源于网络，文件系统，项目文件夹assets中以及drawable中等。

2、支持随意的配置ImageLoader，例如线程池，图片下载器，内存缓存策略，硬盘缓存策略，图片显示选项以及其他的一些配置

3、支持图片的内存缓存，文件系统缓存或者SD卡缓存

4、根据控件(ImageView)的大小对Bitmap进行裁剪，减少Bitmap占用过多的内存

5、较好的控制图片的加载过程，例如暂停图片加载，重新开始加载图片，一般使用在ListView,GridView中，滑动过程中暂停加载图片，停止滑动的时候去加载图片

6、支持图片下载过程的监听

7、提供在较慢的网络下对图片进行加载

2.2 设计图

3.如何实现图文列表

3.1在Bmob后端云应用数据库中新建表

注册Bmob帐号：

在网址栏输入www.bmob.cn或者在百度输入Bmob进行搜索，打开Bmob官网后，点击右上角的“注册”，在跳转页面填入你的姓名、邮箱、设置密码，确认后到你的邮箱激活Bmob账户，你就可以用Bmob轻松开发应用了。

网站后台创建应用

登录账号进入bmob后台后，点击后台界面左上角“创建应用”，在弹出框输入你应用的名称，然后确认，你就拥有了一个等待开发的应用。

获取应用密钥和下载SDK

选择你要开发的应用，进入该应用

获取应用Application ID

在跳转页面，进入设置/应用密钥，点击复制，即可得到Application ID

SDK导入

1.在 Project 的 build.gradle 文件中添加 Bmob的maven仓库地址

buildscript {
    repositories {
        google()
        jcenter()    
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:3.3.1'
        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}
allprojects {
    repositories {
        google()
        jcenter()
        //Bmob的maven仓库地址--必填
        maven { url "https://raw.github.com/bmob/bmob-android-sdk/master" }
    }
}

task clean(type: Delete) {
    delete rootProject.buildDir
}

2.在app的build.gradle文件中添加依赖文件

dependencies {
    implementation fileTree(include: ['*.jar'], dir: 'libs')
    implementation 'com.android.support:appcompat-v7:28.0.0'
    implementation 'com.android.support.constraint:constraint-layout:1.1.3'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test:runner:1.0.2'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
    implementation 'cn.bmob.android:bmob-sdk:3.6.9'
    implementation 'io.reactivex.rxjava2:rxjava:2.2.2'
    implementation 'io.reactivex.rxjava2:rxandroid:2.1.0'
    implementation 'com.squareup.okio:okio:2.1.0'
    implementation 'com.google.code.gson:gson:2.8.5'
    implementation 'com.squareup.okhttp3:okhttp:3.12.0'
    implementation 'com.nostra13.universalimageloader:universal-image-loader:1.9.5'
}

配置AndroidManifest.xml

在你的应用程序的AndroidManifest.xml文件中添加相应的权限：

    <!--允许联网 -->
    <uses-permission android:name="android.permission.INTERNET" />
    <!--获取GSM（2g）、WCDMA（联通3g）等网络状态的信息  -->
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <!--获取wifi网络状态的信息 -->
    <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
    <!--保持CPU 运转，屏幕和键盘灯有可能是关闭的,用于文件上传和下载 -->
    <uses-permission android:name="android.permission.WAKE_LOCK" />
    <!--获取sd卡写的权限，用于文件上传和下载-->
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <!--允许读取手机状态 用于创建BmobInstallation-->
    <uses-permission android:name="android.permission.READ_PHONE_STATE" />

配置ContentProvider

同样在的AndroidManifest.xml文件中添加相应的权限：

     <provider
        android:name="cn.bmob.v3.util.BmobContentProvider"
        android:authorities="com.example.list_dome.BmobContentProvider">
     </provider>

初始化BmobSDK

在应用的onCreate方法中初始化BmobSDK

 Bmob.initialize(this, "4943e6a9dd93e0df1aee0fc6d54239d9");

新建list表

对以上都配置完成以后，请到应用的数据库中新建list表，此表中有两列分别为
（列名：name 属性：String 描述：每列的文字信息）
（列名：icon 属性：File 描述：每列的）

3.2在项目中新建list类

新建的list类应与在Bmob云后端建立list表一 一对应

public class list extends BmobObject {
    private  String name;
    private BmobFile icon;

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public BmobFile getIcon() {
        return icon;
    }
    public String getIconUrl(){
        return icon.getFileUrl();
    }
    public void setIcon(BmobFile icon) {
        this.icon = icon;
    }
}

其中类中的BmobFile对应表中的File，代码块中的getIconUrl()方法用来获取图片的url。

3.3在项目中导入ImageLoader框架

第一种方法：导入imageloader的jar包
点击跳转到下载地址
第二种方法：在Android Studio中导入依赖使用快捷键Alert+ctrl+shift+s，然后点击Dependencies再点击右面的“+”号选择“Library dependency”，把com.nostra13.universalimageloader:universal-image-loader:1.9.5复制在输入框中。

缓存图片配置（初始化ImageLoader）

imageLoader.init(ImageLoaderConfiguration.createDefault(MainActivity.this));

3.4编写ListView适配器

以下代码是对ListView适配器进行的编写，如果想要了解详细的ListView适配器请点击链接
点击跳转到ListView适配器详细编写博客

实例化ImageLoader对象

 // 创建ImageLoader对象
    private ImageLoader imageLoader = ImageLoader.getInstance();

主页面的布局文件

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="16dp"
    android:paddingRight="16dp"
    android:paddingBottom="16dp"
    android:paddingTop="16dp">
    <ListView
        android:id="@+id/main_list_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </ListView>
</RelativeLayout>

列表每项布局文件

<?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="100dp">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="10dp">

        <ImageView
            android:id="@+id/title_pic"
            android:layout_width="80dp"
            android:layout_height="60dp"
            android:layout_centerVertical="true"
            android:layout_alignParentLeft="true"
            android:src="@mipmap/ic_launcher"/>
        
        <TextView
            android:id="@+id/title_content"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:textSize="16sp"
            android:layout_marginLeft="10dp"
            android:layout_toRightOf="@id/title_pic"
            />

    </RelativeLayout>
</RelativeLayout>

适配器编写

  //适配器用来进行视图与数据的适配作用
   public class NewListAdapter extends BaseAdapter {
        private List<list> lists= new ArrayList<>();

        public NewListAdapter(List<list> list) {
            this.lists=list;
        }

        @Override
        public int getCount() {
            return lists.size();
        }

        @Override
        public Object getItem(int position) {
            return lists.get(position);
        }

        @Override
        public long getItemId(int position) {
            return position;
        }

        @Override
        public View getView(final int position, View convertView, ViewGroup parent) {
            ViewHolder viewHolder = new ViewHolder();
            if (convertView == null) {
                LayoutInflater layoutInflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);
                convertView = layoutInflater.inflate(R.layout.item_news_list, null);
                viewHolder.titleContent = (TextView) convertView.findViewById(R.id.title_content);
                viewHolder.icon = (ImageView) convertView.findViewById(R.id.title_pic);
                convertView.setTag(viewHolder);
            }else {
                viewHolder = (ViewHolder) convertView.getTag();
            }
            // 创建DisplayImageOptions对象并进行相关选项配置
            DisplayImageOptions options = new DisplayImageOptions.Builder()
                    .showImageOnLoading(R.drawable.ic_launcher_background)// 设置图片下载期间显示的图片
                    .showImageForEmptyUri(R.drawable.ic_launcher_background)// 设置图片Uri为空或是错误的时候显示的图片
                    .showImageOnFail(R.drawable.ic_launcher_background)// 设置图片加载或解码过程中发生错误显示的图片
                    .cacheInMemory(true)// 设置下载的图片是否缓存在内存中
                    .cacheOnDisk(true)// 设置下载的图片是否缓存在SD卡中
                    .displayer(new RoundedBitmapDisplayer(20))// 设置成圆角图片
                    .build();// 创建DisplayImageOptions对象
            // 使用ImageLoader加载图片
            imageLoader.displayImage(lists.get(position).getIcon().getFileUrl(),viewHolder.icon);
            viewHolder.titleContent.setText(lists.get(position).getName());
            return  convertView;
        }

        public class  ViewHolder{
            TextView titleContent;
            ImageView icon;
        }
    }

其中displayImage（参数1，参数2）方法用来加载图片，参数1为想要加载图片的url（图片的url通过getFileUrl()方法获取），参数2为ImageView控件。

重写onDestroy()方法回收缓存在内存中的图片

    @Override
    protected void onDestroy() {
        // 回收该页面缓存在内存中的图片
        imageLoader.clearMemoryCache();
        super.onDestroy();
    }

3.5批量的从Bmob云后端的数据库获取数据

  //查询所有数据
    public void queryPage(){
        BmobQuery<list> query = new BmobQuery<>();
        //查询存在“objectId”字段的数据。
        query.addWhereExists("objectId");
        //获取查询数据
        query.findObjects(new FindListener<list>() {
            @Override
            public void done(List<list> list, BmobException e) {
                if (e == null) {
                    try {
                        listView.setAdapter(new NewListAdapter(list));
                        Toast.makeText(MainActivity.this, "更新列为" + list.size()+"条", Toast.LENGTH_LONG).show();
                    }catch (Exception es){
                        es.printStackTrace();
                    }
                }else {
                 Toast.makeText(MainActivity.this, e.toString(), Toast.LENGTH_LONG).show();
                }
            }
        });
    }

其中query.addWhereExists(“objectId”)是用来查询存在“objectId”字段的数据。

3.6效果截图

4.资料参考

此项目的源码链接：https://github.com/huangzichun666/tart
Bmob官方文档参考链接：http://doc.bmob.cn/data/android/index.html
Bmob官方视频教程链接：http://doc.bmob.cn/video/index.html
ImageLoader开源框架详细介绍：https://blog.csdn.net/qq_26446715/article/details/79767493
ListView适配器参考链接：https://www.cnblogs.com/smyhvae/p/4477079.html

以上是本片博客主要的介绍内容，希望通过这篇博客可以帮助更多的人，此博客也一定存在诸多的问题，希望读者留言赐教，我也会尽一步完善这篇博客。

作者:黄子淳
原文地址：https://blog.csdn.net/zgkxydxzhfch/article/details/87989609