月別: 2014年6月

ExpandListViewで階層表示

ExpandListViewで階層表示

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

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

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

ExpandListViewは
折りたたみ可能なListView

親リストへはカテゴリー

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

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

1
2
3
4
5
<ExpandListView
android:id="@+id/expandlist"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
//親リスト作成
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を設定

1
2
3
4
5
6
7
<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を設定する

1
2
3
4
5
6
7
8
9
10
11
12
13
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を設置する

1
2
3
4
5
6
<ListView
android:id="@+id/list"
android:layout_width="fill_parent"
android:layout_height="0dip"
android:layout_weight="1">
</ListView>

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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月２８日に開催されるので
これに参加

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

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

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

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

を参考に実験

Ubuntu 12.04 以降なら

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

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

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

1
arduino

とすれば起動する

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

arduino

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

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

ardunio2

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

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

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

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
<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秒間の読み込み時間を設定している

1
2
3
4
5
6
7
8
9
10
11
12
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を表示するのが良いとされている

画像の回転処理

画像の回転処理

画像を回転させるには
ImageViewで
scaleType=”matrix”
として
回転用のMatrixを作成して
setImageMatrix()を呼び出して実現する

まずは、レイアウトファイルで定義

1
2
3
4
5
6
7
<ImageView
android:id="@+id/imageturn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:scaleType="matrix"
android:src="@drawable/ic_launcher"/>

そして、Javaで
Matrixの
postRotate()で回転情報をセットして
setImageMatrix()
で
ImageViewへ回転を適用する

まずは、タップするたびに90度回転する情報の設定

1
2
3
4
mRotate +=90F;
if(mRotate >= 360F){
  mRotate =0;
}

これは、角度が360度以上はないから

次に、画像回転処理

1
2
3
4
5
6
Matrix mtrx = new Matrix();
 
mtrx.postRotate(mRotate, ImageView.getDrawable().getBounds().width()/2,
mImageView().getDrawable().getBounds().height()/2);
 
mImageView.setImageMatrix(mtrx);

これで、タップするたび画像回転する

また、postRotate()の引数は、
前から順に
回転角度
回転の中心X座標
回転の中心Y座標
となる

今回なら
回転角度 mRotate

回転の中心x座標は
ImageViewに対して
getDrawable().getBounds().width()
でセットされている画像の幅を取得し
その数値を1/2にすることで割り出している

回転のY座標も同様に
ImageViewに対して
getDrawable.().getBounds().height()
でセットされている画像の高さを取得
その数値を1/2にすることで割り出している

画面より大きい画像の場合、スクロールで表示

画面より大きい画像の場合、スクロールで表示

端末の画面に入りきらない画像をレイアウトに表示した場合
通常では画面に入りきらない

この対策は、
ScrollView
と
HorizontalScrollView
を組み合わせることで画像を上下左右に
スクロールして表示できるようになる

まずは、レイアウトファイルで
ScrollView
HorizontalScrollView
LinearLayout
ImageView
というような構造で作成する

ソースにすると

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
 
<HorizontalScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
 
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
 
<ImageView
android:layout_width="@dimen/image_size"
android:layout_height="@dimen/image_size"
android:background="@drawable/background"/>
 
</LinearLayout>
 
</HorizontalScrollView>
 
</ScrollView>

@dimenに関しては
http://www.techdoctranslator.com/android/guide/resources/available-resources/more-resources
を参考に

このように
ScrollView
HorizontalScrollViewを使うことで
少ないコードでも上下左右のスクロールが可能になる

ただし、斜めスクロールはできない
斜めスクロールも可能にしたいのなら
Viewのカスタマイズが必要になる

引越し関連メモ

最近、仕事の都合により東京に引越しました

これに伴いいくつか必要なものを購入したり
調べることがあったので、それに燗するメモです

まず、始めてダイヤル式メールボックスを使うことになったのですが
意味がわからなかったので検索し
ダイヤル式のメールボックスの開け方がわかりません。開け方を教えてくれませんか？
を参考に開けることができました

右へ2回→６」「左へ1回」なら
右回転で６に2回あわせて
左回転で１に合わせるとあく
というものです

つぎに、郵便番号の調べ方
いざ郵便番号を出そうとしても、新しい住所だとわからなくなりますので
郵便番号検索
から夕瓶番号を調べることができます

これはAmazon で買い物をするのに使えます

また Amazon ですが、仕事が忙しく、自宅にくるのを待っていられない
という場合、コンビに受け取りが可能で
ローソン、もしくはファミリーマートでの受け取りができます

これなら都合のよいときにとりにいけます

引越しに関して意外だったのがニトリで
ネットで購入しようとすると、1ヶ月以上かかるものが
店舗にいくと普通に売っています

どうやらニトリに関しては店舗にいったほうが早そうです
店舗検索については
ニトリの店舗検索
から行うことができます

食材などに関してはまだ検索中ですが調味料などは
地殻のスーパーでないものに関しては
KALDI COFFEE で聞いて買いしました
店舗に関しては
KALDI　COFFEENO店舗検索
で調べました

調味料関連の知識があるのなら、ネットショップやAmazon という方法も使えます

なお、食材の購入に関しては
クックパッドにユーザ登録することで
近くの特売情報とそれをつかったレシピをみることができるので
これを参考に食材購入や料理をしています

プログラミングとかシステム構築関連の知識はあっても
生活に燗する知識が足りていないので
これを補ういい機会なのかもしれません

当面は新生活に関してのメモと
Android 関連のメモになりそうです

ImageViewで画像を縮小して表示

ImageViewで画像を縮小して表示

画像を縮小表示するには
setImageMatrix()を使う以外に
画像を事前にBitmapとして読み込み
リサイズすることで縮小表示ができる

使い道としては、サムネイル画像表示など

Bitmapからのサイズを指定するには

1
2
3
4
5
6
7
8
9
ImageView img = (ImageView)findViewById(R.id.imageview);
Resources res = getResources();
 
Bitmap bitmap = BitmapFactory.decodeResource(res, android.R.drawable.btn_star_big_on);
 
//Bitmap画像を200x90で作成
Bitmap bitmap2 = Bitmap.createScaleBitmap(bitmap, 200, 90, false);
 
img.setImageBitmap(bitmap2);

Bitmapの読み込みsizeはデバイスのメモリサイズに依存する
このため、大きいサイズのBitmapは読み込めないことがあるので注意

ImageViewで画像表示

ImageViewで画像表示

使い道は、画像表示

ImageViewで画像表示するには
まず、レイアウトファイルでImageViewを定義する

次に、Javaで処理

1
2
3
4
5
6
7
mImageView = (ImageView)findViewById(R.id.imageview);
findViewById(R.id.scaleCenter).setOnClickListener(this);
findViewById(R.id.scaleFitCenter).setOnClickListener(this);
findViewById(R.id.scaleFitEnd).setOnClickListener(this);
findViewById(R.id.scaleFitStart).setOnClickListener(this);
findViewById(R.id.scaleFitXY).setOnClickListener(this);
findViewById(R.id.scaleFitMatrix).setOnClickListener(this);

次に、クリックイベントの設定

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
public void onClick(View v){
 
switch(v.getId()){
 
case R.id.scaleCenter:
mImageView.setScaleType(ImageView.ScaleType.CENTER);
break;
 
case R.id.scaleFitCenter:
mImageView.setScaleType(ImageView.ScaleType.FIT_CENTER);
break;
 
case R.id.scaleFitEnd:
mImageView.setScaleType(ImageView.ScaleType.FIT_END);
break;
 
case R.id.scaleStart:
mImageView.setScaleType(ImageView.ScaleType.FIT_START);
break;
 
case R.id.scaleFitXY:
mImageView.setScaleType(ImageView.ScaleType.FIT_XY);
break;
 
case R.id.scaleMatrix:
Matrix mtrx = new Matrix();
mImageView.setScaleType(ScaleType.MATRIX);
matrix.postRotate(90.0f, mImageView.getWidth()/3, mImageView.getHeight()/2);
mImageView.setImageMatrix(mtrx);
break;
}
}

ScaleTypeをセットすることで
画像の表示方法を設定できる

今回はボタンにセットすることで
画像表示方法を変えている

定数とその意味は

CENTER
サイズを変更せずにエリアの中央へ表示

CENTER_CROP
エリアの横幅まで画像を拡大し
中央へ表示

FIT_CENTER
エリアの縦幅まで画像を拡大、
中央へ表示

FIT_END
エリアの縦幅まで画像を拡大し
右端に寄せて表示

FIT_START
エリアの縦幅まで画像を拡大、
左端に寄せて表示

FIT_XY
エリア全体に画像を拡大して表示

MATRIX
エリアよ大きくても小さくてもそのまま表示