반응형


화면을 터치하면 툴바를 보여주는 Toolbar 예제입니다.



다음처럼 동작합니다.

화면을 터치할 때 마다 툴바가 보여졌다 안보여졌다합니다.


 



아이콘을 선택하면 어떤 메뉴를 선택했는지 보여줍니다.


 



오른쪽 아이콘을 누르면 추가 메뉴에서 항목을 선택할 수 있습니다.


  




다음처럼 코드가 작성되었습니다.


1. 타이틀바를 안보이게 하기 위해 styles.xml 파일을 수정합니다.


<resources>

   <!-- Base application theme. -->
   <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
       <!-- Customize your theme here. -->
       <item name="colorPrimary">@color/colorPrimary</item>
       <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
       <item name="colorAccent">@color/colorAccent</item>
       <!-- No Title Bar-->
       <item name="windowActionBar">false</item>
       <item name="windowNoTitle">true</item>
   </style>

</resources>




2. res / menu 폴더에 menu_main.xml 파일을 추가하여 다음 내용을 복사합니다.

아이콘은 편의상 프로젝트에 포함되어 있는 것을 사용했습니다. 원한시는 것으로 변경하세요.


<?xml version="1.0" encoding="utf-8"?>
<menu
   xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   xmlns:tools="http://schemas.android.com/tools"
   tools:context=".MainActivity">
   <item
       android:id="@+id/action_settings"
       android:orderInCategory="100"
       android:title="설정"
       app:showAsAction="never" />
   <item
       android:id="@+id/action_menu1"
       android:orderInCategory="200"
       android:title="메뉴1"
       android:icon="@mipmap/ic_launcher_round"
       app:showAsAction="always"/>
   <item
       android:id="@+id/action_menu2"
       android:orderInCategory="300"
       android:title="메뉴2"
       android:icon="@mipmap/ic_launcher_round"
       app:showAsAction="always" />
   <item
       android:id="@+id/action_menu3"
       android:orderInCategory="400"
       android:title="메뉴3"
       android:icon="@mipmap/ic_launcher_round"
       app:showAsAction="always"/>
   <item
       android:id="@+id/action_menu4"
       android:orderInCategory="500"
       android:title="메뉴4"
       android:icon="@mipmap/ic_launcher_round"
       app:showAsAction="always" />
</menu>




3. layout 폴더에 tool_bar.xml 레이아웃 파일을 추가합니다.


<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
   xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:background="@color/colorPrimary"
   android:elevation="4dp"
   android:gravity="center_vertical|start"
   app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
   app:popupTheme="@style/ThemeOverlay.AppCompat.Light">

   <android.support.v7.widget.ActionMenuView
       android:id="@+id/amvMenu"
       android:layout_width="match_parent"
       android:layout_height="?attr/actionBarSize"/>

</android.support.v7.widget.Toolbar>




4. activity_main.xml 파일에 툴바 레이아웃을 포함시킵니다.

어느 버튼을 눌렀는지 보여주기 위해 텍스트뷰를 사용합니다.  


<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:tools="http://schemas.android.com/tools"
   android:id="@+id/layout"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   tools:context=".MainActivity">

   <include
       android:id="@+id/tool_bar"
       android:layout_height="wrap_content"
       android:layout_width="match_parent"
       layout="@layout/tool_bar" />

   <TextView
       android:id="@+id/textview"
       android:layout_below="@+id/tool_bar"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_centerHorizontal="true"
       android:layout_centerVertical="true"
       android:textSize="25sp"
       android:text="메뉴를 선택하세요 !" />

</RelativeLayout>




5.  MainActivity.java 파일에 다음 두가지가 구현되어 있습니다.

  • 화면 터치시 마다 툴바 보여주기/숨기기

  • 버튼 클릭시 해당 버튼을 눌렀음을 알려주기


package com.tistory.webnautes.toolbarexample;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.ActionMenuView;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuInflater;
import android.view.MenuItem;
import android.view.View;
import android.widget.RelativeLayout;
import android.widget.TextView;


public class MainActivity extends AppCompatActivity {

   private ActionMenuView amvMenu;
   private TextView textView;

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


       textView = (TextView)findViewById(R.id.textview);


       Toolbar t  = (Toolbar) findViewById(R.id.tool_bar);
       amvMenu = (ActionMenuView) t.findViewById(R.id.amvMenu);
       amvMenu.setOnMenuItemClickListener(new ActionMenuView.OnMenuItemClickListener() {
           @Override
           public boolean onMenuItemClick(MenuItem menuItem) {

               int id = menuItem.getItemId();

               switch(id){
                   case R.id.action_settings:
                       textView.setText("설정을 눌렀습니다.");
                       break;

                   case R.id.action_menu1:
                       textView.setText("메뉴1을 눌렀습니다.");
                       break;

                   case R.id.action_menu2:
                       textView.setText("메뉴2를 눌렀습니다.");
                       break;

                   case R.id.action_menu3:
                       textView.setText("메뉴3을 눌렀습니다.");
                       break;

                   case R.id.action_menu4:
                       textView.setText("메뉴4를 눌렀습니다.");
                       break;
               }

               return onOptionsItemSelected(menuItem);
           }
       });

       setSupportActionBar(t);
       getSupportActionBar().hide();
       getSupportActionBar().setTitle(null);
       //getSupportActionBar().setDisplayHomeAsUpEnabled(true);

       
       // 화면 터치시 툴바 보여주기/숨기기 구현
       RelativeLayout relativeLayout = (RelativeLayout)findViewById(R.id.layout);

       relativeLayout.setOnClickListener(new View.OnClickListener() {
           @Override
           public void onClick(View view) {

               if (getSupportActionBar().isShowing()) {
                   getSupportActionBar().hide();
               } else {
                   getSupportActionBar().show();
               }
           }
       });



   }

   @Override
   public boolean onCreateOptionsMenu(Menu menu) {
       MenuInflater inflater = getMenuInflater();

       inflater.inflate(R.menu.menu_main, amvMenu.getMenu());
       return true;
   }

   @Override
   public boolean onOptionsItemSelected(MenuItem item) {

       return true;
   }

}



마지막 업데이트 2019. 2. 19




반응형

진행해본 결과물을 기록 및 공유하는 공간입니다.
잘못된 부분이나 개선점을 알려주시면 반영하겠습니다.


소스코드 복사시 하단에 있는 앵커 광고의 왼쪽 위를 클릭하여 닫은 후 해야 합니다.


문제가 생기면 포스트와 바뀐 환경이 있나 먼저 확인해보세요.
질문을 남겨주면 가능한 빨리 답변드립니다.


제가 쓴 책도 한번 검토해보세요 ^^

  • 네이버 블러그 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 카카오스토리 공유하기

댓글을 달아 주세요

TistoryWhaleSkin3.4">