2012-06-11 19 views
16

私は本当にfoursquareの会場の詳細を見るのが大好きです。特にビューの "ヘッダー"に会場の場所を持つマップ...どのように行われたのですか?詳細は明らかにいくつかのuiscrollview(おそらくuitableview?)とその背後に(ヘッダー内に)マップがあるので、スクロールビューがバウンスするとbeeing beeing beeingです...誰もこれを行う方法を持っていますか?新しいフォースクエア会場の詳細マップ

enter image description here

+0

私の答えを編集しましたが、実装は完璧です;) – yonel

答えて

32

ここで私はそれを再現するために管理する方法です: -

あなたは、そのビューとしてUIScrollViewUIViewControllerを必要としています。

enter image description here - - MKMapViewが負y位置を持ってのフレーム:次に、UIViewあなたはscrollviewに追加の内容は次のようになります。この場合、デフォルト状態(ドラッグする前)で100ptの地図しか見ることができません。
- MKMapViewインスタンスのズームとスクロールを無効にする必要があります。

次に、下にドラッグしたときにのcenterCoordinateを下に移動し、その中心位置を調整することです。そのため

は、我々は、画面上のX点のドラッグされたときに中心が移動すべき地図の座標をどのくらい知っているように、デルタ緯度として表すどのくらい1点計算: -

- (void)viewDidLoad { 
    [super viewDidLoad]; 
    UIScrollView* scrollView = (UIScrollView*)self.view; 
    [scrollView addSubview:contentView]; 
    scrollView.contentSize = contentView.frame.size; 
    scrollView.delegate = self; 
    center = CLLocationCoordinate2DMake(43.6010, 7.0774); 
    mapView.region = MKCoordinateRegionMakeWithDistance(center, 1000, 1000); 
    mapView.centerCoordinate = center; 
    //We compute how much latitude represent 1point. 
    //so that we know how much the center coordinate of the map should be moved 
    //when being dragged. 
    CLLocationCoordinate2D referencePosition = [mapView convertPoint:CGPointMake(0, 0) toCoordinateFromView:mapView]; 
    CLLocationCoordinate2D referencePosition2 = [mapView convertPoint:CGPointMake(0, 100) toCoordinateFromView:mapView]; 
    deltaLatFor1px = (referencePosition2.latitude - referencePosition.latitude)/100; 
} 

これらのプロパティが初期化されたら、UIScrollViewDelegateの動作を実装する必要があります。ドラッグすると、ポイントで表された移動を緯度に変換します。そして、この値の半分を使って地図の中心を移動します。

- (void)scrollViewDidScroll:(UIScrollView *)theScrollView { 
    CGFloat y = theScrollView.contentOffset.y; 
    // did we drag ? 
    if (y<0) { 
     //we moved y pixels down, how much latitude is that ? 
     double deltaLat = y*deltaLatFor1px; 
     //Move the center coordinate accordingly 
     CLLocationCoordinate2D newCenter = CLLocationCoordinate2DMake(center.latitude-deltaLat/2, center.longitude); 
     mapView.centerCoordinate = newCenter; 
    } 
} 

あなたはFoursquareのアプリと同じ動作を得る(しかし、より良いを:Foursquareのアプリで、マップのrecenterはジャンプする傾向があり、ここで、中央を変更すると、スムーズに行われます)。

+0

うわー、これはすばらしい答えです...ありがとう!私は休暇中でした...とにかく...私は実際にあなた自身の解決策に似ていました。唯一の違いは、私がスクロールして全体をリフレッシュしたときでした新しい可視領域を設定するmapView(地図を大きくスクロールする場合)...地図の新しい中心を設定するだけで、私のコードを更新するので、はるかに高速になります。もう一度ありがとう! :) –

+0

viewDidLoad、特にreferencePositionでdeltaLatFor1pxを計算する方法を説明できますか?無効な地理座標に問題があるというコードでアプリのクラッシュが発生します。ありがとうございました! – MrBr

+0

実際に私がしていることは、2つのスクリーンポジションを100pxで作成することです。次に、これらのスクリーン位置をマップ位置に変換します。それから私はどのくらいの緯度100pxが表すか知っています。そして、緯度がどれだけ1px(2つのスクリーン位置の間のデルタ緯度を100で割った値)で表されているかを知ることは簡単です。 – yonel

2

上記の例ではいいです。より多くのヘルプが必要な場合は、RBParallaxTableViewControllerと非常によく似たものを使用していると思います。 https://github.com/Rheeseyb/RBParallaxTableViewController

これは、Pathがヘッダー写真に使用するのと本質的に同じ効果です。

0

ヨネルの答えはいいですが、地図の中央にピンがあるので問題が見つかりました。負のYであるため、ポイントは私のUINavigationBarの下に隠されています。

次に、負のYを設定せず、mapView.frameをスクロールオフセットに従って修正します。

私のMapViewが、これは誰かに役立ちます320×160

_mapView.frame = CGRectMake(0, 160, 320, -160+y); 

希望です。

関連する問題