1. Introduction to catalog
This is a directory opened in the form of a project, where app is the main application module, libs below is for third-party library files, src is for application source code, and res is for resource files. In layman's terms, it is like the picture , page code and so on, please see the following picture for details.
2. Simulator
The green box below is the configuration, and next to it is the simulator. Generally, there are several by default. You can choose your own, or you can default. (If you have needs or don’t have one, click the red box and the simulator assistant will open. You can also add one yourself. ) and then click the green triangle to start. After that, a box will pop up on the right to see the current running effect. If not, just click on Running Devices in the yellow box to see the simulator.
Device Manager looks like this:
Running Devices is like this: (There are some buttons for shutdown, volume, rotation, etc. at the top. If the running project is started, the app will be opened instead of the main interface)
3. Edit the front-end code
The AndroidManifest.xml file in the res directory is used to define the basic information and components of the application. Mine is like this:
The icon on line 9 is the icon of this app. Similarly, line 11 is the round icon. The label on line 10 is the name of this app. It is the name that will be under the mobile application icon. The default is the file when you created it. The name can also be changed. The theme on line 13 is the overall appearance and style of the program, which determines the program's window decoration, background color, font style, etc.
In this file, I just want to change the icon. The mipmap looks too complicated and I don’t know how to fit it in. In fact, just select a mipmap folder, right-click--new--image asset, and a dialog box will pop up. Open the icon we designed in the path, and you can change the name (I changed the name to setup_icon). The default one already exists, and the save will fail. Then click Next - Complete.
At this time, many icon files are generated in the directory, and then the code is changed.
Run it and you will see the changes. Then look for the page files. They are basically under the layout folder. Open one at will.
There are three view options in the upper right corner. The first code shows only the code. The split in the middle shows the picture. One side has the code and the other side has the effect. The right side has no code. You can choose according to your preference. If you can't tell which code is which on the left, you can click on the block you want to edit on the right, and then the code on the left will be highlighted.
Let’s briefly talk about some basic attributes through this page. For example, I have selected this button now, and the attributes about this button are highlighted on the left. id is the name that uniquely locates this button, width/height is the width and height, and wrap_content is based on the content. The actual size can be adjusted, but this attribute generally needs to be given constraints (such as the following), otherwise an error will be reported. Gravity is its position, here is the lower right corner, marginEnd is how far it is from the right, you can enter it directly Value, you can also directly reference the value in the resource file
Then there are the resource files. Under the values folder, there are four default ones. One is color.xml. You can add your own desired color. The writing is as follows:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="purple_200">#FFBB86FC</color>
<color name="purple_500">#FF6200EE</color>
<color name="purple_700">#FF3700B3</color>
<color name="teal_200">#FF03DAC5</color>
<color name="teal_700">#FF018786</color>
<color name="black">#FF000000</color>
<color name="white">#FFFFFFFF</color>
<color name="title_block">#66a9c9</color>
<color name="main_list_background">#96ffffff</color>
</resources>The name must be written. This is the name when quoting. You can write it according to your preference or purpose. For example, this color #FF001122 is the hexadecimal notation of a color. The first two digits are transparency, FF is 100%, and the following are in order. Corresponding to rgb, if there are only six digits, the default transparency is 100%. This color value is available in the color picker. I usually use ps, as shown below.
Then there is the string string.xml
<resources>
<string name="app_name">B612</string>
<string name="navigation_drawer_open">Open navigation drawer</string>
<string name="navigation_drawer_close">Close navigation drawer</string>
<string name="nav_header_title">Android Studio</string>
<string name="nav_header_subtitle">[email protected]</string>
<string name="nav_header_desc">Navigation header</string>
<string name="action_settings">Settings</string>
<string name="menu_home">Home</string>
<string name="back">返回</string>
<string name="menu_gallery">Gallery</string>
<string name="menu_slideshow">Slideshow</string>
</resources>The writing method is actually similar. dimens.xml is just some dimensions, and the writing method is the same. There will be several by default. Just read and write it yourself.
4. Summary
That’s probably it for now. I’m just slowly exploring it on my own, and it’s quite interesting. I roughly know which directories are used for what, and if I look at the source code, I can figure out what they are for. According to how you design the project page, you can slowly change it by yourself. You can find the functions you want, such as how to write login and registration, or how to place an input box and refine the functions, but this may require you to do it yourself. There must be a good logic. At present, I have only written some static effects on the homepage. I will do it first, and I will consider writing an article later to supplement the current front-end stuff. After writing these static pages on the front end, you can write interactions.
The above only represents my personal experience and insights.