Vraag Hoe krijg ik een wazig en doorschijnend effect op een navigatiebalk in iOS 7?


Probleem

Mijn app lijkt correct te zijn ingedeeld, maar ik kan het wazige translucente effect waar iOS 7 beroemd om is niet bereiken. De mijne lijkt ondoorzichtig.

enter image description here

Gewenste effect

Ik probeer een meer voor de hand liggend blur-effect te krijgen, zoals de Apple Trailers-app:

enter image description here

doorschijnendheid

In mijn subklasse van UINavigationController, maak ik de navigatiebalk doorzichtig:

- (id)initWithRootViewController:(UIViewController *)rootViewController
{
    if (self = [super initWithRootViewController:rootViewController]) {
        self.navigationBar.translucent = YES;
    }
    return self;
}

Tint Color

In mijn subklasse van UIApplicationDelegate heb ik de tintkleur van de navigatiebalk ingesteld. Ik ontdekte dat de alpha van de tintkleur geen verschil maakt. Dat wil zeggen, het gebruik van een alpha van 0.1 zou niet tot gevolg hebben dat de balk meer doorschijnend wordt.

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions 
{
    [[UINavigationBar appearance] setTintColor:[UIColor greenColor]];
}

randen

In mijn content view-controller heb ik de grens ingesteld UIRectEdgeNone dus de top wordt niet afgehakt door de navigatiebalk. Als ik de standaard zou gebruiken UIRectEdgeAll, de navigatiebalk zou permanent de bovenkant van mijn inhoud bedekken. Zelfs als ik met deze afwijking zou leven, UIRectEdgeAll nog steeds maakt het translucentie-effect niet mogelijk.

- (void) viewDidLoad
{
    [super viewDidLoad];
    self.edgesForExtendedLayout = UIRectEdgeNone;
}

Bewerken: experimenteren met randen

Advertentie aangegeven door @rmaddy in de opmerkingen, het probleem kan zijn met de edgesForExtendedLayout. ik heb gevonden uitgebreide tutorialrandenForExtendedLayout en geprobeerd om het te implementeren:

- (void) viewDidLoad
{
    [super viewDidLoad];

    self.edgesForExtendedLayout = UIRectEdgeAll;
    self.automaticallyAdjustsScrollViewInsets = YES;
    self.extendedLayoutIncludesOpaqueBars = NO;
}

Het is niet gelukt. Ten eerste was er geen translucentie-effect. Ten tweede werd de top van mijn inhoud afgehakt. Op de volgende voorbeeldpagina met de bovenstaande code was de avatar aanvankelijk bedekt door de navigatiebalk en was het erg moeilijk om naar te scrollen. Je zou naar beneden kunnen trekken om de bovenkant van de avatar te zien, maar als je loslaat, springt de pagina automatisch weer omhoog en wordt de avatar weer verduisterd.

enter image description here


11
2017-11-14 01:19


oorsprong


antwoorden:


Het probleem is veroorzaakt door de view-to-refresh-weergave van derden EGORefreshTableHeaderView, dat in de volksmond werd gebruikt voordat iOS 6 het systeemvernieuwingsbeheer introduceerde.

enter image description here

Deze weergave verwart iOS 7, waardoor het denkt dat de inhoud groter is dan het in werkelijkheid is. Voor iOS 6 en 7 ben ik voorwaardelijk overgeschakeld op gebruik UIRefreshControl. Nu zal de navigatiebalk mijn inhoud niet afhakken. ik kan gebruiken UIRectEdgeAll om mijn inhoud onder de navigatiebalk te laten verschijnen. Ten slotte kleur ik mijn navigatiebalk met een lagere alpha om het translucentie-effect te krijgen.

// mostly redundant calls, because they're all default
self.edgesForExtendedLayout = UIRectEdgeAll;
self.automaticallyAdjustsScrollViewInsets = YES;
self.extendedLayoutIncludesOpaqueBars = NO;

[[UINavigationBar appearance] setTintColor:[UIColor colorWithWhite:0.0 alpha:0.5]];

5
2017-11-15 00:16



Als u precies hetzelfde effect wilt bereiken als in de iTunes Store (Dark Blur).

Configureer de barStyle kenmerk van de navigatiebalk als volgt:

self.navigationController.navigationBar.barStyle = UIBarStyleBlack;

0
2018-04-29 16:43