Android 사용자 지정 작업 표시줄 예제 자습서

이 자습서에서는 사용자 지정 레이아웃이 있는 Android 사용자 지정 작업 표시줄로 구성된 앱을 만듭니다. 이 자습서에서 설명하는 ActionBar 구성 요소에 대한 기본적인 이해가 있다고 가정합니다.

Android 사용자 지정 작업 표시줄

ActionBar를 맞춤설정하려면 먼저 res/values/styles.xml에서 테마를 구성하고 AndroidManifest.xml에서 각 활동 클래스에 대한 테마를 설정해야 합니다. 다음은 이에 대한 xml 레이아웃입니다. styles.xml

<resources>
    
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
    </style>

    <style name="CustomTheme" parent="Theme.AppCompat.Light">

        <item name="contentInsetStart">0dp</item>
        <item name="contentInsetEnd">0dp</item>
    </style>

</resources>

위 스니펫에서 액티비티에 AppTheme 스타일을 사용하면 NoActionBar 테마를 명시적으로 지정하므로 null 포인터 예외가 발생합니다. 따라서 이 프로젝트에서는 CustomTheme 스타일을 사용합니다. contentInsetStart 및 contentInsetEnd는 패딩 값입니다. 3.0 이전 Android 버전과의 최대 호환성을 제공하므로 AppCompatActivity를 사용할 것입니다.

사용자 지정 작업 표시줄 레이아웃

다음은 MainActivity에서 ActionBar로 설정될 보기 레이아웃입니다. custom_action_bar_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="https://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    >

    <TableRow>

        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/back"
            android:layout_gravity="center_vertical"
            android:background="@android:color/transparent"
            android:id="@+id/action_bar_back"
            android:layout_alignParentTop="true"
            android:layout_centerHorizontal="true" />


        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/app_name"
            android:gravity="center_horizontal"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:textStyle="bold"
            android:padding="10dp"
            android:layout_alignParentTop="true"
            android:layout_weight="1"
            />

        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/forward"
            android:id="@+id/action_bar_forward"
            android:layout_gravity="center_vertical"
            android:background="@android:color/transparent"
            android:layout_alignParentTop="true"
            android:layout_centerHorizontal="true" />


    </TableRow>

</TableLayout>

뷰 레이아웃은 앞뒤 이미지 버튼을 나타내는 두 개의 ImageButton과 중앙의 TextView로 구성됩니다.

Android 사용자 지정 작업 표시줄 프로젝트 구조

Android 사용자 지정 작업 바코드

여기에서 ActionBar를 강조하므로 activity_main.xml은 비어 있는 RelativeLayout입니다. MainActivity.java는 아래와 같습니다.

package com.journaldev.customactionbar;

import android.support.v7.app.ActionBar;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.ImageButton;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

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

        getSupportActionBar().setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);
        getSupportActionBar().setDisplayShowCustomEnabled(true);
        getSupportActionBar().setCustomView(R.layout.custom_action_bar_layout);
        View view =getSupportActionBar().getCustomView();

        ImageButton imageButton= (ImageButton)view.findViewById(R.id.action_bar_back);

        imageButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                finish();
            }
        });

        ImageButton imageButton2= (ImageButton)view.findViewById(R.id.action_bar_forward);

        imageButton2.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(getApplicationContext(),"Forward Button is clicked",Toast.LENGTH_LONG).show();
            }
        });
    }


}

위의 코드에서 우리는 지원 라이브러리를 사용하고 있습니다. 따라서 getActionBar() 대신 getSupportActionBar()를 사용했습니다. ActionBar에 사용자 지정 레이아웃을 추가하기 위해 getSupportActionBar()에서 다음 두 메서드를 호출했습니다.

getSupportActionBar().setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);
getSupportActionBar().setDisplayShowCustomEnabled(true);

위와 같이 customView로 ActionBar를 확장하기 위해 setCustomView()가 호출됩니다. ActionBar 버튼에 대한 onClickListeners를 설정하려면 먼저 getCustomView()를 사용하여 CustomView를 가져와야 합니다. 이 자습서에서는 finish();를 사용하여 활동을 닫도록 뒤로 버튼을 프로그래밍하고 Toast를 표시하도록 앞으로 버튼을 프로그래밍했습니다. 참고 : 애플리케이션 태그 내부의 AndroidManifest.xml에 다음 줄을 추가합니다.

android:theme="@style/CustomTheme"

Android 사용자 지정 작업 표시줄 프로젝트 다운로드

참조: Android 문서