Layout of Android learning 3 UI

Android has a special feature. What we can see is: UI (User Interface), user interface

Today, I will study the UI layout. After a few days, I should have some knowledge about GUI programming in Java. There is a design pattern in it: Observer, observer. If you are interested in the design mode, I recommend a book: head first design mode

The UI development in Android is different. One of the most obvious features is that android simplifies the code by writing the layout and controls in the configuration file.

For more information, see http://developer.android.com/guide/topics/ui/declaring-layout.htmland.

Http://developer.android.com/resources/tutorials/views/index.html

Declaring Layout

Hello views

Instructor Ma soldiers taught us: no second-hand shoes

In fact, learning android has such a built-in document that eclipse is enough

Let's first look at a page

How to declare a declaring layout:

1,Declare UI elements in XML. Android provides a straightforward XML vocabulary that corresponds to the View classes and subclasses, such as those for widgets and layouts.2,Instantiate layout elements at runtime. Your application can create View and ViewGroup objects (and manipulate their properties) programmatically.

Step 1: declare the UI element in the XML file

Step 2: instantiate layout elements at runtime

Open eclipse and create an android project: layout01

On behalf of the Main. xml configuration file, there are two views: 1, graphical 2, text

Graphical drag and drop support, but I am not used to it, or select the view pointed by the arrow

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:orientation="vertical"    android:layout_width="fill_parent"    android:layout_height="fill_parent"    ><TextView      android:id="@+id/my_textView"    android:layout_width="fill_parent"     android:layout_height="wrap_content"     android:text="@string/hello"    /></LinearLayout>

A linear layout is declared here by default: linearlayout, which contains a textview text box with the ID "my_textview"

The meaning of the label will be discussed later. The first step is completed here.

Step 2: instantiate

package com.zph;import android.app.Activity;import android.os.Bundle;public class LinearLayoutActivity extends Activity {    /** Called when the activity is first created. */    @Override    public void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.main);    }}

Instantiate the configured layout element in the callback method oncreate ()

Some elements in the previous main. XML (referred to as attributes in the document)

I don't want to explain the meaning and usage of these elements. However, there is a way to use the eclipse code prompt function:

Place the mouse in the desired place, press the shortcut key: Alt +/, there will be a prompt, press f2 to stop the screen

It's that simple. If you don't ask Google

Here, we will mention the ID representation. In Android, an ID is fixed in representation: @ + ID/idnameid

To be unique, why do we need an ID? It is mainly used to lay the foundation for the controls to be used in subsequent programs. Without ID, these controls cannot be obtained ,. For example, we want to get the textview and write the "good
Night ", which can be written as follows:

        TextView myTextView = (TextView)findViewById(R.id.my_textView);        myTextView.setText("good night");

ID is more important than relativelayout.

These tags are described in more detail in the android API documentation:

Previously I just talked about linearlayout, Android layout has many types: http://developer.android.com/guide/topics/ui/layout-objects.html

Several important view groups

There are several key points for each Layout

1. layout parameters layout Parameters

The document provides a graph

I haven't fully understood it yet. paste it directly.

Note that every LayoutParams subclass has its own syntax for setting values. Each child element must define LayoutParams that are appropriate for its parent, though it may also define different LayoutParams for its own children

All views must contain: width and height.

All view groups include a width and height (layout_width and layout_height), and each view is required to define them. Many LayoutParams also include optional margins and borders.

The document provides two frequently used parameters:

wrap_content ：tells your view to size itself to the dimensions required by its contentfill_parent (renamed match_parent in API Level 8)： tells your view to become as big as its parent view group will allow.

A little explanation: wrap_content, the size can contain the content. fill_parent, fill the parent View

2. layout position

3, size, padding and margins size, fill, and margin

Those who have B/S development experience should be familiar with this. Android encapsulates a series of methods to obtain the parameters of layout.

By searching the API, you can find that Class View encapsulates these methods

There are many things in this class. All classes that inherit the view have these methods. For example, the textview and button we have already touched inherit the view.

I don't know what I'm writing. I 'd like to explain layout through an example.

Let's implement this example together:

Tab Layout

Http://developer.android.com/resources/tutorials/views/hello-tabwidget.html

Create a project named hellotabwidget and create three new activities.

Because this is tab layout, you only need one configuration file. You do not need to create an XML file for each activity in the layout folder. You can add the corresponding activity tag to the androidmanifest file.

You also need to create three configuration files under the drawable File

You also need to prepare six small images. I copied them from the examples in this document and put them in the drawable folder.

Open the main. xml file

The Code is as follows:

<?xml version="1.0" encoding="utf-8"?><TabHost xmlns:android="http://schemas.android.com/apk/res/android"    android:id="@android:id/tabhost"    android:layout_width="fill_parent"    android:layout_height="fill_parent">    <LinearLayout        android:orientation="vertical"        android:layout_width="fill_parent"        android:layout_height="fill_parent"        android:padding="5dp">        <TabWidget            android:id="@android:id/tabs"            android:layout_width="fill_parent"            android:layout_height="wrap_content" />        <FrameLayout            android:id="@android:id/tabcontent"            android:layout_width="fill_parent"            android:layout_height="fill_parent"            android:padding="5dp" />    </LinearLayout></TabHost>

Open androidmanifest. xml

Add the following code to the activity Tag:

android:theme="@android:style/Theme.NoTitleBar"

Finally, we open hellotabwidgetactivity. java. This class inherits tabactivity.

Add the following code:

 Resources res = getResources(); // Resource object to get Drawables    TabHost tabHost = getTabHost();  // The activity TabHost    TabHost.TabSpec spec;  // Resusable TabSpec for each tab    Intent intent;  // Reusable Intent for each tab    // Create an Intent to launch an Activity for the tab (to be reused)    intent = new Intent().setClass(this, ArtistsActivity.class);    // Initialize a TabSpec for each tab and add it to the TabHost    spec = tabHost.newTabSpec("artists").setIndicator("Artists",                      res.getDrawable(R.drawable.ic_tab_artists))                  .setContent(intent);    tabHost.addTab(spec);    // Do the same for the other tabs    intent = new Intent().setClass(this, AlbumsActivity.class);    spec = tabHost.newTabSpec("albums").setIndicator("Albums",                      res.getDrawable(R.drawable.ic_tab_albums))                  .setContent(intent);    tabHost.addTab(spec);    intent = new Intent().setClass(this, SongsActivity.class);    spec = tabHost.newTabSpec("songs").setIndicator("Songs",                      res.getDrawable(R.drawable.ic_tab_songs))                  .setContent(intent);    tabHost.addTab(spec);    tabHost.setCurrentTab(2);

Run:

Unfinished: Error

An error occurred when running last night. It turns out that the artistsactivity configuration in the androidmanifest. xml file is incorrect and has been changed.

The Code is as follows:

<?xml version="1.0" encoding="utf-8"?><manifest xmlns:android="http://schemas.android.com/apk/res/android"      android:versionCode="1"   package="com.zph"      android:versionName="1.0">    <uses-sdk android:minSdkVersion="10" />    <application android:icon="@drawable/icon" android:label="@string/app_name">       <activity android:name="com.zph.HelloTabWidgetActivity" android:label="@string/app_name"          android:theme="@android:style/Theme.NoTitleBar">            <intent-filter>                <action android:name="android.intent.action.MAIN" />                <category android:name="android.intent.category.LAUNCHER" />            </intent-filter>        </activity>        <activity android:label="@drawable/ic_tab_artists"        android:theme="@android:style/Theme.Black.NoTitleBar.Fullscreen"        android:name="com.zph.ArtistsActivity">        <intent-filter>        <category android:name="android.intent.category.TAB" />        </intent-filter>        </activity><activity android:name="com.zph.AlbumsActivity"android:label="@drawable/ic_tab_albums"><intent-filter>        <category android:name="android.intent.category.TAB" />        </intent-filter></activity><activity android:name="com.zph.SongsActivity"android:label="@drawable/ic_tab_songs"><intent-filter>        <category android:name="android.intent.category.TAB" />        </intent-filter></activity>    </application></manifest>

Running result: