Web屋のメモ

WEBサーバーから取得したJSONデータを複数表示　手順６

—

by

あかまこ
in

手順６、レイアウトを綺麗にする

画面の見た目を綺麗にしたい。

今の状態だと10年前くらいにパソコン初心者が作成するホームページの見た目の様になってるので、もうすこし綺麗にしまひょ。

hogehoge_sub.xml を修正するよ。

<?xml version=“1.0” encoding=“utf-8”?>
<LinearLayout
    xmlns:android=“http://schemas.android.com/apk/res/android”
    android:orientation=“vertical”
    android:layout_width=“wrap_content”
    android:layout_height=“fill_parent”
    android:layout_margin=“10dp”
>
    <LinearLayout
        android:orientation=“horizontal”
        android:layout_width=“fill_parent”
        android:layout_height=“wrap_content”
        android:gravity=“center_vertical”
        android:background=“#F0FFF0”
    >
        <ImageView
            android:id=“@+id/itemIcon”
            android:layout_width=“0dip”
            android:layout_weight=“.20”
            android:layout_height=“wrap_content”
            android:adjustViewBounds=“true”
            android:scaleType=“centerInside”
            android:layout_margin=“10dp”
        />
       <TextView
            android:id=“@+id/itemTitle”
            android:layout_width=“0dip”
            android:layout_weight=“.80”
            android:layout_height=“wrap_content”
            android:textSize=“20sp”
            android:textStyle=“bold”
            android:layout_margin=“10dp”
        />
    </LinearLayout>
    <TextView
        android:id=“@+id/itemId”
        android:layout_width=“fill_parent”
        android:layout_height=“wrap_content”
        android:visibility=“gone”
    />
    <TextView
        android:id=“@+id/itemDetail”
        android:layout_width=“fill_parent”
        android:layout_height=“wrap_content”
        android:layout_margin=“20dp”
    />
    <ImageView
        android:id=“@+id/itemImage”
        android:layout_width=“wrap_content”
        android:layout_height=“wrap_content”
        android:scaleType=“fitCenter”
        android:adjustViewBounds=“true”
        android:layout_marginLeft=“10dp”
        android:layout_marginRight=“10dp”
    />
</LinearLayout>

・動作確認

ちょっと綺麗な見た目になったー。

ただ、気になるのは画像読み込み中に画像が読み込まれる予定の箇所に何も表示されないからレイアウトが押しつぶされている。。

画像読み込み中..
下部の記事の画像が先に読み込まれ..
画像を全部読み込み終わってからやっとレイアウトが完成

うーーーん。
なんかちょっとなぁ。
画像が読み込まれる箇所にFacebookアプリみたいに空白の領域（プレースホルダー？）を表示させたいなぁ。

とりあえず画像が読み込まれる箇所にグルグル回転するプログレスバーを表示させたいな。

・プログレスバーを表示

画像が読み込まれるであろう部分にプログレスバーを表示したい。
「バー」といっても、クルクル回るローディング中画像の事です。
こういうの
↓
このクルクル画像が表示されれば「 アレ？なにも表示されない・・バグか。 」となりにくく、ちょっと待つ気持ちになりそう。
Progressbar というクラスを使用すると、くるくる回る画像が表示されます。
 

HogehogeActivity.java を修正

package jp.example.hello;
 
import java.io.IOException;
import java.io.InputStream;
import java.net.HttpURLConnection;
import java.net.MalformedURLException;
import java.net.URL;
 
import org.apache.http.HttpResponse;
import org.apache.http.HttpStatus;
import org.apache.http.client.ClientProtocolException;
import org.apache.http.client.HttpClient;
import org.apache.http.client.methods.HttpGet;
import org.apache.http.impl.client.DefaultHttpClient;
import org.apache.http.util.EntityUtils;
import org.json.JSONArray;
import org.json.JSONObject;
 
import android.app.Activity;
import android.app.ProgressDialog;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.os.AsyncTask;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.ProgressBar;
import android.widget.TextView;
import android.widget.Toast;
 
public class HogehogeActivity extends Activity {
 
    private static final String LogTag = “HogehogeLog”;
    private ProgressDialog dialog;
 
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.hogehoge);
 
        // jsonを取得して解析する
        LoadTask();
    }
 
    private String makeApiUrl(){
        return “http://akamako.com/blogger/sample.php”;
    }
 
    private void LoadTask(){
        // ProgressDialogを作成
        dialog = new ProgressDialog(this);
        dialog.setMessage(“Connect to Server.”);
        dialog.setCancelable(true);
        dialog.show();
 
        try{
            String apiUrl = makeApiUrl();
 
            // コンソールログに出力
            Log.d(LogTag+” apiUrl”,apiUrl);
 
            HttpGet get = new HttpGet(apiUrl);
            HttpClient DefaultHttpClient = new DefaultHttpClient();
            HttpResponse response = DefaultHttpClient.execute(get);
 
            // ステータスコード
            int status = response.getStatusLine().getStatusCode();
            Log.d(LogTag+” status”,String.valueOf(status));
            if (status != HttpStatus.SC_OK) {
                throw new Exception(“Error!”);
            }
 
            // 結果を取得
            String source =    EntityUtils.toString(response.getEntity());
 
            Log.d(LogTag+” source”,source);
 
            // JSONObject という型があるんだって
            JSONObject json = new JSONObject(source);
 
                if (json.get(“items”) == JSONObject.NULL){
                    throw new Exception(“Error!”);
                }
                if (json.get(“count”) == JSONObject.NULL){
                    throw new Exception(“Error!”);
                }
 
            // 記事データ
            JSONArray items = json.getJSONArray(“items”);
 
            // 記事の数
            String count = json.getString(“count”);
 
            if(count.equals(“0”) == true){
                // 記事データが無かったお
            }
 
            // items の中身の数
            int maxI = items.length();
 
            LinearLayout layout = (LinearLayout) findViewById(R.id.hogehoge_layout);
 
            for(int i = 0; i < maxI; i++) {
                // １つ取り出す
                JSONObject item = items.getJSONObject(i);
                // 表示項目を初期化
                String itemId = “”;
                String itemTitle=“”;
                String itemDetail=“”;
                String itemIconUrl=“”;
                String itemImageUrl=“”;
                if(item.has(“id”)) {
                    itemId = item.getString(“id”);
                }
                if(item.has(“title”)) {
                    itemTitle = item.getString(“title”);
                }
                if(item.has(“detail”)) {
                    itemDetail = item.getString(“detail”);
                }
                if(item.has(“icon”)) {
                    itemIconUrl = item.getString(“icon”);
                }
                if(item.has(“image”)) {
                    itemImageUrl = item.getString(“image”);
                }
                Log.d(LogTag + ” itemId”, itemId);
                Log.d(LogTag + ” itemTitle”, itemTitle);
                Log.d(LogTag + ” itemDetail”, itemDetail);
                Log.d(LogTag + ” itemIconUrl”, itemIconUrl);
                Log.d(LogTag + ” itemImageUrl”, itemImageUrl);
 
                // layout/hogehoge_list.xml が1記事のテンプレートです
                View view = getLayoutInflater().inflate(R.layout.hogehoge_sub, null);
                layout.addView(view);
 
                // 各表示項目のスキーマ（？）を取り出す
//                TextView itemId_v = (TextView) view.findViewById(R.id.itemId);
                TextView itemTitle_v = (TextView) view.findViewById(R.id.itemTitle);
                TextView itemDetail_v = (TextView) view.findViewById(R.id.itemDetail);
                ImageView itemIcon_v = (ImageView) view.findViewById(R.id.itemIcon);
                ImageView itemImage_v = (ImageView) view.findViewById(R.id.itemImage);
                // 該当の表示個所に当て込む
//                itemId_v.setText(itemId);
                itemTitle_v.setText(itemTitle);
                itemDetail_v.setText(itemDetail);
 
                // プログレスバーを表示
                ProgressBar progressBarIcon = (ProgressBar) view.findViewById(R.id.progressBarIcon);
                ProgressBar progressBarImage = (ProgressBar) view.findViewById(R.id.progressBarImage);
 
                // 非同期処理
                new LoadImageTask(itemIcon_v,progressBarIcon).execute(itemIconUrl);
                new LoadImageTask(itemImage_v,progressBarImage).execute(itemImageUrl);
 
                // クリックしたときにitemTitleClickListener()を実行する
                itemTitle_v.setClickable(true);
                itemTitle_v.setOnClickListener(itemTitleClickListener(itemId));
 
                // itemTitleをクリックしたときにitemTitleClickListener()を実行する
                itemIcon_v.setClickable(true);
                itemIcon_v.setOnClickListener(itemIconClickListener(itemTitle));
 
            }
            // 接続を解除する
            DefaultHttpClient.getConnectionManager().shutdown();
        }
        catch (ClientProtocolException e){
             Log.d(LogTag + ” ClientProtocolException”, e.getMessage());
        }
        catch (IOException e){
            Log.d(LogTag + ” IOException”, e.getMessage());
        }
        catch(Exception e){
            Log.d(LogTag + ” Exception”, e.getMessage());
        }
 
        if (dialog != null && dialog.isShowing()) {
            dialog.dismiss();
        }
    }
 
    // クリック時に呼ばれる
    private View.OnClickListener itemTitleClickListener(final String itemId){
        return new View.OnClickListener() {
            @Override
            public void onClick(View view){
                Toast.makeText(getApplicationContext(),“itemId =” + itemId ,Toast.LENGTH_SHORT).show();
            }
        };
    }
 
    // クリック時に呼ばれる
    private View.OnClickListener itemIconClickListener(final String string){
        return new View.OnClickListener() {
            @Override
            public void onClick(View view){
                Toast.makeText(getApplicationContext(),“title =” + string ,Toast.LENGTH_SHORT).show();
            }
        };
    }
 
 
    public class LoadImageTask extends AsyncTask<String, Void, Bitmap> {
        // アイコンを表示するビュー
        private ImageView imageView;
        // タスクごとのプログレスバー
        private ProgressBar progressBar;
 
        // コンストラクタ
        public LoadImageTask(ImageView imageView, ProgressBar progressBar) {
            this.imageView = imageView;
            this.progressBar = progressBar;
        }
        // バックグラウンドで行う時間のかかる処理をします。
        @Override
        protected Bitmap doInBackground(String… urls) {
            Bitmap img = null;
            try {
                Log.d(LogTag+” loadImageTask url : “,urls[0]);
                URL imageUrl = new URL(urls[0]);
                HttpURLConnection itemIconCon = (HttpURLConnection)(imageUrl).openConnection();
                InputStream is = itemIconCon.getInputStream();
                img = BitmapFactory.decodeStream(is);
            } catch (MalformedURLException e) {
                e.printStackTrace();
            } catch (IOException e) {
                e.printStackTrace();
            }
            return img;
        }
        // doInBackgroundメソッドの処理終了後、UIスレッドに返します
        @Override
        protected void onPostExecute(Bitmap result) {
 
            // キャンセルされていたらなにもしない
            if (isCancelled()) {
                 result = null;
            }
            if (result != null) {
                if (imageView != null) {
                    progressBar.setVisibility(View.GONE);
                    imageView.setVisibility(View.VISIBLE);
                    imageView.setImageBitmap(result);
                }
            }
        }
    }
}

hogehoge_sub.xml も修正

 

<?xml version=“1.0” encoding=“utf-8”?>
<LinearLayout xmlns:android=“http://schemas.android.com/apk/res/android”
    android:layout_width=“fill_parent”
    android:layout_height=“fill_parent”
    android:layout_margin=“10dp”
    android:orientation=“vertical” >
 
    <LinearLayout
        android:orientation=“horizontal”
        android:layout_width=“fill_parent”
        android:layout_height=“wrap_content”
        android:gravity=“center_vertical”
        android:background=“#F0FFF0”
    >
        <ProgressBar
            android:id=“@+id/progressBarIcon”
            style=“?android:attr/progressBarStyleSmall”
            android:layout_width=“wrap_content”
            android:layout_height=“wrap_content”
            android:adjustViewBounds=“true”
            android:scaleType=“centerInside”
            android:layout_margin=“10dp”
            android:visibility=“visible”
        />
        <ImageView
            android:id=“@+id/itemIcon”
            android:layout_width=“0dip”
            android:layout_weight=“.20”
            android:layout_height=“wrap_content”
            android:adjustViewBounds=“true”
            android:scaleType=“centerInside”
            android:layout_margin=“10dp”
            android:visibility=“gone”
        />
       <TextView
            android:id=“@+id/itemTitle”
            android:layout_width=“0dip”
            android:layout_weight=“.80”
            android:layout_height=“wrap_content”
            android:textSize=“20sp”
            android:textStyle=“bold”
            android:layout_margin=“10dp”
        />
    </LinearLayout>
 
    <LinearLayout
        android:orientation=“vertical”
        android:layout_width=“fill_parent”
        android:layout_height=“wrap_content”
        android:gravity=“center_horizontal”
        android:layout_margin=“10dp”
    >
        <TextView
            android:id=“@+id/itemDetail”
            android:layout_width=“fill_parent”
            android:layout_height=“wrap_content”
            android:layout_marginLeft=“20dp”
            android:layout_marginRight=“20dp”
        />
 
        <ProgressBar
            android:id=“@+id/progressBarImage”
            style=“@id/progressBarImage”
            android:layout_width=“240dp”
            android:layout_height=“240dp”
            android:padding=“100dp”
            android:scaleType=“center”
            android:visibility=“visible” />
 
        <ImageView
            android:id=“@+id/itemImage”
            android:layout_width=“wrap_content”
            android:layout_height=“wrap_content”
            android:scaleType=“fitCenter”
            android:adjustViewBounds=“true”
            android:visibility=“gone”
        />
    </LinearLayout>
</LinearLayout>

・動作確認

 
ぐるぐる、、からの
読み込み完了。

おぉー、WEBサイトっぽい。

Comments

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です