xamarin.forms设置状态栏和导航栏颜色

4年前 52,961 0

实现沉浸式状态栏方法之一，是在MainActivity中的OnCreate方法中加入如下设置，使得状态栏颜色和导航栏颜色一致，达到沉浸式。

1	Window.SetStatusBarColor(Android.Graphics.Color.ParseColor("#2296F3"));

以上是设置状态栏颜色，

设置底部导航栏颜色（默认为黑色）：

1	Window.SetNavigationBarColor(Color.ParseColor("#FF0000"));

textColorPrimary这个选项不存在，会报错，别想别的办法吧。

修改ActionBar颜色，可以到xamarin.android values文件夹下styles中设置

在xamarin.from 上我们经常会使用到页面跳转方式，

public App()

{

InitializeComponent();

MainPage = new NavigationPage(new MainPage()); // new MainPage();

((NavigationPage)MainPage).BarTextColor = Color.Red;

((NavigationPage)MainPage).BarBackgroundColor = Color.Green;

}

如上方式写的跳转，这种方式设置的ToolbarItem在IOS上是可以有效果的，但是在android上却无效，当你想在ToolbarItem上直接更改的时候发现并没有更改选项，

需做如下设置来更改:

1、在android层，找到MainActivity.cs文件，在文件上找到[Activity(MainLauncher = false, Label = "", Theme = "@style/style_titlebar_normal", Icon = "@drawable/icon", ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation)]，注意这个Theme="@style/style_titlebar_normal"。

2、接着在Resources\values\Style.xml上找到相关的style_titlebar_normal（以自己的主题为准）。

3、设置代码如下：

<item name="android:icon">@android:color/transparent</item>

<item name="android:windowTitleStyle">@style/windowTitleStyle</item>

<item name="android:actionMenuTextColor">@color/colorwhite</item>

</style>

xamarin.from ToolbarItem或ActionBar 字体大小和颜色更改

Android应用中经常会有一些要求全屏显隐状态栏导航栏的需求。通过全屏沉浸式的处理可以让应用达到更好的显示效果。下面系统的讲解一下有关全屏，隐藏状态栏导航栏，沉浸式的知识。

在Android4.1之前只能隐藏状态栏，在Android4.1以及之后Android提供了一套控制SystemUI的方式，重点放在第二部分。

在Android4.1之前隐藏状态栏

在Android4.1之前你可以通过设置WindowManager来隐藏状态栏。你可以通过编码来实现，也可以通过在manifest文件中给activity设置theme来实现。
如果你要设置activity的状态栏一直处于隐藏状态，那么在manifest设置的方式是你的首选方式（尽管也可以使用编程方式。）。实现方式如下。

<application

...

android:theme="@android:style/Theme.Holo.NoActionBar.Fullscreen" >

...

</application>

使用manifest设置的方式有以下优点：

比编程方式更加容易维护，更不容易出错。
会有一个更加平滑的过渡，因为在实例化activity之前系统就已经拥有了呈现UI所需的信息。

另外，也可以以编程方式设置WindowsManager标志。这种方法使用户在与应用程序交互时更容易隐藏和显示状态栏。

public class MainActivity extends Activity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

// If the Android version is lower than Jellybean, use this call to hide

// the status bar.

if (Build.VERSION.SDK_INT < 16) {

getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,

WindowManager.LayoutParams.FLAG_FULLSCREEN);

}

setContentView(R.layout.activity_main);

}

...

}

当你设置WindowsManager标志时(无论是通过theme还是以编程方式)，除非您的应用程序清除了这些标志，否则这些标志将保持有效。

可以使用FLAG_LAYOUT_IN_SCREEN将activity布局设置为使用相同的屏幕区域。当你启用FLAG_FILLSCREEN时，可以使用相同的屏幕区域。这将防止在状态栏隐藏和显示时调整内容的大小。

设置全屏

从这里开始才是本文的重点。

在Android4.1以及更高版本可以使用setSystemUiVisibility来控制SystemUI，为了更系统的讲解，不分别按照效果来讲，而是把用到的flag先列出来一起讲。以下flag经过互相组合能达到全屏隐藏状态栏，全屏隐藏导航栏，全屏显示状态栏导航栏等很多不同效果。

控制SystemBar相关：

SYSTEM_UI_FLAG_FULLSCREEN
SYSTEM_UI_FLAG_HIDE_NAVIGATION
SYSTEM_UI_FLAG_LOW_PROFILE

布局相关：

SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
SYSTEM_UI_FLAG_LAYOUT_STABLE

沉浸式相关 (4.4 引入)：

SYSTEM_UI_IMMERSIVE
SYSTEM_UI_IMMERSIVE_STICKY

控制 SystemBar 相关

SYSTEM_UI_FLAG_FULLSCREEN

该属性是用来隐藏状态栏的。

View decorView = getWindow().getDecorView();

int uiOptions = View.SYSTEM_UI_FLAG_FULLSCREEN;

decorView.setSystemUiVisibility(uiOptions);

getSupportActionBar().hide();

通过以上代码可以实现隐藏状态栏。为了显示出全屏效果，建议同时将ActionBar隐藏掉。仅设置这一条属性，显示效果存在以下特性。

当滑动system bar、点击home键menu键就会清除掉flag，状态栏会重新显示出来。
并且布局也会随着状态栏的显隐进行布局调整进行重绘。

image

效果图

SYSTEM_UI_HIDE_NAVIGATION

该属性是用来隐藏导航栏的

View decorView2 = getWindow().getDecorView();

int uiOptions2 = View.SYSTEM_UI_FLAG_HIDE_NAVIGATION

| View.SYSTEM_UI_FLAG_FULLSCREEN;

decorView2.setSystemUiVisibility(uiOptions2);

以上代码可以实现隐藏状态栏和导航栏。
尽管可以仅仅隐藏导航栏，但是建议隐藏导航栏的时候将状态栏一并隐藏，以达到更好的沉浸效果。

与隐藏状态栏不同的是点击任意布局中的任意位置都会导致导航栏导航栏重新显示出来。
并且布局也会随着状态栏导航栏的显隐进行布局调整进行重绘。

image

SYSTEM_UI_LOW_PROFILE

这个属性的能力是让SystemBar在视觉上变得模糊，重要性变得更低一点。具体表现是状态栏图标仅保留电量时间关键图标，并且变暗。导航栏图标变成三个点或者变暗。这个flag使用的很少。

View decorView7 = getWindow().getDecorView();

int uiOptions7 = View.SYSTEM_UI_FLAG_LOW_PROFILE;

decorView7.setSystemUiVisibility(uiOptions7);

image

布局相关

在新的Android4.1以及之后新的SystemUI设置里，仅单独设置隐藏状态栏和导航栏的flag会导致布局重绘，为了在显隐状态栏和导航栏的时候保持布局的稳定的显示效果，就需要以下属性了。

SYSTEM_UI_FLAG_LAYOUT_STABLE

该flag的作用是保持布局稳定，避免在显隐状态栏导航栏的时候发生布局的变化。可以辅助以下SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN、SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION两个flag的使用，让应用保持全屏的情况下，布局不随状态栏导航栏显隐发生变化。也可以不配合这两个flag使用，也能达到保持布局稳定的效果，不过不能实现全屏，会留出状态栏和导航栏的位置。

View decorView8 = getWindow().getDecorView();

int uiOptions8 = View.SYSTEM_UI_FLAG_FULLSCREEN

| View.SYSTEM_UI_FLAG_LAYOUT_STABLE;

decorView8.setSystemUiVisibility(uiOptions8);

以上代码设置了隐藏状态栏和SYSTEM_UI_FLAG_LAYOUT_STABLE两个flag，显示效果为隐藏状态栏，布局稳定。但是布局不延伸到全屏，效果看起来还是很奇葩的。

当滑动systembar、点击home键多任务键就会清除掉flag。状态栏会重新显示出来。
布局不会随着状态栏的显隐进行调整变化。

image

SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN

可以让布局延伸到状态栏的位置。在状态栏在隐藏和显示之前切换的时候，布局稳定的显示在状态栏后面（如果显示状态栏则布局在状态栏后面，隐藏状态栏布局也不变）。

View decorView3 = getWindow().getDecorView();

int uiOptions3 = View.SYSTEM_UI_FLAG_FULLSCREEN

| View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN

| View.SYSTEM_UI_FLAG_LAYOUT_STABLE;

decorView3.setSystemUiVisibility(uiOptions3);

以上代码显示出来的效果和上一段代码相比，布局延伸到了状态栏的位置。

当滑动systembar、点击home键menu键就会清除掉flag。状态栏会重新显示出来。
布局不会随着状态栏的显隐进行调整变化

image

SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION

可以让布局延伸到导航栏的位置。可以让导航栏在隐藏和显示之前切换的时候，布局稳定的显示在导航栏后面（如果显示导航栏则在导航栏后面，隐藏导航栏也不变）。

View decorView4 = getWindow().getDecorView();

int uiOptions4 = View.SYSTEM_UI_FLAG_FULLSCREEN

| View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN

| View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION

| View.SYSTEM_UI_FLAG_HIDE_NAVIGATION

| View.SYSTEM_UI_FLAG_LAYOUT_STABLE;

decorView4.setSystemUiVisibility(uiOptions4);

以上代码的显示效果是状态栏和导航栏隐藏，布局延伸到了状态栏和导航栏的位置。

点击任意布局就会清除掉flag。状态栏导航栏会重新显示出来。
布局不会随着状态栏导航栏的显隐进行调整变化。

image

在设置了SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN、SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION flag的情况，如果把状态栏导航栏颜色设置为透明，则会有透明的状态栏导航栏覆盖在布局上的效果。这也证明了即便布局状态栏导航栏出来了，布局也确实延伸到了状态栏导航栏的位置。

沉浸式相关

以上flag的组合设置中一直存在一个问题（在点击Home键、menu键等操作会导致flag被清除，导航栏一点击界面就会导致flag被清除，效果消失的问题。）。其实我们大部分情况都希望效果能够稳定的显示，而不是在简单操作之后就会消失掉。下面两个属性就是为这个问题工作的。

SYSTEM_UI_IMMERSIVE

在以上flag设置的基础上设置该属性，可以保证在点击home键、menu键时不会失去状态。但是如果手动调出systembar的时候，设置的相关flag还是会被清除掉。

View decorView5 = getWindow().getDecorView();

int uiOptions5 = View.SYSTEM_UI_FLAG_FULLSCREEN

| View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN

| View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION

| View.SYSTEM_UI_FLAG_HIDE_NAVIGATION

| View.SYSTEM_UI_FLAG_LAYOUT_STABLE

| View.SYSTEM_UI_FLAG_IMMERSIVE;

decorView5.setSystemUiVisibility(uiOptions5);

以上代码的显示效果。

隐藏状态栏、导航栏。
布局延伸到了状态栏、导航栏的位置。
布局稳定显示，不会因为状态栏的显隐来调整布局。
当手动调出状态栏导航栏的时候，flag才会被清除。

image

SYSTEM_UI_IMMERSIVE_STICKY

设置这个属性后。当状态栏隐藏的时候，手动调出状态栏导航栏，显示一会儿随后就会隐藏掉。设置该属性后不会清除flag，该属性是比较常用的一种。但是离开页面肯定是会导致flag被清除掉的，以上所有flag设置都会有这种情况。

View decorView6 = getWindow().getDecorView();

int uiOptions6 = View.SYSTEM_UI_FLAG_FULLSCREEN

| View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN

| View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION

| View.SYSTEM_UI_FLAG_HIDE_NAVIGATION

| View.SYSTEM_UI_FLAG_LAYOUT_STABLE

| View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY;

decorView6.setSystemUiVisibility(uiOptions6);

以上代码的显示效果。

隐藏状态栏、导航栏
布局延伸到了状态栏、导航栏的位置。
布局稳定显示，不会因为状态栏的显隐来调整布局。
手动调出的状态栏导航栏会半透明显示覆盖在界面上，随后还会隐藏掉。
如果离开页面还是会导致flag被清除，效果消失。

image

对于flag被清除问题，重设的位置可以放在onWindowFocusChanged中。

想要清除flag可以直接调用setSystemUiVisibility(0);

小总结

有了以上flag的总结，我们可以实现我们想要的一些效果。比如全屏隐藏状态栏导航栏、全屏显示导状态栏导航栏、全屏显示状态栏隐藏导航栏、全屏隐藏状态栏显示导航栏，甚至组合出非全屏但是隐藏状态栏导航栏等一些奇葩的显示效果。下面用一段代码展示一下全屏中的各中显示效果，也是我们项目常用的效果。

public void setFullscreen(boolean isShowStatusBar, boolean isShowNavigationBar) {

int uiOptions = View.SYSTEM_UI_FLAG_LAYOUT_STABLE

| View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION

| View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN

| View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY;

if (!isShowStatusBar) {

uiOptions |= View.SYSTEM_UI_FLAG_FULLSCREEN;

}

if (!isShowNavigationBar) {

uiOptions |= View.SYSTEM_UI_FLAG_HIDE_NAVIGATION;

}

getWindow().getDecorView().setSystemUiVisibility(uiOptions);

//隐藏标题栏

//专门设置一下状态栏导航栏背景颜色为透明，凸显效果。

setNavigationStatusColor(Color.TRANSPARENT);

}

public void setNavigationStatusColor(int color) {

//VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP

if (Build.VERSION.SDK_INT >= 21) {

getWindow().addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);

}

image

监听状态栏导航栏的变化

有时候我们想知道状态栏、导航栏的显隐变化，便于我们自定义一些操作。Android也提供了一个监听变化的能力。

View decorView = getWindow().getDecorView();

decorView.setOnSystemUiVisibilityChangeListener

(new View.OnSystemUiVisibilityChangeListener() {

@Override

public void onSystemUiVisibilityChange(int visibility) {

// Note that system bars will only be "visible" if none of the

// LOW_PROFILE, HIDE_NAVIGATION, or FULLSCREEN flags are set.

if ((visibility & View.SYSTEM_UI_FLAG_FULLSCREEN) == 0) {

// TODO: The system bars are visible. Make any desired

// adjustments to your UI, such as showing the action bar or

// other navigational controls.

} else {

// TODO: The system bars are NOT visible. Make any desired

// adjustments to your UI, such as hiding the action bar or

// other navigational controls.

}

});

上面代码和注释可以说写的很清楚了。可以在onSystemUiVisibilityChange接口中通过判断LOW_PROFILE，HIDE_NAVIGATION和FULLSCREEN的值来看显隐，0为显示，1为隐藏。

最后

如果阅读过程中发现有什么问题，欢迎交流指正。打完，收工！

Task is cheap. Show me the code. github地址： https://github.com/qiaoshouqing/fullscreen
内容主要参考谷歌官方文档，不得不说文章还是原生的好，在国内很难搜到好用的文章。 https://developer.android.com/training/system-ui/index.html
后来发现国内有人翻译过了，文章写作方式上有参考。https://blog.csdn.net/adzcsx2/article/details/53031950

作者：野狗道人闯红灯
链接：https://www.jianshu.com/p/ce65dc7b0b56
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

声明：本站内容来源于原创和互联网，尊重作者版权，转载请注明来源网址，欢迎收藏，谢谢！

xamarin.forms设置状态栏和导航栏颜色

xamarin.from ToolbarItem或ActionBar 字体大小和颜色更改

在Android4.1之前隐藏状态栏

设置全屏

控制 SystemBar 相关

SYSTEM_UI_FLAG_FULLSCREEN

SYSTEM_UI_HIDE_NAVIGATION

SYSTEM_UI_LOW_PROFILE

布局相关

SYSTEM_UI_FLAG_LAYOUT_STABLE

SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN

SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION

沉浸式相关

SYSTEM_UI_IMMERSIVE

SYSTEM_UI_IMMERSIVE_STICKY

监听状态栏导航栏的变化

最后

发表评论

发表评论取消回复

xamarin.from ToolbarItem或ActionBar 字体大小和颜色更改

在Android4.1之前隐藏状态栏

设置全屏

控制 SystemBar 相关

SYSTEM_UI_FLAG_FULLSCREEN

SYSTEM_UI_HIDE_NAVIGATION

SYSTEM_UI_LOW_PROFILE

布局相关

SYSTEM_UI_FLAG_LAYOUT_STABLE

SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN

SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION

沉浸式相关

SYSTEM_UI_IMMERSIVE

SYSTEM_UI_IMMERSIVE_STICKY

监听状态栏导航栏的变化

最后

相关文章

发表评论

发表评论 取消回复

发表评论取消回复