Android UI Basics Quiz: linear layouts

You've read how to use a linear layout on Android. Test your new knowledge with these step-by-step tests that include linear layout controls, and consolidate your knowledge of Java programming and androidhttp://www.aliyun.com/zixun/aggregation/7236.html > User interface Design and development.

Prepare

To prepare for this quiz, you want to start with a basic Android program. You just need to create an Android program in Eclipse and edit its default activity, especially the OnCreate () method, to test the code you wrote for this quiz.

If you don't understand what you just said, I recommend you take a look at the previous article first. Start with some Android tutorials, such as Android development profile or Android primer: Getting Started with Fortune Crunch. Once you have mastered how to create a project, come back and try this exercise.

Progressive Quiz

This is a step-by-step quiz. It contains the skills that many Android developers must master to design and develop programs. With each of the following steps, the difficulty is increasing, and you can consolidate your knowledge of linear layouts and general-purpose Android user interface design.

Step 0: Define your string

Now that you have created a suitable Android project, you need to create some resources for your user interface.

Create：

Create 7 string resources, the first one uses spectral color ("Red" red, "orange" orange, "yellow" yellow, "green", "Blue" Blue, "Indigo" green, "Violet" purple) to create 7 color resources, Each uses the color of the spectrum (red=> #f00, orange=> #ffa500, yellow=> #ffff00, green=> #0f0, blue=> #00f, indigo=> #4b0082 , violet=> #ee82ee) creates two additional color resources for the text color (black=> #000, white=> #fff)

is the created string or color resource stumped? View this string format tutorial.

Quiz 1: Define your layout resources

We started by creating a new layout resource file called Rainbow.xml. In this XML file, add a vertically oriented linear layout control that fills the entire screen. Next, add 7 TextView controls as child controls for the linear layout: Each control color is a spectral color. Set the text for each TextView control to the appropriate color value string and set the background color to the appropriate color. Also, setting the Layout_width property for each control is a Fill_parent,layout_height property value of Wrap_content.

If you complete this step correctly, your layout should look like this:

Quiz 2: Adjust your layout

In this step, you will focus on the different alignment attributes, including those used for linear layouts.

Update the Rainbow.xml layout resource file by following these instructions: Center the TextView control on the screen, and the text in each control is centered. Hint: This requires setting two different XML attributes, one in linear layout and the other for each TextView control.

If you complete this step correctly, your layout should look like this:

Quiz 3: Modifying a linear layout child control

Linear layouts are very flexible. If you modify the child controls in the parent linear layout, the layout adjusts as much as possible.

The text of the TextView control here is small and somewhat difficult to read. Start by modifying the TextView control itself. Update the Rainbow.xml layout resource as described below: First, add a dimension value called Textsize. Here we set to 22DP.

Now your layout should look like this:

Note how the linear layout adapts flexibly to larger textview controls, but they do not take full advantage of the screen space, and the Black belt still exists.

Advanced tip: You might want to consider creating different sizes of resources for different screen sizes, the text size 22DP looks good, and on the small screen, text size of 14DP or 16DP may be more appropriate. For more information about creating alternative resources, view multiple-screen support.

Quiz 4: Use screen space effectively

Notice the black space that's not in use? In this step, you will focus on how to effectively use the entire screen. The TextView controls in the linear layout are sized appropriately, but they can be slightly larger to use unused black space.

We want the TextView control to extend to all available space, regardless of the orientation and size of the screen.

To do this, adjust the Layout_weight property of a neutron control in a linear layout to give each control a specified growth boundary. When the device is in a specific direction, the Layout_weight property is more obvious: for vertical linear layouts, you'll see weight in the device's vertical screen mode, and for horizontal lines, you'll see weight most effective in horizontal screen mode.

First, an attempt to set weights makes each TextView color band occupy the same area on the screen. Tip: 5 controls set to 0.14 and 2 controls set to 0.15 sum to 1.0.

If you configure your control correctly, your screen should look like this:

Next, try setting weights so that each TextView control grows on the screen, such as red with the smallest and violet with the largest. Tip: A good distribution is: 0.08,0.10,0.12,0.14,0.16,0.18,0.22.

If you complete this step correctly, your layout should look like this:

For fun, switch to horizontal screen mode and find the same layout as follows:

Additional quiz: recreate the layout used in step 4b with a Java program

If you find that the previous quiz is fairly simple, consider the following additional quiz: recreate your final layout resources with Java programs (each TextView control has a gradient weight) instead of being controlled in a layout XML resource.

You need to add Setcontentview () calls to your active OnCreate () method and create your linear layouts, as discussed in the Android user interface design: linear layouts.

Here are some tips for implementing rainbow layouts with programs:

To construct each TextView control start. Configure the layout parameters for each TextView control, construct a set of Linearlayout.layoutparams, and set the layout_width,layout_height and weight values for each control. Use the SetText () method of the TextView class to load and display the appropriate character resources. Use the Settextsize () method of the TextView class to configure the font size of the text. You can use Getresources (). Getdimension () to get the ruler resources. Use the SetTextColor () method of the TextView class to configure the font color of the text. You can use Getresources (). GetColor () to load color resources. Use the SetBackgroundColor () method of the TextView class to configure the background color of the control. Similarly, you can use Getresources (). GetColor () to load color resources. Use the Setgravity () method of the TextView class to configure text alignment. The gravity class includes definitions of different alignment types. Next, you construct the LinearLayout control. Use the SetOrientation () method of the LinearLayout class to configure the layout orientation. The LinearLayout class includes definitions of two directions. Use the Setgravity () method of the LinearLayout class to configure the alignment of the child controls for the layout. The gravity class includes definitions of different alignment types. When you set the weight of a child control using a program, you must also use the Setweightsum () method of the LinearLayout class to set the total weight, such as setweightsum (1.0f). Don't forget to construct a Layoutparams object to set the height and width of the linear layout itself. Use the AddView () method to add each TextView control to your LinearLayout object. Finally, use the Setcontentview () method to display the linearlayout you just configured.

You can download the source code here.

Summary

Android user interface designers have been using linear layouts to display controls horizontally or vertically. You can use the alignment properties of the linear layout to control where the child controls are displayed. You can use the Layout_weight property to control the space allocated by each child control.

Good luck! [中文版]

Reprint Please specify:
Author: rockux–web Front end
From: Android UI Basics Quiz: linear layouts