IOS similar to NetEase News Homepage News Carousel Components

First, demand analysis

1. Can roll the news picture in the transverse cycle

2. Scroll to the corresponding picture when the news title is displayed

3, each news picture can click

4, there are Pagecontrol tips

5. Ability to expand with controls

Ii. Design and implementation

1. Display pictures using sdwebimage third-party library, you can cache pictures, load images asynchronously via URLs

2, using a horizontal rolling uitableview to achieve circular scrolling

3, use a black translucent background, white text Uilabel display title

4, define the data structure of each news:

　　　

/** @brief use local address by default, if not locally, use the network picture */@interface photonewsmodel:nsobject/** @brief The picture displayed when loading */@property (nonatomic, Strong) UIImage *loadingimage;/** @brief Image Local Address */@property (nonatomic, strong) NSString *localpath;/** @brief The address of the news image */ @property (nonatomic, strong) NSString *photourl;/** @brief News Headlines */@property (nonatomic, strong) NSString *title; @end

5. Agency Agreement:

@protocol uiphotonewsviewdelegate <nsobject>/** *  get how many picture news * *  @param photonews control itself * *  @return Number of picture news */-(Nsuinteger) Photonewscount: (Uiphotonewsview *) photonews;/** *  return to the model of the first picture news * *  @param Photonews control itself *  @param index * *  @return Returns the model */-(Photonewsmodel *) photonews that describes the picture news: (Uiphotonewsview *) Photonews            Photomodelatindex: (nsuinteger) index;/** *  Picture News Click Callback * *  @param photonews control itself *  @param Model     Click News corresponding model */-(void) Photonews: (Uiphotonewsview *) photonews    Photodidclick: (Photonewsmodel *) model; @end

6. How to implement cyclic scrolling

A) a copy of the data to be displayed is equivalent to 1, 2, 3, 4|1, 2, 3, 4

b) When the data is initialized, navigate to the second part of 1 here

c) Scroll to the previous 1 or 2 o'clock, set jump to the second part of 1 and 2

d) Key code:

-(void) makecyclescroll{    if (self.realcount >= 2)    {        CGFloat currentoffsetx = Self.contenttableview.contentoffset.x;        CGFloat currentoffsety = self.contenttableview.contentoffset.y;        CGFloat contentheight  = self.contentTableView.contentSize.height;                if (Currentoffsety < (contentheight/8.0)) {            Self.contentTableView.contentOffset = Cgpointmake (Currentoffsetx, (Currentoffsety + (CONTENTHEIGHT/2)));        }        if (Currentoffsety >= ((contentheight * 6)/8.0)) {            Self.contentTableView.contentOffset = Cgpointmake ( Currentoffsetx, (Currentoffsety-(CONTENTHEIGHT/2)));}}}    

　　

Third, the realization effect

(circular scrolling can be left and right)

　　

Four, the code

e-mail to: [email protected]

　

IOS similar to NetEase News Homepage News Carousel Components