サンプルプログラム「シークバー(スライダー)を動かすと表示された画像に

①
サンプルプログラム「シークバー(スライダー)を動かすと表示された画像に色味が増す」
<LinearLayout 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"
android:orientation="vertical"
tools:context=".MainActivity">
<TextView
android:text="@string/how_to"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:id="@+id/btn_pushme"
android:text="画像 droid1"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<ImageView
android:id="@+id/iv_android"
android:layout_width="match_parent"
android:layout_height="240dp"
android:src="@drawable/droid1"
android:layout_gravity="center_horizontal" />
<TextView android:text="@string/red_seek"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<SeekBar
android:id="@+id/sb_red"
android:layout_width="467dp"
android:layout_height="wrap_content"
android:max="255"
android:layout_gravity="center_horizontal" />
<TextView android:text="@string/green_seek"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<SeekBar
android:id="@+id/sb_green"
android:layout_width="467dp"
android:layout_height="wrap_content"
android:max="255"
android:layout_gravity="center_horizontal" />
<TextView android:text="@string/blue_seek"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<SeekBar
android:id="@+id/sb_blue"
android:layout_width="467dp"
android:layout_height="wrap_content"
android:max="255"
android:layout_gravity="center_horizontal" />
</LinearLayout>
レイアウトとは GUI の配置を決めるための仕組みである。Android アプリの画面レイアウトは XML 形式のレイアウト
ファイルによって行われる。
LinearLayout…アプリ内で使用するパーツを縦一列(Vertical)もしくは横一列(Horizontal)に並べる場合に使用するレイアウ
トである。並べる向きは LinearLayout タグ内の android:orientation="vertical(horizontal)"の部分で決まる。
*Linear：線状の，線型の
レイアウトは他にも以下のような種類がある。
・RelativeLayout
他のパーツとの相対的な関係によって位置を決める。
・TableLayout
HTML の<table>タグのように、格子状にパーツを並べるのに使われる。スパン(android:layout_span)を設定す
ることで、列をまたぐ(横方向のセルの結合)ことができる。
・GridLayout
TableLayout と同様、格子状にパーツを並べる。Android4 以降に対応するレイアウトで、縦方向のセルの結合
にも対応する。(android:layout_rowSpan)
・FrameLayout
パーツを重ねて表示させる。仕組みは、設定しないと左上にしか表示されないため、LinearLayout を併用す
ることで位置指定を行う必要がある。
android:text="@string/how_to"…文字列は別のファイル string.xml 上で管理を行う。android:text="@string/how_to"
文字は直接レイアウトファイルに記述することも可能である。
string.xml
<resources>
<string name="app_name">HelloAndroid</string>
<string name="how_to">シークバーを動かして画像の色味を変更しよう！！</string>
<string name="red_seek">赤</string>
<string name="green_seek">青</string>
<string name="blue_seek">緑</string>
<string name="action_settings">Settings</string>
</resources>
android:layout_width="match_parent",android:layout_height="wrap_content" 等
画面のレイアウトに使用されるタグで、パーツの幅を指定する。
・wrap_content…幅が自動調整される。
・match_parent…画面最大まで幅が広がる。fill_parent に代わって Android2.2 以降に追加された。
android:layout_gravity
オブジェクトの位置を指定する。
・top：
上部に配置
・bottom：
下部に配置
・right：
右側に配置
・lefrt：
左側に配置
・fill：
最大まで
・fill_vertical：縦に最大まで
・fill_horizontal：横に最大まで
・center：
中央に配置
・center_vertical：
上下中央に配置
・center_horizontal：
左右中央に配置
・clip_vertical：
・clip_horizontal：
①
package saml.sone.helloandroid;
import android.os.Bundle;
import android.support.v7.app.ActionBarActivity;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
import android.graphics.Color;
//
import android.graphics.PorterDuff; //
import android.widget.SeekBar;
//
②
③
public class MainActivity extends ActionBarActivity implements SeekBar.OnSeekBarChangeListener {
private Button buttonPushMe;
private ImageView imageAndroid;
private SeekBar seekBarRed;
private SeekBar seekBarGreen;
private SeekBar seekBarBlue;
//ボタン「PushMe」
//ボタンを押すと画像を入れ替える
//シークバー(赤)
//シークバー(緑)
//シークバー(青)
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
buttonPushMe = (Button) findViewById(R.id.btn_pushme);
buttonPushMe.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
buttonPushMe.setText("画像 droid2");
imageAndroid.setImageResource(R.drawable.droid2);
}
});
④
⑤
imageAndroid = (ImageView) findViewById(R.id.iv_android);
seekBarRed = (SeekBar) findViewById(R.id.sb_red);
//
seekBarRed.setOnSeekBarChangeListener(this);
//
seekBarGreen = (SeekBar) findViewById(R.id.sb_green); //
seekBarGreen.setOnSeekBarChangeListener(this);
//
seekBarBlue = (SeekBar) findViewById(R.id.sb_blue); //
seekBarBlue.setOnSeekBarChangeListener(this);
//
④
⑥
}
//ここから先も追加箇所
@Override
public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser){
int red = seekBarRed.getProgress();
int green = seekBarGreen.getProgress();
int blue = seekBarBlue.getProgress();
imageAndroid.setColorFilter(Color.rgb(red,green,blue),PorterDuff.Mode.LIGHTEN);
}
@Override
public void onStartTrackingTouch(SeekBar seekBar){
}
@Override
public void onStopTrackingTouch(SeekBar seekBar){
}
}
⑦
①パッケージ…クラスをパッケージに分けることで、同じ名前でもクラス名にパッケージの名前をつ
けて区別することが出来る。これによって、自分で作成したクラスと他所から持ってきたりした既存
のクラスを別に分けることが出来る。他と被らないようにするため，基本はドメイン名を使用する．
②クラスの宣言(インポート)
インポートを行うことによって、クラスを利用する際にクラス名のみの記述(パッケージ名の記述を
省略)が可能となり、全体的にコードが読みやすくなる。以下が、このアプリケーション内で使用され
るクラスである。
import android.os.Bundle;
文字列と Parcel 形式のデータとのついで構成するデータ保管庫
import android.support.v7.app.ActionBarActivity;
アクティビティ
import android.view.View;
ビュー(UI 部分)
import android.widget.Button;
押したりクリックしたりするとアクションを起こすプッシュボタンを表示するためのクラス
import android.widget.ImageView;
イメージ(画像)を表示できるクラス
import android.graphics.Color;
色を指定するためのクラス
import android.graphics.PorterDuff;
import android.widget.SeekBar;
スライダー(ここではシークバーと呼ぶ)をアプリ内で使用するためのクラス
③メインアクティビティ
MainActivity に ActionBarActivity を継承し，implements によってインターフェース
OnSeekBarChangeListener を追加(インターフェイスの実装)
④ findViewById：表示している画面の部品を取得するために使用するメソッド。 findViewById の引数
に R.id クラスに定義されている定数のうち、レイアウトファイルにて “android:id”として設定したもの
と同じ名前を指定する。
キャスト
⑤ buttonPushMe に OnClickListener()を設定。OnClickListener()にボタンを押した際に実行する処理(イベ
ント)を設定する。ここでは、以下の処理を設定する。
・ボタンに書かれている文字を、activity_main.xml にて設定された「画像 droid1」から「画像
droid2」に変更する処理
・drawable フォルダ上の droid2.png を参照し、画像の変更を入れ替える処理
⑥ 3 つの SeekBar を操作用に取得
⑦ 3 つの SeekBar のいずれか 1 つが操作された場合、それぞれの値を取得して、画像にカラーフィル
ターとして設定

Download Report