The Space For App Developers

最新推荐文章于 2024-06-23 15:30:00 发布

转载最新推荐文章于 2024-06-23 15:30:00 发布 · 740 阅读

文章标签：

#iOS

IOS 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了如何通过简单的CSS代码使Flex 4.5中的ActionBar按钮呈现iOS设备上的原生样式，并提供了实现示例。

Beyond Plain Old HTML Objects

iOS style buttons in Flex 4.5 mobile applications

with 6 comments

Ever wondered how you can make Flex 4.5 ActionBar buttons look like native buttons on iOS? This is actually very simple to achieve, what you need are just a few lines of CSS code. Checkout the snippet below:

/* CSS file */
@namespace s "library://ns.adobe.com/flex/spark";
 
@media(os-platform:"IOS")
{
	s|ActionBar
	{
		defaultButtonAppearance:beveled;
	}
 
	.backButton
	{
		skinClass:ClassReference("spark.skins.mobile.BeveledBackButtonSkin");
	}
}

As you can see in the code above I also used CSS media queries to have the proper style and skin class applied only when running on iOS devices. Below you can see the end result:

The code that implements the view above is as simple as this:

 
<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
		xmlns:s="library://ns.adobe.com/flex/spark" 
		title="iOS buttons">
 
	<s:navigationContent>
		<s:Button label="Back" styleName="backButton"/>
	</s:navigationContent>
 
	<s:actionContent>
		<s:Button label="Button"/>
	</s:actionContent>
 
</s:View>