splash画面を作成してみる。

splashとは、アプリケーション始まる時に、企業のロゴのマークなどが出てから遷移する部分の事(だと推測をしています。)

テレビゲームなどでは一般的に使われている手法かと思います。

 

なのでsplashを作成してより印象的なアプリ開発をしてみたいと思います。

2つほど作成の方法があるので、2つの説明をしたいと思います。

 

1、一定の時間でintentを切り替える。

Splash(スプラッシュ)画面を表示させる方法

intentを一定時間後に切り替えを行う事で、画像などを表示をして、その後別のintentを表示する方法です。

仕様としては一秒後にHandlerを実行する仕様です。

Handler handler = new Handler();
handler.postDelayed(new splashRunnable(), 1000);
class splashRunnable implements Runnable {
 public void run() {
 Intent intent = new Intent(getApplicationContext(), MainActivity.class);
 startActivity(intent);
 SplashActivity.this.finish();
 }
}

これで、いい感じにできているような気がしますが、timerイベントでもよいような気がします。

参考:Timerを使って定期実行する

timer.schedule( new TimerTask(){
 @Override
 public void run() {
 mHandler.post( new Runnable() {
 public void run() {
 Intent intent = new Intent(getApplicationContext(), MainActivity.class);
 startActivity(intent);
 SplashActivity.this.finish();
 }
 });
 }
}, 1000);

ともに一秒後に実行をする事で画面の遷移を最初に見せています。

ページ遷移の際には、通常の横スライドがデフォルトになるので、変更をしたい場合は下記の

ActivityのOpenとCloseをアニメーションさせるが勉強になります。

ただし、上記の方法だと、ユーザーが画面切り替えのエフェクトをオフにしている時などはアニメーションもなく、無駄なIntentを作成してしまう事になります。

なので、次の方法をオススメします。

 

2、intent自体はそのままでFrameLayoutを重ねる方法

まずFrameLayoutを利用します。FramaLayoutに関してですが

Androidアプリの使いやすさを左右する5つのレイアウトに記載がされているように

1つのウィジェットを配置する目的で設計されています。
複数のウィジェットを配置した場合、後から配置したウィジェットが前面に描画される形になります。

と書いてあります。なので、画像のデータを後配置をして、消せばよいのです。setVisibilityをView.GONEで設定してあげればきえます。

アニメーションを含む形でフェードで現在の画面が消えて後ろのコンテンツが見えてくる形式でサンプルを作成してみました。

visibility後下のレイヤーのが通常のレイヤーとして利用できることを確認する為にボタンを配置しております。

main.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 
 android:id="@+id/frameLayout1" 
 android:layout_width="fill_parent" 
 android:layout_height="fill_parent" 
 xmlns:android="http://schemas.android.com/apk/res/android">
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:orientation="vertical"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 >
 <TextView  
 android:layout_width="fill_parent" 
 android:layout_height="wrap_content" 
 android:text="@string/hello"
 />
 <Button 
 android:text="Button" 
 android:id="@+id/button1" 
 android:layout_width="wrap_content" 
 android:layout_height="wrap_content">
 </Button>
 </LinearLayout>
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:id="@+id/linear1"
 android:orientation="vertical"
 android:gravity="center"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 android:background="#000000"
 >
 <ImageView  
 android:layout_width="wrap_content" 
 android:layout_height="wrap_content" 
 android:src="@drawable/icon"
 />
 </LinearLayout>    
</FrameLayout>

java

package in.andante.splashtest;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.AlphaAnimation;
import android.view.animation.Animation;
import android.view.animation.Animation.AnimationListener;
import android.widget.LinearLayout;

public class SplashTest extends Activity implements AnimationListener {
 /** Called when the activity is first created. */
 @Override
 public void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.main);
 splashAnimation();
 }
 private void splashAnimation(){
 AlphaAnimation alphaanime = new AlphaAnimation(1, 0);
 alphaanime.setStartOffset(2000);
 alphaanime.setDuration(1000);
 alphaanime.setFillAfter(true);
 alphaanime.setAnimationListener(this);
 LinearLayout linear = (LinearLayout)findViewById(R.id.linear1);
 linear.startAnimation(alphaanime);
 }

 @Override
 public void onAnimationEnd(Animation animation) {
 // TODO Auto-generated method stub
 LinearLayout linear = (LinearLayout)findViewById(R.id.linear1);
 linear.setVisibility(View.GONE);
 }

 @Override
 public void onAnimationRepeat(Animation animation) {
 // TODO Auto-generated method stub

 }

 @Override
 public void onAnimationStart(Animation animation) {
 // TODO Auto-generated method stub

 }

}

上記でiconの画像が2秒表示され、1秒かけてフェードで消えて、その後に画像が消えて後ろにいたコンテンツが見えるようになります。

以上で、splash画面の作成ができました。

前後の記事

前の記事:

次の記事:

関連の記事

コメントの投稿

  • サイト内検索

新作アプリの紹介

関連サイトの紹介

アンドロイドアプリ開発TIPS
きぐるみカメラ
ふらいぱん
アンドロイドのデザイン集
Page top↑