UITabbar és imageView transform

XCode AppleMúltkori cikket folytatva most is két dolgot mutatok be. Első a UITabbarButton grafikája a második meg az lesz, hogy történik egy elem elforgatása view részen!Mivel a fejléc színnél és a gomboknál már tudjuk, hogy az AppDelegate.m részbe írtunk és onnan vezéreltük most itt is ezt folytatjuk csak most képekkel is illusztrálom a dolgokat.
Kezdetnek a szokásos, kell egy gomb sablon!
Grafika 1

Grafika 2

Ha ezzel megvagyunk akkor lehet kezdeni a kód írását! ! 4 dolgot kell megadnunk !
1. A view-ek számát
2. A gombok felíratát
3. A gombok kezdeti képét és a befejező kép nevét
4. Háttér színét
Grafika 3
UITabBarController *tabBarController = (UITabBarController *)self.window.rootViewController;
UITabBar *tabBar = tabBarController.tabBar;
UITabBarItem *tabBarItem1 = [tabBar.items objectAtIndex:0];
UITabBarItem *tabBarItem2 = [tabBar.items objectAtIndex:1];
UITabBarItem *tabBarItem3 = [tabBar.items objectAtIndex:2];
UITabBarItem *tabBarItem4 = [tabBar.items objectAtIndex:3];

tabBarItem1.title = @”Home”;
tabBarItem2.title = @”Map”;
tabBarItem3.title = @”Naptár”;
tabBarItem4.title = @”Beállítás”;

[tabBarItem1 setFinishedSelectedImage:[UIImage imageNamed:@”home_selected.png”] withFinishedUnselectedImage:[UIImage imageNamed:@”home.png”]];
[tabBarItem2 setFinishedSelectedImage:[UIImage imageNamed:@”maps_selected.png”] withFinishedUnselectedImage:[UIImage imageNamed:@”maps.png”]];
[tabBarItem3 setFinishedSelectedImage:[UIImage imageNamed:@”myplan_selected.png”] withFinishedUnselectedImage:[UIImage imageNamed:@”myplan.png”]];
[tabBarItem4 setFinishedSelectedImage:[UIImage imageNamed:@”settings_selected.png”] withFinishedUnselectedImage:[UIImage imageNamed:@”settings.png”]];

UIImage* tabBarBackground = [UIImage imageNamed:@”tabbar.png”];
[[UITabBar appearance] setBackgroundImage:tabBarBackground];
[[UITabBar appearance] setSelectionIndicatorImage:[UIImage imageNamed:@”tabbar_selected.png”]];

Látható, hogy én négy darab lapnak adtam meg a paramétereit, ezért a Storyboard részben is négy lapnak kell lenni !!
Grafika 4
Ha szimuláljuk akkor négy gomb lesz alul a megadott ikonokkal és hozzá tartozó színekkel és háttérrel de folytassuk a grafikai elemek bemutatását azzal, hogy is készül a forgó mozgás képek esetében ( mint a jegyzet táblára felrakott papírcetlik lennének )! A fenti képen látszik, hogy két imageview-et raktam fel a view-re ami szabályos fekvő pozícióban helyezkednek el ! Mivel a képeket nem tudjuk úgy elforgatni mint egy szövegszerkesztőben ha  kép van beszúrva így nekünk kell megadni a forgás irányát! Én ezt a FirstViewController.m fájlban készítettem el!
Grafika 5
Először definiálni kell a forgás részt:
#define Forgasresz(forgas) ((M_PI * forgas) / 180.0)   ez lesz a behelyettesítő később !!
Megadom a imageview háttér képeknek az elérését:
UIImage *hatterfoto = [[UIImage alloc] initWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@”corkboard” ofType:@”png”]];
self.view.backgroundColor = [[UIColor alloc] initWithPatternImage:hatterfoto];
// imageView kép
UIImage *papirText = [[UIImage alloc] initWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@”paper_texture” ofType:@”png”]];

Hozzáadom a most már meglévő képeket a két imageview-hez:
self.imageView1.backgroundColor = [[UIColor alloc] initWithPatternImage:papirText];
self.imageView2.backgroundColor = [[UIColor alloc] initWithPatternImage:papirText];

Jöhet a forgás megadása:
self.imageView1.transform = CGAffineTransformRotate(CGAffineTransformIdentity, Forgasresz(5));
self.imageView2.transform = CGAffineTransformRotate(CGAffineTransformIdentity, Forgasresz(-5));
Látható, hogy van egy negatív és egy pozitív forgás a nulla értéktől!!
Szimuláción egy így fog mutatni:
Grafika 6
Az anyagban benne lesz a múltkori forrás is ami itt letölthető!

Reklámok

Hozzászólás

Kategória: Források

Vélemény, hozzászólás?

Adatok megadása vagy bejelentkezés valamelyik ikonnal:

WordPress.com Logo

Hozzászólhat a WordPress.com felhasználói fiók használatával. Kilépés /  Módosítás )

Google kép

Hozzászólhat a Google felhasználói fiók használatával. Kilépés /  Módosítás )

Twitter kép

Hozzászólhat a Twitter felhasználói fiók használatával. Kilépés /  Módosítás )

Facebook kép

Hozzászólhat a Facebook felhasználói fiók használatával. Kilépés /  Módosítás )

Kapcsolódás: %s