Androidの授業 8 [ アニメーションクラス ]
【 簡易ピクチャビューワ 】
･前へボタンと次へボタンで画像が切り替わる
・res→drawable-hdpiフォルダに素材を入れておく
（ここでは arc apuos medias evo の4ファイルを使用）
※アニメーションしながら画像、文字処理をするクラスを使う
[ViewFlipper]
main.xmlを編集
----------------------------------
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android
"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<ViewFlipper
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/flipper" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/arc" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/aquos" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/medias" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/evo" />
</ViewFlipper>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="前へ"
android:layout_weight="1" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="次へ"
android:layout_weight="1" />
</LinearLayout>
</LinearLayout>
---------------------------------------------------
javaファイルの編集
----------------------------------
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android
"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<ViewFlipper
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/flipper" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/arc" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/aquos" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/medias" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/evo" />
</ViewFlipper>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="前へ"
android:layout_weight="1" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="次へ"
android:layout_weight="1" />
</LinearLayout>
</LinearLayout>
--------------------------------------------
※その他のアニメーション
参考
http://www.adamrocker.com/blog/181/android_animation.html
Androidの授業 7 [ 複雑なレイアウト ]
【複雑なレイアウト】
今日は少し複雑な構成のレイアウトを３つ見てみます。
１．ScrollViewを使ってスクロールさせてみる。
２．HorizontalScrollViewを使って横のスクロール
３．FrameLayoutを使用して、LinearLayoutではできないレイアウト
・xmlを３つ用意する
①main.xmlの名前を変更する。→main1.xml
②main2.xml、main3.xmlを追加する
layoutフォルダを右クリック→新規作成→Android XML File
・sozai.gif(300*500)をres→drawableフォルダに準備
・main1.xml1を編集
-------------------------
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android
"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFFFFF"
android:gravity="center_horizontal"
>
<TextView
android:id="@+id/textView1"
android:layout_width="match_parent"
android:textSize="25sp"
android:text="ScrollViewを使ってみる"
android:textColor="#11AACC"
android:gravity="center"
android:layout_weight="9"
android:layout_height="match_parent" />
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:fillViewport="true" >
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/sozai" >
<ImageView
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:scaleType="fitXY"
android:src="@drawable/sozai" />
<ImageView
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:scaleType="fitXY"
android:src="@drawable/sozai" />
<ImageView
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:scaleType="fitXY"
android:src="@drawable/sozai" />
</LinearLayout>
</ScrollView>
</LinearLayout>
-----------------------------------------
・MainActivity.javaのsetContentView(R.layout.main);の
mainをmain1に書き換えて実行してみる。
※スクロールが確認できればOK。
ImageViewを増やせばスクロール幅も増える。
※注意点
ScrollViewの中には1枚の絵(View)しか入れられない。
→LinearLayoutを使用してその中に複数のImageViewを入れている。
・main2.xmlを編集
-------------------------------------------
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android
"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#FFFFFF"
>
<HorizontalScrollView
android:layout_width="match_parent"
android:layout_height="80dp" >
<LinearLayout
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="match_parent" >
<Button
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:textSize="30sp"
android:text="1番目"/>
<Button
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:textSize="30sp"
android:text="2番目"/>
<Button
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:textSize="30sp"
android:text="3番目"/>
<Button
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:textSize="30sp"
android:text="4番目"/>
</LinearLayout>
</HorizontalScrollView>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="テキストビュー" />
<EditText
android:layout_width="100dp"
android:layout_height="wrap_content" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="実行ボタン" />
</LinearLayout>
<CheckBox
android:text="チェックボックス1"
android:textColor="#000000"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<CheckBox
android:text="チェックボックス2"
android:textColor="#000000"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<CheckBox
android:text="チェックボックス3"
android:textColor="#000000"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
----------------------------------------------------
・main3.xmlを編集
------------------------------
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android
"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:layout_width="300dp"
android:layout_height="300dp"
android:background="#FFFFFF" >
<View
android:layout_width="250dp"
android:layout_height="250dp"
android:layout_gravity="center"
android:background="#00FF00" />
<View
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_gravity="center"
android:background="#FF0000" />
<View
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_gravity="center"
android:background="#0000FF" />
<Button
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_gravity="center"
android:text="ボタン" />
</FrameLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="1番目" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="2番目" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="3番目" />
</LinearLayout>
</LinearLayout>
---------------------------------------------------
※LinearLayoutとFrameLayoutの違い
LinearLayout →子のViewを並べて表示
FrameLayout →子のViewを重ねて表示
Androidの授業 6 [ 画面の操作(画像を使用してみる) ]
【画面の操作(画像を使用してみる)】
新規プロジェクト: Sample7
・画像の使用
・トグルボタン（ON・OFF切り替え）を使用
準備した素材
・back.png
・btn_set.xml
・green.png
・green_btn.gif(200*60)
・pink.png
・pink_btn.gif(200*60)
・title.gif(450*200)
素材をdrawable-hdpiフォルダへ入れる。
(Sample7→res→drawable-hdpi)
・main.xmlの編集(Sample7→res→layout→main.xml)
------------------------------------------------------
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android
"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:background="@drawable/back"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="centerInside"
android:background="@drawable/title" />
<View
android:layout_width="match_parent"
android:layout_height="20dp" />
<ImageView
android:id="@+id/iv_top"
android:layout_width="200dp"
android:layout_height="200dp"
android:scaleType="fitXY"
android:src="@drawable/green" />
<View
android:layout_width="match_parent"
android:layout_height="30dp" />
<ToggleButton
android:id="@+id/btn_change"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textOn=""
android:textOff=""
android:background="@drawable/btn_set" />
</LinearLayout>
---------------------------------------------------------
※幅の調整の為に<View/>を使用する手段はよく使う。
（クラスとして軽い為上位クラスを使用）
ボタンを押した時の画像の切り替えの為にSample7.javaファイルを編集
(Sample7→src→test.sample7→MainActivity.java
CompoundButton.OnCheckedChangeListenerインターフェイスを実装
---------------------------------------------------------
package test.sample7;
import android.app.Activity;
import android.os.Bundle;
import android.widget.CompoundButton;
import android.widget.ImageView;
import android.widget.ToggleButton;
public class MainActivity extends Activity
implements CompoundButton.OnCheckedChangeListener {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
ToggleButton btn =
(ToggleButton)findViewById(R.id.btn_change);
btn.setOnCheckedChangeListener(this);
}
@Override
public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
ImageView iv = (ImageView)findViewById(R.id.iv_top);
// ON:ピンク OFF:緑
if(isChecked) {
iv.setImageResource(R.drawable.pink);
} else {
iv.setImageResource(R.drawable.green);
}
}
}
-----------------------------------------------------------