代号一：为什么android按钮的外观不同于IOS按钮 [英] Codename one: Why does the android button have a different appearance than the IOS button

问题描述

我现在使用代码名称的css插件为我的应用程序设计样式，我不知道为什么该按钮的默认外观与Android和IOS不同。在IOS中，它看起来像这样：

在Android它看起来像这样：

它应该像

在Css文件中，我有Button的条目：

 按钮{
 cn1-derived：Button; 
 background-color：＃005EA8; 
 color：white; 
} 
 
 Button.unselected {
 cn1-derived：Button.unselected; 
 background-color：＃005EA8; 
 color：white; 
} 
 
 Button.pressed {
 cn1-derived：Button.pressed; 
 background-color：white; 
 color：＃005EA8; 
} 
  

它不只是登录按钮应该看起来像这样，没有一个按钮看起来像他们应该在Android上，但所有看起来像它在IOS。

另外，你可能会注意到，看起来改变点击。在IOS中这个工作原理如预期，在Android 文字颜色更改点击到＃0005ea8 ，但背景仍然是这个灰色。

解决方案

这是CSS遇到CN1主题的丑陋部分之一。问题是，你的CSS主题被应用在CN1本机主题的顶部。您在Button上设置的任何属性都将覆盖本机主题中的那些属性，但是您还没有覆盖原生主题的Button的其他属性。

此外，CN1样式提供了三种方式来设置组件的背景。按照优先级升序，它们是：

1. 背景颜色


2. 背景li>
   
3. 边框（9片边框有效地设置整个背景）。

这些在相同的风格，那么在列表上的一个（数字越高）将优先。例如。如果您设置了背景颜色和9片边框，那么您根本看不到背景颜色 - 您只会看到9边框。

所以，这里发生的是，你已经设置CSS的按钮的背景颜色，但本机主题可能设置一个背景图片，或按钮样式上的一个9件边框，仍然覆盖您的设置。 / p>

您的问题有两种解决方案：

解决方案1：覆盖其他背景属性

设置 border：none （以确保覆盖任何9件边框）（或将边框设置为某些东西）。并指定 cn1-background-type：none 以确保没有应用图片背景：

 
 Button {
 background-color：＃005EA8; 
 color：white; 
 border：none; 
 cn1-background-type：none; 
} 
 

注意：您也不需要指定 cn1-derived：Button ，因为您的样式名称实际上是 Button。

解决方案2：从底层开始的类

如果你不想要本机主题的行李，只需创建自己的风格，然后按照你想要的方式设置。

例如

 
 MyButton {
 ... 
} 
 

在您的Java代码中：

 
 btn.setUIID（MyButton）; 
 

I am currently styling my App with the css plugin for codename one and I cannot figure out why the default look of the Button is different for android and IOS.

In IOS it looks like this:

In Android it looks like this:

It should look like it does in IOS for all devices.

In the Css file, I have this entry for Button:

Button {
    cn1-derive: Button;
    background-color: #005EA8;
    color: white;
}

Button.unselected {
    cn1-derive: Button.unselected;
    background-color: #005EA8;
    color: white;
}

Button.pressed {
    cn1-derive: Button.pressed;
    background-color: white;
    color: #005EA8;
}

Its not just the Login Button that should look like this, but All buttons. None of the Buttons looks like they should on Android, but all look like it in IOS.

In Addition, as you might notice, the look changes on click. In IOS this works as expected, In Android the text color changes on click to #0005ea8, but the background is still this grey.

What am I missing here?

解决方案

This is one of the ugly parts of CSS meets CN1 themes. The problem is that your CSS theme is being applied over top of the CN1 native theme. Any properties that you set on Button will override whatever those properties were in the native theme, but there are other properties of Button from the native theme that you are not overriding.

Further, CN1 styles offer three ways to set the "background" of the component. In ascending order of priority, they are:

1. Background color
2. Background (image)
3. Border (9-piece borders effectively set the entire background).

If you apply two of these in the same style, then the one lower on the list (higher in number) will take priority. E.g. if you set both the background color and a 9-piece border, then you won't see the background color at all - you'll just see the 9-piece border.

So what is happening here is that you've set the background color for your button in CSS, but the native theme likely set a background image, or a 9-piece border on the Button style which is still overriding your settings.

There are a couple of solutions to your problem:

Solution 1: Override the other "background" properties

Set border: none (to ensure that you override any 9-piece border) (or set border to something). And specify the cn1-background-type: none to ensure that there isn't an image background being applied to it:

Button {
    background-color: #005EA8;
    color: white;
    border: none;
    cn1-background-type: none;
}

NOTE: You also don't need to specify cn1-derive: Button because your style name actually is Button.

Solution 2: Create your Own Button classes from the ground up

If you don't want the baggage of the native theme, just create your own style, and set it exactly how you want.

e.g.

MyButton {
    ...
}

And in your Java code:

btn.setUIID("MyButton");

这篇关于代号一：为什么android按钮的外观不同于IOS按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！