The number of ways that you can display a Twitter feed in your app is only limited by your imagination. In this article we will demonstrate how you can implement a flipping view which displays the tweets inside your app.

Creating a Flipping View:

The first task is to create a view that flips for indefinite number of times. You can use interface builder to create the view but in our example we are going to implement the view dynamically in code. The createFlippingView method is listed below:



The createFlippingView method simply creates a UIView object which consists of a UILabel to display the tweets. You can make the flipping view interface as fancy as you like but we are going to make it bare bones for the sake of this article. In the next section we are going to create an small Twitter client which will enable us to communicate with the Twitter search results.

Creating AFTwitterHTTPClient:

For this simple scenario there is no need to create a HTTP client. Usually implementing HTTP clients are more useful in larger applications. Consider this section as a bonus where you will learn to create a simple HTTP client using AFHTTPClient classes.

AFNetworking is perhaps the most used iOS library out there. Apart from providing an easy way to create and consume network requests, AFNetworking also allows to create your own HTTPClient by inheriting from AFHTTPClient class. The code below shows the AFTwitterHTTPClient implementation:





The AFTwitterHTTPClient exposes getTweets method which fetches the tweets and then invokes the success or failure blocks. In the next section we will consume the tweets and then display it in a rotating view.

Consuming and Displaying Tweets:

The getTweets method that we implemented in the last section is responsible for fetching all the tweets. But we still have to populate our custom collection with the tweets. The implementation below shows how to smartly use KVC collection operations to pull out all the text from the fetched tweets.

   

The syntax "results.text" extracts all the text attributes from the JSON result represented by the results object. This approach automatically provides us with an array filled with the text of the tweets. We are also setting up the timer which will be fired at regular intervals. The timer will invoke the updateFlippingView method which will show the next tweet.   

The updateFlippingView is implemented below and it is responsible for the flipping animation and the fade-in/fade-out tweet text effect.



There is nothing complicated going on inside the updateFlippingView method. We are simply utilizing the UIView animation blocks to create the animations correctly. We have broken down the animation procedure into multiple steps. The first step is to rotate the view to 180 degrees and in the next step we rotate the rest of the remaining 180 degrees. If you set the rotation to be 360 degrees then it will not rotate at all since it is already in that state.

Build and run the app and you will notice that the flipping view starts iterating through the tweets. Once, it reaches the end it starts over from the first tweet.

Conclusion:

In this article we learned how to create a flipping view to display out tweets. We also learned how to create a simple AFTwitterHTTPClient using AFHTTPClient class.

[Download Sample]