ListViewの表示を独自レイアウトで表示

ListViewの表示を独自レイアウトで表示

使い道としては、画像つきリスト表示など

クックパッドやYouTubeみたいに
サムネイル表示などに使えそう

ListViewに独自レイアウトを表示するには
表示を司るAdapterクラスを拡張する必要がある

まずは、レイアウトファイルを作成して
項目用レイアウトを作成

<LinearLayout
xmlns:android="http://scheams.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">

<ImageView
android:id="@+id/image"
android:layout_width="60dip"
android:layout_height="60dip"/>

<TextView
android:id="@+id/text"
android:layout_width=""wrap_content
android:layout_height="wrap_content"
android:choiceMode="singleChoice"/>
</LinearLayout>

android:choiceMode=”singleChoice”
は、単一行のみチェック可能にする
参考サイトは
http://blogand.stack3.net/archives/83

今回は、リストアイテムとして
画像と文字にしたかったので
60×60の画像と
文字の大きさにあわせるTextViewにしている

次に、Javaで独自レイアウトの設定
ListViewに独自レイアウトを設定するため
ArrayAdapterクラスを継承し
getView()をOverrideする

public class CustomAdapter extends ArrayAdapter<CustomData>{

private layoutInflater mlayoutInflater;

public CustomAdapter(Context context,int  textViewResourceId, List<CustomData> objects){
super(context,textViewResourceId, objects);
mlayoutInflater = (layoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
}

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

//特定の行 position のデータを得る
CustomData item = (CustomData)getItem(position);

//同じ行に表示されるViewは使い回しされるので初回だけ生成
if(null == convertView){

convertView = mlayoutInflater.inflate(R.layout.list_item,null);
}

//データをViewの各widgetにセット
ImageView imageView;
imageView = (ImageView)findViewById(R.id.image);
imageView.setImageBitmap(item.getTextData());

return convertView;
}

}

これで、画像つきのリスト表示ができる

ディズニーeチケットとコンビニ印刷

【お得技シリーズ010】東京ディズニーランド&シー お得技ベストセレクション (晋遊舎ムック)
を参考に
インターネットからチケットの購入をしました

これは eチケット意外の場合
現地でチケットを引換する必要があり並ぶことになります

さすがに貴重なお休みを並んで削っていくのはかなり厳しそうなので
ならばなくて済みそうな eチケットを購入

問題点は2つあり
パソコンとプリンターなどの印刷するものがほしいということ
そして印刷するのに時間制限があること

サイトでは flash を使っているので非対応なブラウザだから
スマホではダメかと思って firefox など別のブラウザで試したけど
ダメなのでパソコンから購入

ここまではいいけど、問題は残り2つの問題

まず印刷の期限
これはどうやら購入した当日に印刷しないとダメ
ただし
PDFファイルにしておけば、後で印刷も可能です

やり方については
プリンターなくてもOK!eチケットをコンビニで印刷
を参考にするとわかりやすいです

問題はのこる印刷方法

自宅にプリンターがあればいいけど
ない場合は
コンビニなどで印刷になります

セブンイレブンのネットワークプリントでもできると聞いたのですが
ファイルを預ける場合容量制限があるため
2人ぶんのデータを転送しようとしたらエラーになりました

私の場合、Android だったので
MicroSD へPDFデータを移して
これを取り出して近くのローソンで印刷しました

もっともパソコンでデータ取得しているので
USB とか microSD などに
パソコンからデータを移して、コンビニ印刷すればそれで解決しそうですが

ブレッドボード体験

ブレッドボード体験

基盤をブレッドボードから外せるので
基盤を一番したへ動かす

次に
配線をつけていく
配線の名前はジャンパケーブル

次にスイッチ
これはブレッドボードのセンターのみぞをまたいで設置する

次にスイッチと同じ縦列に抵抗をつけ
抵抗とスイッチの間にジャンパケーブルをさし
それを基盤のGNDの横につける

次に ArduBlock の導入
http://blog.ardublock.com/engetting-started-ardublockzhardublock/

を参考にやったけどうまくいかなかった

とりあえず

chmod +x ardublock-all-20130712.jar

で権限を与え

Find “Sketchbook location:”
とかかれていたので
http://onlyopen.wordpress.com/2012/07/12/getting-started-with-ardublock/
を参考に

mkdir -p sketchbook/tools/ArduBlockTool/tool/
 cp ardublock-all-20130712.jar  sketchbook/tools/ArduBlockTool/tool/

として

File > Preferences で
Sketchbook location を
/home/snowpool/sketchbook/
にして
IDEを再起動したら
無事に稼働した

Pins なかから ultrasnic を選択してピンを1から3に変更
2から4にする
これで
成功すると思われたがバグ
原因は権限のようなので
Preferences を
/root/sketcbook
に戻し
代わりに

sudo mkdir -p /root/sketchbook/tools/ArduBlockTool/tool/
sudo cp -p ダウンロード/ardublock-all-20130712.jar   /root/
cp ardublock-all-20130712.jar ardublock-all.jar

でようやくまともに起動した

これでできると思って
http://thinkit.co.jp/story/2013/02/12/3960
をやろうとしたけど
エラー
原因は
serialボードが今回の trinkit にはないから
同様に
rasbery pi にもないため
やるなら
ardimio のボードがベスト

電子工作体験

まずブレッドボードにさすために

Trinket 5V のまとまったピンを5つ単位でおってとる

次に折ったピンの短いほうを基盤側に
長いほうをブレッドボードのほうにさす

ちょっと力をこめて、完全にブレッドボードに差し込む

次に基盤のほうをハンダ付けする
ハンダ付けは
ハンダの機械のほうをあたためておき
ペンをもつようにつかう

ペンのほうを基盤のハンダづけするとこにあてて
温めてそこにハンダの材料の針金みたいなのを
あてて流し込む

次に
Ardunio IDEをつかうけど
apt-get でインストールしたものは古いため
ダウンロードしたものを展開

https://learn.adafruit.com/introducing-trinket/setting-up-with-arduino-ide

を参考にセットアップ

解凍するには
http://uguisu.skr.jp/Windows/tar.html
を参考に

tar zxvf arduino-1.0.5-linux64.tgz 

で展開

この中にあるのを起動するので

./ardunio-1.0.5/ardunio

で起動する

普通に ardunoでは apt-get でインストールしたほうが起動してしまう
起動すると文字化けしているので

Ctrl + , でメニューをだし
Editor language で
English
を選択すれば、英語になるので一度終了し再起動

これで英語メニューで起動して
文字化けは消える

次にプラグインのインストール

http://learn.adafruit.com/system/assets/assets/000/010/777/original/trinkethardwaresupport.zip?1378321062
から
trinkethardwaresupport.zip
をダウンロードし

unzip trinkethardwaresupport.zip

で展開

On Linux machines, the folder is named “Sketchbook” and it is typically located in /home/[username]
と書いてあるけど
実際に圧縮ファイルを展開しているのなら

arduino-1.0.5/hardware/

の中になる

今回はすでに展開したフォルダを
HOMEディレクトリにリネームしてコピーしていたので

cp -r Sketchbook/hardware/attiny/ arduino-1.0.5/hardware/

これで tool > board であたら
く表示される

Updating avrdude.conf
のところも
http://learn.adafruit.com/system/assets/assets/000/010/769/original/avrdude.conf?1378221965
からファイルをダウンロードし

 cd arduino-1.0.5/hardware/tools/
cp avrdude.conf avrdude.conf_bak
 cp ~/ダウンロード/avrdude.conf .

で再起動すればメニューが増える

If you are using Linux you will have to be “root” running the Arduino program to have access to the USB port
とあるんで
おそらく root 権限が必要

実際に root でないと書き込みに失敗する

次にサンプルファイルを開く

File > Examples > 01 Bascs > Bilink
で開く

今回はボードが違うので
Tools > Board > Adfruit Ttinket 16MHz
でボードを変更し

Tools > Programer > USBtinyISP
を選択する

次にボードにあうようにソース編集

int led = 13;

int led = 1;

にする

これでMicoUSB を差し込めばLEDが赤く点滅している間だけ書き込める

もしタイミングをミスしたら
リセットボタンをおすか
もしくはUSBを抜き差しすればいい

実行すると
LEDが1秒ごとに点滅する

これは
int led =1;
で led のピンを1番に指定していること

そして
loop() の中で

  digitalWrite(led, HIGH);   // turn the LED on (HIGH is the voltage level)
  delay(1000);               // wait for a second
  digitalWrite(led, LOW);    // turn the LED off by making the voltage LOW
  delay(1000);               // wait for a second

というループでON OFF を繰り替えしているから

HIGHでON
LOWでOFF

これで最初の段階は完了

なお
Linux の場合は
Step 3. Update ‘ld’ linker
の問題がすでに修正済

ListViewへヘッダー、フッターの設置

ListViewへヘッダー、フッターの設置

ListViewで
ヘッダー、フッターをそれぞれ別のレイアウトで用意して
ListView.addHeaderView
でヘッダーを設定

ListView.addHeaderView
でフッターを設定できる

使い道としては、クックパッドみたいに
途中に見出しをつけるコンテンツタイプのアプリ
もしくはAdmobによる広告をいれるなど

まずは、ヘッダーのレイアウトを
レイアウトファイルで定義

<LinearLayout
xmlns:android="http://scheams.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="top">

<TextView
android:id="@+id/header"
android:layout_width="match_parent"
android:layout_height="30dip"
android:gravity="center_horizontal"
android:background="@color/custom"
android:text="Header 部品"/>

</LinearLayout>

次に、フッター部分も作成

<LinearLayout xmlns:android="http://scheams.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_gravity="bottom">

<TextView
android:id="@+id/footer"
android:layout_width="match_parent"
android:layout_height="30dip"
android:layout_gravity="center_horizontal"
android:background="@color/custom"
android:text="footer sample"/>

</LinearLayout>

次に、JavaでListViewへ
ヘッダーとフッターを追加する

View header = (View)getLayoutInflater().inflate(R.layout.header,null);
View footer = (View)getLayoutInflater().inflate(R.layout.footer,null);

ListView list = (ListView)findViewById(R.id.list);
list.addHeaderView(header);
list.addFooterView(footer);

list.setChoiceMode(ListView.CHOICE_MODE_SINGLE);


//アイテムがクリックされたら呼び出されるコールバックを登録
list.setOnItemClickListener(new OnItemClickListener(){

public void onItemClick(AdapterView<?> parent, View view, int position, long id){

//headerのときは何もしない
if(position ==0){

rerun;}
}
});

//Adapter作成
list.setAdapter(new ArrayAdapter<String>(this, android.R.layout.simple_list_item_single_choice, LINUX));

//フォーカスが当たらないように設定
list.setItemsCanFocus(false)


//ListViewに表示する文字列
private static final String[] LINUX = new String[]{
"Ubuntu","Fedora","CentOS","OpenSUSE",
};

このように、ヘッダーとフッターのレイアウトファイルを
layoutInflater()で生成して
設定したいListViewへ追加する

注意点としては
ListViewへの追加はできるけど
GridViewへの追加はできない

また、追加されたヘッダーやフッターは
他のアイテムと同様に扱われるため
アイテムの位置が
0番目はヘッダーになり
フッターはn番目とかる

ExpandListViewで階層表示

ExpandListViewで階層表示

ExpandListViewに階層データを保持するAdapterを設定することで
画面に階層表示のリスト表示を作ることができる

モバイルのWikipediaとか
スマホ向けのクックパッドで
押すとリストがでるようなかんじ

大きな見出しと、詳細記事などを作るときに使える

ExpandListViewは
折りたたみ可能なListView

親リストへはカテゴリー

子リストにはデータを配置して
カテゴリーだけ表示するために
データを折りたたんで表示するときに使う

ExpandListViewを使うには
まずレイアウトファイルでExpandListViewを設定

<ExpandListView
android:id="@+id/expandlist"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>

次に、JavaでAdapterの設定をする
ExpandListViewのインスタンスを取得し
データを設定したAdapterをセットする

//親リスト作成
ArrayList<HashMap<String,String>> groupData = new ArrayList<HashMap<String,String>>();

//子リスト作成
ArrayList<HashMap<String,String>> childData = new ArrayList<ArrayList<HashMap<String,String>>>();

//親リストを要素追加
HashMap<String,String> groupA = new HashMap<String,String>();
groupA.put("group","Linux");

HashMap<String,String> groupB = new HashMap<String,String>();
groupB.put("group","Android");

groupData.add(groupA);
groupData.add(groupB);

//Linuxの子リストへ要素追加
ArrayList<HashMap<String,String>> childListA = new ArrayList<HashMap<String,String>>();

HashMap<String,String> childA = new HashMap<String,String>();
childA.put("group","Linux");
childA.put("name","Ubuntu");

HashMap<String,String> childB = new HashMap<String,String>();
childB.put("group","Linux");
childB.put("name","CentOS");

HashMap<String,String> childC = new HashMap<String,String>();
childC.put("group","Linux");
childC.put("name","Fedora");

childListA.add(childA);
childListA.add(childB);
childListA.add(childC);


//Androidの子リストへ要素追加
ArrayList<HashMap<String,String>> childListB = new ArrayList<HashMap<String,String>>();

HashMap<String,String> childBA = new HashMap<String,String>();
childBA.put("group","Android");
childBA.put("name","Nexus7");

HashMap<String,String> childBB = new HashMap<String,String>();
childBB.put("group","Android");
childBB.put("name","Nexus5");

childListB.add(childBA);
childListB.add(childBB);

childData.add(childListB);


//親リスト、子リストを含んだAdapterを作成
SimpleExpandableListAdapter adapter = new SimpleExpandableListAdapter(
getApplicationContext(),
groupData(),
android.R.layout.simple_expandable_list_item_2,
new String[]{"name","group"},
new int[]{android.R.id.text1,android.R.id.text2}
);

//ExpandableListViewにAdapterをセット
ExpandableListView exList = (ExpandableListView)findViewById(R.id.expandlist);
exList.setAdapter(adapter);

ExpandableListViewのデータ構造は
階層構造になるため
ListView
GridViewのような単一データ構造ではない
なので、Adapterとしては
ExpandableListAdapterクラスを継承したAdapterである必要がある

ExpandableListAdapterクラスは内部で
親データの取得用メソッドと
子データの取得用メソッドがあるので
これをOverrideすることで
複雑な階層構造のデータ形式を扱えるようになる

AndroidでGrid表示

AndroidでGrid表示

AndroidでGrid表示するには
GridViewにデータを保持するAdapterを設定することで
画面スクロール可能なGrid形式のリストを表示できる

使い方によっては
ホーム画面のように、アイコンだけのUIを作るときにも使える

食べログのAndroidアプリの画面のようなかんじになる

カレンダーのように使うことも可能

GridViewは
グリッド状にリスト表示するためのViewで
画像viewerのように
データを升目のように並べて表示できる

これを行うには、まずレイアウトファイルでGridViewを設定

<GridView
android:id="@+id/grid"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:numColumns="4"
android:verticalSpacing="10dp"
android:horizontalSpacing="10dp"/>

android:numColumns=””
は、1行に表示するアイテムの数
つまり表示する画像やアイコンの数になる

android:verticalSpacing=””
は、アイテムどうしの幅、つまり画像やアイコンの縦の幅になる

同様に
android:horizontalSpacing=””
はアイコンどうしの縦幅になる

これで設定はできたので
Adapterの設定をJavaで行う

GridViewのインスタンスを取得し
データを設定したAdapterを設定する

GridView grid = (GridView)findViewById(R.id.grid);

//Adapterの作成
ListAdapter adapter = new ArrayAdapter<String>(this,android.R.layout.simple_list_item_1,WEEK);

//Adapterの設定
grid.setAdapter(adapter);


//GridViewに表示する文字列
private static final String[] WEEK = new String[]{
"月","火","水","木","金","土","日"
};

これで、カレンダーのように
GridViewへ曜日が表示される

GridViewに指定するAdapterは
ListViewと同じものを使える

GridViewは、ListViewと同じ抽象クラスを継承しているため
多くの面で共通の処理を実装できる

ただし、GridViewは複数行を表示するという特徴があるため
いくつかの注意点がある

GridViewはListViewよりも表示アイテムが多くなるため
パフォーマンスに気をつける必要がある

また、ListViewでは
項目を指定してスクロールできるけど
GridViewではできないため
スクロール位置の配置に注意する必要がある

AndroidでList表示

AndroidでList表示

Androidで、リスト表示するには
ListViewにデータを保持するAdapterを設置することで
画面スクロール可能なリストを作成できる

ListViewは縦にリストを表示するためのビュー
データベースとともに使ったり
WebAPIなどと合わせて使うことが多い

ListViewを使うには、まずレイアウトファイルで
ListViewを設置する

<ListView
android:id="@+id/list"
android:layout_width="fill_parent"
android:layout_height="0dip"
android:layout_weight="1">
</ListView>

次に、JavaでlistViewのインスタンスを取得し
データを設定したAdapterを設定する

ListView list = (ListView)findViewById(R.id.list);

//Adapter作成
ListAdapter adapter = new ArrayAdapter<String>(this,android.R..layout.simple_list_item_1,CUTYS);

//Adapterの設定
list.setAdapter(adapter);

//ListViewへ表示する文字列
public static final String[] CITYS = new String[]{
"Tokyo",
"Nagoya",
"Osaka",
};

ListViewの表示に関する処理は
Adapterクラスで実装する

今回は、Adapterとして
ArrayAdapterクラスを使っている

このクラスは
デフォルトだと文字列を1つだけ表示するためのクラス

これを配列CITYSから渡されるデータから文字列を取得して
設定している

new ArrayAdapter()
の最後のCITYSがその部分になる

Ubuntu 12.04 LTS へ Ardunio IDE install

Ubuntu 12.04 LTS へ Ardunio IDE install

ハクション: Summer Fun!

が6月28日に開催されるので
これに参加

参加にあたってノートPCに Ardunio IDE インストールが必要ということで
インストール

当初、ドットインストールの講座
Arduino入門 (全12回)

を参考にやる予定だったけど
Mac での導入のようなので
公式サイトをもとにインストール

インストール手順は
Install Arduino on Ubuntu Linux

を参考に実験

Ubuntu 12.04 以降なら

sudo apt-get update && sudo apt-get install arduino arduino-core  

でできるようなので
これでインストール

インストール完了したら
端末で

 arduino

とすれば起動する

起動すると
Ardunio Permission Checker が起動する

arduino

追加するのなら
add を選び
そうでないのなら
ignore 意味は無視する
を選択

無視を選択するとIDEが起動する

ardunio2

いきなり当日にやるのは無理なので
ドットインストールで基礎知識を学習

画像の読み込み中にローディング

画像の読み込み中にローディング
表示

画像読み込み中に時間がかかる場合
ローディングを表示しないと
フリーズと間違えられる

ローディング表示には、
ProgressBarを設置する

まずは、レイアウトファイルでProgressBarを設置する

<ImageView
android:id="@+id/imageview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="center"
android:visibility="gone"/>

<ProgressBar
android:id="@+id/progressbar"
style="?android:attr/progressBarStyleLarge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>

次に、Javaで読み込み中と読み込み後で表示状態を切り替える

読み込み中はProgressBarを表示
読み込み後はImageViewを表示
というように、表示状態を変更する

今回は、Handlerを使い、3秒間の読み込み時間を設定している

mHandler.postDelayed(new Runnable(){

@Override
public void run(){
//ProgressBarを非表示にする
progressBar.setVisibility(View.GONE);

//ImageViewを表示にする
imageView.setVisibility(View.VISIBLE);
imageView.setImageResource(R.drawable.ic_launcher);
}
},3000);

ローディング表示については
画面の中央にサークル状のProgressBarを表示する
もしくは
画面上部に進捗を表すProgressBarを表示するのが良いとされている