튜토리얼 페이지 [Android]

안드로이드 앱을 설치하고 처음 실행할 때, 앱에 대한 설명이 나오는 이미지들을 좌->우 드래그로 보는 기능이 있다.

위와 같은 이미지들이 나오는데, 그걸 드래그/슬라이드로 부드럽게 넘겨보는 기능이다.

이 기능은 처음 실행 후 다시 실행되지 않는다. 

그래서 사용한 것이 ViewPager와 SharedPreferences !

ViewPager는 화면을 슬라이드로 부드럽게 넘겨볼 수 있는 기능을 하고 

SharedPreferences는 앱을 처음 실행한 것에 대한 값을 저장한다.

필요한 Activity는 위와 같이 MainActiviry와 

앱 설치 후 처음 실행화면(이하 도움말 화면)을 보여줄 FirstStartActivity가 있다.

layout은 각 Activity에 대한 layout과 도움말 화면들을 보여줄 layout이 있다. 

도움말 화면의 이미지를 4개로 사용할 예정이기에 4개의 layout이 있으며, 

이 4개의 레이아웃에 각각 보여줄 이미지를 ImageView로 넣어주면 된다.

ViewPager를 사용하려면 위와 같이 Android-support-v4 라이브러리를 추가해야한다.

이 라이브러리 추가 관련 에러가 다양하게 발생했었는데, 구글링해서 어떻게 해결했었다.

(이 부분에서 에러가 나시는 분은 라이브러리 명으로 구글링하시거나, 댓글 달아주세요!)

Order and Export 설정도 위와 같이 체크해야 제대로 작동한다.

1. MainActivity.java

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

 

setContentView(R.layout.activity_main);

SharedPreferences preference = getSharedPreferences("a",MODE_PRIVATE);

int firstviewshow = preference.getInt("First", 0);

 

if (firstviewshow != 1) {

Intent intent = new Intent(MainActivity.this,FirstStartActivity.class);

startActivity(intent);

 

}

 

 

}

위와 같이 onCreate 내부에 작성한다.

첫 실행 여부를 저장하는 SharedPreferences 값인 firstviewshow 가 1이 아니면 FirstStartActiviry를 실행한다.

2. FirstStartActivity.java

private ViewPager mPager

 

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

 

setContentView(R.layout.activity_first_start);

 

mPager = (ViewPager) findViewById(R.id.pager);

mPager.setAdapter(new PagerAdapterClass(getApplicationContext()));

 

}

 

private View.OnClickListener mCloseButtonClick = new View.OnClickListener() {

@Override

public void onClick(View v) {

int infoFirst=1;

SharedPreferences a = getSharedPreferences("a", MODE_PRIVATE);

SharedPreferences.Editor editor = a.edit();

editor.putInt("First", infoFirst);

editor.commit();

(Toast.makeText(getApplicationContext(), "저장완료 : ",

Toast.LENGTH_LONG)).show();

finish();

}

};

 

/**

* PagerAdapter

*/

private class PagerAdapterClass extends PagerAdapter{

 

private LayoutInflater mInflater

 

public PagerAdapterClass(Context c){

super();

mInflater = LayoutInflater.from(c);

}

 

@Override

public int getCount() {

return 4;

}

 

@Override

public Object instantiateItem(View pager, int position) {

View v = null

if(position==0){

v = mInflater.inflate(R.layout.firststartview1, null);

v.findViewById(R.id.fsv_one);

}

else if(position==1){

v = mInflater.inflate(R.layout.firststartview2, null);

v.findViewById(R.id.fsv_two);

}else if(position==2){

v = mInflater.inflate(R.layout.firststartview3, null);

v.findViewById(R.id.fsv_three);

}else{

v = mInflater.inflate(R.layout.firststartview4, null);

v.findViewById(R.id.fsv_four);

v.findViewById(R.id.close).setOnClickListener(mCloseButtonClick);

}

((ViewPager)pager).addView(v, 0);

return v;

}

 

@Override

public void destroyItem(View pager, int position, Object view) {

((ViewPager)pager).removeView((View)view);

}

 

@Override

public boolean isViewFromObject(View pager, Object obj) {

return pager == obj;

}

 

@Override public void restoreState(Parcelable arg0, ClassLoader arg1) {}

@Override public Parcelable saveState() { return null }

@Override public void startUpdate(View arg0) {}

@Override public void finishUpdate(View arg0) {}

}

  

class내부에서 private로 Pager를 선언하고 레이아웃에 작성했던 pager를 가져온다.

버튼 OnClickListener를 도움말 화면의 가장 마지막에 위치한 버튼에 적용하여, 

이 버튼을 클릭하면 도움말 화면을 다시 실행하지 않도록 한다.

SharedPreferences 값을 1로 넣어주는 것이다. (MainActivity에서 1이면 FirtStartActivity로 실행을 하지 않는다.)

PagerAdapter 아래에 getCount()는 사용할 페이저 화면의 숫자를 return하고, 

Object instantiateItem에서는 페이저들에 각 레이아웃을 적용시킨다.

그리고 마지막 도움말 화면에는 버튼이 있으므로 버튼에 대한 OnClickListener를 추가한다. 

3. activity_first_start.xml

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

android:layout_width="match_parent"

android:layout_height="match_parent" >

 

 

<android.support.v4.view.ViewPager

android:id="@+id/pager"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:layout_above="@+id/bottom"

android:layout_below="@+id/ll_title_layout"

>

</android.support.v4.view.ViewPager>

 

</RelativeLayout>

4. firststartview4.xml

도움말 화면 xml들은 원하는 대로 작성을 하면 된다. 마지막 화면만 참조차 코드를 올리면, 

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

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

android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="#00000000">

<ImageView

android:id="@+id/fsv_four"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:background="#ff6677"

/>

 

<Button

android:id="@+id/close"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignParentBottom="true"

android:layout_centerHorizontal="true"

android:text="Do not show again" />

 

</RelativeLayout>

특별한 것 없이 그냥 분홍색의 전체 이미지 뷰를 사용하였고 하단에 도움말 화면을 종료하는 버튼을 넣었다.

main에 대한 xml도 어떻게 하던 상관없다.

완성 화면.

좌측의 흑색 레이아웃에서 우측의 분홍색(4번째) 레이아웃으로 

옆으로 밀면서 이동한다.