Basic Lesson 4: Những View khác trong Android

Thảo luận trong 'Khóa học lập trình Android' bắt đầu bởi Nem, 2/4/13.

  1. Nem

    Nem Moderator

    Lượt xem: 4,244
    Đây là bài cuối cùng trong loạt bài hướng dẫn về User Interface trong Android hy vọng rằng các bạn sẽ áp dụng tốt để xử lý tốt phần giao diện cho chương trình bNote. Trong bài này chúng ta sẽ tiếp tục làm quen với các Menu, và một số cool views như:
    Chú ý: các project trong bài này sẽ sử dụng project trong bài trước.
    Menus

    Menu rất hữu ích cho việc hiển thị các tùy chọn cần bổ sung mà không cần nhìn thấy trực tiếp nó trên giao diện của ứng dụng. Có 2 loại Menus trong Android:
    • ContextMenu - hiển thị thông tin liên quan đến một view cụ thể nào đó trong Activity. Trong Android, để kích hoạt ContextMenu bạn bấm và giữ (press and hold) view đó.
    • OptionsMenu - hiển thị thông tin liên quan đến Activity hiện tại. Trong Android, bạn kích hoạt OptionsMenu bằng cách bấm phím MENU.
    Hình sau cho thấy một ví dụ về OptionsMenu trong ứng dụng Browser. OptionsMenu được hiển thị mỗi khi người dùng nhấn nút MENU. Các item trong Menu được hiển thị phụ thuộc vào Activity hiện tại đang chạy.
    Android-ui-4-1
    Hình sau cho thấy ContextMenu được hiển thị khi người dùng "press and hold" vào một liên kết được hiển thị trên trang. Các Menu items hiển thị phụ thuộc vào thành phần hoặc view hiện đang được chọn. Để kích hoạt ContextMenu, người sử dụng chọn một item trên màn hình hiển thị rồi "press and hold" nó hoặc đơn giản nhấn nút giữa trên bàn phím của Emulator.
    Android-ui-4-2
    Để xem Menus sử dụng như thế nào trong Android, bạn thêm 1 file menu.xml trong res/layout như sau:
    PHP:
    <?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"
        >
     
        <Button android:id="@+id/btn1"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text = "Hello, world!"
            />           
     
    </LinearLayout>
    Sau đó, thêm một lớp mới là MenuExample vào src/net.learn2develop.androidviews. Nhớ khai báo sử dụng Activity mới trong file AndroidManifest.xml như sau:
    PHP:
    <?xml version="1.0" encoding="utf-8"?>
    <manifest xmlns:android="http://schemas.android.com/apk/res/android"
          package="net.learn2develop.androidviews"
          android:versionCode="1"
          android:versionName="1.0.0">
        <application android:icon="@drawable/icon" android:label="@string/app_name">
            <activity android:name=".ViewsActivity"
                      android:label="@string/app_name">
                <intent-filter>
                    <action android:name="android.intent.action.MAIN" />
                    <category android:name="android.intent.category.LAUNCHER" />
                </intent-filter>
            </activity>
     
            <activity android:name=".MenuExample"
                      android:label="@string/app_name" />
     
        </application>
    </manifest>
    Creating the Helper Methods
    Đối với các ví dụ trong phần này, bạn sẽ tạo hai phương thức trợ giúp trong file MenuExample.java là: CreateMenu() và MenuChoice(). Định nghĩa 2 phương thức trên trong phương thức OnCreate() như sau:
    PHP:
    package net.learn2develop.androidviews;
     
    import android.app.Activity;
    import android.os.Bundle;
    import android.view.Menu;
    import android.view.MenuItem;
    import android.widget.Button;
    import android.widget.Toast;
     
    public class 
    MenuExample extends Activity
    {   
        @
    Override
        
    public void onCreate(Bundle savedInstanceState)
        {
            
    super.onCreate(savedInstanceState);
     
            
    setContentView(R.layout.menu);       
            
    Button btn = (ButtonfindViewById(R.id.btn1);       
            
    btn.setOnCreateContextMenuListener(this);
        }
     
        private 
    void CreateMenu(Menu menu)
        {
            
    menu.setQwertyMode(true);
            
    MenuItem mnu1 menu.add(000"Item 1");
            {
                
    mnu1.setAlphabeticShortcut('a');
                
    mnu1.setIcon(R.drawable.alert_dialog_icon);           
            }
            
    MenuItem mnu2 menu.add(011"Item 2");
            {
                
    mnu2.setAlphabeticShortcut('b');
                
    mnu2.setIcon(R.drawable.ic_popup_reminder);           
            }
            
    MenuItem mnu3 menu.add(022"Item 3");
            {
                
    mnu3.setAlphabeticShortcut('c');
                
    mnu3.setIcon(R.drawable.icon);
            }
            
    MenuItem mnu4 menu.add(033"Item 4");
            {
                
    mnu4.setAlphabeticShortcut('d');                   
            }
            
    menu.add(033"Item 5");
            
    menu.add(033"Item 6");
            
    menu.add(033"Item 7");
        }
     
        private 
    boolean MenuChoice(MenuItem item)
        {       
            switch (
    item.getItemId()) {
            case 
    0:
                
    Toast.makeText(this"You clicked on Item 1",
                    
    Toast.LENGTH_LONG).show();
                return 
    true;
            case 
    1:
                
    Toast.makeText(this"You clicked on Item 2",
                    
    Toast.LENGTH_LONG).show();
                return 
    true;
            case 
    2:
                
    Toast.makeText(this"You clicked on Item 3",
                    
    Toast.LENGTH_LONG).show();
                return 
    true;
            case 
    3:
                
    Toast.makeText(this"You clicked on Item 4",
                    
    Toast.LENGTH_LONG).show();
                return 
    true;
            case 
    4:
                
    Toast.makeText(this"You clicked on Item 5",
                    
    Toast.LENGTH_LONG).show();
                return 
    true;
            case 
    5:
                
    Toast.makeText(this"You clicked on Item 6",
                    
    Toast.LENGTH_LONG).show();
                return 
    true;
            case 
    6:
                
    Toast.makeText(this"You clicked on Item 7",
                    
    Toast.LENGTH_LONG).show();
                return 
    true;           
            }
            return 
    false;
        }   
    }
    Phương thức CreateMenu()tạo ra một danh sách các menu items và thay đổi hành vi của mỗi items. Các thông số tròn phương thức add() là: groupid, itemid, order, và title. Phương thức setAlphabeticShortcut() gán một phím tắt cho các Menu items để khi người dùng nhấn một phím tắt, các menu items sẽ được chọn. Phương thức setIcon() gán một icon cho các menu items.
    Phương thức MenuChoice()hiển thị menu items được chọn bằng cách sử dụng các Toast để thông báo. Tiếp theo, copy hai ảnh (như hình sau) vào res/drawable.
    Android-ui-4-3
    Options Menu

    Để hiển thị Options Menu trong Activity, bạn cần phải ghi đè lên hai phương thức - onCreateOptionsMenu() và onOptionsItemSelected(). onCreateOptionsMenu() được gọi khi nút MENU được nhấn. Trong trường hợp này, bạn sẽ gọi phương thức helper CreateMenu() để hiển thị Options Menu. Khi một menu item được chọn, phương thức onOptionsItemSelected() sẽ được gọi. Trong trường hợp này,nó sẽ gọi MenuChoice() để hiển thị các menu item được chọn (và làm những gì bạn cần làm):
    PHP:
    public class MenuExample extends Activity
    {   
        @
    Override
        
    public void onCreate(Bundle savedInstanceState)
        {
            
    super.onCreate(savedInstanceState);
     
            
    setContentView(R.layout.menu);       
        }
     
        private 
    void CreateMenu(Menu menu)
        {
            
    //...
        
    }
     
        private 
    boolean MenuChoice(MenuItem item)
        {       
            
    //...
        
    }   
     
        
    //---only created once---
        
    @Override
        
    public boolean onCreateOptionsMenu(Menu menu) {
            
    super.onCreateOptionsMenu(menu);
            
    CreateMenu(menu);
            return 
    true;
        }
     
        @
    Override
        
    public boolean onOptionsItemSelected(MenuItem item)
        {   
            return 
    MenuChoice(item);   
        }
     
    }
    Sửa file ViewsActivity.java để sử dụng Activity vừa tạo như sau:
    PHP:
    package net.learn2develop.androidviews;
     
    import android.app.Activity;
    import android.os.Bundle;
    import android.content.Intent;
     
    public class 
    ViewsActivity extends Activity {
        
    /** Called when the activity is first created. */
        
    @Override
        
    public void onCreate(Bundle savedInstanceState) {
            
    super.onCreate(savedInstanceState);
            
    setContentView(R.layout.main);
     
            
    startActivity(new Intent(thisMenuExample.class));
        }
    }
    Kết quả như sau:
    Android-ui-4-4
    Quan sát các biểu tượng hiển thị trên menu item 1, 2 và 3. Ngoài ra, nếu OptionsMenu đã có hơn 6 item, sẽ có một menu item khác để đại diện cho các menu items còn lại. Hình bên phải cho thấy nhấn vào item "More" hiển thị các menu item còn lại trên một danh sách.
    Context Menu

    Nếu bạn muốn kết hợp để hiển thị ContextMenu trong Activity bạn cần phải gọi phương thức setOnCreateContextMenuListener() cho 1 view cụ thể nào đó. Trong ví dụ này tôi dùng Button để kích hoạt ContextMenu.

    Mã:
    package net.learn2develop.androidviews;
     
    import android.app.Activity;
    import android.os.Bundle;
    import android.view.ContextMenu;
    import android.view.Menu;
    import android.view.MenuItem;
    import android.view.View;
    import android.view.ContextMenu.ContextMenuInfo;
    import android.widget.Button;
    import android.widget.Toast;
     
    public class MenuExample extends Activity
    {   
        @Override
        public void onCreate(Bundle savedInstanceState)
        {
            super.onCreate(savedInstanceState);       
            setContentView(R.layout.menu);     
     
            Button btn = (Button) findViewById(R.id.btn1);       
            btn.setOnCreateContextMenuListener(this);
        }
     
        private void CreateMenu(Menu menu)
        {
            //...
        }
     
        private boolean MenuChoice(MenuItem item)
        {       
            //...
        }
     
        //---only created once---
        @Override
        public boolean onCreateOptionsMenu(Menu menu)
        {
            super.onCreateOptionsMenu(menu);
            CreateMenu(menu);
            return true;
        }
     
        @Override
        public boolean onOptionsItemSelected(MenuItem item)
        {   
            return MenuChoice(item);   
        }
     
        @Override
        public void onCreateContextMenu(ContextMenu menu, View view,
        ContextMenuInfo menuInfo)
        {
            super.onCreateContextMenu(menu, view, menuInfo);
            CreateMenu(menu);
        }
     
        @Override
        public boolean onContextItemSelected(MenuItem item)
        {   
            return MenuChoice(item);   
        }   
     
    }
    Chú ý: thường thì chúng ta sẽ sử dụng ListView để kích hoạt ContextMenu. và gọi phương thức registerForContextMenu() trong phương thức onCreate()

    Cũng giống như OptionsMenu, bạn cần phải ghi đè 2 phương thức onCreateContextMenu() và onContextItemSelected(). Press and hold button bạn sẽ thấy ContextMenu hiển thị như hình sau:
    Android-ui-4-5
    Some Additional Views

    Bên cạnh những view chuẩn mà bạn đã thấy cho đến thời điểm này, Android SDK còn cung cấp một số view thú vị khác làm cho các ứng dụng của bạn trở nên thú vị hơn. Trong phần sau ta sẽ tìm hiểu nhưng view sau:
    • AnalogClock
    • DigitalClock
    • WebView
    AnalogClock and DigitalClock Views

    AnalogClock hiển thị một chiếc đồng hồ Analog. Viết file main.xml như sau:

    PHP:
    <?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"
        > 
     
        <AnalogClock android:id="@+id/clock1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            />
     
    </LinearLayout>
    Trong file ViewsActivity.java, chắc chắn rằng file main.xml được load như UI cho Activity này:
    PHP:
    package net.learn2develop.androidviews;
     
    import android.app.Activity;
    import android.os.Bundle;
     
    public class 
    ViewsActivity extends Activity
    {
        
    /** Called when the activity is first created. */
        
    @Override
        
    public void onCreate(Bundle savedInstanceState)
        {
            
    super.onCreate(savedInstanceState);
            
    setContentView(R.layout.main);
     
        }
    }
    Kết quả:
    Android-ui-4-6
    Thay vì là một đồng hồ analog, bạn có thể hiển thị một đồng hồ số bằng cách sử dụng DigitalClock.
    Thêm các phần tử DigitalClock vào file main.xml như sau:
    PHP:
    <?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"
        > 
     
        <AnalogClock android:id="@+id/clock1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
     
        <DigitalClock android:id="@+id/clock2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />           
     
    </LinearLayout>
    Kết quả:
    Android-ui-4-7

    WebView

    WebView cho phép bạn nhúng một trình duyệt web vào ứng dụng Android. Thêm một file ebview.xml vào res/layout như sau:
    PHP:
    <?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"
        >
     
        <WebView android:id="@+id/webview1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text = "Hello, world!"
            />           
     
    </LinearLayout>
    Thêm 1 class mới tên là WebViewExample trong src/net.learn2develop.androidviews, như sau:
    PHP:
    package net.learn2develop.androidviews;
     
    import android.app.Activity;
    import android.os.Bundle;
    import android.webkit.WebView;
     
    public class 
    WebViewExample extends Activity
    {
        
    /** Called when the activity is first created. */
        
    @Override
        
    public void onCreate(Bundle savedInstanceState)
        {
            
    super.onCreate(savedInstanceState);
            
    setContentView(R.layout.webview);
     
            
    WebView wv = (WebViewfindViewById(R.id.webview1);       
            
    wv.loadUrl("http://www.mobiforge.com"); 
        }
    }
    Phương thức loadUrl() của lớp WebView sẽ tải một trang của một URL nhất định. Sửa đổi file AndroidManifest.xml để đăng ký Activity mới cũng như yêu cầu cho phép sử dụng Internet:
    PHP:
    <?xml version="1.0" encoding="utf-8"?>
    <manifest xmlns:android="http://schemas.android.com/apk/res/android"
          package="net.learn2develop.androidviews"
          android:versionCode="1"
          android:versionName="1.0.0">
        <application android:icon="@drawable/icon" android:label="@string/app_name">
            <activity android:name=".ViewsActivity"
                      android:label="@string/app_name">
                <intent-filter>
                    <action android:name="android.intent.action.MAIN" />
                    <category android:name="android.intent.category.LAUNCHER" />
                </intent-filter>
            </activity>
     
            <activity android:name=".WebViewExample"
                      android:label="@string/app_name" />
     
        </application>
     
        <uses-permission android:name="android.permission.INTERNET">
        </uses-permission>
     
      <uses-sdk android:minSdkVersion="3" />
     
    </manifest>
    Bạn thấy rằng chúng ta đã xin phép sử dụng kết nối Internet bằng dòng:
    PHP:
    <uses-permission android:name="android.permission.INTERNET">
        </
    uses-permission>
    Sửa đổi file ViewsActivity.java như sau để sử dụng Activity WebViewExample:


    PHP:
    package net.learn2develop.androidviews;
     
    import android.app.Activity;
    import android.os.Bundle;
    import android.content.Intent;
     
    public class 
    ViewsActivity extends Activity {
        
    /** Called when the activity is first created. */
        
    @Override
        
    public void onCreate(Bundle savedInstanceState) {
            
    super.onCreate(savedInstanceState);
            
    setContentView(R.layout.main);     
            
    startActivity(new Intent(thisWebViewExample.class));
        }
    }
    Kết quả:
    Android-ui-4-8
    Bạn cũng có thể tự động xây dựng một chuỗi HTML và load nó vào WebView, sử dụng phương thức loadDataWithBaseURL ():
    PHP:
    WebView wv = (WebViewfindViewById(R.id.webview1);       
     
            final 
    String mimeType "text/html";
            final 
    String encoding "UTF-8";
            
    String html "<H1>A simple HTML page</H1><body>" +
                
    "<p>The quick brown fox jumps over the lazy dog</p>";
     
            
    wv.loadDataWithBaseURL(""htmlmimeTypeencoding"");
    Kết quả:
    Android-ui-4-9
    Nếu bạn có các trang web tĩnh mà bạn muốn tải trực tiếp từ Project của bạn, bạn có thể lưu các trang HTML trong thư mục assets của Project. Hình sau :tôi đã thêm một trang tên là index.html trong thư mục assets.
    Android-ui-4-10
    nội dung file index.html như sau:


    PHP:
    <h1>A simple HTML page</h1>
    <
    body>
      <
    p>The quick brown fox jumps over the lazy dog</p>
      <
    img src='http://www.google.com/logos/Logo_60wht.gif'/>
    </
    body>
    Để tải, WebView sử dụng nội dung lưu trữ trong file index.html, sử dụng phương thức loadUrl()như sau:
    PHP:
    WebView wv = (WebViewfindViewById(R.id.webview1);       
            
    wv.loadUrl("file:///android_asset/Index.html");
    Kết quả:
    Android-ui-4-11
    Summary

    Trong bài viết này, bạn đã thấy làm thế nào để thực hiện ContextMenu và OptionsMenu trong các ứng dụng Android. Ngoài ra, bạn cũng đã thấy cách sử dụng một số views khác, chẳng hạn như các AnalogClock và DigitalClock. Tôi hy vọng bây giờ bạn đã nắm rất nhiều views làm việc như thế nào trong Android. Các Lesson tiếp theo sẽ đề cập kỹ hơn về List. Do nhóm view này quan trọng và khá phức tạp nên tôi sẽ có một bài viết riêng để các bạn có thể hiểu rõ hơn cách sử dụng chúng, và mong rằng các bạn sẽ tùy chỉnh và điều khiển thành thạo nhóm view này.
    Context Menu, menu, Options Menu, AnalogClock, DigitalClock, WebView
    velvetyrose1706, thanhcongminthu thích bài này.

Chia sẻ trang này