들어가면서 |
안녕하세요. Bucket Place 모바일 개발자 Cloud Travel입니다. 오늘은 ActionBar사용에 대해서 세세하게 알아보려고 합니다. Honycom(API 11) 사용이 가능하게 되고, 현재는 안드로이드 개발에서 일반적으로 모든 어플리케이션이 포함하고 있는 부분이 ActionBar입니다. ActionBar는 기존에 있던 메뉴의 기능을 확장하여 화면 상단에 붙여서 사용할 수 있게 해줍니다. 또한, ActionBar의 하위 호완성을 위해서 sherlock에서 제공해주는 라이버러리를 사용했었지만, 사용이 일반화가 된 현시점에서 하위 호완성을 위해 구글 자체적으로 android-support-v7-appcompat 라이브러리를 제공하기 시작했습니다.
목표 |
오늘의 목표는 다음의 화면중 1번을 구성해주는 것입니다.
준비 |
프로젝트 생성에 앞서 라이브러리를 Import시켜 줍시다. ActionBar사용을 위한 android-support-v7-appcompat 라이브러리는
<android-sdks-path>/extras/android/support/v7/appcompat 에 존재합니다. Import시켜주시기 바랍니다.
다음은 프로젝트를 생성한 후 위에서 Import한 v7라이브러리를 추가시켜 줍니다.
ActionBar 생성하기 |
다음의 단계별 행동에 맞춰서 ActionBar를 구성하도록 합시다.
1. 자동으로 생성된 MainActivity가 ActionBarActivity를 상속받게 변경시킵니다.
public class MainActivity extends ActionBarActivity {
//...
}
2. AppCompat library사용에 따른 theme를 변경시켜야 합니다.
- AndroidManifest.xml 에 MainActivity 테마를 시켜줍니다.
<activity android:theme="@style/Theme.AppCompat.Light"
... >
3. ActionBar에 들어갈 아이템들을 추가시켜 줍니다.
- res/munu 에 메뉴XML을 정의해 주시면, ActionBar 아이콘들을 정의 할 수 있습니다.
- 최상위에 menu를 정의해 주시고, 그 아래로 아이템들을 추가하시면됩니다.
- 각 아이템은 id, icon, title, show 등의 속성을 정의 할 수 있습니다.
- title은 showAsAction 속성을 통해서 같이 보여주거나, icon을 longPress할 때 토스트로 나오는 설명글로 역할을 합니다.
- showAsAction 속성은 다음과 같습니다.
1) never : 보여주지 않는다. 이 아이템은 메뉴 버튼을 클릭했을 때 노출되게 됩니다.
2) ifRoom : ActionBar에 공간이 남았을 경우에 보여줍니다. 공간이 없는 경우에는 메뉴 버튼을 클릭했을 때 노출됩니다.
3) always : 공간에 상관없이 항상 보여줍니다.
4) withText : Icon옆에 Title을 같이 출력시켜 줍니다.
5) collapseActionView : Actionbar 공간을 보존하기 위해 삭제시키는 옵션입니다.
- Support Library를 사용할 경우 showAsAction을 사용하기 위해서는 XML문법을 추가하고 그것을 사용해야합니다.
- ActionBar를 위한 main.xml 입니다.
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:yourapp="http://schemas.android.com/apk/res-auto">
<item
android:id="@+id/action_notice"
android:icon="@drawable/i_btn_notice"
android:title="@string/notice"
yourapp:showAsAction="ifRoom"/>
<item
android:id="@+id/action_search"
android:icon="@drawable/i_btn_search"
android:title="@string/search"
yourapp:showAsAction="ifRoom"/>
</menu>
4. Activity에 onCreateOptionMenu() 메소드를 다음과 같이 수정합니다.
- inflater를 이용하여 레이아웃을 생성 후 부모클래스에게 선언을 부탁합니다.
public class MainActivity extends ActionBarActivity {
...
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu items for use in the action bar
MenuInflater inflater = getMenuInflater();
inflater.inflate(R.menu.main, menu);
return super.onCreateOptionsMenu(menu);
}
}
[현재까지의 액션바 실행 화면]
ActionBar Item Click event 설정 |
1. Item이 클릭되었을 때 이벤트를 정의해줍니다.
- onOptionsItemSelected(Menu item)함수를 정의해줍니다.
- 저는 벨 버튼을 클릭하면, 알림창이 나타났다 사라졌다하는 형식을 하였습니다.
- 이를 위해 먼저 레이아웃을 변경해주고 : activity_main.xml
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFFFFF" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/hello_world" />
<LinearLayout
android:id="@+id/actionbar_notify_pannel"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginRight="20dp"
android:layout_marginLeft="20dp"
android:paddingTop="10dp"
android:background="@drawable/popup_background"
android:visibility="gone"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:text="@string/notify"
android:textSize="20sp" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:text="@string/notify"
android:textSize="20sp"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:text="@string/notify"
android:textSize="20sp"/>
</LinearLayout>
</FrameLayout>
- 클릭 이벤트를 달아주었습니다. MainActivity.java
public class MainActivity extends ActionBarActivity {
LinearLayout notiPannel;
boolean showNotiPannel;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
notiPannel = (LinearLayout) findViewById(R.id.actionbar_notify_pannel);
showNotiPannel = false;
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu items for use in the action bar
MenuInflater inflater = getMenuInflater();
inflater.inflate(R.menu.main, menu);
return super.onCreateOptionsMenu(menu);
}
@Override
// Menu Item click event(ActionBar items)
public boolean onOptionsItemSelected(MenuItem item) {
// Handle presses on the action bar items
switch (item.getItemId()) {
case R.id.action_search:
Toast.makeText(this, "search button click", Toast.LENGTH_SHORT).show();
return true;
case R.id.action_notice:
if ( showNotiPannel ){
notiPannel.setVisibility(View.GONE);
showNotiPannel = false;
}else{
notiPannel.setVisibility(View.VISIBLE);
showNotiPannel = true;
}
return true;
default:
return super.onOptionsItemSelected(item);
}
}
}
- 이렇게 해서 실행을 해주면 각각 ActionBar의 버튼을 클릭했을 때 이벤트가 발생됩니다.
마무리 |
오늘은 ActionBar 구성하는 법에 대해서 알아보았습니다. 다음에는 Navigation Drawer를 이용하여 사이드 메뉴를 구성하고 프레그먼트를 이용하여 페이지가 이동되는 것과 ActionBar의 기타 기능들을 조금씩 차차 알아가도록 합시다. 또한 지금까지의 소스를 첨부합니다.
ActionBar.zip