Adding Gravity to your UI Components

Problem

You want your UI components to have gravity, so that if they are
dragged up to the top of the screen, they will descend on their own. Combining
this with the collision behavior that you will learn later, you can create UI
components that fall from their current location until they collide with a path
that you’ll specify.

Solution

Initialize an object of type UIGravityBehavior and add your UI
components that need gravity to this object. After you are done, create an
instance of UIDynamicAnimator, add your gravity behavior to the animator, and
let the animator take care of the rest of the work for you.

Discussion

For the purpose of this recipe, we are going to create a simple
colored square view in our single-view application and place that view at the
center of the screen. We will then add gravity to that view and watch it fall
from the center all the way down and eventually outside the bounds of the
screen.

So let’s start by defining our animator and the view:

#import "WSYViewController.h"

@interface WSYViewController ()

@property (nonatomic,strong)UIView *squareView;

@property (nonatomic,strong)UIDynamicAnimator * animator;

@end

@implementation WSYViewController

- (void)viewDidLoad

{

[super viewDidLoad];

// Do any additional setup after loading the
view, typically from a nib.

//create our little square view add it to
self.view

self.squareView = [[UIView
alloc]initWithFrame:CGRectMake(0, 0, 100, 100)];

self.squareView.backgroundColor =[UIColor
greenColor];

self.squareView.center =
self.view.center;

[self.view addSubview:self.squareView];

self.animator = [[UIDynamicAnimator
alloc]initWithReferenceView:self.view];

UIGravityBehavior * gravity =
[[UIGravityBehavior alloc]initWithItems:@[self.squareView]];

[self.animator addBehavior:gravity];

}

@end

Now if you run your app, as soon as your view controller’s view
appears on screen, you will see the colored view drop from the center of the
screen all the way down and out of the screen.

时间: 2024-10-04 11:27:45

Adding Gravity to your UI Components的相关文章

Detecting and reacting to collisions Between UI Components

Problem You want to specify collision boundaries between your UI components on the screen so that they will not overlap one another. Solution Instantiate an object of type UICollisionBehavior and attach it to your animator ob‐ ject. Set the translate

Magento2 UI components概述

来源:宝鸡SEO UI components 概述Magento UI components 是用来展示不同的UI元素,比如表,按钮,对话框等.他们被用于简单灵活的交互界面渲染.Components被用来渲染结果界面,提供进一步的与javascript组件和服务器的交互.Magento UI components被实现为一个标准的模块叫Magento_UI.想要在你的模块里面使用UI Components,你需要在你的composer.json文件里面添加对Magento_UI的依赖.以下XSD

ExtJS笔记5 Components

参考 :http://blog.csdn.net/zhangxin09/article/details/6914882 An Ext JS application's UI is made up of one or many widgets called Components. All Components are subclasses of theExt.Component class which allows them to participate in automated lifecycl

免费素材:25套免费的 Web UI 设计的界面元素(转)

Web 元素是任何网站相关项目都需要的,质量和良好设计的元素对于设计师来说就像宝贝一样.如果您正在为您的网站,博客,Web 应用程序或移动应用程序寻找完美设计的网页元素,那么下面这个列表会是你需要的. 今天这里收集的免费资源是25套免费的 Web UI 设计的界面元素,用于和Mobile App设计.它包括所有的设计元素的 PSD 格式,某些元素提供矢量格式,可以缩放到任意大小. UI Kit – Free PSD Download Ui Kit [Free PSD] Download Free

4. Building a Dynamic UI with Fragments 使用片段构建动态UI

To create a dynamic and multi-pane user interface on Android, you need to encapsulate UI components and activity behaviors into modules that you can swap into and out of your activities. You can create these modules with the Fragment class, which beh

[React] Recompose: Theme React Components Live with Context

SASS Bootstrap allows us to configure theme or branding variables that affect all components (e.g. Primary Color or Link Color). When we isolate our styles inside React components we lose the ability to theme them. To get round this we can put our th

Architecture Components

1.Why "Architecture" Components? 2.what does architecture components include? { Room //a robust SQL object mapping library ViewModel //provide data for UI components and survive configuration changes LiveData  //monitor changes,database observer

Android学习路线(二十三)运用Fragment构建动态UI——Fragment间通讯

先占个位置,下次翻译 :p In order to reuse the Fragment UI components, you should build each as a completely self-contained, modular component that defines its own layout and behavior. Once you have defined these reusable Fragments, you can associate them with

Hybrid UI framework shootout: Ionic vs. Famo.us vs. F7 vs. OnsenUI

1 Introduction In the past 2 years I’ve been working intensively on mobile applications, mostly hybrid, and mostly with AngularJS. In my quest to find a good UI framework that integrates with AngularJS, I came across the following options: IonicFrame