140104訓練

三が日に続き、土曜出勤なのだ。
でも三が日出ちゃうと土曜だから何？的なムードになっている自分がいるのも確か。

1 オプションメニュー（OptionsMenu）
2 onOptionsItemSelected
3 アニメーション

オプションメニュー（OptionsMenu）

※画像が表示されるのは2.3系まで。4系はUIが違うため、画像が表示されない仕様。詳しくはコチラ
res/menuに新規XMLファイルを作成
レイアウト > 追加 > item
出来たitemのOrder in category,Title,Iconを指定
いつも削除してるonCreateOptionsMenuメソッドのリソース名を作成したXMLファイルに書き換える

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.XMLファイル名, menu);
        return true;
    }

@Override

public boolean onCreateOptionsMenu(Menu menu) {

// Inflate the menu; this adds items to the action bar if it is present.

getMenuInflater().inflate(R.menu.XMLファイル名, menu);

return true;

}

実行画面（メニュー表示のみ抜粋）

onOptionsItemSelected

どのメニューが選ばれたかを判断して処理を行うメソッド。
下記コードをオーバーライドして処理を書く。

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        return super.onOptionsItemSelected(item);
    }

@Override

public boolean onOptionsItemSelected(MenuItem item) {

return super.onOptionsItemSelected(item);

}

switchでgetItemIdメソッドをKeyにして処理したりするのがパターンらしい。戻り値もtrueにしたりするらしい。詳しくやらなかったのでよーわからん・・・・

アニメーション

resにanimフォルダを作成。
作成したフォルダ内にxmlファイルを作成。リソースタイプがTween Animationになっていることを必ず確認すること。
ルート要素はalpha。

<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromAlpha="1.0"
    android:toAlpha="0.3"
    android:duration="1000"
    android:repeatCount="10"
    android:repeatMode="reverse">
</alpha>

<?xml version="1.0" encoding="utf-8"?>

<alpha xmlns:android="http://schemas.android.com/apk/res/android"

android:fromAlpha="1.0"

android:toAlpha="0.3"

android:duration="1000"

android:repeatCount="10"

android:repeatMode="reverse">

</alpha>

1秒で透明度が1.0（無透過）から0.3に変化することを10回行うという指定。
activity_main.xmlにImageViewを配置してMainActivity.javaに下記コードを追加

        ImageView iv=(ImageView) findViewById(R.id.imageView1);
        Animation anim=AnimationUtils.loadAnimation(this, R.anim.anim);
        iv.startAnimation(anim);

ImageView iv=(ImageView) findViewById(R.id.imageView1);

Animation anim=AnimationUtils.loadAnimation(this, R.anim.anim);

iv.startAnimation(anim);

指定したリソース（作ったxmlファイル）のアニメーションをImageViewに行わせている。

パラパラマンガ

resにdrawableフォルダ作成。
作成したフォルダ内にxmlファイルを作成。リソースタイプがDrawableになっていることを必ず確認すること。
ルート要素はanimation-list。

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:drawable="@drawable/img1" android:duration="500" />
    <item android:drawable="@drawable/img2" android:duration="500" />
    <item android:drawable="@drawable/img3" android:duration="500" />
    <item android:drawable="@drawable/img4" android:duration="500" />
</animation-list>

<?xml version="1.0" encoding="utf-8"?>

<animation-list xmlns:android="http://schemas.android.com/apk/res/android" >

</animation-list>

各画像0.5秒に指定。
空のImageViewとボタンを設置。
ボタンを押したらアニメーションする仕様。

import 色々;

public class MainActivity extends Activity {
    AnimationDrawable ad;
    Button bt;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        ImageView iv = (ImageView) findViewById(R.id.imageView1);

        ad = (AnimationDrawable) getResources().getDrawable(R.drawable.animlist);
        ad.setOneShot(true);

        iv.setImageDrawable(ad);

        bt = (Button) findViewById(R.id.button1);
        bt.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {
                ad.start();
            }
        });
    }
}

import 色々;

public class MainActivity extends Activity {

AnimationDrawable ad;

Button bt;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

ImageView iv = (ImageView) findViewById(R.id.imageView1);

ad = (AnimationDrawable) getResources().getDrawable(R.drawable.animlist);

ad.setOneShot(true);

iv.setImageDrawable(ad);

bt = (Button) findViewById(R.id.button1);

bt.setOnClickListener(new OnClickListener() {

@Override

public void onClick(View v) {

ad.start();

}

});

}

setOneShotがtrueなので一回だけしか反応しない。

プログラムで直接アニメーションさせる

xmlを作成しないでアニメーションさせる方法。
ImageView設置。

import 色々;

public class MainActivity extends Activity {
    ImageView iv;
    AnimationDrawable ad;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        makeAnim();
        findView();
        addEvent();
    }

    private void makeAnim() {
        Drawable img1 = getResources().getDrawable(R.drawable.img1);
        Drawable img2 = getResources().getDrawable(R.drawable.img2);
        Drawable img3 = getResources().getDrawable(R.drawable.img3);
        Drawable img4 = getResources().getDrawable(R.drawable.img4);

        ad = new AnimationDrawable();
        ad.addFrame(img1, 500);
        ad.addFrame(img2, 500);
        ad.addFrame(img3, 500);
        ad.addFrame(img4, 500);
        ad.setOneShot(false);
    }

    private void findView() {
        iv = (ImageView) findViewById(R.id.imageView1);
        iv.setImageDrawable(ad);
    }

    private void addEvent() {
        iv.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {
                ad.start();
            }
        });
    }
}

import 色々;

public class MainActivity extends Activity {

ImageView iv;

AnimationDrawable ad;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

makeAnim();

findView();

addEvent();

}

private void makeAnim() {

Drawable img1 = getResources().getDrawable(R.drawable.img1);

Drawable img2 = getResources().getDrawable(R.drawable.img2);

Drawable img3 = getResources().getDrawable(R.drawable.img3);

Drawable img4 = getResources().getDrawable(R.drawable.img4);

ad = new AnimationDrawable();

ad.addFrame(img1, 500);

ad.addFrame(img2, 500);

ad.addFrame(img3, 500);

ad.addFrame(img4, 500);

ad.setOneShot(false);

}

private void findView() {

iv = (ImageView) findViewById(R.id.imageView1);

iv.setImageDrawable(ad);

}

private void addEvent() {

iv.setOnClickListener(new OnClickListener() {

@Override

public void onClick(View v) {

ad.start();

}

});

}

AnimationDrawableインスタンスに各画像を0.5秒ずつaddFrameする。
ImageViewをクリックするとアニメーションする。

UIをカスタマイズ

resにdrawableフォルダ作成。さらにxmlファイル作成。

グラデーションをつける

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item>
       <shape
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:shape="rectangle">
            <gradient
                android:startColor="#CCCCCC"
                android:endColor="#FFFFFF"
                android:angle="225" />
        </shape>
    </item>
</selector>

<?xml version="1.0" encoding="utf-8"?>

<item>

<shape

xmlns:android="http://schemas.android.com/apk/res/android"

android:shape="rectangle">

<gradient

android:startColor="#CCCCCC"

android:endColor="#FFFFFF"

android:angle="225" />

</shape>

</item>

</selector>

gradientがグラデーションの指定。
mainのbackgroundにこのxmlを指定するとグラデーションのかかった背景になる。角度（angle）は45の倍数でなくてはならない。

ボタンクリック時のスタイル

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
     <item android:state_pressed="true" >
        <shape
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:shape="rectangle">
            <gradient
                android:startColor="#98a8b3"
                android:endColor="#87959f"
                android:angle="270" />
            <stroke
                android:width="1dp"
                android:color="#ffffff" />
            <corners
                android:radius="15dp" />

        </shape>
    </item>

      <item android:state_pressed="false">
        <shape
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:shape="rectangle">
            <gradient
                android:startColor="#d6edfc"
                android:endColor="#b8ccd9"
                android:angle="270" />
            <stroke
                android:width="1dp"
                android:color="#ffffff" />
            <corners
                android:radius="15dp" />

        </shape>
    </item>
</selector>

<?xml version="1.0" encoding="utf-8"?>

<shape

xmlns:android="http://schemas.android.com/apk/res/android"

android:shape="rectangle">

<gradient

android:startColor="#98a8b3"

android:endColor="#87959f"

android:angle="270" />

<stroke

android:width="1dp"

android:color="#ffffff" />

<corners

android:radius="15dp" />

</shape>

</item>

<shape

xmlns:android="http://schemas.android.com/apk/res/android"

android:shape="rectangle">

<gradient

android:startColor="#d6edfc"

android:endColor="#b8ccd9"

android:angle="270" />

<stroke

android:width="1dp"

android:color="#ffffff" />

<corners

android:radius="15dp" />

</shape>

</item>

</selector>

state_pressedの真偽値でボタンの動作をチェック。
strokeは枠線のスタイル、cornersは角のスタイル（雑

フェードインするアニメーション

animフォルダにxmlファイル作成。

<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
  android:fromAlpha="0.0"
  android:toAlpha="1.0"
  android:duration="2000"
 >
</alpha>

<?xml version="1.0" encoding="utf-8"?>

<alpha xmlns:android="http://schemas.android.com/apk/res/android"

android:fromAlpha="0.0"

android:toAlpha="1.0"

android:duration="2000"

</alpha>

透明度を2秒で無くなるように指定している。
後はメイン処理で呼び出してあげる。

        Button btn = (Button) findViewById(R.id.button1);
        Animation anim = AnimationUtils.loadAnimation(this, R.anim.fadein);
        btn.startAnimation(anim);

Button btn = (Button) findViewById(R.id.button1);

Animation anim = AnimationUtils.loadAnimation(this, R.anim.fadein);

btn.startAnimation(anim);

ぐるぐる（rotation）させるアニメーション

animにxmlファイル作成。

<?xml version="1.0" encoding="utf-8"?>
<set>
    <rotate xmlns:android="http://schemas.android.com/apk/res/android"
        android:duration="2000"
        android:fromDegrees="0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toDegrees="360">
    </rotate>
    <scale xmlns:android="http://schemas.android.com/apk/res/android"
        android:duration="2000"
        android:fromXScale="0.0"
        android:fromYScale="0.0"
        android:toXScale="1.0"
        android:toYScale="1.0"
        android:pivotX="50%"
        android:pivotY="50%">
    </scale>
</set>

<?xml version="1.0" encoding="utf-8"?>

<set>

<rotate xmlns:android="http://schemas.android.com/apk/res/android"

android:duration="2000"

android:fromDegrees="0"

android:pivotX="50%"

android:pivotY="50%"

android:toDegrees="360">

</rotate>

<scale xmlns:android="http://schemas.android.com/apk/res/android"

android:duration="2000"

android:fromXScale="0.0"

android:fromYScale="0.0"

android:toXScale="1.0"

android:toYScale="1.0"

android:pivotX="50%"

android:pivotY="50%">

</scale>

</set>

rotateは回転,2秒掛けて360度回るコード,pivotは座標。
scaleは大きさ,0~1（倍率）に向かって大きくなっている。
メイン処理

        TextView img = (TextView) findViewById(R.id.textView1);
        Animation anim2 = AnimationUtils.loadAnimation(this, R.anim.rotation);
        img.startAnimation(anim2);

TextView img = (TextView) findViewById(R.id.textView1);

Animation anim2 = AnimationUtils.loadAnimation(this, R.anim.rotation);

img.startAnimation(anim2);

xmlの方が元職の影響で慣れてるけどファイルが煩雑になりそうだから注意が必要だなーと思う今日この頃。とりあえず記事が雑になってきてる気がしてドキドキするのであった。

今日のひとこと

ひどいねスペルがw
コピってこなくていいんだよ（怒w

Share on Tumblr

オプションメニュー（OptionsMenu）

onOptionsItemSelected

アニメーション

パラパラマンガ

プログラムで直接アニメーションさせる

UIをカスタマイズ

グラデーションをつける

ボタンクリック時のスタイル

フェードインするアニメーション

ぐるぐる（rotation）させるアニメーション

関連

コメント

コメントを残すコメントをキャンセル

オプションメニュー（OptionsMenu）

onOptionsItemSelected

アニメーション

パラパラマンガ

プログラムで直接アニメーションさせる

UIをカスタマイズ

グラデーションをつける

ボタンクリック時のスタイル

フェードインするアニメーション

ぐるぐる（rotation）させるアニメーション

関連

コメント

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル