Ionic App 수정 (하단 바 가리기)

2023.03.22 - [기록/개발 노트] - Ionic App 수정 ( 음성인식 기능 추가 )

Ionic App 수정 ( 음성인식 기능 추가 )

Ionic App을 이어서 수정한다.

하단 바를 가리는 기능이 필요해 보인다.

Ionic 으로 웹앱을 활용해서

웹 페이지를 구동한 상태다.

내 Ionic 앱은 3가지 탭을 사용하도록 되어있어서

하단에 Ionic 용 탭이 존재한다.

하지만 웹 상에 5개의 탭이 존재해서

해당 탭과 Ionic 자체 탭까지 사용하려면

가시성이 너무 떨어진다.

+ Ionic 자체 탭이 웹 상의 5개 탭을 가려서

웹 상의 5개 탭을 보려면 화면을 아래로 스크롤 해야됨

 

심지어 만약 Android 유저가

Android navigation bar 까지 사용하면

하단 바가 3개나 되는 셈이다.

 

따라서 반드시 Ionic 하단 바를

가릴 수 있도록 해야된다고 생각했다.

---

1. 버튼으로 하단 바 생성/삭제

<!-- tabs.page.html 파일 -->

<ion-tabs>

  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="tab1">
      <ion-icon name="bar-chart-outline"></ion-icon>
      <ion-label>제어</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="tab2">
      <ion-icon name="Bluetooth"></ion-icon>
      <ion-label>블루투스</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="tab3">
      <ion-icon name="help-circle-outline"></ion-icon>
      <ion-label>도움말</ion-label>
    </ion-tab-button>
  </ion-tab-bar>

  <ion-button (click)="toggleTabBar()">
    Toggle Tab Bar
  </ion-button>
  
</ion-tabs>

//tabs.page.ts 파일

import { Component } from '@angular/core';

@Component({
  selector: 'app-tabs',
  templateUrl: 'tabs.page.html',
  styleUrls: ['tabs.page.scss']
})
export class TabsPage {
  isTabBarHidden = false;
  
  toggleTabBar() {
    const tabBar = document.querySelector('ion-tab-bar');
    this.isTabBarHidden = !this.isTabBarHidden;
    tabBar.style.display = this.isTabBarHidden ? 'none' : 'flex';
  }
}

버튼을 생성하여 하단 바를 가리도록 했다.

위 소스코드를 업로드 후

해당 Toggle Tab Bar 버튼을 클릭하면

하단 바가 사라진다.

 

ion-tab-bar의 속성을 none, flex를 토글해서

사라졌다, 나타났다 하도록 했다.

 

하지만 이렇게 처리해도

결국 하단에 버튼 하나가 생겨서

가시성이 떨어지는건 마찬가지였다.

 

https://github.com/choiprin/Ionic-app/tree/main/hideBarWithButton

GitHub - choiprin/Ionic-app

---

2. 휴대폰 흔들림 감지 하단바 생성/삭제

<!-- tabs.page.html 파일 -->

<ion-tabs>

  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="tab1">
      <ion-icon name="bar-chart-outline"></ion-icon>
      <ion-label>제어</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="tab2">
      <ion-icon name="Bluetooth"></ion-icon>
      <ion-label>블루투스</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="tab3">
      <ion-icon name="help-circle-outline"></ion-icon>
      <ion-label>도움말</ion-label>
    </ion-tab-button>
  </ion-tab-bar>

</ion-tabs>

//tabs.page.ts 파일

import { Component } from '@angular/core';
import { Platform, NavController, ToastController } from '@ionic/angular';

@Component({
  selector: 'app-tabs',
  templateUrl: 'tabs.page.html',
  styleUrls: ['tabs.page.scss']
})
export class TabsPage {
  counter: number = 0;

  constructor(
    private platform: Platform,
    private navController: NavController,
    private toastController: ToastController
  ) {}

  isTabBarHidden = false;
  private lastShakeTime = 0;
  private readonly shakeDelay = 2000; // 2초 대기 시간

  ionViewDidEnter() {
    // Device Motion API를 사용하여 흔들림 이벤트 감지
    window.addEventListener('devicemotion', (event) => {
      const { acceleration, accelerationIncludingGravity } = event;

      if (Math.abs(accelerationIncludingGravity.x) > 20 || Math.abs(accelerationIncludingGravity.y) > 20 ||
      Math.abs(accelerationIncludingGravity.z) > 20) {
        const currentTime = Date.now();
        // 현재 시간과 마지막 흔들림 시간의 차이가 일정 시간 이상이면 하단 바 토글
        if (currentTime - this.lastShakeTime > this.shakeDelay) {
          this.lastShakeTime = currentTime;
          this.toggleTabBarAlert();
          this.toggleTabBar();
        }
      }
    });
  }

  toggleTabBar() {
    const tabBar = document.querySelector('ion-tab-bar');
    this.isTabBarHidden = !this.isTabBarHidden;
    tabBar.style.display = this.isTabBarHidden ? 'none' : 'flex';
  }

  toggleTabBarAlert() {
    this.counter++;

  if(this.counter==1){
      const toast = this.toastController.create({
        message: '하단 바를 숨깁니다',
        duration: 2000,
        position: 'bottom',
        cssClass: 'my-toast'
      });
  
      toast.then((toast) => {
        toast.present();
        const toastElement = document.querySelector('.my-toast') as HTMLElement;
        toastElement.style.transform = 'translateY(-80px)'; // Move the toast up by 80px
        toastElement.style.textAlign = 'center';
      });
      this.navController.pop();
    }

  else if(this.counter==2){
      const toast = this.toastController.create({
        message: '하단 바를 표시합니다',
        duration: 2000,
        position: 'bottom',
        cssClass: 'my-toast2'
      });
  
      toast.then((toast) => {
        toast.present();
        const toastElement = document.querySelector('.my-toast2') as HTMLElement;
        toastElement.style.transform = 'translateY(-80px)'; // Move the toast up by 80px
        toastElement.style.textAlign = 'center';
      });
      this.navController.pop();
    this.counter=0;
    }
  }

}

휴대폰 흔들어서 하단 바를 숨기도록 했다.

각 스마트폰에 내장되어있는

자이로스코프 센서를 활용해서

Device motion API 를 사용한다.

 

x,y,z축이 흔들렸을 때

이벤트가 발생하도록 해서

 

사용자가 스마트폰을 흔들었을 때

하단바가 사라진다.

 

https://github.com/choiprin/Ionic-app/tree/main/hideBarWithShake

GitHub - choiprin/Ionic-app