カテゴリー: 未分類

Androidでレーティンクバー

レーティンクバーを使うには、
レイアウトファイルからRatingBarのインスタンスを取得し
setOnRatingBarChangeListener
を登録することで使える

レーティンクバーは、評価をするアプリで使う
口コミとか、もしくはゲームなど
色々使える

まず、レイアウトファイルでレーティンクバーの定義

<RatingBar
android:id="@+id/ratingbar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:numStars="5"
android:stepSize="1.0"/>

numStars=””は、評価の値
stepSize=””は、評価の幅で
1.0なら1.0ずつの評価で0.5とかはできなくなる

次に、Javaで変更検出の実装

これは、
setOnRatingBarChangeListenerを使うことで
レーティンクの変更を検出する

まずは、レイアウトファイルからRatingBarインスタンスの取得

final RatingBar ratingbar = (RatingBar)findViewById(R.id.ratingbar);

次に、RatingBarインスタンスへリスナーを追加し
レーティンクが変化したら
トーストでメッセージ表示する

ratingbar.setOnRatingBarChangeListener(new OnRatingBarChangeListener(){

public void onRatingChanged(RatingBar ratingbar, float rating, boolean fromUser){

Toast.makeText(MainActivity.this, "Change Rating", Toast.LENGTH_SHORT).show();
}
});

レーティンク検出は
生成したインスタンスへ
setOnRatingBarChangeListener
を登録し
onRatingChanged(){

}
の内部へ処理を記述することで
レーティンクに変化があったときのみ処理する

入力サジェスト

入力サジェストを使うには、
AutoCompleteTextViewを使う

あらかじめサジェスト候補の文字列をセットしておくことで
該当する文字を途中まで入力すると候補がでてくるので便利

携帯とかの文字予測みたいなかんじ

AutoCompleteTextViewは、サジェスト機能が使えるTextView

使い勝手は、TextViewと同じ

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

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Address"/>

<AutoCompleteTextView
android:id="@+id/autocomplete"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"/>

次に、ArrayAdapterクラスで
入力サジェストのAdapterを作成して
setAdapter()でセット

AutoCompleteTextView autoText = (AutoCompleteTextView)findViewById(R.id.autocomplete);

ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, android.R.layout.simple_dropdown_item_line, androids);

autoComplete.setAdapter(adapter);

サジェスト入力の利用例としては
AutoCompleteTextViewは、
ArrayList型の
Adapterオブジェクトをセットするだけでサジェストを実現できるので
入力履歴のリストを利用すれば履歴をサジェストできるし
Google Suggest API
を使えば
Web検索候補を表示できるため
EditTextより使いやすいものを作れる

Androidで入力文字の制限

EditTextで入力文字の制限をするには
inputFilterを使う

例えば、メルアドしか入力できないようにするなら

レイアウトファイルで定義

<EditText
android:id="@+id/mailform"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="メルアドのみ入力可"
android:textSize="16sp"/>

次に、Javaで文字制限を行うinputFilterを設定

生成したInputFilterは
InputFilterの配列へ格納し
setFilters()を使ってEditTextへセットする

まず、メルアド用のフィルターを作成

InputFilter inputFilter = new InputFilter(){

@Override
CharSequence filter(CharSequence source, int start, int end, Spanned dest, int dstart, int dend){

if(source.toString().matches("^[0-9a-zA-Z@¥¥.¥¥_¥¥-]+$")){
return source;
}else{
return "";
}
}
};

次に、フィルターの格納

InputFilter[] filters = new InputFilter[]{
 inputFilter
};

そして、フィルターの適用

editText.setFilters(filters);

EditTextは、
inputType=””
とか
max=””
で入力タイプとか文字数の指定ができるけど
これだと定義したものだけしかフィルタリングできない

これに対して
InputFilterは、正規表現を使うことで入力を細かく指定できるし
inputFilterを複数指定できるので
こちらのほうが使いやすい

文字数制限といえば、Twitterだと
140文字制限なので
tweet用の入力欄で140文字までにするなら

InputFilter lengthFilter = new InputFilter.LengthFilter(140);

InputFilter[] filters = new InputFilter[]{
lengthFilter
};

editText.setFilters(filters);

Androidで入力ヒントの表示

入力ヒントを表示するには
EditTextで
android:hint=””
を使うことでできるようになる

ソースにすると

<EditText
android:id="@+id/hint"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="入力ヒント"/>

http://andante.in/i/%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88/edittext%E3%81%AE%E6%96%87%E5%AD%97%E5%88%B6%E9%99%90%E3%83%92%E3%83%B3%E3%83%88%E3%81%A8%E3%81%8B%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6/
にわかりやすい解説があるので参考に

Androidでパスワードの入力

Androidで入力欄でパスワードなどを使うときに
●●●
というように表示するなら
EditTextで
android:inputType=””
へ
textPassword
を設定する

また、Webフォーム入力に最適化された
textWebPassword

数字パスワードに最適化された
numberPassword
などがある

とりあえず、普通のパスワードの場合のソース

これで、入力すると●●●というようになる

Androidでラジオボタン

Androidでラジオボタンを使うには
RadioButtonを使う

RadioButtonはいくつでも設置できるけど
同グループと判断するためには
RadioGroupを使って
RadioButtonを覆う必要がある

このあたりはjQueryMobileやっていると
概念的にわかりやすい

まず、レイアウトファイルで
RadioGroupの中へ
RadioButtonを設置する

<RadioGroup
android:id="@+id/radiogroup"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true">

<RadioButton
android:id="@+id/rbtn1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="ボタン1"/>

<RadioButton
android:id="@+id/rbtn2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checked="true"
android:text="ボタン2"/>

<RadioButton
android:id="@+id/rbtn3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="ボタン3"/>

</RadioGroup>

次に、Javaでクリックイベント取得

RadioButtonのクリックイベント取得には
RadioButtonへ
setOnCheckedChangeListener
をセットして
クリックしたRadioButtonのidを判別する

RadioGroup radioGroup = (RadioGroup)findViewById(R.id.radiogroup);
radioGroup.setOnCheckedChangeListener(new OnCheckedChangeListener(){

public void onCheckedChanged(RadioGroup group, int checkedId){

RadioButton rbtn = (RadioButton)findViewById(checkedId);

Toast.makeText(MainActivity.this, rbtn.getText()+"をタップしました", Toast.LENGTH_SHORT).show();
}
});

このように、処理するときにも
RadioGroupでまず判定して
そして各種ボタンが押されたときの処理を書く
今回は単純に押されたボタンをToastで表示

また、スマホの画面ではあまりやらなさそうだけど
タブレットなどの大きな画面で
ラジオボタンを横向にするなら
RadioGroupの
orientation=””
でhorizontalを設定すればいい

デフォルトでは、verticalなので縦向きになる

RSpec インストール

ドットインストールで扱う RSpec を行うため
ruby のバージョンアップ
しようとしたけど
わからないので、とりあえず ver 2.0.0 で実験

以前、ローカル開発環境構築ということで
vagrant で構築したマシンに
rbenv で ruby をインストールしたので
これを使うことにする

このとき参考にしたのが
#12 Rubyをrbenvで導入してみよう

このときのバージョンが
ruby 2.0.0p247

今回は
2.1.1p76
らしいけど
公式サイトを見ると
https://www.relishapp.com/rspec/docs/gettingstarted
に

Prerequisites

Ruby 1.8.7 or higher (2.0+ recommended)
となっているので、とりあえず 2.0.0 で実験

インストールそのものは
RSpec on Railsの始め方。

を参考にインストール

sudo gem install rspec

でインストール

version の確認は

rspec -v

で表示できる

Androidでチェックボックス

チェックボックスを使うには
CheckBoxを使う

チェックイベントの取得には
setOnCheckedChangeListenerを使う

これを使うには、まずレイアウトファイルでチェックボックスを定義する

<CheckeBox
android:id="@+id/checkbox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"/>

次に、チェックイベントの取得
これはJavaで処理
CheckButtonに対して
setOnCheckedChangeListenerをセットすれば
ボタンイベントの取得ができるようになる

CheckBox checkbox = (CheckBox)findViewById(R.id.checkbox);

checkbox.setOnCheckedChangeListener(new OnCheckedChangeListener(){

@Override
public void onCheckedChanged(CompoundButton buttonView, boolean isChecked){

Toast.makeText(MainActivity.this, "チェック状態は "+isChecked, Toast.LENGTH_SHORT).show();
}
});

また、チェックボックスで
チェック済みにしたいのなら
.setChecked(true)

チェックをはずすなら
.setChecked(false)
とすることで対処もできる

Toggleボタンのカスタマイズ

まずは、ToggleButtonの背景画像の用意

ToggleButtonのON/OFFの切り替えは
1つのリソースでは表現できないため
Selecter要素を使うことで状況に応じて表示するようにする

つまり、OFFの時の画像
ONの時の画像を用意する

リソースファイルは
Selecter_toggle_background.xml

ソースは

<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="false" android:drawable="@color/FlatLightAqua"/>
<item android:state_checked="false" android:drawable="@color/FlatLightPink"/>
</selector>

次に、作成した背景用のリソースを
background=””を使って実際のViewへ反映させる

<ToggleButton
android:id="@+id/tbtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/ Selecter_toggle_background"/>

ちなみに、Switchの場合は
ToggleButtonと違って
スイッチ部分と
スイッチ部分の裏にある背景とで
リソースが分かれる

まずは、switch_background.xml
というようにリソースファイルを用意

<selector
 xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/switch_bg_disabled_holo_dark" 
android:state_enabled="false"/>

<item android:drawable="@drawable/switch_bg_focused_holo_dark"
android:state_focused="true"/>
<item android:drawable="@drawable/switch_bg_holo_dark"/>
</selector>

次に、switch用のリソースの準備
これも別ファイルで用意
今回は、selector_switch_thumb.xml
定義するのは4つで
無効状態
有効状態
OFFの状態
Onの状態

ソースにすると

[/xml]

ここまでできたら、レイアウトファイルで
背景用リソースを
thumb属性を使ってViewへ反映させる
指定するのはリソースファイル名

<Switch
android:id="@+id/switch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:thumb="selector_switch_thumb
"
android:track="@drawable/selector_switch_background"/>

となる

カスタマイズに使うリソースは
drawableリソースなら何でも使えるけど
shapeリソースや
9patchリソースでない場合、
デバイスのディスプレイサイズや解像度の違いが影響し
デザイン崩れが起こることがあるので注意

toggleボタンの使い方

Androidでtoggleボタンは
ON/OFFの設定でよく使う

toggleボタンを使うには、まずレイアウトファイルで
ToggleButtonを設置する

<ToggleButtonbr>android:id="@+id/tbtn"<br clear="none"></br>
android:layout_width="wrap_content"<br clear="none"></br>
android:layout_height="wrap_content"<br clear="none"></br>
/><br clear="none"></br>

ボタンではなく、スイッチのほうを使いたいのなら


android:id=”@+id/switch”


android:layout_width=”wrap_content”


android:layout_height=”wrap_content”/>


[/xml]

わかりやすいのはSwitchのほうで
スライドさせてON/OFF切り替えになる

アイコンを付けると、toggleボタンでも使いやすくなる

レイアウトファイルに設定したら次に、
インスタンスの取得

まずは、toggleボタンの場合

final ToggleButton tb = (ToggleButton)findViewById(R.id.tbtn);

次に、Switchの場合

final Switch sw = (Switch)findViewById(R.id.switch);

ここまでできたら、次に
ON/OFFの切り替えリスナーを設定

まずは、toggleボタンの場合

tb.setOnClickListener(new checkedChangeListener(){

@Override
public void onCheckedChanged(CompoundButton buttonView, boolean isChecked){
Toast.makeText(MainActivity.this,"Toggleボタンをおしたよ",Toast.LENGTH_SHORT).show();
}
});

次に、Switchの場合

sw.setOnClickListener(new onCheckedChangeedListener(){

@Override
public void onCheckedChangeed(CompoundButton buttonView, boolean isChecked){
Toast.makeText(MainActivity.this,"switch true",Toast.LENGTH_SHORT).show();
}
});

トーストで表示する文字は
getString()
でリソースから取得することもできる

ほとんどの場合、
R.string.文字列の変数
で指定する

setOnCheckedChanged()
をセットした状態で
ON/OFFを切り替えると、状況に応じて
isCheckedの値が変化する

isCheckedの値がtrueならON
falseならOFFになる