Android 应用视觉美观：系统和底部导航栏背景颜色匹配指南

2024-03-12 11:13:27

Android 开发：匹配系统和底部导航栏背景颜色的综合指南

引言

在设计 Android 应用程序时，视觉一致性对于提供无缝的用户体验至关重要。这包括确保系统导航栏和底部导航栏的背景颜色相匹配。不一致的颜色会导致分心，影响应用程序的整体美观性。本文将深入探讨在不同 Android 版本中匹配这些颜色背景的方法，提供详细的步骤和示例代码，帮助你提升应用程序的视觉效果。

为什么匹配背景颜色很重要？

匹配系统和底部导航栏的背景颜色带来以下好处：

视觉一致性： 打造无缝的用户界面，增强应用程序的美感。
提升用户体验： 颜色一致性使用户能够专注于内容，而不是被不协调的颜色分心。
品牌一致性： 建立应用程序的品牌标识，使其更易于识别和记忆。

不同 Android 版本的方法

匹配背景颜色的方法因 Android 版本而异：

Android 8.0（Oreo）及以上版本

使用 WindowInsets API：

ViewCompat.setOnApplyWindowInsetsListener(this.findViewById(R.id.coordinator_layout), new OnApplyWindowInsetsListener() {
    @Override
    public WindowInsets onApplyWindowInsets(View v, WindowInsets insets) {
        int navigationBarColor = insets.getSystemNavigationBarColor();
        bottomNavigationView.setBackgroundColor(navigationBarColor);
        return insets;
    }
});

Android 7.1（Nougat）及以下版本

使用反射：

try {
    int navigationBarColor = (int) Class.forName("android.R$color").getField("navigationBarColor").get(null);
    bottomNavigationView.setBackgroundColor(navigationBarColor);
} catch (Exception e) {
    Log.e("MainActivity", "Error accessing navigation bar color", e);
}

示例代码

以下是一个完整示例，适用于所有 Android 版本：

public class MainActivity extends AppCompatActivity {

    private BottomNavigationView bottomNavigationView;

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

        bottomNavigationView = findViewById(R.id.bottom_navigation_view);

        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
            ViewCompat.setOnApplyWindowInsetsListener(this.findViewById(R.id.coordinator_layout), new OnApplyWindowInsetsListener() {
                @Override
                public WindowInsets onApplyWindowInsets(View v, WindowInsets insets) {
                    int navigationBarColor = insets.getSystemNavigationBarColor();
                    bottomNavigationView.setBackgroundColor(navigationBarColor);
                    return insets;
                }
            });
        } else {
            try {
                int navigationBarColor = (int) Class.forName("android.R$color").getField("navigationBarColor").get(null);
                bottomNavigationView.setBackgroundColor(navigationBarColor);
            } catch (Exception e) {
                Log.e("MainActivity", "Error accessing navigation bar color", e);
            }
        }
    }
}