Foggy day

[Android] SplashScreen 완벽 적용

jinhan38 — Sat, 3 Aug 2024 12:49:15 +0900

이번 포스팅에서는 Android에서 SplashScreen을 적용하는 방법을 알아보겠습니다. 좀 더 정확하게는 앱 실행 후 launch activity가 나오기 전에 잠시 동안 나오는 window 화면의 UI를 수정하는 내용입니다. 아무 설정을 하지 않는다면 일반적으로 빈 화면이 노출됩니다.

여기서 말하는 SplashScreen은 SplashActivity를 말하는 것이 아닙니다. Android 12부터 사용 가능한 Splash API를 의미합니다. SplashActivity를 사용하지 않는 방법도 있지만, 예제에서는 SplashActivity와 SplashScreen을 둘 다 사용하겠습니다. 일반적으로 SplashActivity에서 처리해야 하는 작업들이 있기 때문입니다.

1. Dependency

2. Resource

3. Theme

4. SplashActivity

1. Dependency

App gradle에서 디펜던시를 추가해 주세요

implementation("androidx.core:core-splashscreen:1.0.1")

2. Resource

window화면에서 보여줄 Resource를 추가해 주세요

저는 아이콘을 안 보여줄 것이기 때문에 빈 화면의 xml 추가했습니다.

res/drawable/transparent_layer.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@android:color/transparent" />

</layer-list>

그리고 window 배경에 적용할 이미지를 drawable에 추가해 주세요

res/drawable/splash_bg.xml

3. Theme

themes.xml 파일에서 style을 추가하겠습니다.

<style name="Theme.CustomSplash" parent="Theme.SplashScreen">
    <item name="windowSplashScreenBackground">@drawable/splash_bg</item>
    <item name="windowSplashScreenAnimatedIcon">@drawable/transparent_layer</item>
    <item name="postSplashScreenTheme">@style/Theme.Probing</item>
</style>

<style name="Theme.MyApp" parent="Theme.AppCompat.NoActionBar">
    <item name="backgroundColor">@color/white</item>
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
    <item name="android:statusBarColor">@color/white</item>
    <item name="android:windowLightStatusBar">true</item>
</style>

windowSplashScreenBackground
앱 시작 시 나타나는 window화면의 배경입니다. drawable의 resource를 입력해도 되고, 컬러를 입력해도 됩니다.
windowSplashScreenAnimatedIcon
화면 가운데에 나올 Icon입니다. drawable에 있는 파일을 추가하면 됩니다. drawable을 설정하기에 따라서 애니메이션 기능도 구현할 수 있습니다. 저는 아이콘을 안 보여줄 것이기 때문에 transparent_layer 파일을 입력했습니다.
postSplashScreenTheme
Theme.CustomSplash를 적용시킨 후에 적용할 Theme를 입력하면 됩니다. 예제에서는 Theme.MyApp이라는 style을 추가 사용했습니다.

4. SplashActivity

앱 실행 후 최초 진입할 Activity입니다.

SplashActivity를 추가해 주시고, manifest에서 앞서 만든 theme을 적용하겠습니다.

<activity
    android:name=".activity.SplashActivity"
    android:theme="@style/Theme.CustomSplash"
    android:exported="true">
    <intent-filter>
        <action android:name="android.intent.action.MAIN" />

        <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>
</activity>

그리고 SplashActivity.kt에서 SplashScreen을 적용시키겠습니다.
installSplashScreen() 코드를 넣어야 theme들이 window화면에 적용됩니다.

@SuppressLint("CustomSplashScreen")
class SplashActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        installSplashScreen()
        setContentView(R.layout.activity_splash)
    }
}

여기까지 작업이 완료됐다면 앱을 실행할 때 추가한 drawable들이 노출되는 것을 확인할 수 있습니다.

Flutter로 웹 서비스 개발하기 (1) - Flutter Responsive Web

jinhan38 — Wed, 3 Jul 2024 23:18:20 +0900

안녕하세요.

인프런에서 Flutter Web 강의를 개설하게 됐습니다. Flutter에 관심있는 분들에게 추천드립니다.

Flutter SEO에 대하여

많은 Flutter 개발자들이 Flutter Web은 구글에서 검색이 안 되는 것으로 알고 있습니다. 저 또한 예전에는 그렇게 알고 있었습니다. 하지만 이는 잘못된 지식입니다. Flutter로 만든 Web도 구글에 검색이 되고, SEO 최적화 작업도 할 수 있습니다.
구글에 '샐링잇' or 'sailing-it'을 검색해보세요. Flutter로 만든 제 회사의 홈페이지가 검색되는 것을 볼 수 있습니다.(https://sailing-it.com/)
물론 이를 위해서는 추가적인 작업들이 필요합니다. 그래서 직접 SEO 패키지(https://pub.dev/packages/flutter_seo)를 만들어서 pub.dev에 업로드 했습니다. 현재 강의인 Flutter Responsive Web 이후에 제가 만든 패키지를 활용해서 구글에서 검색이 될 수 있도록 SEO를 적용한 Flutter Web SEO 강의를 진행할 예정입니다.

강의에서 배우는 것들은 아래와 같습니다.

Responsive Web
반응형 웹을 개발하는 방법에 대해 배울 것입니다. 웹에서 발생하는 다양한 화면 사이즈에 어떻게 대응하면 좋을지 배울 수 있습니다.
위젯에 대한 이해
커스텀 위젯을 많이 사용하기 때문에 위젯들에 대한 이해도를 높일 수 있습니다.
구조 설계
Web을 개발할 때 필요한 구조를 설계하는 방법을 배울 수 있습니다.
AWS S3 배포
AWS의 S3에 Flutter로 만든 웹을 배포할 수 있습니다.
Style 설정
적절한 스타일 설정 방법을 배울 수 있습니다. FrontEnd에서는 스타일들을 어떤 방식으로 설정할지가 항상 고민입니다. 많은 방법 중 하나가 될 수 있는 Style 설정 방법을 배울 수 있습니다.

이 강의의 특징

인식의 변화
Flutter로도 충분히 Web을 개발할 수 있다는 인식 변화가 우선입니다. 하나의 프레임워크로 App과 Web을 개발할 수 있다는 것은 개발자로서의 자신감 향상과 더불어 할 수 있는 영역이 대폭 넓어질 수 있습니다.
Web 중심의 Flutter 강의
기존의 강의들은 대부분 App 중심의 강의였습니다. 이 강의는 Web 개발에 집중한 Flutter 강의입니다.
낮은 라이브러리 의존성
대부분의 것들을 직접 코드로 작성합니다. 때문에 라이브러리의 의존성이 낮아서 버전 변경에 유연합니다. 또한 직접 코드를 작성하기 때문에 Framework에 대한 이해도가 높아집니다.

https://inf.run/k7Lk2

Flutter로 웹 서비스 개발하기 (1) - Responsive Web 강의 | 김진한 - 인프런

김진한 | 최고의 크로스플랫폼 Flutter, Flutter로 Web을 개발해보세요., Flutter로 Web을 개발해보세요최고의 크로스 플랫폼 Flutter로 App 뿐만 아니라 Web도 개발이 가능합니다.하나의 프레임워크와 언어

www.inflearn.com

[Flutter] Flutter web에서 마우스 드래그 허용, MaterialScrollBehavior/ScrollBehavior, ScrollPhysics

jinhan38 — Fri, 24 May 2024 02:05:33 +0900

이번 포스팅에서는 Flutter web에서 마우스 드래그를 허용하는 방법과 MaterialScrollBehavior, ScrollBehavior에 대해 알아보겠습니다.

1. CustomScrollBehavior

2. MaterialScrollBehavior

3. ScrollPhysics

1. CustomScrollBehavior

Flutter웹에서 마우스 드래그가 안 되는 이유는 기본 세팅값에 mouse 드래그 허용 타입이 빠져있기 때문입니다. 때문에 MaterialScrollBehavior(extends ScrollBehavior)를 커스텀해서 PointerDeviceKind 타입에 mouse를 추가해주면 드래그가 가능합니다.

PointerDeviceKind에 대해 좀 더 자세하게 들여보겠습니다. enum 클래스인 PointerDeviceKind에는 6개의 타입이 있습니다(touch, mouse, stylus, invertedStylus, trackpad, unknown). 그리고 ScrollBehavior에서 PointerDeviceKind 값을 가지고 있는 변수는 dragDevices입니다. dragDevices의 초기 값인 _kTouchLikeDeviceTypes( scroll_configuration.dart) 변수에는 6개의 타입 중 mouse만 빠져 있습니다. 그래서 dragDevices getter를 override해서 mouse 타입을 추가하는 것입니다.

Full code

import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'CustomScrollBehavior',
      scrollBehavior: CustomScrollBehavior(),
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
      ),
      home: Scaffold(
        body: SingleChildScrollView(
          scrollDirection: Axis.horizontal,
          child: Row(
            children: [
              Container(width: 200, height: 300, color: Colors.red),
              Container(
                  width: 200, height: 300, color: Colors.blue),
              Container(
                  width: 200, height: 300, color: Colors.green),
              Container(
                  width: 200, height: 300, color: Colors.purple),
              Container(
                  width: 200, height: 300, color: Colors.orange),
              Container(
                  width: 200, height: 300, color: Colors.yellow),
              Container(
                  width: 200, height: 300, color: Colors.teal),
              Container(
                  width: 200, height: 300, color: Colors.grey),
              Container(
                  width: 200, height: 300, color: Colors.brown),
              Container(
                  width: 200, height: 300, color: Colors.amber),
            ],
          ),
        ),
      ),
    );
  }
}

/// 마우스로 드래그 안 될 때
class CustomScrollBehavior extends MaterialScrollBehavior {
  @override
  Set<PointerDeviceKind> get dragDevices => {
        PointerDeviceKind.touch,
        PointerDeviceKind.mouse,
      };
}

2. MaterialScrollBehavior

MaterialScrollBehavior는 ScrollBehavior의 자식 클래스로 스크롤이 가능한 위젯의 동작 방식을 결정합니다. MaterialScrollBehavior를 처음 접하는 분들이 많을 것 같습니다. 하지만 Flutter를 사용하는 대부분의 개발자들은 인지하지 못한 채 MaterialScrollBehavior를 사용하고 있었습니다. MaterialApp 위젯의 build 함수에서 MaterialScrollBehavior를 사용하고 있었습니다.

MaterialScrollBehavior에서는 3개의 함수를 override하고 있습니다.

getPlatform
TargetPlatform enum class 를 return하며 현재 Flutter application이 어떤 플랫폼에서 동작하는 알 수 있습니다. android, iOS, fuchsia, linux, macOS, windows 6개의 타입이 존재합니다. 만약에 Flutter web이 윈도우에서 돌아갈 경우 windows, mac에서 돌아갈 경우 macOS값을 반환합니다.
buildScrollbar
Scrollable한 위젯에 Scrollbar를 입혀주는 함수입니다. linux, macOS, windows의 platform에서는 Scrollbar를 보여주고 있습니다. android, fuchsia, iOS에서는 Scrollbar를 추가하지 않았습니다. 그래서 우리가 android나 iOS 앱을 개발할 때 스크롤바를 보여주기 위해서는 Scrollable한 위젯을 따로 Scrollbar 위젯으로 감싸줘야 했던 것입니다.
buildOverscrollIndicator
여기서는 android인 경우에만 다른 조건을 설정하고 있습니다. android 플랫폼이고 useMaterial3를 true로 한 경우 StretchingOverscrollIndicator를 반환합니다. 그렇지 않은 경우에는 GlowingOverscrollIndicator를 사용합니다. 그 외의 플랫폼들에서는 child위젯을 그대로 반환합니다.

StretchingOverscrollIndicator은 끝에 도달 했을 때 화면의 위젯들이 고무줄처럼 약간 늘어났다가 돌아오는, stretching하는 효과를 줍니다. GlowingOverscrollIndicator는 반투명한 물결을 보여줍니다.

3. ScrollPhysics

스크롤링에 대한 이벤트를 정의하는 또 다른 특성은 ScrollPhysics클래스입니다. ScrollPhysics는 ios와 macos에는 BouncingScrollPhysics를, 그 외의 플랫폼에는 ClampingScrollPhysics를 사용합니다.
GlowingOverscrollIndicator는 android에서 ClampingScrollPhysics을 사용할 때 동작을 설정하는 역할을 합니다. showLeading의 값을 false로 하면 상단에서는 이펙트가 동작 안하고, showTrailing을 false로 하면 하단에서 이펙트가 동작 안 합니다. color값을 수정하면 물결의 컬러가 변경됩니다.

[Flutter] Image cache(precacheImage)와 WidgetsFlutterBinding, PaintingBinding

jinhan38 — Thu, 16 May 2024 17:55:50 +0900

이번 포스팅에서는 Flutter에서 image를 사전 cache 하는 법과 cache 된 이미지들이 어디에 저장되는지 알아보겠습니다.

Asset 이미지들의 경우 실제로 사용할 때 초반에 잠시 깜빡이는 동작이 발생합니다. 이것은 아직 메모리에 로드되지 않았기 때문입니다. 사전캐싱 처리를 한다면 깜빡이는 동작 없이 바로 이미지를 보여줄 수 있습니다.

1. Image Widget

2. PaintingBinding, WidgetsFlutterBinding

3. precacheImage

1. Image Widget

일반적으로 flutter에서 이미지 위젯을 구현할 때 image 관련 패키지를 사용하거나 flutter 자체에서 제공하는 Image 위젯을 사용합니다. Image 위젯에서는 한 번 이미지를 생성하면 cache를 하도록 돼 있습니다. Image 클래스의 _resolveImage 함수가 그 역할을 합니다. _resolveImage 함수에서 ImageProvider 클래스의 resolve함수를 호출하고, resolve함수에서는 resolveStreamForKey 함수를 호출해서 PaintingBinding -> imageCache 클래스의 _cache 변수에 이미지를 저장합니다.

2. PaintingBinding, WidgetsFlutterBinding

그럼 이미지 데이터를 저장하는 PaintingBinding 클래스는 어디에 있는걸까요? PaintingBinding은 mixin클래스로 WidgetsFlutterBinding 클래스에서 사용하고 있습니다. WidgetsFlutterBinding 클래스에서는 PaintingBinding 외에도 GestureBinding, SchedulerBinding, ServicesBinding, SemanticsBinding, RendererBinding, WidgetsBinding 등의 mixin클래스들을 사용하고 있습니다. WidgetsFlutterBinding 클래스는 일반적으로 main 함수에서 WidgetsFlutterBinding.ensureInitialized(); 코드로 자주 사용됩니다. ensureInitialized 함수를 호출해서 static으로 여러 mixin 클래스들을 초기화시켜 줍니다. 다시 말해 관습적으로 main에서 호출하던 ensureInitialized 함수는 Flutter 엔진에서 사용하는 여러 클래스들을 초기화(인스턴스화) 시켜주는 역할을 합니다.

PaintingBinding의 경우에는 initInstances 함수에서 _imageCache 변수를 생성해주고 있습니다. 이미지 캐시 데이터들을 가지고 있는 ImageCache클래스는 독자적으로 static하게 존재하는 것이 아니라 WidgetsFlutterBinding -> PaintingBinding 클래스의 내부에 존재하고 있었습니다.

3. precacheImage

그러면 이론적인 설명은 차치하고, 이미지를 사전캐싱하는 방법을 알아보겠습니다.

사전 캐싱을 하기 위해서는 precacheImage 함수를 호출해야 합니다. precacheImage 함수는 image.dart파일에서 전역 함수로 존재합니다.

precacheImage(const AssetImage("여기에 assets 파일의 경로를 넣으세요"), context);

위와 같이 호출하면 이미지가 캐시되고, 해당 이미지를 사용할 때 바로 딜레이 없이 로드되는 것을 확인할 수 있습니다.

[Dart] Isolate 사용법(Thread 작업)

jinhan38 — Thu, 9 May 2024 18:40:13 +0900

이번 포스팅에서는 Dart의 Isolate에 대해 알아보겠습니다.

Isoate는 별도의 Thread에서 작업을 할 수 있도록 도와주는 클래스입니다. 시간이 오래 걸리는 작업을 하면서 화면은 계속해서 업데이트 하고 싶은 경우 사용하면 좋습니다.

1. 메인 스레드에서 작업

2. Isolate.run

3. Isolate.spawn

1. 메인 스레드에서 작업

무거운 작업을 메인스레드에서 하게 되면 화면이 멈추는 현상이 발생합니다. 왜냐하면 Flutter는 기본적으로 단일 스레드를 사용하기 때문입니다. UI를 그리는 메인 스레드에서 무거운 연산 작업을 하게 될 경우 화면을 계속해서 업데이트할 수 없기 때문에 멈추는 것입니다. 이러한 것을 정크(jank)라고 합니다.

아래 메인 스레드에서 while문을 돌리는 예제입니다. sleep을 추가해 놨기 때문에 잠시동안 화면이 멈춰버립니다. 이러한 문제를 해결하기 위해서 Isolate를 사용할 수 있습니다.

int count = 0;

/// 메인 스레드에서 작업 실행
ElevatedButton(
  onPressed: () {
    setState(() {
      count = 0;
    });
    while (count < 300) {
      count++;
      sleep(const Duration(milliseconds: 10));
      setState(() {});
    }
  },
  child: const Text("Main Thread"),
)

영상을 보면 작업이 완료 될 때까지 프로그레스바가 멈춰 있는 것을 볼 수 있습니다.

2. Isolate.run

Isolate.run을 사용하면 다른 스레드에서 작업을 요청한 후 결과 값을 돌려받을 수 있습니다. 마치 Future 함수의 형태와 유사합니다.

이때 주의할 것은 Isolate.run의 구현부에서 메인스레드에 있는 변수를 참조하거나 setState를 호출할 경우 오류가 발생합니다. Isolate는 다른 메모리이기 때문에 메인스레드의 메모리에 있는 것들을 공유할 수가 없기 때문입니다. 이러한 문제를 해결하기 위한 것이 Isolate.spawn입니다.

  /// isolate.run 을 사용해서 작업 실행
  ElevatedButton(
    onPressed: () => isolateRun(),
    child: const Text("Isolate run"),
  )
  
  ....

  /// Isolate.run 을 사용해서 다른 스레드 사용
  /// setState 나 다른 변수들을 사용하면 오류 발생 -> 메모리를 공유하지 않기 때문에 변수도 공유할 수 없음
  /// 메인 스레드와 Isolate 스레드 간에 통신을 하기 위해서는 Isolate.spawn 사용 필요.
  void isolateRun() async {
    setState(() {
      count = 0;
    });
    var result = await Isolate.run(() {
      int isolateCount = 0;
      while (isolateCount < 300) {
        isolateCount++;
        sleep(const Duration(milliseconds: 10));
      }
      return isolateCount.toString();
    });
    setState(() {
      count = int.parse(result);
    });
  }

영상을 보면 작업이 완료 될 때까지 프로그레스바가 계속 돌아가고 있는 것을 볼 수 있습니다.

3. Isolate.spawn

Isolate.spawn을 사용하면 Isolate 스레드와 메인 스레드가 통신할 수 있습니다. 마치 Stream 함수의 형태와 유사합니다.

spawn에서는 run과 마찬가지로 구현부가 필요하고, 두 스레드를 연결시켜 줄 도구가 필요합니다. 도구의 역할을 하는 것이 ReceivePort입니다. ReceivePort는 Stream 클래스를 구현한(implement)한 클래스입니다. 때문에 StreamSubscription를 return하는 listen 함수를 사용할 수 있습니다. spawn의 구현부에서 sendPort.send() 함수로 데이터를 보내면 listen 함수에서 메인스레드로 데이터를 받을 수가 있습니다.

  /// isolate spawn 을 사용해서 작업 실행
  ElevatedButton(
    onPressed: () => isolateSpawn(),
    child: const Text("Isolate spawn"),
  ),
  
  ....

  void isolateSpawn() {
    setState(() {
      count = 0;
    });

    /// 메인 스레드와 isolate 스레드를 연결 시켜줄 ReceivePort 생성
    ReceivePort receivePort = ReceivePort();

    /// receivePort.listen을 사용해서 Isolate가 전달하는 데이터를 메인 스레드에서 수신
    receivePort.listen((data) {
      count = int.parse(data);
      setState(() {});
    });

    /// Isolate 생성
    Isolate.spawn(
      /// 다른 스레드에서 작업할 내용
      /// sendPort.send() 함수를 사용해서 메인 스레드에게 데이터를 전달할 수 있음
      (sendPort) async {
        int isolateCount = 0;
        while (isolateCount < 300) {
          isolateCount++;
          sendPort.send(isolateCount.toString());
          sleep(const Duration(milliseconds: 10));
        }
      },

      /// 앞서 생성한 sendPort 전달
      receivePort.sendPort,
    );
  }

영상을 보면 실시간으로 count 값이 변경되는 것을 볼 수 있습니다.

*만약에 Isolate.spawn에 메소드를 사용할 경우 때 첫 번째 인자에 함수를 넣고 싶다면 함수는 반드시 static이어야 합니다. Isolate는 다른 메모리에서 실행되기 때문에 해당 함수가 어떤 객체의 상태에도 의존하지 않아야 합니다. 다시 말해 독립적인 함수의 형태가 필요합니다.

Full code

import 'dart:io';
import 'dart:isolate';

import 'package:flutter/material.dart';

class Home extends StatefulWidget {
  const Home({super.key});

  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  int count = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            /// 메인 스레드에서 작업 실행
            ElevatedButton(
              onPressed: () {
                setState(() {
                  count = 0;
                });
                while (count < 300) {
                  count++;
                  sleep(const Duration(milliseconds: 10));
                  setState(() {});
                }
              },
              child: const Text("Main Thread"),
            ),

            /// isolate.run 을 사용해서 작업 실행
            ElevatedButton(
              onPressed: () => isolateRun(),
              child: const Text("Isolate run"),
            ),

            /// isolate spawn 을 사용해서 작업 실행
            ElevatedButton(
              onPressed: () => isolateSpawn(),
              child: const Text("Isolate spawn"),
            ),

            Text(
              "count : $count",
              style: const TextStyle(fontSize: 25),
            ),
            const Center(child: CircularProgressIndicator()),
          ],
        ),
      ),
    );
  }

  /// Isolate.run 을 사용해서 다른 스레드 사용
  /// setState 나 다른 변수들을 사용하면 오류 발생 -> 메모리를 공유하지 않기 때문에 변수도 공유할 수 없음
  /// 메인 스레드와 Isolate 스레드 간에 통신을 하기 위해서는 Isolate.spawn 사용 필요.
  void isolateRun() async {
    setState(() {
      count = 0;
    });
    var result = await Isolate.run(() {
      int isolateCount = 0;
      while (isolateCount < 300) {
        isolateCount++;
        sleep(const Duration(milliseconds: 10));
      }
      return isolateCount.toString();
    });
    setState(() {
      count = int.parse(result);
    });
  }

  void isolateSpawn() {
    setState(() {
      count = 0;
    });

    /// 메인 스레드와 isolate 스레드를 연결 시켜줄 ReceivePort 생성
    ReceivePort receivePort = ReceivePort();

    /// receivePort.listen을 사용해서 Isolate가 전달하는 데이터를 메인 스레드에서 수신
    receivePort.listen((data) {
      count = int.parse(data);
      setState(() {});
    });

    /// Isolate 생성
    Isolate.spawn(
      /// 다른 스레드에서 작업할 내용
      /// sendPort.send() 함수를 사용해서 메인 스레드에게 데이터를 전달할 수 있음
      (sendPort) async {
        int isolateCount = 0;
        while (isolateCount < 300) {
          isolateCount++;
          sendPort.send(isolateCount.toString());
          sleep(const Duration(milliseconds: 10));
        }
      },

      /// 앞서 생성한 sendPort 전달
      receivePort.sendPort,
    );
  }
}

참조 문서

https://dart.dev/language/isolates

[Flutter] AnimatedCrossFade widget

jinhan38 — Wed, 8 May 2024 14:05:29 +0900

이번 포스팅에서는 AnimatedCrossFade 위젯에 대해 알아보겠습니다. AnimatedCrossFade는 두 위젯을 애니메이션 사용해서 바꿀 수 있도록 도와줍니다. 컬러나 텍스트 뿐만 아니라 사이즈 변경까지도 자동으로 애니메이션을 적용시킬 수 있기 때문에 매우 유용한 위젯입니다.

최종 동영상

first와 second 위젯을 지정해준 후에 crossFadeState 값에 어떤 위젯을 보여줄지 결정해주면 됩니다.

아래 예제에서는 first라는 변수로 구분해주고 있습니다.

간단하게 사용할 수 있으니 부가적인 설명은 생략했습니다.

class Home extends StatefulWidget {
  const Home({super.key});

  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  bool first = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            ElevatedButton(
                onPressed: () {
                  setState(() {
                    first = !first;
                  });
                },
                child: const Text("변경")),
            Expanded(
              child: AnimatedCrossFade(
                firstChild: Container(
                  width: 300,
                  height: 300,
                  color: Colors.red,
                  child: const Center(
                    child: Text(
                      "첫 번째 widget",
                      style: TextStyle(fontSize: 20, color: Colors.white),
                    ),
                  ),
                ),
                secondChild: Container(
                  width: 400,
                  height: 400,
                  color: Colors.blue,
                  child: const Center(
                    child: Text(
                      "두 번째 widget",
                      style: TextStyle(fontSize: 20, color: Colors.white),
                    ),
                  ),
                ),
                crossFadeState: first
                    ? CrossFadeState.showFirst
                    : CrossFadeState.showSecond,
                duration: const Duration(milliseconds: 1500),
                // reverseDuration: const Duration(milliseconds: 3000),

                // firstCurve: Curves.fastOutSlowIn,

                // secondCurve: Curves.elasticInOut,

                // sizeCurve: Curves.slowMiddle,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

[Android] Android에서 SharedPreference 사용하면서 발생할 수 있는 오류

jinhan38 — Wed, 3 Apr 2024 13:58:39 +0900

최근 Kotlin으로 만든 Android Native앱을 업데이트 한 후 기존에는 없던 오류가 발생하는 일이 생겼습니다.

원인은 SharedPreference에 저장한 데이터의 형식이 변경됐기 때문입니다.

기존에 apple이라는 key로 int의 값을 저장했습니다. 업데이트 후에는 apple이라는 key의 타입을 Long으로 변경해서 사용했습니다.

개발을 할 땐 앱을 삭제 후 새로 설치하기 때문에 문제가 되는 것은 없었습니다.

하지만 일반 사용자들이 앱을 삭제하거나 데이터를 삭제하지 않고, 바로 업데이트해서 사용하는 경우 SharedPreference에 저장한 apple이라는 값의 type이 달라져서 오류가 발생했습니다.

운영하면서 경험해볼 수 있는 오류였습니다.

[Android] 접근성 서비스(AccessibilityService) - Click Event

jinhan38 — Sun, 24 Mar 2024 14:42:34 +0900

이번 포스팅에서는 Android의 접근성 서비스(AccessibilityService)에 대해 알아보겠습니다.

접근성 서비스는 기본적으로 장애가 있는 사용자를 위한 서비스입니다. 하지만 디바이스의 화면을 컨트롤 하기 위해 많이 사용되곤 합니다.

Accessibility services should only be used to assist users with disabilities in using Android devices and apps
https://developer.android.com/reference/android/accessibilityservice/AccessibilityService

AccessibilityService | Android Developers

developer.android.com

1. AccessibilityService 클래스 생성

2. Manifest 추가

3. accessibility_service_config 작성

4. runtime 권한 획득

5. Click Gesture Event 발생

1. AccessibilityService 클래스 생성

AccessibilityService 클래스를 상속받은 클래스를 생성해주세요.

코드에서는 3개의 함수를 override 했습니다.

onAccessibilityEvent 함수는 사용자가 화면을 터치 했을 때 진입하는 함수입니다.

onStartCommand 함수는 MyAccessibilityService 클래스로 intent를 사용해서 데이터를 전달할 때 호출됩니다.

onInterrupt 함수는 해당 서비스가 종료되면 호출됩니다.

import android.accessibilityservice.AccessibilityService
import android.accessibilityservice.GestureDescription
import android.content.Intent
import android.graphics.Path
import android.view.accessibility.AccessibilityEvent

class MyAccessibilityService : AccessibilityService() {

    // 화면 터치 이벤트 발생 시 호출됨
    override fun onAccessibilityEvent(event: AccessibilityEvent?) {
    }

    override fun onStartCommand(intent: Intent?, flags: Int, startId: Int): Int {
    // 뒤에서 구현 예정
        return super.onStartCommand(intent, flags, startId)
    }

    // 서비스 중단 시 호출
    override fun onInterrupt() {
    }
}

2. Manifest 추가

Manifest에 service 태그를 추가해주세요.

따로 추가할 uses-permission은 없습니다.

meta-data의 resource에 accessibility_service_config를 사용해야 합니다.

<service
    android:name=".MyAccessibilityService"
    android:exported="true"
    android:permission="android.permission.BIND_ACCESSIBILITY_SERVICE">
    <intent-filter>
        <action android:name="android.accessibilityservice.AccessibilityService" />
    </intent-filter>
    <meta-data
        android:name="android.accessibilityservice"
        android:resource="@xml/accessibility_service_config" />
</service>

3. accessibility_service_config 작성

res/xml/ 경로에 accessibility_service_config.xml 파일을 만들겠습니다.

아래 특성 중 canPerformGestures 값을 true로 설정해야 Gesture 이벤트를 발생시킬 수 있습니다.

<?xml version="1.0" encoding="utf-8"?>
<accessibility-service xmlns:android="http://schemas.android.com/apk/res/android"
    android:accessibilityEventTypes="typeAllMask"
    android:accessibilityFeedbackType="feedbackAllMask"
    android:canPerformGestures="true"
    android:canRetrieveWindowContent="true"
    android:description="@string/accessibility_service_description" />

4. runtime 권한 획득

runtime에서 접근성 권한을 획득해야 합니다.

먼저 접근성 권한이 있는지 체크해줍니다.

/**
 * 접근성 권한 있는지 체크 
 */
private fun isAccessibilityServiceEnabled(context: Context, service: Class<out AccessibilityService>): Boolean {
    val expectedComponentName = ComponentName(context, service)

    val enabledServicesSetting = Settings.Secure.getString(
        context.contentResolver,
        Settings.Secure.ENABLED_ACCESSIBILITY_SERVICES
    ) ?: return false

    val colonSplitter = TextUtils.SimpleStringSplitter(':')
    colonSplitter.setString(enabledServicesSetting)

    while (colonSplitter.hasNext()) {
        val componentNameString = colonSplitter.next()
        val enabledComponentName = ComponentName.unflattenFromString(componentNameString)
        if (enabledComponentName != null && enabledComponentName == expectedComponentName)
            return true
    }

    return false
}

권한이 없을 경우 접근성 권한을 활성화 시킬 수 있는 설정 화면으로 이동시켜줘야 합니다.

 startActivity(Intent(Settings.ACTION_ACCESSIBILITY_SETTINGS))

5. Click Gesture Event 발생(접근성 권한 승인 이후 진행)

코드로 Click 이벤트를 발생시켜보겠습니다.

먼저 MyAccessibilityService를 수정하겠습니다. 앞선 코드와는 다르게 onStartCommand에서 intent의 데이터를 받고 clickScreen 함수를 호출하고 있습니다.

import android.accessibilityservice.AccessibilityService
import android.accessibilityservice.GestureDescription
import android.content.Intent
import android.graphics.Path
import android.view.accessibility.AccessibilityEvent

class MyAccessibilityService : AccessibilityService() {

    // 화면 터치 이벤트 발생 시 호출됨
    override fun onAccessibilityEvent(event: AccessibilityEvent?) {
    }

    override fun onStartCommand(intent: Intent?, flags: Int, startId: Int): Int {
        if (intent?.action == "touch") {
            val x = intent.getIntExtra("x", 0)
            val y = intent.getIntExtra("y", 0)
            clickScreen(x.toFloat(), y.toFloat())
        }
        return super.onStartCommand(intent, flags, startId)
    }

    /**
     * 화면 클릭
     */
    private fun clickScreen(x: Float, y: Float, startTime: Long = 100, duration: Long = 100) {
        val gestureBuilder = GestureDescription.Builder()
        val path = Path()
        path.moveTo(x, y)
        gestureBuilder.addStroke(GestureDescription.StrokeDescription(path, startTime, duration))
        val gesture = gestureBuilder.build()
        dispatchGesture(gesture, object : GestureResultCallback() {
            override fun onCompleted(gestureDescription: GestureDescription?) {
                super.onCompleted(gestureDescription)
                // 화면 터치 제스처 실행 완료
            }

            override fun onCancelled(gestureDescription: GestureDescription?) {
                super.onCancelled(gestureDescription)
                // 화면 터치 제스처 실행 취소
            }
        }, null)
    }

    // 서비스 중단 시 호출
    override fun onInterrupt() {
    }
}

onStartCommand 함수에 데이터를 전달하기 위해서는 intent를 만들어서 startService를 호출해야 합니다.

action을 touch로 세팅한 후 x, y 값을 추가해줬습니다.

val intentTouch = Intent(this, MyAccessibilityService::class.java)
intentTouch.action = "touch"
intentTouch.putExtra("x", 100)
intentTouch.putExtra("y", 100)
startService(intentTouch)

[Android] Hex 투명도 표

jinhan38 — Fri, 15 Mar 2024 20:08:08 +0900

HEX	투명도	HEX	투명도	HEX	투명도	HEX	투명도
00	0%	4F	31%	92	62%	ED	93%
03	1%	52	32%	A1	63%	F0	94%
05	2%	54	33%	A3	64%	F2	95%
08	3%	57	34%	A6	65%	F5	96%
0A	4%	59	35%	A8	66%	F7	97%
0D	5%	5C	36%	AB	67%	FA	98%
0F	6%	5E	37%	AD	68%	FC	99%
12	7%	61	38%	B0	69%	FF	100%
14	8%	63	39%	B3	70%
17	9%	66	40%	B5	71%
1A	10%	69	41%	B8	72%
1C	11%	6B	42%	BA	73%
1F	12%	6E	43%	BD	74%
21	13%	70	44%	BF	75%
24	14%	73	45%	C2	76%
26	15%	75	46%	C4	77%
29	16%	78	47%	C7	78%
2B	17%	7A	48%	C9	79%
2E	18%	7D	49%	CC	80%
30	19%	80	50%	CF	81%
33	20%	82	51%	D1	82%
36	21%	85	52%	D4	83%
28	22%	87	53%	D6	84%
3B	23%	8A	54%	D9	85%
3D	24%	8C	55%	DB	86%
40	25%	8F	56%	DE	87%
42	26%	91	57%	E0	88%
45	27%	94	58%	E3	89%
47	28%	96	59%	E6	90%
4A	29%	99	60%	E8	91%
4D	30%	9C	61%	EB	92%

[Android] Overlay View 그리기

jinhan38 — Tue, 12 Mar 2024 11:59:16 +0900

Android에서 Overlay 기능이 필요할 때가 있습니다. 예를 들어 네비게이션 앱처럼 앱을 백그라운드 상태로 두더라도 화면에 특정 View를 보여주는 것입니다. 이럴 때 사룔하는 것이 Overlay 기능입니다. 다른 앱 위에 우리가 설정한 View를 보여주고, 특정 로직을 수행할 수 있습니다. 이를 위해서는 권한 요청과 Service 클래스를 구현해야 합니다.

Overlay를 사용할 때 주의할 것은 앱을 종료시키더라도 Overlay가 같이 종료되는 것은 아니라는 점입니다. 때문에 비즈니스 로직에 따라서 어떠한 경우에 overlay를 종료시킬지, 계속 살려둘지를 잘 설정해야 합니다. 또한 Service만 종료시키는 것이 아니라 View들도 직접 제거해줘야 합니다.

예제에서 구현한 기능

1. Overlay 권한 획득

2. Overlay Service 호출

3. OverlayService에서 View 추가 및 사이즈 변경

4. Overlay 종료 프로세스

자세한 내용은 코드에 주석으로 추가했습니다.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools">

    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW" />

    <application
       
       ... 
       
        <activity
            android:name=".OverlayActivity"
            android:exported="true" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

        <service
            android:name=".OverlayBoxService"
            android:enabled="true"
            android:exported="true"
            android:permission="android.permission.SYSTEM_ALERT_WINDOW" />
            
    </application>

</manifest>

OverlayActivity

class OverlayActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_overlay)
        findViewById<Button>(R.id.bt_show_overlay).setOnClickListener {
            checkOverlayPermission()
        }
    }

    /**
     * 권한 요청
     */
    private fun checkOverlayPermission() {
        if (!Settings.canDrawOverlays(this)) {
            val intent = Intent(
                Settings.ACTION_MANAGE_OVERLAY_PERMISSION,
                Uri.parse("package:$packageName")
            )
            activityResultLauncher.launch(intent)
        } else {
            showOverlay()
        }
    }

    /**
     * 권한 요청 리스너
     */
    private val activityResultLauncher: ActivityResultLauncher<Intent> = registerForActivityResult(
        ActivityResultContracts.StartActivityForResult()
    ) {
        if (Settings.canDrawOverlays(this)) {
            showOverlay()
        }
    }

    /**
     * Overlay 서비스 호출
     */
    private fun showOverlay() {
        val serviceIntent = Intent(this, OverlayBoxService::class.java)
        startService(serviceIntent)
    }

    /**
     * 앱을 종료시킬 때 Service도 같이 종료시키는 로직
     */
    override fun onDestroy() {
        val serviceIntent = Intent(this, OverlayBoxService::class.java)
        stopService(serviceIntent)
        super.onDestroy()
    }
}

activity_overlay

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".OverlayActivity">

    <Button
        android:id="@+id/bt_show_overlay"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:text="Show Overlay"
        android:layout_marginBottom="15dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

OverlayBoxService

api레벨에 따른 분기처리도 추가했습니다.

import android.app.Service
import android.content.Context
import android.content.Intent
import android.graphics.Color
import android.graphics.PixelFormat
import android.os.Build
import android.os.IBinder
import android.util.DisplayMetrics
import android.view.Gravity
import android.view.View
import android.view.WindowManager
import android.widget.Button


class OverlayBoxService : Service() {
    companion object {
        private const val TAG = "OverlayBoxService"
    }

    override fun onBind(p0: Intent?): IBinder? {
        return null
    }


    private lateinit var windowManager: WindowManager

    private var screenWidth = 0
    private var screenHeight = 0
    private var flag: Int = 0

    private lateinit var boxView: View
    private lateinit var changeButton: Button
    private lateinit var closeButton: Button

    override fun onCreate() {
        super.onCreate()
        windowManager = getSystemService(WINDOW_SERVICE) as WindowManager
        getScreenSize()
        setParamFlag()
        setBoxView()
        setSizeChangeButton()
        setCloseOverlayButton()
    }

    /**
     * api 레벨에 따라서 화면 사이즈 불러오기
     */
    private fun getScreenSize() {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.R) {
            val screenRect = windowManager.currentWindowMetrics.bounds
            screenWidth = screenRect.right
            screenHeight = screenRect.bottom
        } else {
            val metrics = DisplayMetrics()
            windowManager.defaultDisplay.getMetrics(metrics)
            screenWidth = metrics.widthPixels
            screenHeight = metrics.heightPixels
        }
    }

    /**
     * api 레벨에 따라서 flag 설정
     */
    private fun setParamFlag() {
        flag = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
            WindowManager.LayoutParams.TYPE_APPLICATION_OVERLAY
        } else {
            WindowManager.LayoutParams.TYPE_SYSTEM_ALERT
        }
    }

    /**
     * BoxView 세팅
     */
    private fun setBoxView() {
        boxView = View(this)
        boxView.setBackgroundColor(Color.BLUE)
        val params = WindowManager.LayoutParams(
            screenWidth / 2,
            screenHeight / 3,
            flag,
            WindowManager.LayoutParams.FLAG_NOT_FOCUSABLE,
            PixelFormat.TRANSLUCENT
        )
        params.gravity = Gravity.CENTER
        windowManager.addView(boxView, params)

    }

    /**
     * BoxView 사이즈 변경하는 버튼 세팅
     */
    private fun setSizeChangeButton() {
        changeButton = Button(this)
        changeButton.text = "사이즈 변경"
        changeButton.setOnClickListener {
            changeSize(screenWidth / 5, screenHeight / 5)
        }
        val params = WindowManager.LayoutParams(
            screenWidth,
            dpToPx(60, this),
            flag,
            WindowManager.LayoutParams.FLAG_NOT_FOCUSABLE,
            PixelFormat.TRANSLUCENT
        )
        params.y = dpToPx(75, this)
        params.gravity = Gravity.BOTTOM or Gravity.START
        windowManager.addView(changeButton, params)
    }

    /**
     * Overlay 종료 버튼
     */
    private fun setCloseOverlayButton() {
        closeButton = Button(this)
        closeButton.text = "종료"
        closeButton.setOnClickListener {
            removeViews()
            stopSelf()
        }
        val params = WindowManager.LayoutParams(
            screenWidth,
            dpToPx(60, this),
            flag,
            WindowManager.LayoutParams.FLAG_NOT_FOCUSABLE,
            PixelFormat.TRANSLUCENT
        )
        params.y = dpToPx(135, this)
        params.gravity = Gravity.BOTTOM or Gravity.START
        windowManager.addView(closeButton, params)

    }

    /**
     * dp를 px 사이즈로 변경
     */
    private fun dpToPx(dp: Int, context: Context): Int {
        val density = context.resources.displayMetrics.density
        return (dp * density + 0.5f).toInt()
    }

    /**
     * BoxView 사이즈 변경
     */
    private fun changeSize(width: Int, height: Int) {
        val params = WindowManager.LayoutParams(
            width,
            height,
            flag,
            WindowManager.LayoutParams.FLAG_NOT_FOCUSABLE,
            PixelFormat.TRANSLUCENT
        )
        windowManager.updateViewLayout(boxView, params)

    }

    /**
     * OverlayActivity에서 onDestroy 가 호출 될 때 Service를 종료시키는 로직을 추가했습니다.
     * Service를 종료시킬 때 view들을 제거해줘야 완전히 화면에서 사라집니다.
     */
    override fun onDestroy() {
        removeViews()
        super.onDestroy()
    }

    private fun removeViews() {
        if (boxView.parent != null) windowManager.removeView(boxView)
        if (changeButton.parent != null) windowManager.removeView(changeButton)
        if (closeButton.parent != null) windowManager.removeView(closeButton)
    }

}