Introduction to kotlin for iOS developers ⑤-Practical XML

Let's finally write it

That's why it's a practical edition. I will make one app this time and next time. Everybody loves "calculators".

First make a project

Let's start by creating a project, which also serves as a rough review.

Anyway, start Android Studio.

Then click Start a new AndroidStudio project.

The project name will be Calculator.

And when the project is completed, The screen looks like this.

This time about XML

So, first open activity_main.xml. However, if it is a normal setting, it should be open immediately after creating the project, so just switch tabs. Like this. If you make a mistake and activity_main.xml isn't open or closed, look for activity_main.xml in the left navigation bar. If the navigation bar is set to "Android", it should be in app> res> layout>.

Now, have you successfully opened activity_main.xml? If you open it, you should see a screen like this. Then, I will add an explanation while actually making it.

The first demon gate "Layouts"

The first thing to pay attention to is the place called "Component Tree". I think that it appears at the bottom left of the main screen in the standard setting. Here you can see what the structure of a part is on the current screen. In the initial state, there is only a TextView with "Hello World!" Written in the ConstraintLayout. So, for those who have created iOS apps using Xcode, it may be "Layout?". If you look for something similar in this Layout, Xcode, the closest one is "StackView". I mean, "Linear Layout" corresponds to that. As of March 15, 2017, Google's policy seems to be to focus on Constraint Layout. This seems to be used in the same way as the so-called AutoLayout, but there are still many unknown parts. So, this time, I will use the LinearLayout that I am familiar with.

How to use LinearLayout

Now that the standard XML file is ConstraintLayout, you need to rewrite it to LinearLayout. You can rewrite the XML directly, but this time it's for Android development beginners, so let's eliminate the complicated story and delete activity_main.xml once and recreate it. Right-click on activity_main.xml in the navigation bar and select Release. After deleting, right-click in the same location> new> Layout resouce file. Since such a screen opens, enter "activty_main.xml" in File name. Next, check if the Root element under it is "Linear Layout" (if it is different, enter it. Since there is a suggestion function, enter "Li" and it will appear as a candidate). Then you can click OK.

As for how to use LinearLayout, I think that you can imagine how to use StackView of Xcode as it is. When the parts are thrown into the LinearLayout, they are basically arranged at equal intervals in the set direction (horizontal or vertical). You can put the LinearLayout inside the LinearLayout, or you can adjust the size by using the "weight" described later.

Try to put the parts

Now, let's first put a TextView inside the root element LinearLayout. (TextView is equivalent to UILabel in Xcode) There is a Palette above the Component Tree we saw earlier. If you select widget there, TextView will appear at the top. Use this TextView as a calculator display. I'd like to place some buttons below, but here, let's insert LinearLayout (horizental) first. And let's arrange 4 Buttons in the added LinearLayout. Did it look like this? This time, the number of buttons will be 16 from 0 to 9 (numbers) + 4 (symbols of four arithmetic operations) + 1 (clear buttons) + 1 (= buttons), so let's arrange 4 for the time being.

id creation

Next, set each part. Anyway, I can't talk unless I decide the id of the part. On Android, you have to write the "outlet connection" in Xcode by yourself. What is needed for this is the id of the part, which can be treated as a resource by naming it on the XML file. The id is required only for the parts that take some action as an app in response to the user's operation. Specifically, Android does not require the id itself, just as UILabel that only displays specific characters in Xcode (for example, item name) does not need to be connected to an outlet. (* Strictly speaking, the id is assigned when the part is placed. Since it is not necessary to use it in the code, I wrote "It is not needed".)

Also, the id must be unique throughout the project. It's easy to think that the same id will not be a problem because the screens are different, but that is not the case with wholesalers. (On another occasion as to why this is so) Now, let's actually set the id on the screen. Select the TextView you just placed from the Contents Tree. There is a screen called properties on the right side of the screen. (If not, I think it is folded, so look carefully toward the right edge of the screen.) Arbitrarily rewrite the "textView" entered as standard in the "ID" field at the top of this page. For now, let's set it to "displayTextView". Then, the display of TextView of ComponentsTree at the lower left changes a little. If the name of the TextView matches the ID you entered earlier, you are successful. Repeat the same operation and add ids to the four Buttons you placed earlier. button -> no7Button button2 -> no8Button button3 -> no9Button button4 -> divisionButton Rewrite as follows.

layout element settings

Next, set the layout element. The minimum settings you need to make are layout_width and layout_height. The point is width and height, but here there are two unfamiliar words, "match_parent" and "wrap_content". As before, let's pay attention to the Properties on the right side with the displayTextView selected. Well, if you think about the meaning of both, you can understand it because it "aligns with the parent view" and "covers your own contents", but if you do not think about it until you get used to it, "Which one?" It will be. For now, let's set layout_width to macth_parent and enter "40dp" directly in layout_height.

dp and sp

By the way, I introduced words that I'm not familiar with. It is "dp". It's like, "Well, it looks like a unit?" It's just what the unit indicates. It seems that dp, the meaning is "density-independet pixels", and it is a device that has been devised so that it will be displayed uniformly even if the model is different on android with various screen resolutions for each terminal. is. The basic dp is used to specify the size and margin of screen parts. It is not always recommended, but it is recommended to be a multiple of 4. This is the relationship of the ratio of dpi, which is a general-purpose density. The reason is that ldpi is 0.75 times as much as mdpi.

So, sp is often talked about as a set with dp. If you think that it is a font size version of dp, there is almost no problem. Therefore, it is okay if you use it with the consciousness of "sp when registering the font size, dp otherwise".

About weight

Let's continue like that. For the time being, the TextView settings are almost complete. Next is the arrangement of the buttons, It's a strange arrangement. Hopefully it will be the same size and neatly lined up. In such a case, layout_weight, which is a layout setting item, is used. It's like "weight" ≒ "importance in the sequence of the parts". The smaller this number, the more important it is-> the more it occupies in the LinearLayout. This time, the importance is almost the same, so let's align them all with "1" When I tried to find it, select "no7Button" and look at the properties ... No. There is no item for layout_weight, don't rush. There is a link at the bottom that says "View all properties". Then, a mark with a similar arrow extending to the left and right is secretly attached to the upper right.

Actually, there are so many property items that it was difficult to find them, so the style is to display only some of the items that are mainly used. Then, you can switch to the all property display with the buttons below and on the upper right. When you switch immediately, it looks like this So, there was "layout_weight" which was the 8th from the top (If you were not here, scroll to find the item of "l" or use the "search button" next to the "switch button" above to narrow down Let's include it.) After setting the weight of "no7Button" to 1, set the weight to 1 for other buttons as well. Then it will look like this. (If not, check the layout_width and layout_height of each button. Especially if there is only one larger button, its layout_width is often match_parent.)

• Also, I secretly changed the layout_height setting of LinearLayout to 40dp.

I will line up the parts one after another in this way.

The rest of the work is a big cut, just put the LinearLayout and line up the 4 buttons inside and repeat 3 more times. It's OK if it looks like this. After that, select the item called text from the properties of each button and enter the button name to complete.

Let's see the completed screen

Now that we've done this, let's see what happens with the emulator. The Run button is like the green "play button" lined up on the toolbar at the top of the screen. Press this guy. Then a window like this will open. This time, we are proceeding on the premise that it is the first time for us, so we will make an emulator from now on. Click "Create New Virtual Device" at the bottom left. For the time being, let's make it with Nexus 5x as it is a basic model. It's a good idea to check what other models can be emulated in your spare time. Then you will be asked which version of android you want to run on that emulated device. For the time being, the latest Nougat is fine. (Since I have already downloaded it here, I can select Nougat immediately, but if it is in a clean state, I need to download android first) Finally, make detailed settings and you're done, but it's okay if you ignore it. Then The Nexus 5x I just made has been added to the Available Virtual Device. Now press OK to launch the emulator. If you execute it again in this state, the project you are currently creating will run on the emulator.

The screen is now complete. Nothing happens when I tap the button yet. It's natural. Finally, let's write kotlin to this next time to complete the calculator.

bonus

Did you notice that there are tabs "Design" and "Text" below the Component Tree? If you switch this

It turns into an editor that writes XML directly like this. If you have experience with XML, it may be faster to edit it directly here. I will expose this XML because it is a big deal. For your reference.

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/displayTextView"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:text="TextView" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:orientation="horizontal">

        <Button
            android:id="@+id/no7Button"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="７" />

        <Button
            android:id="@+id/no8Button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="８" />

        <Button
            android:id="@+id/no9Button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="９" />

        <Button
            android:id="@+id/divisionButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="÷" />
    </LinearLayout>


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:orientation="horizontal">

        <Button
            android:id="@+id/no4Button"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="６" />

        <Button
            android:id="@+id/no5Button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="５" />

        <Button
            android:id="@+id/no6Button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="４" />

        <Button
            android:id="@+id/multiplicationButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="×" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:orientation="horizontal">

        <Button
            android:id="@+id/no1Button"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="１" />

        <Button
            android:id="@+id/no2Button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="２" />

        <Button
            android:id="@+id/no3Button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="３" />

        <Button
            android:id="@+id/subtractButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="-" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:orientation="horizontal">

        <Button
            android:id="@+id/no0Button"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="０" />

        <Button
            android:id="@+id/clearButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="C" />

        <Button
            android:id="@+id/resultButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="＝" />

        <Button
            android:id="@+id/additionButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="＋" />
    </LinearLayout>

</LinearLayout>

Please also include other articles

Introduction to kotlin for iOS developers ①-Environment construction Introduction to kotlin for iOS developers (2) -Project creation Introduction to kotlin for iOS developers ③-About gradle Introduction to kotlin for iOS developers ④-Type Introduction to kotlin for iOS developers ⑤-Practical XML [Introduction to kotlin for iOS developers ⑥-kotlin creation] (http://qiita.com/parappa1002/items/9f898feb4f83e672b384)