Designing the Game Screen

The game screen must lead the user through a series of trivia questions and log the number of positive responses (the score). Each trivia question has a corresponding graphic to display. For example, the game might show the user a picture of a mountain and ask if the user has ever climbed a mountain.

Unlike previous screens you have developed, the game screen does not need the customary title bar. Instead, you want to use the entire screen to display the game components. Figure 12.1 shows a rough design of the game screen.

FIGURE 12.1

Rough design for the Been There, Done That! game screen.

TRIVIA QUESTION HERE?

Icon

Icon

You want the game screen to share some common features with the rest of the application: It should use the same background graphic, font, and color scheme as the other screens. To translate the rough design into the appropriate layout design, you need to update the /res/layout/game.xml layout file and the QuizGameActivity class.

RelativeLayout works especially well for displaying icon graphics in each of the four corners of the screen. You can also use another RelativeLayout to display each question to the user, using one ImageView control and one TextView control, as well as two Button controls to handle responses.

Figure 12.2 shows the basic layout design of the game screen.

LinearLayout (Vertical Orientation)

RelativeLayout

ImageView

ImageView

RelativeLayout

ImageView

(Question-Specific Graphic)

TextView

(Question-Specific Text)

Button ("Yes")

ImageView

ImageView

FIGURE 12.2

Layout design for the Been There, Done That! game screen.

Each time the user clicks a Button control, the game screen will update the ImageView and TextView controls to display the next question. To smoothly transition (and animate) from one question to the next, you can use the special controls ImageSwitcher and TextSwitcher, which are subclasses of the ViewSwitcher class.

A ViewSwitcher control can animate between two child View controls: the current View control and the next View control to display. Only one View control is displayed at any time, but animations, such as fades or rotates, can be used during the transition between View controls. These child View controls are generated using ViewFactory. For example, ImageSwitcher and its corresponding ViewFactory can be used to generate the current question ImageView and switch in the next question's ImageView when the user clicks a Button control. Similarly, a TextSwitcher control has two child TextView controls, with transitional animation applying to the text.

Figure 12.3 shows the updated layout design of the game screen, which uses an ImageSwitcher control and a TextSwitcher control.

FIGURE 12.3

Revised layout design for the Been There, Done That! game screen with ImageSwitcher and

TextSwitcher controls.

LinearLayout (Vertical Orientation)

RelativeLayout

ImageView

ImageView

RelativeLayout

ImageSwitcher

(Question-Specific Graphic)

TextSwitcher

(Question-Specific Text)

Button ("Yes")

ImageView

ImageView

0 0

Post a comment