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 設計圖

Bmob後端雲+ImageLoader架構實作圖文清單Bmob後端雲+ImageLoader架構實作圖文清單

3.如何實作圖文清單

3.1在Bmob後端雲應用資料庫中建立表

注冊Bmob帳号：

在網址欄輸入www.bmob.cn或者在百度輸入Bmob進行搜尋，打開Bmob官網後，點選右上角的“注冊”，在跳轉頁面填入你的姓名、郵箱、設定密碼，确認後到你的郵箱激活Bmob賬戶，你就可以用Bmob輕松開發應用了。

網站背景建立應用

登入賬号進入bmob背景後，點選背景界面左上角“建立應用”，在彈出框輸入你應用的名稱，然後确認，你就擁有了一個等待開發的應用。

Bmob後端雲+ImageLoader架構實作圖文清單Bmob後端雲+ImageLoader架構實作圖文清單

擷取應用密鑰和下載下傳SDK

選擇你要開發的應用，進入該應用

Bmob後端雲+ImageLoader架構實作圖文清單Bmob後端雲+ImageLoader架構實作圖文清單

擷取應用Application ID

在跳轉頁面，進入設定/應用密鑰，點選複制，即可得到Application ID

Bmob後端雲+ImageLoader架構實作圖文清單Bmob後端雲+ImageLoader架構實作圖文清單

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 描述：每列的）

Bmob後端雲+ImageLoader架構實作圖文清單Bmob後端雲+ImageLoader架構實作圖文清單

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效果截圖

Bmob後端雲+ImageLoader架構實作圖文清單Bmob後端雲+ImageLoader架構實作圖文清單

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

Bmob後端雲+ImageLoader架構實作圖文清單Bmob後端雲+ImageLoader架構實作圖文清單

Bmob後端雲+ImageLoader架構實作圖文清單

1.了解什麼是Bmob後端雲

2.了解什麼是ImageLoader開源架構

2.1特征

2.2 設計圖

3.如何實作圖文清單

3.1在Bmob後端雲應用資料庫中建立表

注冊Bmob帳号：

網站背景建立應用

擷取應用密鑰和下載下傳SDK

擷取應用Application ID

SDK導入

配置AndroidManifest.xml

配置ContentProvider

初始化BmobSDK

建立list表

3.2在項目中建立list類

3.3在項目中導入ImageLoader架構

3.4編寫ListView擴充卡

3.5批量的從Bmob雲後端的資料庫擷取資料

3.6效果截圖

4.資料參考

繼續閱讀

Bmob 推送功能Demo

利用Bmob雲更新APP

用Bmob搭建簡單的伺服器步驟

Bmob(wechatApp)--查詢資料1.查詢所有資料2.查詢第一條資料3.根據id查詢4.條件查詢5.分頁查詢6.查詢指定字段

Bmob(wechatApp)--對象的增删改1.建立對象2.添加資料3.修改資料4.删除資料

Android Bmob後端雲簡單使用-增删改查一、增二、删三、改四、查

購買Bmob源碼小程式配置使用文檔

Bmob踩坑集合

Bmob導入DEMO的各種辛酸史（下）

listview實作圓角

Android查缺補漏之ListView

ListView在Activity和Fragment中的顯示和使用

第三方開源庫：imageLoader的使用

QT實作資料總管總結

Android Floating header(懸浮的分組頭)背景技術分析ItemDecoration實作Floating HeaderItemDecoration實作可點選的Floating Header如何判斷item類型是header還是普通資料如何擷取item view的綁定資料總結git

Android – ListView 中添加按鈕，動态删除添加ItemView的操作