31

ヘッダーでセルをマスクしますが、背景はマスクしません。

Appleの通知センター（iPhoneのステータスバーを下にスワイプしたとき）に似た透明なヘッダーとセルを備えたUITableViewがあります。セルをマスクして、スクロール時にヘッダーの下に表示されないようにする方法がわかりません。

テーブルビューのcontentInsetsを変更してみました。また、ヘッダービューのフレームを負の原点に変更してみました。

4

10 に答える 10

68

UITableviewCellこれらのメソッドのサブクラスを作成して追加してみてください

- (void)maskCellFromTop:(CGFloat)margin {
    self.layer.mask = [self visibilityMaskWithLocation:margin/self.frame.size.height];
    self.layer.masksToBounds = YES;
}

- (CAGradientLayer *)visibilityMaskWithLocation:(CGFloat)location {
    CAGradientLayer *mask = [CAGradientLayer layer];
    mask.frame = self.bounds;
    mask.colors = [NSArray arrayWithObjects:(id)[[UIColor colorWithWhite:1 alpha:0] CGColor], (id)[[UIColor colorWithWhite:1 alpha:1] CGColor], nil];
    mask.locations = [NSArray arrayWithObjects:[NSNumber numberWithFloat:location], [NSNumber numberWithFloat:location], nil];
    return mask;
}

このデリゲートメソッドを追加しますUITableView

#pragma mark - UIScrollViewDelegate

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    for (iNotifyTableViewCell *cell in self.visibleCells) {
        CGFloat hiddenFrameHeight = scrollView.contentOffset.y + [iNotifyHeaderView height] - cell.frame.origin.y;
        if (hiddenFrameHeight >= 0 || hiddenFrameHeight <= cell.frame.size.height) {
            [cell maskCellFromTop:hiddenFrameHeight];
        }
    }
}

※[iNotifyHeaderView height]の高さですHeaderView。#import <QuartzCore/QuartzCore.h>カスタムセルに使用します。

于 2012-12-06T03:06:15.980 に答える
18

UITableViewCell のサブクラスの作成をスキップできる Alex Markman の回答を少し編集します。このアプローチの利点は、複数の異なる UITableViewCells に使用できることです。

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    for (UITableViewCell *cell in self.tableView.visibleCells) {
        CGFloat hiddenFrameHeight = scrollView.contentOffset.y + self.navigationController.navigationBar.frame.size.height - cell.frame.origin.y;
        if (hiddenFrameHeight >= 0 || hiddenFrameHeight <= cell.frame.size.height) {
            [self maskCell:cell fromTopWithMargin:hiddenFrameHeight];
        }
    }
}

- (void)maskCell:(UITableViewCell *)cell fromTopWithMargin:(CGFloat)margin
{
    cell.layer.mask = [self visibilityMaskForCell:cell withLocation:margin/cell.frame.size.height];
    cell.layer.masksToBounds = YES;
}

- (CAGradientLayer *)visibilityMaskForCell:(UITableViewCell *)cell withLocation:(CGFloat)location
{
    CAGradientLayer *mask = [CAGradientLayer layer];
    mask.frame = cell.bounds;
    mask.colors = [NSArray arrayWithObjects:(id)[[UIColor colorWithWhite:1 alpha:0] CGColor], (id)[[UIColor colorWithWhite:1 alpha:1] CGColor], nil];
    mask.locations = [NSArray arrayWithObjects:[NSNumber numberWithFloat:location], [NSNumber numberWithFloat:location], nil];
    return mask;
}
于 2014-07-17T09:54:10.447 に答える
6

迅速なバージョン

func scrollViewDidScroll(_ scrollView: UIScrollView) { 
    for cell in tableView.visibleCells {
        let hiddenFrameHeight = scrollView.contentOffset.y + navigationController!.navigationBar.frame.size.height - cell.frame.origin.y
        if (hiddenFrameHeight >= 0 || hiddenFrameHeight <= cell.frame.size.height) {
            maskCell(cell: cell, margin: Float(hiddenFrameHeight))
        }
    }
}

func maskCell(cell: UITableViewCell, margin: Float) {
    cell.layer.mask = visibilityMaskForCell(cell: cell, location: (margin / Float(cell.frame.size.height) ))
    cell.layer.masksToBounds = true
}

func visibilityMaskForCell(cell: UITableViewCell, location: Float) -> CAGradientLayer {
    let mask = CAGradientLayer()
    mask.frame = cell.bounds
    mask.colors = [UIColor(white: 1, alpha: 0).cgColor, UIColor(white: 1, alpha: 1).cgColor]
    mask.locations = [NSNumber(value: location), NSNumber(value: location)]
    return mask;
}
于 2016-10-18T11:42:31.073 に答える
5

クリーンスウィフト 3 バージョン:

extension YourViewController: UIScrollViewDelegate {
    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        for cell in tableView.visibleCells {
            let hiddenFrameHeight = scrollView.contentOffset.y + navigationController!.navigationBar.frame.size.height - cell.frame.origin.y
            if (hiddenFrameHeight >= 0 || hiddenFrameHeight <= cell.frame.size.height) {
                if let customCell = cell as? CustomCell {
                    customCell.maskCell(fromTop: hiddenFrameHeight)
                }
            }
        }
    }
}

class CustomCell: UITableViewCell {
    public func maskCell(fromTop margin: CGFloat) {
        layer.mask = visibilityMask(withLocation: margin / frame.size.height)
        layer.masksToBounds = true
    }

    private func visibilityMask(withLocation location: CGFloat) -> CAGradientLayer {
        let mask = CAGradientLayer()
        mask.frame = bounds
        mask.colors = [UIColor.white.withAlphaComponent(0).cgColor, UIColor.white.cgColor]
        let num = location as NSNumber
        mask.locations = [num, num]
        return mask
    }
}

私はこれを使用しただけで、魅力のように機能します。投稿の皆さんに感謝したいです！あちこちで投票！

于 2017-03-18T12:48:56.057 に答える
0

セクション ヘッダーの高さを最小に設定し、UITableView の layoutSubviews をオーバーライドしてヘッダーを tableView のスーパービューに配置し、フレームの原点をその高さだけ上向きに調整しました。

于 2012-09-02T19:57:58.417 に答える
0

私には2つの可能な解決策があり、コードはありません-アイデアだけです:

  1. 一般的ではなく、Apple が通知センターで使用するセットアップ/デザインで動作するはずです。

セクション ヘッダーを不透明にし、テーブルの背景パターンをセクション ヘッダーの背景として「複製」します。セクション ヘッダーのオフセットに応じて背景パターンを配置します。

  1. 一般的ですが、おそらくより多くのパフォーマンスの問題があります。少数のセルで正常に動作するはずです。

すべてのセル レイヤーにアルファ マスクを追加します。セルの位置に応じてアルファ マスクを移動します。

(背景パターン/アルファマスク オフセットを維持するには、scrollViewDidScroll デリゲート メソッドを使用します)。

于 2012-08-27T07:06:13.137 に答える
-3

または、UI の見栄えだけが必要な場合は、

テーブル ビューを変更して、フローティング セクション ヘッダーを持たないようにする

すばやく簡単な 2 つの手順 (iOS 6):

  1. UITableView スタイルを UITableViewStyleGrouped に変更します。(ストーリーボード/NIB から、またはコードを介してこれを行うことができます。)

  2. 次に、テーブルビューのバックグラウンド ビューを空のビューに設定します [ viewDidAppearなどのメソッド または cellForRow メソッドのいずれかで (前者の方が望ましいですが)]。

yourTableView.backgroundView = [[UIView alloc] initWithFrame:listTableView.bounds];

これでテーブル ビューが作成されましたが、フローティング セクション ヘッダーはありません。セクション ヘッダーがセルと一緒にスクロールするようになり、面倒な UI の問題が解決されました。

これを試してみて、どうなるか教えてください。ハッピーコーディング:)

編集: iOS 7 の場合、テーブル ビュー スタイルを「UITableViewStyleGrouped」に変更し、ビューの色合いを「クリア カラー」に変更するだけです。

于 2014-03-04T13:34:45.010 に答える