Android 앱에 어두운 테마를 포함하는 방법

개발자에게 Android 앱을 만드는 것은 쉬운 과정입니다. 매력적인 UI를 디자인하는 것은 실제로 어려운 일입니다. 그래서 간단하면서도 매력적인 UI를 만드는 데 영감이 필요한 개발자를 위해 "간단한 Android 앱 UI를 디자인하는 방법" 가이드를 작성했습니다. 그 가이드에서 우리는 앱에 어두운/야간 모드 테마를 추가하는 것에 대해 간략하게 언급했으며 이 가이드에서 당신을 안내할 것입니다.

앱에 다크/야간 모드 테마를 추가하는 것은 사용자에게 훌륭한 옵션이 될 수 있습니다. 배터리 수명이 절약되고 밤에 눈이 훨씬 편안해집니다. 검정색 텍스트의 흰색 배경 또는 UI의 '밝은' 색상 조합은 특히 밤에 눈에 스트레스를 줍니다. 따라서 밝은 텍스트가 있는 어두운 배경은 훨씬 덜 스트레스를 주고 눈에 해롭습니다. 그래서 Facebook과 Reddit과 같은 어두운 테마를 가장 최근에 포함하기 시작한 많은 인기 앱이 시작되었습니다. 5월.

토글 가능한 다크 모드를 Android 앱에 쉽게 추가하려면 이 Appuals 가이드를 따르고 문제가 발생하면 댓글을 남겨주세요!

XML 속성 생성

먼저 테마를 처리할 XML 속성 파일을 생성해야 합니다. Android는 이 XML을 통해 속성의 색상을 기본적으로 변경할 수 있으므로 APK에 두 개의 서로 다른 테마에 대한 두 개의 리소스 세트를 포함하여 APK 크기를 부풀리는 것보다 훨씬 낫습니다.

따라서 앱의 '리소스' 폴더에 attrs.xml이라는 파일을 만듭니다. 다음 줄을 추가합니다(이것은 스타일 지정 가능한 속성입니다).

<declare-styleable name="CTAppTheme">
      <attr name=”primaryTextColor” format=”color”/> 
      <attr name=”secondaryTextColor” format=”color”/> 
      <attr name=”dividerColor” format=”color”/>
      <attr name=”backgroundCardColor” format=”color”/> 
      <attr name=”iconPlaceholder” format=”integer”/>
</declare-styleable>

Lollipop 이전에는 드로어블에 대한 속성을 지정할 수 없었기 때문에 드로어블에 대한 리소스 ID를 지정해야 했지만 더 이상 그렇지 않습니다.

스타일 추가

이 작업을 수행하려면 동일한 기반을 공유하는 두 개의 개별 스타일을 만들어야 합니다. 첫 번째는 분명히 기본 '밝은' 테마가 될 것이고 두 번째는 '어두운' 테마가 될 것입니다.

<!-- Light base activity theme -->
<style name="ActivityTheme.Primary.Base.Light" parent="Theme.AppCompat.NoActionBar">
    <item name="primaryTextColor">#F4F4F6</item>
    <item name="secondaryTextColor">#96F4F4F6</item>
    <item name="backgroundCardColor">#FFFF</item>
    <item name="dividerColor">#F2F2F3</item>
    <item name="iconPlaceholder">@drawable/i_light_plholder</item>
</style>

<!-- Dark base activity theme -->
<style name="ActivityTheme.Primary.Base.Dark"    parent="Theme.AppCompat.NoActionBar">
    <item name="primaryTextColor">#33343B/item>
    <item name="secondaryTextColor">#8033343B</item>
    <item name="backgroundCardColor">#28292e</item>
    <item name="dividerColor">#F2F2F3</item>
    <item name="iconPlaceholder">@drawable/i_dark_pholder</item>
</style>

다음은 특정 활동의 실제 스타일입니다.

<!-- Specific Feed activity theme -->
<style name="FeedActivityThemeLight" parent="ActivityTheme.Primary.Base.Light">
    <item name="android:windowBackground">#F4F4F6</item>
</style>

<style name="FeedActivityThemeDark" parent="ActivityTheme.Primary.Base.Dark">
    <item name="android:windowBackground">#33343B</item>
</style>

앱 활동의 매니페스트에 이러한 테마 중 하나를 지정해야 합니다. 이 경우에는 FeedActivity입니다.

보기 스타일 지정

다음은 보기 스타일 지정의 예입니다. 이 예에서는 "페이지를 찾을 수 없음" 리디렉션 오류에 대한 것입니다.

<ImageView
           android:id="@+id/placeHolderAssetImageView"
           android:layout_width="100dp"
           android:layout_height="100dp"
           android:src="?attr/iconPlaceholder"
           android:layout_marginBottom="8dp" />

       <TextView
           android:id="@+id/placeHolderTitleTextView"
           android:text="Page not found."
           android:textSize="16dp"
           android:textColor="?attr/primaryTextColor"
           android:layout_margin="16dp" />

동적 테마 전환을 활성화하는 방법

동적 테마 전환을 활성화하는 가장 효율적이고 효과적인 방법은 Singleton 패턴을 사용하여 애플리케이션 인스턴스에 설정을 저장하는 데 사용되는 SharedPreference 값을 로드하는 것입니다.

public class App extends Application {
 public static final String TAG = "App";

private boolean isNightModeEnabled = false;

@Override
 public void onCreate() {
 super.onCreate();

// We load the Night Mode state here
 SharedPreferences mPrefs =  PreferenceManager.getDefaultSharedPreferences(this);
 this.isNightModeEnabled = mPrefs.getBoolean(“NIGHT_MODE”, false);
 }

public boolean isNightModeEnabled() {
 return isNightModeEnabled;
 }

public void setIsNightModeEnabled(boolean isNightModeEnabled) {
 this.isNightModeEnabled = isNightModeEnabled;
 }
}

이 인스턴스는 다른 것보다 먼저 시작되기 때문에 isNightModeEnabled() 를 호출할 수 있습니다. 앱이 열리면 앱에 속한 모든 활동에서 원할 때마다 부울입니다.

public final class FeedActivity extends AppCompatActivity {
 private final static String TAG = “FeedActivity”;

@Override
 protected void onCreate(Bundle savedInstanceState) {
    if (MyApplication.getInstance().isNightModeEnabled()) {
       setTheme(R.style.FeedActivityThemeDark);
    }
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_feed);
 }
}

그러나 매니페스트 파일에 지정된 것과 다른 테마를 적용하려면 이전에 완료해야 합니다 부모 onCreate() 메서드를 호출합니다.

AppCompat을 사용하여 상태 설정

AppCompat은 다양한 용도로 매우 유용하며 이 경우 모드 상태를 설정하는 데 사용할 것입니다. 즉, 더 이상 앱 인스턴스를 사용하여 캐시된 상태를 생성할 필요가 없으므로 앱 캐시 팽창을 줄입니다(아주 작은 여백). ).

AppCompatDelegate
.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES);

여기에서 다음 중 하나를 사용할 수 있습니다.

AppCompatDelegate.MODE_NIGHT_YES
AppCompatDelegate.MODE_NIGHT_NO
AppCompatDelegate.MODE_NIGHT_AUTO

상태 검색

AppCompatDelegate.getDefaultNightMode();

public final class FeedActivity extends AppCompatActivity {
 private final static String TAG = “FeedActivity”;

@Override
 protected void onCreate(Bundle savedInstanceState) {
    if (AppCompatDelegate.getDefaultNightMode()
    ==AppCompatDelegate.MODE_NIGHT_YES) {
       setTheme(R.style.FeedActivityThemeDark);
    }
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_feed);
 }
}

그것으로 충분합니다. 계속해서 원하는 대로 값을 맞춤설정하고 조정할 수 있지만 이 가이드는 네이티브 Android 앱의 어두운 테마.