본 예제에서는 두 개의 프래그먼트를 생성하고 하나의 프래그먼트만 액티비티 상에 배치할 것이다. 그리고, 액티비티의 버튼을 누르면 다른 프래그먼트로 교체되도록 하는 내용에 대해서 살펴볼 것이다.
——————————————————————————————————–
안드로이드 스튜디오를 실행한다.
“Start a new Android Studio project”를 선택한다.
“Application name”에 “FragmentTestApplication”을 입력하고 Next 버튼을 클릭한다.
“Phone and Table”, “Minimum SDK = API 22″를 선택하고 Next 버튼을 클릭한다.
“Blank Activity”를 선택하고 Next 버튼을 클릭한다.
“Activity Name”에 “MainActivity”를 입력하고 Finish 버튼을 클릭한다.
그리고, 다음과 같은 모습의 안드로이드 스튜디오를 볼 수 있다.
(content_main.xml이 선택된 상태)
“Hello World!”가 적혀있는 텍스트 뷰를 선택하여 삭제한다.
최상단 왼쪽과 오른쪽에 각각 한 개씩 Button을 추가한다. (drag & drop 이용)
왼쪽 버튼을 더블클릭하고 text: “Button1”, id: “button1″을 적어준다. 버튼 왼쪽에 나타난 전구 아이콘을 클릭하여 나타난 [I18N]을 클릭한 후 text: “button1_string”을 적어준다.
오른쪽 버튼을 더블클릭하고 text: “Button2”, id: “button2″을 적어준다. 버튼 왼쪽에 나타난 전구 아이콘을 클릭하여 나타난 [I18N]을 클릭한 후 text: “button2_string”을 적어준다.
이제 첫 번째 프래그먼트의 UI를 생성할 차례이다. 프로젝트 도구 창에서 app->res->layout을 마우스 오른쪽 버튼(Mac에서는 control+click)으로 클릭한 후, New->Layout resource file을 선택한다.
대화상자가 나타나면 File name=”first_fragment”, Root element=”RelativeLayout”을 입력하고 OK 버튼을 클릭한다. (File name은 반드시 모두 소문자이어야 한다.)
빈 화면의 첫 번째 프래그먼트가 생성되면 Large Text를 drag & drop으로 정 가운데에 배치하고, text: “First Fragment”, id: “textView1″을 적어준다. 버튼 왼쪽에 나타난 전구 아이콘을 클릭하여 나타난 [I18N]을 클릭한 후 text: “first_fragment_string”을 적어준다. 빈 화면을 클릭한 후 Properties에서 background 항목에 빨간색(#ff0000)을 설정한다. (배경색을 지정하지 않으면 투명으로 설정되어 프래그먼트 전환시 겹쳐보이는 문제가 발생함.)
동일한 방법으로 두 번째 프래그먼트의 UI를 생성하자.
프로젝트 도구 창에서 app->res->layout을 마우스 오른쪽 버튼(Mac에서는 control+click)으로 클릭한 후, New->Layout resource file을 선택한다.
대화상자가 나타나면 File name=”secone_fragment”, Root element=”RelativeLayout”을 입력하고 OK 버튼을 클릭한다. ((File name은 반드시 모두 소문자이어야 한다.)
빈 화면의 첫 번째 프래그먼트가 생성되면 Large Text를 drag & drop으로 정 가운데에 배치하고, text: “Second Fragment”, id: “textView2″을 적어준다. 버튼 왼쪽에 나타난 전구 아이콘을 클릭하여 나타난 [I18N]을 클릭한 후 text: “second_fragment_string”을 적어준다. 빈 화면을 클릭한 후 Properties에서 background 항목에 노란색(#ffff00)을 설정한다. (배경색을 지정하지 않으면 투명으로 설정되어 프래그먼트 전환시 겹쳐보이는 문제가 발생함.)
이제 각 프래그먼트의 UI와 연동되는 JAVA 클래스를 생성할 차례이다. 우선 첫 번째 프래그먼트의 JAVA 클래스를 생성해보자.
app->java->com.example.administrator를 마우스 오른쪽 버튼(Mac에서는 control+click)으로 클릭한 후, Java Class를 선택한다.
대화상자가 나타나면 Name=”FirstFragment”를 입력하고 OK 버튼을 클릭한다. (JAVA 클래스 이름은 대문자로 시작하는 것이 관례이다.)
다음과 같은 기본 소스코드가 나타난다.
소스코드를 다음과 같이 수정한다.
package com.example.administrator.fragmenttestapplication;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.app.Fragment;
import android.view.View;
import android.view.ViewGroup;
public class FirstFragment extends Fragment {
@Override
public View onCreateView( LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState ) {
View view = inflater.inflate( R.layout.first_fragment, container, false );
return view;
}
}
동일한 방법으로 두 번째 프래그먼트의 JAVA 클래스를 생성하고 소스코드를 다음과 같이 수정한다.
package com.example.administrator.fragmenttestapplication;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.app.Fragment;
import android.view.View;
import android.view.ViewGroup;
public class SecondFragment extends Fragment {
@Override
public View onCreateView( LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState ) {
View view = inflater.inflate( R.layout.second_fragment, container, false );
return view;
}
}
인플레이트(inflate)를 한다는 것은 동작 가능한 view 객체로 생성한다는 의미이다. 여기서는 각 프래그먼트의 layout id인 first_fragment와 second_fragment id를 이용하여 JAVA 클래스와 UI를 연동시키도록 하였다.
app->res->layout->content_main.xml을 선택하고, 아래 부분에 Custom 하위에<fragment>를 찾을 수 있다. <fragment>를 클릭하면 사용 가능한 프래그먼트 목록이 나오는데, 첫 번째 프래그먼트를 설정해주자.
<fragment>를 화면 중앙에 위치시키고, 더블클릭하여 id=”fragment_place”라고 입력한다.
다음과 같이 디자인 모드에서 어떤 프래그먼트를 보여줄 지 알 수가 없다는 메시지가 출력된다.
@layout/first_fragment를 선택하여 첫 번째 프래그먼트가 보이도록 설정한다.
이제 버튼을 클릭했을 때 이벤트를 처리할 함수를 설정해야 한다. 여기서는 가장 간단한 이벤트 처리 방식을 사용하려고 한다. 버튼 두 개를 모두 선택하고 onClick에 ChangeFragment를 입력한다.
MainActivity.java의 코드를 다음과 같이 수정한다.
package com.example.administrator.fragmenttestapplication;
import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.view.Menu;
import android.view.MenuItem;
import android.app.Fragment;
import android.app.FragmentManager;
import android.app.FragmentTransaction;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG).setAction("Action", null).show();
}
});
Fragment fragment = new FirstFragment();
FragmentManager fragmentManager = getFragmentManager();
FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
fragmentTransaction.add( R.id.fragment_place, fragment );
fragmentTransaction.commit();
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();
//noinspection SimplifiableIfStatement
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
public void ChangeFragment( View v ) {
Fragment fragment;
switch( v.getId() ) {
default:
case R.id.button1: {
fragment = new FirstFragment();
break;
}
case R.id.button2: {
fragment = new SecondFragment();
break;
}
}
FragmentManager fragmentManager = getFragmentManager();
FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
fragmentTransaction.replace( R.id.fragment_place, fragment );
fragmentTransaction.commit();
}
}
onCreate 함수에 추가된 내용은 앱이 처음 시작되었을 때 어떠한 프래그먼트를 보여줄지에 대한 것이고 여기서는 첫 번째 프래그먼트로 설정되도록 했다. ChangeFragment 함수는 버튼이 클릭되었을 때 발생하는 이벤트를 처리하는 함수로 switch문을 이용하여 어떠한 버튼이 클릭되었는지를 판별하고 FragmentManager와 FragmentTransaction을 이용하여 Fragment를 교체하는 기능을 수행한다.
Shift+F10를 눌러서 “Device Chooser”를 띄우고, Button1과 Button2를 클릭하면 프래그먼트가 교체되는 것을 확인할 수 있다.
|