1 / 33

User Interface

User Interface. Android Applications. Activities. An activity presents a visual user interface. Each activity is given a default window to draw in . The visual content of the window is provided by a hierarchy of views. Each view controls a particular rectangular space within the window. .

cecile
Télécharger la présentation

User Interface

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. User Interface Android Applications

  2. Activities • An activity presents a visual user interface. • Each activity is given a default window to draw in. • The visual content of the window is provided by a hierarchy of views. • Each view controls a particular rectangular space within the window.

  3. Hierarchy of Views • Parent views contain and organize the layout of their children. • Leaf views (those at the bottom of the hierarchy) draw in the rectangles they control and respond to user actions directed at that space.

  4. View Hierarchy • A view hierarchy is placed within an activity's window by the Activity.setContentView() method.

  5. View Group • A ViewGroup is a special view that can contain other views (called children.) • The view group is the base class for layouts and views container • Some layout paramemeters: fill_parent, match_parent, wrap_content

  6. Widgets • The View class serves as the base for subclasses called "widgets," which offer fully implemented UI objects, like text fields and buttons. • A widget is a View object that serves as an interface for interaction with the user.

  7. Widgets:Ready-made views in Android • buttons, • text fields, • scroll bars, • menu items, • check boxes, • more

  8. src/[package name]/[activity name].java package com.example.helloandroid; import android.app.Activity; import android.os.Bundle; public class HelloAndroid extends Activity { /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); } } Notice that the class is based on the Activity class.

  9. The onCreate() method will be called by the Android system when your Activity starts — it is where you should perform all initialization and UI setup. • In there you will usually call setContentView(int) with a layout resource defining your UI

  10. Declaring Layout • Your layout is the architecture for the user interface in an Activity. It defines the layout structure and holds all the elements that appear to the user. • You can declare your layout in two ways: • Declare UI elements in XML • Instantiate layout elements at runtime

  11. 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. <?xml version="1.0" encoding="utf-8"?> <LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" > <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/hello" /> </LinearLayout>

  12. res/values/strings.xml <?xml version="1.0" encoding="utf-8"?> <resources> <string name="hello">Hello World, HelloAndroid!</string> <string name="app_name">Hello, Android</string> </resources>

  13. Hello World, HelloAndroid!

  14. Instantiate layout elements at runtime • Your application can create View and ViewGroup objects (and manipulate their properties) programmatically.

  15. src/[package name]/[activity name].java package com.example.helloandroid;import android.app.Activity;import android.os.Bundle;import android.widget.TextView;public class HelloAndroid extends Activity {   /** Called when the activity is first created. */   @Override   public void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);TextViewtv = new TextView(this);tv.setText("Hello World, HelloAndroid!");setContentView(tv);   }}

  16. Application Resources • Common files in res/ directory: • drawable/icon.png: Icon for the program in launcher • layout/main.xml: User interface for main Activity • values/strings.xml: Any Strings appearing in UI • Resources –separate program logic from “other stuff” Strings, images, UI layouts

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

  18. Hello Android

  19. XML files • The advantage to declaring your UI in XML is that it enables you to better separate the presentation of your application from the code that controls its behavior. • Your UI descriptions are external to your application code, which means that you can modify or adapt it without having to modify your source code and recompile.

  20. Modified main.xml (1) <?xml version="1.0" encoding="utf-8"?><LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:orientation="vertical"android:layout_width="fill_parent"android:layout_height="fill_parent">  <LinearLayoutandroid:orientation="horizontal"android:layout_width="fill_parent"android:layout_height="fill_parent"android:layout_weight="1">      <TextViewandroid:text="red"android:gravity="center_horizontal"android:background="#aa0000"android:layout_width="wrap_content"android:layout_height="fill_parent"android:layout_weight="1"/>      <TextViewandroid:text="green"android:gravity="center_horizontal"android:background="#00aa00"android:layout_width="wrap_content"android:layout_height="fill_parent"android:layout_weight="1"/>      <TextViewandroid:text="blue"android:gravity="center_horizontal"android:background="#0000aa"android:layout_width="wrap_content"android:layout_height="fill_parent"android:layout_weight="1"/>      <TextViewandroid:text="yellow"android:gravity="center_horizontal"android:background="#aaaa00"android:layout_width="wrap_content"android:layout_height="fill_parent"android:layout_weight="1"/>  </LinearLayout>

  21. Modified main.xml (2) <LinearLayoutandroid:orientation="vertical"android:layout_width="fill_parent"android:layout_height="fill_parent"android:layout_weight="1">    <TextViewandroid:text="row one"android:textSize="15pt"android:layout_width="fill_parent"android:layout_height="wrap_content"android:layout_weight="1"/>    <TextViewandroid:text="row two"android:textSize="15pt"android:layout_width="fill_parent"android:layout_height="wrap_content"android:layout_weight="1"/>    <TextViewandroid:text="row three"android:textSize="15pt"android:layout_width="fill_parent"android:layout_height="wrap_content"android:layout_weight="1"/>    <TextViewandroid:text="row four"android:textSize="15pt"android:layout_width="fill_parent"android:layout_height="wrap_content"android:layout_weight="1"/>  </LinearLayout></LinearLayout>

  22. Linear Layout

  23. Identify the changes in main.xml

  24. Modified main.xml <?xml version="1.0" encoding="utf-8"?><LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:orientation=“horizontal"android:layout_width="fill_parent"android:layout_height="fill_parent">  <LinearLayoutandroid:orientation="horizontal"android:layout_width="fill_parent“ …

  25. Identify changes in original main.xml

  26. ID • Any View object may have an integer ID associated with it, to uniquely identify the View within the tree. When the application is compiled, this ID is referenced as an integer, but the ID is typically assigned in the layout XML file as a string, in the id attribute. android:id="@+id/my_button"

  27. Vertical LinearLayout to hold a TextView and a Button • <?xml version="1.0" encoding="utf-8"?><LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" >    <TextViewandroid:id="@+id/text"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Hello, I am a TextView" />    <Button android:id="@+id/button"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Hello, I am a Button" /></LinearLayout>

  28. android:id="@+id/my_button" • The at-symbol (@) at the beginning of the string indicates that the XML parser should parse and expand the rest of the ID string and identify it as an ID resource. • The plus-symbol (+) means that this is a new resource name that must be created and added to our resources (in the R.java file).

  29. Loading the XML Resource public void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView.(R.layout.main_layout);}

  30. R.java • Eclipse combs through res/ directory, generating Java class to access resources in code. • Examples:R.string.<string_name>, R.layout.<layout_name> • Accessing resources through the R class lets Android determine the right resource to use

  31. gen/ [Generated Java Files]/R.java /* AUTO-GENERATED FILE. DO NOT MODIFY. * * This class was automatically generated by the * aapt tool from the resource data it found. It * should not be modified by hand. */ package com.example.helloandroid3; public final class R { public static final class attr { } public static final class drawable { public static final int icon=0x7f020000; } public static final class layout { public static final int main=0x7f030000; } public static final class string { public static final intapp_name=0x7f040001; public static final int hello=0x7f040000; } }

More Related