天道酬勤,学无止境

how do I make a TileGroup layout that has the jaggy edge on top?

I have spark.components.TileGroup that contains buttons.

I would like the buttons to appear like tabs on top of the ViewStack they serve

At the moment, if I have 6 items in the TileList it lays it out as 2 rows with 4 items in the top tow and 2 in the bottom, so the jaggy edge is at the bottom

[ITEM 1][ITEM 2][ITEM 3][ITEM 4]
[ITEM 5][ITEM 6]

I would like it to look like this, with the jaggy edge on top

[ITEM 5][ITEM 6]
[ITEM 1][ITEM 2][ITEM 3][ITEM 4]

The order of the items is not important

How would I do this?

评论

Define a new layout that lays the tiles out the way you want.

some links to get your started. http://www.adobe.com/devnet/flex/articles/spark_layouts.html http://insideria.com/2009/05/flex-4-custom-layouts.html

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • 如何进行图像转换?(How to do this image transformation?)
    问题 我有一个图像,该图像带有一个具有模糊边缘(上半部分)的彩色斑点,并且我想为其创建一个由直线组成的轮廓(下半部分): 我没有问题填充形状,只需添加轮廓即可。 如有必要,可以将其转换为黑白图像。 谁能指出我可以进行的简单转换/过程? 最好可以方便地找到一些代码示例。 回答1 我想为您使用C ++进行编码,而不是像其他答案一样使用命令行,因此我将其作为不同的答案。 最重要的是,它实际上还实现了道格拉斯·皮克算法(Douglas-Peucker algorithm),并且出于趣味性和很好的效果而对其进行了动画处理。 //////////////////////////////////////////////////////////////////////////////// // main.cpp // Mark Setchell // To find a blob in an image and generate line segments that describe it, // Use ImageMagick Magick++ and Ramer-Douglas-Peucker algorithm. // https://en.wikipedia.org/wiki/Ramer-Douglas-Peucker-algorithm // // function
  • 如何在启用抗锯齿的情况下旋转可绘制对象(How to rotate a drawable with anti-aliasing enabled)
    问题 我需要将 ImageView 旋转几度。 我通过继承 ImageView 和重载onDraw()做到这一点 @Override protected void onDraw(Canvas canvas) { canvas.save(); canvas.scale(0.92f,0.92f); canvas.translate(14, 0); canvas.rotate(1,0,0); super.onDraw(canvas); canvas.restore(); } 问题是结果图像显示了一堆锯齿。 http://img.skitch.com/20100608-gmdy4sexsm1c71di9rgiktdjhu.png 如何对需要旋转以消除锯齿的 ImageView 进行抗锯齿处理? 有一个更好的方法吗? 回答1 如果您知道您的 Drawable 是一个 BitmapDrawable,您可以在位图的 Paint 中使用抗锯齿来执行如下操作: /** * Not as full featured as ImageView.onDraw(). Does not handle * drawables other than BitmapDrawable, crop to padding, or other adjustments. */ @Override protected void
  • IE7 和分层 PNG 周围的“锯齿”(使用 jQuery)(IE7 and “jaggies” around layered PNGs (with jQuery))
    问题 我似乎在 PNG 文件周围遇到“锯齿”(锯齿状像素化,在这种情况下为黑色),特别是在IE7 中具有抗锯齿边缘,例如圆角边框(例如,一个大的光滑按钮)。 我想我以前遇到过这个问题,但是在以前的设计中可能没有那么明显。 事情是,它只在我淡入淡出 PNG 时出现(在这种情况下,淡入另一个以获得时髦的翻转效果),因为最初,它看起来不错。 无论如何,我不太确定问题出在哪里,但是这里是所涉及代码的简要转储; 希望有一个解决方案。 屏幕分别之前和之后 jQuery $(document).ready(function(){ $('.mf_fader').hover(function(event){ $('> *:first-child', $(this)).stop().fadeTo(450, 0); $('> *:last-child', $(this)).stop().fadeTo(350, 1); }, function(event){ $('> *:first-child', $(this)).stop().fadeTo(350, 1); $('> *:last-child', $(this)).stop().fadeTo(450, 0); }); }); CSS #dbc_main-letsgo, #dbc_main-letsgo > div{ width: 460px
  • 画布中沿曲线的渐变笔划(Gradient Stroke Along Curve in Canvas)
    问题 我正尝试在画布上沿着曲线绘制线性渐变斯托克风格的曲线,如该图所示。 在该页面上,有一个链接的svg文件,其中提供了有关如何在svg中实现效果的说明。 也许可以在画布中使用类似的方法? 回答1 演示:http://jsfiddle.net/m1erickson/4fX5D/ 创建沿路径变化的渐变是相当容易的: 创建沿路径变化的渐变更加困难: 要在路径上创建渐变,您需要绘制许多与路径相切的渐变线: 如果您绘制足够的切线,则眼睛会看到曲线是路径上的渐变。 注意:锯齿可能会出现在路径梯度的外部。 这是因为渐变实际上是由数百条切线组成的。 但是您可以通过使用适当的颜色在渐变的两侧画一条线来平滑锯齿(此处,抗锯齿线在顶部是红色,在底部是紫色)。 以下是在路径上创建渐变的步骤: 沿路径绘制数百个点。 计算这些点处路径的角度。 在每个点处创建一个线性渐变,并在该点的切线上绘制一条渐变描边线。 是的,您将不得不为每个点创建一个新的渐变,因为线性渐变必须与切线到该点的角度相匹配。 为了减少由于绘制许多单独的线条而引起的锯齿效应,可以沿渐变路径的顶部和底部绘制一条平滑路径以覆盖锯齿。 这是带注释的代码: <!doctype html> <html> <head> <link rel="stylesheet" type="text/css" media="all" href="css/reset
  • 你能用 C# 制作一个 alpha 透明的 PNG 吗?(Can you make an alpha transparent PNG with C#?)
    问题 我有一个显示垂直文本的多浏览器页面。 作为让文本在所有浏览器中垂直呈现的丑陋技巧,我创建了一个自定义页面处理程序,该处理程序返回带有垂直绘制文本的 PNG。 这是我的基本代码(C#3,但对任何其他版本的小改动降至 1): Font f = GetSystemConfiguredFont(); //this sets the text to be rotated 90deg clockwise (i.e. down) StringFormat stringFormat = new StringFormat { FormatFlags = StringFormatFlags.DirectionVertical }; SizeF size; // creates 1Kx1K image buffer and uses it to find out how bit the image needs to be to fit the text using ( Image imageg = (Image) new Bitmap( 1000, 1000 ) ) size = Graphics.FromImage( imageg ). MeasureString( text, f, 25, stringFormat ); using ( Bitmap image = new Bitmap(
  • 在iOS上,页边距,边缘插图,内容插图,对齐矩形,布局页边距,锚点​​之间有什么区别?(On iOS, what are the differences between margins, edge insets, content insets, alignment rects, layout margins, anchors…?)
    问题 关于布局,iOS社区中似乎有几种不同的选项/术语和人们使用(例如UIEdgeInsets是一种类型,但有时我会听到/阅读“设置插图”或布局边距与布局指南)。 我一直能够找到一个可行的选择。 但是我永远不能确定自己在使用正确的工具来完成这项工作。 有人可以帮助您清楚地了解布局的这些不同方面以及何时以最佳方式使用它们吗? 回答1 作为赏金的提供者...我想说的大部分困惑是由于不正确地理解UILayoutGuide类。 那是关键,但也很简单。 首先让我介绍一个问题: 在过去,如果您需要像这样限制这些圈子: 然后,您必须创建清晰的UIView并将其添加为子视图,然后向其添加约束,如下所示: 今天,您无需将它们添加为子视图。 您可以改用 布局指南 要创建布局指南,您必须执行以下步骤: 实例化新的布局指南。 通过调用视图的addLayoutGuide(_:)方法将布局指南添加到视图。 使用“自动版面”定义版面指南的位置和大小。 您可以使用这些指南来定义布局中元素之间的空间。 以下示例显示了用于在一系列视图之间定义相等间距的布局指南。 脚步: let space1 = UILayoutGuide() view.addLayoutGuide(space1) let space2 = UILayoutGuide() view.addLayoutGuide(space2) space1
  • 具有自动布局的 UIScrollView 内具有动态高度的容器视图(Container view with dynamic height inside UIScrollView with auto layout)
    问题 我有一个 UIScrollView,嵌套在其中一个内容视图中,它嵌套了两个子视图,一个具有已知高度的常规 UIView,以及一个具有动态高度的容器视图,具体取决于内容。 像这样: 视图如下所示: 我的约束设置如下: 滚动视图被限制在其父视图(即视图)的尾部、前导、顶部和底部边缘 内容视图被限制在其超级视图(即滚动视图)的后缘、前导、顶部和底部边缘,它还具有与主视图(即视图)相等的宽度约束,因此滚动视图的宽度与屏幕宽度。 顶视图被限制在其超级视图(即内容视图)的前缘、后缘和上边缘 容器视图被限制在它的超级视图(内容视图)的后缘、前缘和底边,它的顶边也被限制在顶视图的底边。 Container View 的视图层次结构如下所示: 左上角的标签被限制在其父视图的尾部、前导和顶部边缘。 右下角的标签被限制在其父视图的尾部、前导和底部边缘。 顶部标签对底部标签具有垂直约束。 为了我的测试(1000 分),我将这个垂直约束设置得特别大。 这应该给内容视图一个 ~1000 点的高度。 我的理解是现在为容器视图解析了高度,即内容视图将调整为顶视图的高度 + 容器视图的高度。 但 IB 抱怨如下: 它想调整容器视图的大小并将其高度设置为 0。如果我给容器视图一个明确的高度,那么一切都按预期工作,但这不是我想要的,因为容器视图可以根据其内容大小动态更改。 任何帮助表示赞赏! 回答1
  • 创建具有自动布局约束的3x3网格(Creating a 3x3 grid with auto layout constraints)
    问题 Xcode表示没有布局问题,但是正如您所看到的。 我已经尝试了一切。 苹果文档,YouTube,谷歌等。似乎我做对了,但是也许我做事的顺序或其他原因导致了这些问题。 经过一切尝试之后,我终于让Xcode add missing constraints ,这是迄今为止最好的结果。 我在9个UIImage中有9个按钮,所以我必须像对UIImages一样对按钮做同样的事情。 我已将UIImages临时放置在按钮上方,以便可以更轻松地看到正在执行的操作。 我有2个屏幕截图。 请指教。 开始 这是在使用Xcode的add missing constraints选项之后。 排序我想要的但没有雪茄。 回答1 iOS 9或更高版本 如果您的部署目标是iOS 9或更高版本,则可以使用UIStackView来实现更简单的解决方案。 请参阅我的其他答案。 iOS 8或更早版本 您可以通过多种方法来创建具有约束的布局。 这是一个 首先,提示:您可以在文档大纲中命名视图。 这使您更容易了解哪些视图属于哪些视图以及您的约束所连接的对象。 要命名视图,请在大纲中单击它,按回车,然后输入名称。 然后,轮廓可以如下所示: 如果更改名称,则可能需要关闭文件(菜单栏>文件>关闭“ Main.storyboard”),然后重新打开文件以使所有内容正确更新。 (请注意,这些名称仅在编辑情节提要时使用
  • IE7 and “jaggies” around layered PNGs (with jQuery)
    I seem to be experiencing "jaggies" (jagged pixelation, black in this case) around PNG files, specifically with anti-aliased edges such as rounded borders (say, a large glossy button for example) in IE7. I think I've experienced this issue before, however it may not have been as obvious in a previous design. Thing is, it only appears when I fade the PNG (and in this case, fade in another for a snazzy rollover effect) because initially, it appears fine. Anyways, I'm not too certain where the issue stems from, however here is a brief dump of the involved code; hopefully there's a resolution
  • HTML5 Canvas 笔触未消除锯齿(HTML5 Canvas stroke not anti-aliased)
    问题 我只是想在画布上用厚的抗锯齿笔画制作一个圆圈。 圆圈按预期绘制,但笔划的边缘非常参差不齐。 我一直在读 Chrome 强制抗锯齿,所以不知道该怎么做...... 小提琴:http://jsfiddle.net/nipponese/hWsxw/ HTML <div id="main"> <canvas id="myCanvas" width="400" height="400" style="border: 1px solid #000"></canvas> <div id="counter" style="height: 100px; width: 100px; border: 1px solid #000"> </div> </div> JS + jQuery <script> function calc(myVal) { var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); var radius = 70; ctx.beginPath(); ctx.arc(140, 140, 20, myVal * Math.PI, 0, true); ctx.lineWidth = 14; ctx.stroke(); }; $(document).ready
  • Android初学者在填充和边距之间的区别(Android beginner difference between padding and margin [duplicate])
    问题 这个问题已经在这里有了答案: 视图的填充和边距之间的区别(14个答案) 2年前关闭。 我已经提到了有关SO的问题。 还检查了答案: 填充是边框内部,边框和实际视图内容之间的空间。 请注意,填充完全围绕内容:顶部,底部,右侧和左侧(可以是独立的)上都有填充。 边界是边界外部,边界与该视图旁边的其他元素之间的空间。 在图像中,边距是整个对象外部的灰色区域。 请注意,就像填充一样,页边距完全围绕内容:在顶部,底部,右侧和左侧都有页边距。 此外,有关填充和边距的更多信息,请参见: http://developer.android.com/reference/android/view/View.html http://developer.android.com/reference/android/view/ViewGroup.MarginLayoutParams.html 但是,填充和边距之间的根本区别是什么? 行为会因操作系统和设备而异吗? 我有一个普通的,简单的布局。 代码没问题,已使用布局文件夹-layout和layout-sw600dp加上drawables-4dpi。 不能在没有边距或填充的情况下进行布局,哪一种更合适? 回答1 Padding用于内部/内部组件。 例如。 TextView , Button , EditText等例如。 文字和边框之间的空间
  • 清除画布形状中的文本(Clean text from canvas shapes)
    问题 我如何从画布形状中清除文本? 这是我的代码: <div id="ways" style="width:1000px;margin:0 auto;height:100%;"> <canvas id="canvas" width="1000" height="1000"></canvas> 和小提琴 回答1 稍微重构一下代码—— 将绘制圆的线条提取到一个函数中,该函数将这些圆对象之一作为参数: function drawCircle(circle) { context.beginPath(); context.arc(circle.x, circle.y, circle.radius, 0, 2 * Math.PI, false); context.fillStyle = 'green'; context.fill(); context.lineWidth = lineWidth; context.strokeStyle = '#003300'; context.stroke(); } 然后用这条线在循环中替换它们最初来自的那些线(在圆形对象被推动之后): drawCircle(circles[circles.length-1]); // draw last added circle 现在你可以通过修改代码在你的点击事件中使用这个函数(在这里,它可以打开和关闭文本): if
  • CardView 在 Pre-Lollipop 的每个边缘都有额外的边距(CardView has extra margin in each edge on Pre-Lollipop)
    问题 这是两张图片。 在棒棒糖上: 在 Pre-Lollipop 上: 我们可以看到它离 Lollipop 的屏幕一侧很近。 这就是我想要的。 但在 Pre-Lollipop 设备上,它有额外的屏幕边缘余量。 你们有经验吗? 谢谢你。 这是布局xml: <android.support.v7.widget.CardView android:id="@+id/card_title_schedule" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentTop="true" android:layout_alignParentLeft="true" android:layout_alignParentStart="true" android:layout_centerVertical="true" app:cardCornerRadius="0dp" app:cardBackgroundColor="@color/colorAccent" > 回答1 所以在这里它在 Kitkat 上运行得非常好,准确地说是三星设备。 我试过card_view:cardUseCompatPadding="true"但无济于事。 没用! 然后我从
  • 使用Interface Builder中的自动布局而不是代码来使UIView填充包含视图(Make UIView fill containing view using auto layout in Interface Builder instead of code)
    问题 如何使用自动布局使子视图填充其父视图,或至少将其所有边缘锚定到父视图的边缘? 我在“到最近的邻居”中使用了所有四个垂直和水平约束,但是当我在3.5英寸的设备上运行应用程序时,视图的高度并未自动从568调整为预期的480。 回答1 将顶部空间固定为Superview,将底部空间固定为Superview,将前导空间固定为Superview,将尾随空间固定为Superview。 然后设置编辑约束,如下所示: Superview.Top >= View.Top和Superview.Bottom >= View.Bottom 回答2 我将所有“到最近邻居的间距”都设置为0,然后将水平和垂直中心对齐。 这应该够了吧。
  • 自动布局UIScrollView以及具有动态高度的子视图(Auto layout UIScrollView with subviews with dynamic heights)
    问题 我在使用自动布局约束的UIScrollView时遇到了麻烦。 我具有以下视图层次结构,并通过IB设置了约束: - ScrollView (leading, trailing, bottom and top spaces to superview) -- ContainerView (leading, trailing, bottom and top spaces to superview) --- ViewA (full width, top of superview) --- ViewB (full width, below ViewA) --- Button (full width, below ViewB) ViewA和ViewB的初始高度为200点,但是可以通过单击将其垂直扩展到400点的高度。 通过更新其高度限制(从200到400)来扩展ViewA和ViewB。 这是相应的代码段: if(self.contentVisible) { heightConstraint.constant -= ContentHeight; // + additional View's internal constraints update to hide additional content self.contentVisible = NO; } else {
  • How to anti-alias clip() edges in html5 canvas under Chrome Windows?
    I'm using the clip() function on a canvas. Results: As you can see the chrome version has horrible jaggies / aliasing along the edges. How do I fix this? Code to reproduce: http://jsfiddle.net/ZRA76/ : <canvas id="test" width="300" height="300"></canvas>​ <script type="text/javascript"> cv = document.getElementById("test"); ctx = cv.getContext("2d"); var im = new Image(); im.onload = function () { ctx.beginPath(); ctx.arc(110, 110, 100, 0, 2*Math.PI, true); ctx.clip(); ctx.drawImage(im, 0, 0); } im.src = "http://placekitten.com/300/300"; </script>
  • 在WPF中渲染清晰的线条(Rendering sharp lines in WPF)
    问题 如果我渲染以下内容: <Grid> <Canvas SnapsToDevicePixels="True"> <Path Fill="#FF000000" SnapsToDevicePixels="True" Data="M 0.00,0.00 L 2.50,0.00 0.00,10.00 " /> <Path Fill="#FF260014" SnapsToDevicePixels="True" Data="M 2.50,0.00 L 7.50,0.00 2.50,10.00 0.00,10.00 " /> <Canvas.RenderTransform> <ScaleTransform ScaleX="{Binding ElementName=slider,Path=Value}" ScaleY="{Binding ElementName=slider,Path=Value}" /> </Canvas.RenderTransform> </Canvas> <Slider x:Name="slider" Minimum="0" Maximum="50" Value="30"/> </Grid> 我得到以下结果(Kaxaml): 注意两个形状之间的细白线。 我四处搜索,发现这与像素对齐有关。 我希望设置SnapsToDevicePixels="True"足以摆脱该限制
  • 如何使用自动布局在UIScrollview上设置约束?(How can I use Autolayout to set constraints on my UIScrollview?)
    问题 我花了两天时间来尝试各种混合和纯自动布局方法的解决方案,以实现在自动布局之前的琐碎的scrollview设置,现在已经正式宣布了-我一定太愚蠢了。 我主要是在Storyboard中进行设置(嗯,就是这样)。 因此,这是我寻求帮助的请求。 视图树: UIView -UIView -UIView ..-UIScrollview ...-UIButton ...-UIButton ...-UIButton 这些按钮应该水平滚动(从左到右,反之亦然)。 有人可以请让我知道如何设置的约束来实现这个使用纯自动布局??? -- 我已经尝试过混合方法,如下所示: UIView - UIView - UIView ..-UIScrollview ...-UIView (contentview) ....-UIButton ....-UIButton ....-UIButton ...并按照Apple的技术说明为contentview和translatesAutoresizingMaskIntoConstraints设置设置固定的宽度和高度约束。 使用约束来设置按钮和滚动视图。 这会使scrollview滚动(是),但是可惜,它滚动得太远了! 据我所知,滚动宽度以某种方式比我在contentview中设置的宽度翻了一番。 我也尝试了纯自动布局方法,无论是否使用contentview 。
  • 内联块元素高度问题(Inline-block element height issue)
    问题 我有一个简单的示例,其中一个外部DIV包含一个内部DIV ,该内部DIV具有display: inline-block; 。 因为我已经设置了内部div的高度,所以我希望外部div的高度与内部div的高度相同。 相反,从小提琴中可以看到,外部div稍高。 问题:为什么会发生这种情况?如何在不明确设置其高度的情况下“填充”外部div? 我的目标是使外部div根据内部的高度进行扩展和收缩。 .outer { background-color: red; } .inner { display: inline-block; width: 480px; height: 140px; background-color: green; } <div class="outer"> <div class="inner"></div> </div> 回答1 您的.inner div display: inline-block 。 这意味着它需要一个内联格式上下文。 内联布局会产生撑杆,从而为后代腾出空间。 如果在.inner元素旁边放置一个字符,则可以看到它的适合性:http://jsfiddle.net/bs14zzeb/6/ 默认的vertical-align是使inline-block框的底部边缘与周围文本的基线对齐。 即使周围没有文本,布局引擎仍必须为整行文本腾出空间。
  • ffmpeg中的sws_scale算法性能测试
    转自: http://www.cnblogs.com/acloud/archive/2011/10/29/sws_scale.html 经常用到ffmpeg中的sws_scale来进行图像缩放和格式转换,该函数可以使用各种不同算法来对图像进行处理。以前一直很懒,懒得测试和甄别应该使用哪种算法,最近的工作时间,很多时候需要等待别人。忙里偷闲,对ffmpeg的这一组函数进行了一下封装,顺便测试了一下各种算法。 简单说一下测试环境,我使用的是Dell的品牌机,i5的CPU。ffmpeg是2010年8月左右的当时最新版本编译而成,我使用的是其静态库版本。 sws_scale的算法有如下这些选择。 #define SWS_FAST_BILINEAR 1#define SWS_BILINEAR 2#define SWS_BICUBIC 4#define SWS_X 8#define SWS_POINT 0x10#define SWS_AREA 0x20#define SWS_BICUBLIN 0x40#define SWS_GAUSS 0x80#define SWS_SINC 0x100#define SWS_LANCZOS 0x200#define SWS_SPLINE 0x400 首先,将一幅1920*1080的风景图像,缩放为400*300的24位RGB,下面的帧率