Android Programming with Kotlin for Beginners
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

Adding layouts within layouts

The solution to laying out some elements with a different orientation to others is to nest layouts within layouts. Here is how to do it.

From the Layouts category of the palette, drag a LinearLayout (Horizontal) onto the design, placing it just below the Multiline Text. Notice that there is a blue border occupying all the space below the Multiline Text:

This indicates that our new LinearLayout (Horizontal) is filling the space. Keep this blue border area in mind, as it is where we will put the next item on our UI.

Now, go back to the Text category of the palette and drag a TextView onto the new LinearLayout we just added. Notice how the TextView sits snuggly in the top left-hand corner of the new LinearLayout:

At first, this seems no different to what happened with the previous vertical LinearLayout that was part of our UI from the start. But watch what happens when we add our next piece of the UI.

Note

The term used to refer to adding layouts within layouts is nesting. The Android term applied to any item that appears on the UI (buttons and text, for example) is view, and anything that contains views is a view group. As the terms view and view group do not always make their meanings clear in certain contexts, I will usually refer to parts of the UI either specifically (such as TextView, Button, and LinearLayout) or more broadly (UI element, item, or widget).

From the Button category, drag a Button onto the right-hand side of the previous TextView. Notice that the button sits to the right of the text, as shown in the following screenshot:

Next, select the LinearLayout (the horizontal one) by clicking on an empty part of it. Find the layout_height attribute and set it to wrap_content. Observe that the LinearLayout is now taking up only as much space as it needs:

Let's configure the text attribute of the TextView and the Button before we add the next part of the UI. Change the text attribute of the Button to LOAD. Change the text attribute of our new TextView to Load ConstraintLayout.

Tip

Did you work out how to achieve the previous instruction for yourself? Yes? Excellent! You are now familiar with editing attributes of Android views. No? Left-click the item you want to edit (in this case, the TextView), search using the search icon or scroll to find the attribute you want to edit in the Attributes window (in this case, the text attribute), select the attribute, and press Enter to edit it. I can now give more succinct instructions on how to build future UI projects, and this makes your journey to becoming an Android ninja much quicker.

Now we can repeat ourselves and add another TextView and Button attribute within another LinearLayout (Horizontal) just below the one we have just finished. To do so, follow these steps in order:

  1. Add another LinearLayout (Horizontal), just below the previous one
  2. Add a TextView to the new LinearLayout
  3. Change the text attribute of the TextView to Load TableLayout
  4. Add a Button on the right-hand side of the TextView
  5. Change the text attribute of the Button to LOAD
  6. Resize the LinearLayout by changing the layout_height attribute to wrap_content

Now we have two neatly (and horizontally) aligned texts and buttons.

Just for fun, and for the sake of exploring the palette a bit more, find the Widgets category of the palette and drag a RatingBar onto the design just below the final LinearLayout. Now, your UI should look very similar to this next screenshot:

Note

In the previous two screenshots, I hadn't yet changed the text attribute of the two Button elements. Everything else should be the same as yours.

Let's add some visual finishing touches to the layout.

本周热推：
单片机开发与典型工程项目实例详解CPU自制入门计算机组装与维护打印机维修不是事儿（第2版）图解芯片技术
上一章目录下一章