SQLの窓

2015年07月10日


インターネットからアイコン画像を取得してリストビューを表示する

Google が「Android Developer Tools (ADT) in Eclipse」の開発とサポートを2015年末で終了するので、過去の中途半端なコードを Android Studio でテストして書き直しました。

ArrayAdapter を継承したカスタムな ListView 内でアイコン画像を表示するサンプルです。できる限り無駄な記述は省いたつもりです。内部のプラベートなクラスを使うので、参照はどこからでも可能な変数に任せて、AsyncTask では引数による受け渡しをしていません。また、ArrayAdapter 内でも、ListViewActivity からの参照で全てまかなえています。



※ インターネットにアクセスするので、AndroidManifest.xml に必要な定義を追加しています
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="sample.lightbox.listviewactivity" >

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name=".ListViewActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
    <uses-permission android:name="android.permission.INTERNET"/>

</manifest>


画面には、 TextView と ImageView を設置しています
lightbox.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:paddingTop="1dp"
              android:paddingBottom="1dp"
              android:paddingLeft="8dp"
              android:paddingRight="8dp">

    <ImageView
        android:id="@+id/icon"
        android:layout_width="60dp"
        android:layout_height="60dp" />

    <TextView
        android:id="@+id/text1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:textSize="30dp"
        android:paddingLeft="5dp"
        android:paddingRight="5dp"/>

</LinearLayout>

ListViewActivity.java
package sample.lightbox.listviewactivity;

import android.app.Activity;
import android.content.Intent;
import android.graphics.drawable.Drawable;
import android.net.Uri;
import android.os.AsyncTask;
import android.os.Bundle;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.TextView;

import java.io.InputStream;
import java.net.URL;

public class ListViewActivity extends Activity {

	// 画像表示用 MyArratAdapter
	MyArrayAdapter adapter = null;
	// ListView
	ListView listView = null;

	// MyArratAdapter 用プライベートクラス
	private class MyLinkData {
		String myText;
		String myUrl;
		String myIconUrl;
		Drawable myDrawable = null;

		MyLinkData( String myUrl, String myText, String myIconUrl ) {
			this.myText = myText;
			this.myUrl = myUrl;
			this.myIconUrl = myIconUrl;
		}
	}

	// R.layout.lightbox を使った MyLinkData 専用 ArrayAdapter
	private class MyArrayAdapter extends ArrayAdapter<MyLinkData> {

		public MyArrayAdapter() {
			// MyArrayAdapter に必要なのは ListViewActivity のインスタンスのみです
			// ( 実際はそれも必要ありませんが、内部の初期化の都合で渡さないとエラーになります )
			super(ListViewActivity.this, 0);
		}

		@Override
		public View getView(int position, View convertView, ViewGroup parent) {

			// 継承元の ArrayAdapter の内部とほぼ同等の行の view の処理
			View rowView = convertView;
			if (rowView == null) {
				LayoutInflater inflater = ListViewActivity.this.getLayoutInflater();
				rowView = inflater.inflate(R.layout.lightbox, null);
			}

			// R.layout.lightbox 用のデータ
			MyLinkData myLinkData = MyArrayAdapter.this.getItem(position);
			// R.layout.lightbox 用のコンテンツへデータをセット
			// 1) 名前
			TextView textView1 = (TextView) rowView.findViewById(R.id.text1);
			textView1.setText(myLinkData.myText);
			// 2) アイコン画像
			ImageView imageView = (ImageView) rowView.findViewById(R.id.icon);
			imageView.setImageDrawable(myLinkData.myDrawable);

			return rowView;
		}
	}

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_list_view);

		listView = (ListView)ListViewActivity.this.findViewById(R.id.listView);

		// リストビューに表示させる文字列の配列( URL )
		// 画像は Google にある(長い)ので短縮しています
		final MyLinkData[] myLinks = {
			new MyLinkData( "http://winofsql.jp",
				"SQLの窓",
				"https://goo.gl/zDLKbz" ),
			new MyLinkData( "https://www.google.co.jp/",
				"Google",
				"https://goo.gl/t2AYIL"),
			new MyLinkData( "http://www.yahoo.co.jp/",
				"Yahoo! JAPAN",
				"https://goo.gl/oF41g6")
		};

		// リストビュー用のアダプターを作成
		adapter = new MyArrayAdapter();
		// 以下は、画面の行数をオーバーさせる為に追加(3x3)しています
		adapter.addAll(myLinks);
		adapter.addAll(myLinks);
		adapter.addAll(myLinks);

		// 非同期インターネットアクセス
		// 画像はあらかじめ全て取得しておきます
		new AsyncTask<Void,Void,Void>() {
			@Override
			protected Void doInBackground(Void... params) {

					int count = adapter.getCount();
					for( int i = 0;  i < count; i++ ) {
						try {
							URL url = new URL( adapter.getItem(i).myIconUrl );
							InputStream is = (InputStream)url.getContent();
							adapter.getItem(i).myDrawable = Drawable.createFromStream(is, "");
						}
						catch(Exception e) {
							Log.i("lightbox", "error:" + adapter.getItem(i).myIconUrl );
						}
					}

				return null;
			}

			@Override
			protected void onPostExecute(Void aVoid) {
				// 画像を全て取得してからリストビューにデータ( アダプター ) をセット
				listView.setAdapter(adapter);
			}
		}.execute();


		// リストビューのアイテムがクリックされた時の処理
		listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
			@Override
			public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
				ListView listView = (ListView) parent;
				// クリックされたアイテムを取得
				// MyLinkData をセットしているので、MyLinkData として取り出す
				MyLinkData item = (MyLinkData) listView.getItemAtPosition(position);
				// LogCatに表示
				Log.i("lightbox", item.myUrl);
				Log.i("lightbox", item.myText);
				Log.i("lightbox", Integer.toString(position));

				// URL を開く
				startActivity( new Intent(Intent.ACTION_VIEW, Uri.parse(item.myUrl)) );

			}
		});
	}

}


主画面
<RelativeLayout 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:paddingLeft="@dimen/activity_horizontal_margin"
                android:paddingRight="@dimen/activity_horizontal_margin"
                android:paddingTop="@dimen/activity_vertical_margin"
                android:paddingBottom="@dimen/activity_vertical_margin"
                tools:context=".ListViewActivity">

    <ListView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/listView"
        android:layout_alignParentStart="true"/>
</RelativeLayout>



【1 Android Studioの最新記事】
posted by lightbox at 2015-07-10 19:36 | 1 Android Studio | このブログの読者になる | 更新情報をチェックする
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

CSS ドロップシャドウの参考デモ
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり