Experiment 1 Basic UI design

Experiment 1 Basic UI design
Experiment 1 Basic UI design

[PURPOSE]

1. Familiar with Android Studio development tools
2. Familiar with basic Android UI development and basic UI design

[Experiment content]

Implement the following Android applications to achieve the following display effects (No Click Event Effects for controls currently ):

Note: The circle under the two buttons is ProgressBar (transparent)

[Reference]

1. Build the Android Studio development environment (see pdf-how to install AndroidStudio)

2. Create a project HelloWorld:
Create an Android Project:

Wait patiently, and the android project view is displayed:

Click avd manager in the shortcut bar of Android Studio to start avd (if you can use a mobile phone, you 'd better use a mobile phone to debug it, but you can use Baidu ):

Create a new simulator. Make sure that the Android API corresponds to the simulator API. Then, check whether the Android UI view is displayed.
Hello WZ now? Http://www.bkjia.com/kf/ware/vc/ "target =" _ blank "class =" keylink "> vcmxkINfW0fmjujxiciAvPg0KPGltZyBhbHQ9" Hello World "src =" http://www.bkjia.com/uploads/allimg/160421/04223G021-4.png "title =" \ "/>

Tip: Click screen shot to display a UI control with higher definition. You can also save the image:

3. UI controls to be used in lab: Button, ImageView, TextView, EditText, ProgressBar...

4. layout used in the experiment: LinearLayout, RelativeLayout, TableLayout... The layout mainly involves the layout of the control position. You can see that there are many la S, each of which has different functions:

5. Main Methods for modifying controls:
A) directly modify the xml file (mainly used during development)
B) modify the attribute panel in the lower right corner (note that this is just to familiarize you with it ):

C) directly use the code to modify it (why? It's amazing, right? dynamically changing the layout and control structure. This is very important in many applications)

6. How to Use background images in ImageView and ImageButton:
First open the project file, find the res/drawable or res/mipmap folder, put the image in one of the folders (note the original image), refresh android studio, then you can reference it in the xml file:

If it is placed in the drawable folder, it is:

(The difference between the two methods is that it is more efficient to put it in mipmap than to put it in drawable)

7. How to Design the interface? First, we can define a RelativeLayout as the main layout to typeset the UI:

We use a vertical linear layout to control the entire UI interface.

How can this be achieved? TableLayout)

Note how to make EditText occupy the space of TextView in one row. Add the following content to EditText:

How can we center these two controls? We have learned how to center images. In fact, the method is the same, but there are two controls. What should we do? We 'd better use a layout (such as RelativeLayout or LinearLayout) to include the two controls and then center the layout!

After completing the above layout settings, it is not difficult to find that the layout can be nested, that is, there is a small layout in the large layout,
Then we can think of a small layout as a combined control !!!!