Android之旅: Android 元件(Glide、GridView) 如何使用原生套件下載JSON 的資料

心情小品：

禮拜五結束了貴公司的面試，忐忑不安的心理持續到了今天，

中午人潮人海的休息時間看的莫名感動，因為真希望我能成為裡面其中一份子

成為秉持著熱誠、專業、來服務客戶的一份子

相信只有努力練習是不會騙人的，為自己的人生努力，也未未來的公司多一份戰力

所以美好的假日還是持續跟APP說 Hello囉 ^^。

如何使用第三方程式庫 Retrofit 下載Json資料(進入)

Android 元件 Glide、GridView

1.作業前準備：

Step1. Android Studio→先進行環境設定加入網路權限

詳細位置：Android Manifest

程式碼：<uses-permission android:name="android.permission.INTERNET" />

Step2. Android Studio→先進行環境設定，並加入第三方程式庫

compile 'com.google.code.gson:gson:2.2.4'

compile 'com.github.bumptech.glide:glide:3.7.0'

compile 'com.squareup.okhttp:okhttp:2.0.0'

詳細位置：設定→Plugins→搜尋"gsonformat"

使用介紹：能自動產生對應到該頁面json格式的類別

Step3. Android Studio→創造類別、Layout

詳細位置：Android Manifest

Class	AnimalBean (用來對應到網路上json格式用) JsonAdapter (因為json沒有Adapter，所以我們要自己做一個Adapter)
Layout	Item.xml (用來顯示每筆資料用的item)

Step4. 啟用google的擴充功能，使得網頁上Json的格式更清晰

工具都準備好了我們開始來實現這個功能吧

2.Layout的布局：

Layout：activity_main

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:paddingBottom="@dimen/activity_vertical_margin"
   android:paddingLeft="@dimen/activity_horizontal_margin"
   android:paddingRight="@dimen/activity_horizontal_margin"
   android:paddingTop="@dimen/activity_vertical_margin"
   android:orientation="vertical"
   tools:context="com.example.andy.app_json.MainActivity">


   <GridView
       android:layout_width="match_parent"
       android:layout_height="432dp"
       android:id="@+id/gridView"
       android:layout_gravity="center_horizontal" />

</LinearLayout>

Layout：item

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:orientation="vertical" android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:weightSum="1">


  <ImageView
       android:adjustViewBounds="true"
       android:src="@drawable/w1"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:id="@+id/iv_item"
        />
</LinearLayout>

3.完成對應網頁上json格式的類別：

詳細位置：Android Studio→java→Class→AnimailBean

使用介紹：利用外掛程式GsonFormat產生對應的類別，並存放在AnimalBean

簡單敘述：複製頁面上一筆資料，到android Studio中，
快捷鍵 alt+insert 開啟外掛程式，並貼入，完整包覆後，按確認

Step1. 複製網頁上其中一筆json的資料

Step2. 貼入外掛程式中，點選需要的選項完成(通常我都會一次選，以防日後所需)

4.開始建立連線 Step1. 建立連線

詳細位置：Android Studio→java→Class→MainActivity

簡單敘述：利用OKHTTP所提供的程式碼 GET A URL下載

並創立一個新的執行緒在背後運作，防止在下載工程卡死在頁面

java：MainActivity

package com.example.andy.app_json;

import android.content.Context;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;
import android.widget.GridView;
import com.squareup.okhttp.OkHttpClient;
import com.squareup.okhttp.Request;
import com.squareup.okhttp.Response;
import java.io.IOException;

public class MainActivity extends AppCompatActivity {
   private Context context;
   private GridView gridView;
   private JsonAdapter adapter;

   @Override
   protected void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.activity_main);
       Initial();
       new RunWork().start();  
   }

   private void Initial() {
       context = this;
       gridView = (GridView) findViewById(R.id.gridView);
       //設定GridView的格式
       gridView.setNumColumns(3);
   }

   //內部類別 RunWork 繼承一個執行緒
   //RunWork 就是一個執行緒
   public class RunWork extends Thread {

       // step1.這段程式碼由OKhttp所提供
       // 分析 http 資料結構標準語法
       // Url是再把網址放入 這時候會發送 request方法給伺服器
      // 伺服器根據你要資料把資料用 response 回傳給你

       String json;
       OkHttpClient client = new OkHttpClient();
       String run(String url) throws IOException {
           Request request = new Request.Builder()
                   .url(url)
                   .build();
           Response response = client.newCall(request).execute();
           return response.body().string();
       }
     
       //step3：創造出step2所要的工作內容
       Runnable r = new Runnable() {


           @Override
           public void run() {
               adapter = new JsonAdapter(context,json);
               gridView.setAdapter(adapter);
               adapter.notifyDataSetChanged();
           }
       };

       //step2.
       // 運用OkHttp run的方法中，放入我們要讀取JSON的網址
       // 放入後再另一個排程， runOnUiThread(r)，
       // runOnUiThread 就好像為了要持續改變 環境UI的方法
       // r就是工作的內容，這時候就要在new Runnable()出來。(上面)

 

       @Override
       public void run() {

           try {
               json = run("http://data.coa.gov.tw/Service/OpenData/AnimalOpenData.aspx?$top=500&$skip=0");
               runOnUiThread(r);
           } catch (IOException e) {
               e.printStackTrace();
           }        
       }
   }
}

3.創建Adapter Step1. 建立連線

詳細位置：Android Studio→java→Class→AnimalAdapter

簡單敘述：因為Json沒有 Adapter，所以我們要繼承一個BaseAdapter使用

java：AnimalAdapter

package com.example.andy.app_json;
import android.content.Context;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import com.bumptech.glide.Glide;
import com.bumptech.glide.load.engine.DiskCacheStrategy;
import com.google.gson.Gson;

public class JsonAdapter extends BaseAdapter{
   //《依賴》把需要用的東西都先宣告起來
   private Context context;
   private AnimalBean[] animalBeen;
   private ImageView m_iv_item;


   //建構子：記得創建方便使用
   public JsonAdapter(Context context , String json) {
       this.context = context;
       animalBeen=new Gson().fromJson(json,AnimalBean[].class);
   }

   @Override  //共有幾筆資料？
   public int getCount() {
       return animalBeen.length;
   }
   @Override     //取得資料的位置
   public Object getItem(int position) {
       return animalBeen[position];
   }
   @Override   //得到Item的ID
   public long getItemId(int position) {
       return position;
   }
   @Override   //設定資料
   public View getView(int position, View convertView, ViewGroup parent) {
       //因為item是一個xml，所以我們必須使用LayoutInflater(打氣筒)，
       // 將這個item，inflate(打氣)，然後膨脹展開這個頁面!
       View v = LayoutInflater.from(context).inflate(R.layout.item,parent,false);

       //膨脹以後我們就可以找到item的位置了
       m_iv_item=(ImageView)v.findViewById(R.id.iv_item);

       //使用Log日誌，來判斷是否下載資料了
       Test_Log_Data();

       String url = animalBeen[position].getAlbum_file();
       
//第三方程式庫 Glide 由google提供
//load：網址
//placeholder ：下載失敗時要顯是什麼圖
//diskCacheStrategy ：是否要存取以下載的
//into ：顯示在哪邊?

      Glide.with(context)
               .load(url)
               .placeholder(R.drawable.w1)
               .diskCacheStrategy(DiskCacheStrategy.RESULT)
               .into(m_iv_item);

       return v;
   }

   private void Test_Log_Data(){
       for (int i=0; i<=animalBeen.length-1;i++) {
           Log.d("tag", "-------------" +(i+1) +"-------------");
           Log.d("tag", animalBeen[i].getAlbum_name().toString());
           Log.d("tag", animalBeen[i].getAnimal_colour().toString());
           Log.d("tag", animalBeen[i].getAnimal_place().toString());
           Log.d("tag", animalBeen[i].getAlbum_file().toString());
       }
   }
}

Step2.透過日誌來檢查資料的內容

我們來看看成果吧

相信大家看了以後才會知道RecyclerView的好用之處對吧?

不然每次都要再找一次View，View都不會重複再利用，

Android之旅

2016年6月5日星期日

Android 元件(Glide、GridView) 如何使用原生套件下載JSON 的資料

心情小品：

如何使用第三方程式庫 Retrofit 下載Json資料(進入)

Android 元件 Glide、GridView

1.作業前準備：

Step1. Android Studio→先進行環境設定加入網路權限

Step2. Android Studio→先進行環境設定，並加入第三方程式庫

Step3. Android Studio→創造類別、Layout

Step4. 啟用google的擴充功能，使得網頁上Json的格式更清晰

Step2. 貼入外掛程式中，點選需要的選項完成(通常我都會一次選，以防日後所需)

Step2.透過日誌來檢查資料的內容

沒有留言:

張貼留言

2016年6月5日 星期日

Android 元件(Glide、GridView) 如何使用原生套件 下載JSON 的資料

心情小品：

如何使用第三方程式庫 Retrofit 下載Json資料(進入)

Android 元件 Glide、GridView

1.作業前準備：

Step1. Android Studio→先進行環境設定 加入網路權限

Step2. Android Studio→先進行環境設定，並加入第三方程式庫

Step3. Android Studio→創造類別、Layout

Step4. 啟用google的擴充功能，使得網頁上Json的格式更清晰

Step2. 貼入外掛程式中，點選需要的選項 完成(通常我都會一次選，以防日後所需)

Step2.透過日誌來檢查資料的內容

沒有留言:

張貼留言

2016年6月5日星期日

Android 元件(Glide、GridView) 如何使用原生套件下載JSON 的資料

Step1. Android Studio→先進行環境設定加入網路權限

Step2. 貼入外掛程式中，點選需要的選項完成(通常我都會一次選，以防日後所需)