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番目とかる