2015年7月13日 星期一

[iOS] 滑動式可模糊文字顯示框(PAC Blurry Scroll View)


一樣是逛cocoa controls逛到的一個元件,覺得很有用因此就把它拿來用了

(不過沒想到有點難操作0rz)

PACScrollView

步驟只有三到四步,基本上也是把檔案先copy進去專案,然後  #import (有import才能夠使用該元件)

不外乎就github上基本的操作:

Basic usage

First, import PACBlurryScrollView.h header in th e .h file.
XIB way :
just add a scrollView in your Xib file and change the class type to PACBlurryScrollView
then, add the following code
    [pacScrollView setBackgroundImage:[UIImage imageNamed:@"bg.jpg"]];
Code way
    PACBlurryScrollView *pacScrollView = [[PACBlurryScrollView alloc] initWithFrame:self.view.bounds];
    [pacScrollView setBackgroundImage:[UIImage imageNamed:@"bg.jpg"]];
    [self.view addSubview:pacScrollView];
Don't forget to add content to your scrollView !
上面意思是說有兩種方法
1.XIB檔拉一個ScrollView,改class為PACBlurryScrollView,程式碼裡面增加這一行:
[pacScrollView setBackgroundImage:[UIImage imageNamed:@"bg.jpg"]];

2.第二種當然就是使用coding

    PACBlurryScrollView *pacScrollView = [[PACBlurryScrollView alloc] initWithFrame:self.view.bounds];
    [pacScrollView setBackgroundImage:[UIImage imageNamed:@"bg.jpg"]];
    [self.view addSubview:pacScrollView];

初始化一個pacScrollview格式,然後後續差不多,最後一定要addSubView!


以為這樣教學就結束了嗎?

如果你希望一開始的模糊感就有的話,就需要調整一下他原本的.m file

在PACBlurryScrollView.m這邊有一行

[_backgroundImageLayer setOpacity:(1.0f - (self.contentOffset.y / (self.contentSize.height - self.frame.size.height)))];

[_backgroundBlurryImageLayer setOpacity:(1.0f - _backgroundImageLayer.opacity)];

把1.0f調整為0.5f 就可以看出效果囉!

本次的教學就到這邊 END

2015年7月9日 星期四

[iOS] 處理iphone4/4s 與iphone5/5s 和 iphone 6/6 plus 尺寸不同問題(xib file)

在開發iOS的時候一定會遇到當不同機身(4s,5s,6,6plus)介面會跑掉的問題!

而這個問題也讓我苦惱了一個禮拜,網路上沒有非常好的解法(stackoverflow有,不過你要看

的懂他寫的,而且解法非完美要結合另一篇才行)


首先,概念其實很簡單,為每一個xib檔案配一個不同尺寸的xib檔(也就是各尺寸各一)

然後,判定現在的機型是哪一種,iphone 4s ? 5/5s? 6? 6 plus? 決定要套用哪一個xib檔案

該怎樣判定呢?

先定義螢幕長寬吧!

#define SCREEN_WIDTH ([[UIScreen mainScreen] bounds].size.width)
#define SCREEN_HEIGHT ([[UIScreen mainScreen] bounds].size.height)
#define SCREEN_MAX_LENGTH (MAX(SCREEN_WIDTH, SCREEN_HEIGHT))
#define SCREEN_MIN_LENGTH (MIN(SCREEN_WIDTH, SCREEN_HEIGHT))

#define IS_IPAD (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad)
#define IS_IPHONE (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPhone)
#define IS_RETINA ([[UIScreen mainScreen] scale] >= 2.0)

#define iPhone4s_or_less (IS_IPHONE && SCREEN_MAX_LENGTH < 568.0)
#define iphone5 (IS_IPHONE && SCREEN_MAX_LENGTH == 568.0)
#define iphone6 (IS_IPHONE && SCREEN_MAX_LENGTH == 667.0)

#define iphone6plus (IS_IPHONE && SCREEN_MAX_LENGTH == 736.0)

接著我們需要在initWithNibName()這邊判斷

現在是4s,5,6,6plus

- (instancetype)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
{
    if (iphone6plus) {
        NSLog(@"iphone 6 +");
        self = [super initWithNibName:@"Page2_6_plus" bundle:nibBundleOrNil];
    }
    else if(iphone6)
    {
        NSLog(@"iphone 6");
        self = [super initWithNibName:@"Page2_6" bundle:nibBundleOrNil];
    }
    else if (iphone5) {
        NSLog(@"iphone 5/5s ");
        self = [super initWithNibName:@"Page2_5s" bundle:nibBundleOrNil];
    }
    else{
        NSLog(@"iphone 4s ");
        self = [super initWithNibName:@"Page2" bundle:nibBundleOrNil];
    }
    
    return self;
    
}

當然,也是要把xib檔案複製->改名為相對應的名稱,這樣一來,就完成囉!

end

[iOS] 特效進度條(ASProgressPopupView)的使用方法

在Code4app網站中找到一個不錯的特效包--ASProgressPopupView


點此連結到Code4app


上面寫的很簡單,但實際使用起來卻不是這樣

"使用方法:


self.progressView.font = [UIFont fontWithName:@"Futura-CondensedExtraBold" size:26]; 
self.progressView.popUpViewAnimatedColors = @[[UIColor redColor], [UIColor orangeColor], [UIColor greenColor]]; 
self.progressView.popUpViewCornerRadius = 16.0;"

實際在github上的描述是:

github

How to use it

It’s very simple. Drag a UIProgressView into your Storyboard/nib and set its class to ASProgressPopUpView – that's it. The example below demonstrates how to customize the appearance.
self.progressView.font = [UIFont fontWithName:@"Futura-CondensedExtraBold" size:26];
self.progressView.popUpViewAnimatedColors = @[[UIColor redColor], [UIColor orangeColor], [UIColor greenColor]];
self.progressView.popUpViewCornerRadius = 16.0;
To show the popUpView, just call:
[self.progressView showPopUpViewAnimated:YES];
And to hide:
[self.progressView hidePopUpViewAnimated:YES];
You update the value exactly as you would normally use a UIProgressView, just update theprogress property self.progressView.progress = 0.31;
詳細的可以去github上面看

這邊的教學:
1.先把下面這四個檔案copy進去專案,然後在你要寫的.m file裡面新增
#import "ASValueTrackingSlider.h"
2.開啟你的xib file,拉一個slider進去畫面,把class改為ASValueTrackingSlider
然後把該元件拉到.m file產生一個名叫slider1的物件

可以看到他的屬性是ASValueTrackingSlider,不是uislider,是的話就搞錯囉!

接著我們就可以使用slider1來做事情(控制他)

3.為了讓我的進度條上面顯示的文字最後面都有個"V",所以這邊要增加三行(第一行是宣告)

    NSNumberFormatter *voltFormatter = [[NSNumberFormatter alloc] init];
    [voltFormatter setPositiveSuffix:@"V"];
    [voltFormatter setNegativeSuffix:@"V"];
再來就是一些基本的設定
    self.slider1.popUpViewCornerRadius = 12.0;
    [self.slider1 setNumberFormatter:voltFormatter];
    [self.slider1 setMaxFractionDigitsDisplayed:0];
    self.slider1.popUpViewColor = [UIColor colorWithHue:0.55 saturation:0.8 brightness:0.9 alpha:0.7];
    self.slider1.font = [UIFont fontWithName:@"GillSans-Bold" size:22];
    self.slider1.popUpViewAnimatedColors = @[[UIColor redColor], [UIColor orangeColor], [UIColor greenColor]];
//這邊是讓我前中後段的顏色有不同

    [self.slider1 showPopUpViewAnimated:YES];
//這一段一定要show不然他不會顯示文字出來


如果是要有%數的話則改用這段

    NSNumberFormatter *formatter = [[NSNumberFormatter alloc] init];
    [formatter setNumberStyle:NSNumberFormatterPercentStyle];
    [self.slider1 setNumberFormatter:formatter];
    self.slider1.popUpViewAnimatedColors = @[[UIColor greenColor], [UIColor orangeColor], [UIColor redColor]];
   self.slider1.font = [UIFont fontWithName:@"Futura-CondensedExtraBold" size:26];
    [self.slider1 showPopUpViewAnimated:YES];

又或者你想要到某個區段就顯示某些文字的話,請加入這一行

self.slider1.dataSource = self;

然後加入這一段

- (NSString *)slider:(ASValueTrackingSlider *)slider stringForValue:(float)value;
{
    value = roundf(value);
    NSString *s;
    if (value < 30) {
        s = @"Warning!! Low Voltage";
    } else if (value > 29.0 && value < 50.0) {
        s = [NSString stringWithFormat:@"😎 %@ 😎", [slider.numberFormatter stringFromNumber:@(value)]];
    } else if (value >= 50.0) {
        s = [NSString stringWithFormat:@"%dV", value];
    }
    return s;
}

最後,完成版本就像這樣~



























然後如果要調整他的弧度的話(邊角弧度)


self.slider2.popUpViewCornerRadius = 12.0;

這邊可以調整


希望大家都能夠開心使用,(畢竟作者沒有講很清楚,我也摸了一會兒才會),end