Basic Lesson 3: More Views

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

  1. Nem

    Nem Moderator

    Lượt xem: 2,894
    Trong Lesson 2, bạn đã làm quen với các views cơ bản khác nhau như các TextView, EditText, Button, và làm thế nào bạn có thể sử dụng chúng trong các ứng dụng Android. Trong Lesson 3, chúng ta sẽ tiếp tục tìm hiểu thêm ba loại views khác: - Picker views, List views, Display views. bao gồm:
    • TimePicker view
    • DatePicker view
    • ListView view
    • Spinner view
    • Gallery view
    • ImageView
    • ImageSwitcher view
    • GridView view
    Chú ý: các project trong bài này sẽ sử dụng project trong bài trước.
    Picker Views

    Trong bài tập bNote sẽ có chức năng hẹn giờ để nhắc "note" và chắc chắn sẽ sử dụng đến loại views này để đặt thời gian nhắc cho ứng dụng bNote, vì thế bạn nên đọc kỹ và cố gắng tìm hiểu thêm. Dưới đây tôi sẽ viết mang tính chất giới thiệu qua cho bạn.

    TimePicker View


    TimePicker cho phép người dùng lựa chọn một thời gian trong ngày, trong cả hai hình thức: 24h hoặc AM/PM. Thêm một file mới vào thư mục res/layout tên là datetimepicker.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"
        >
     
        <TimePicker
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />           
    </LinearLayout>
    Thêm một class tên là DateTimePickerExample vào package src/net.learn2develop.androidviews như sau:
    PHP:
    package net.learn2develop.androidviews;
     
    import android.app.Activity;
    import android.os.Bundle;
     
    public class 
    DateTimePickerExample extends Activity
    {
        @
    Override 
        
    protected void onCreate(Bundle savedInstanceState)
        {
            
    super.onCreate(savedInstanceState);
            
    setContentView(R.layout.datetimepicker);       
        }   
    }
    Thêm một khai báo cho Activity mới vào file AndroidManifest.xml:
    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=".DateTimePickerExample"
                      android:label="@string/app_name" />
     
        </application>
    </manifest>
    sửa file ViewsActivity.java để sử dụng Activity vừa tạo ở trên như sau:
    PHP:
    package net.learn2develop.androidviews;
     
    import android.app.Activity;
    import android.content.Intent;
    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);       
     
            
    startActivity(new Intent(thisDateTimePickerExample.class));
     
        }
    }

    kết quả như sau:

    Displaying the TimePicker View in a Dialog Window


    Bạn cũng có thể hiển thị TimePicker trong một cái Dialog. Sửa đổi các lớp DateTimePickerExample như sau:

    PHP:
    package net.learn2develop.androidviews;
     
    import android.app.Activity;
    import android.app.Dialog;
    import android.app.TimePickerDialog;
    import android.os.Bundle;
    import android.widget.TimePicker;
    import android.widget.Toast;
     
    public class 
    DateTimePickerExample extends Activity
    {
        
    int hourminute;
        static final 
    int TIME_DIALOG_ID 0;
     
        @
    Override 
        
    protected void onCreate(Bundle savedInstanceState)
        {
            
    super.onCreate(savedInstanceState);       
            
    setContentView(R.layout.datetimepicker);
            
    showDialog(TIME_DIALOG_ID);
        }
     
        @
    Override   
        
    protected Dialog onCreateDialog(int id)
        {
            switch (
    id) {
                case 
    TIME_DIALOG_ID:
                    return new 
    TimePickerDialog(
                        
    thismTimeSetListenerhourminutefalse);
            }
            return 
    null;   
        }
     
        private 
    TimePickerDialog.OnTimeSetListener mTimeSetListener =
        new 
    TimePickerDialog.OnTimeSetListener()
        {       
            public 
    void onTimeSet(TimePicker viewint hourOfDayint minuteOfHour)
            {
                
    hour hourOfDay;
                
    minute minuteOfHour
                
    Toast.makeText(getBaseContext(),
                    
    "You have selected : " hour ":" minute,
                    
    Toast.LENGTH_SHORT).show();
            }
        };
    }
    Kết quả như sau:
    DatePicker View

    Giống như TimePicker, DatePicker cho phép người dùng chọn một ngày. Sửa đổi file datetimepicker.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"
        >       
     
        <DatePicker
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" /> 
     
    </LinearLayout>
    Hãy comment dòng code đã được thêm vào trong phần trước
      @Override 
        protected void onCreate(Bundle savedInstanceState)
        {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.datetimepicker);
            //---remove this line---       
            //showDialog(TIME_DIALOG_ID);       
        }
    Kết quả như hình sau:
    Displaying the DatePicker View in a Dialog Window

    Bạn cũng có thể hiển thị DatePicker trong một cái dialog như TimePicker trên. Sửa đổi lớp DateTimePickerExample như sau:
    PHP:
    package net.learn2develop.androidviews;
     
    import android.app.Activity;
    import android.app.DatePickerDialog;
    import android.app.Dialog;
    import android.app.TimePickerDialog;
    import android.os.Bundle;
    import android.widget.DatePicker;
    import android.widget.TimePicker;
    import android.widget.Toast;
     
    public class 
    DateTimePickerExample extends Activity
    {
        
    int hourminute;
        
    int Yearmonthday;
     
        static final 
    int TIME_DIALOG_ID 0;
        static final 
    int DATE_DIALOG_ID 1;
     
        @
    Override 
        
    protected void onCreate(Bundle savedInstanceState)
        {
            
    super.onCreate(savedInstanceState);       
            
    setContentView(R.layout.datetimepicker);
            
    showDialog(DATE_DIALOG_ID);
        }
     
        @
    Override   
        
    protected Dialog onCreateDialog(int id)
        {
            switch (
    id) {
                case 
    TIME_DIALOG_ID:
                    return new 
    TimePickerDialog(
                        
    thismTimeSetListenerhourminutefalse);
     
                case 
    DATE_DIALOG_ID:
                    return new 
    DatePickerDialog(
                        
    thismDateSetListenerYearmonthday);
            }
            return 
    null;   
        }
     
        private 
    TimePickerDialog.OnTimeSetListener mTimeSetListener =
            new 
    TimePickerDialog.OnTimeSetListener()
        { 
            
    //...
        
    };
     
        private 
    DatePickerDialog.OnDateSetListener mDateSetListener =
        new 
    DatePickerDialog.OnDateSetListener()
        {
            public 
    void onDateSet(DatePicker viewint yearint monthOfYear,
                    
    int dayOfMonth)
            {
                
    Year year;
                
    month monthOfYear;
                
    day dayOfMonth;
                
    Toast.makeText(getBaseContext(),
                        
    "You have selected : " + (month 1) +
                        
    "/" day "/" Year,
                        
    Toast.LENGTH_SHORT).show();
            }
        };
    }
    Kết quả như hình sau:

    List Views


    Ở đây do như cầu bài bNote cũng khá là đơn giản nên tôi chỉ giới thiệu qua về ListView về các dùng nó như thế nào để các bạn hiểu. Đây cũng là view khá quan trọng và khá phức tạp được sử dụng hầu hết trong các ứng dụng android nên sẽ có 1 bài viết riêng về nhóm view này sau.

    ListView và Spinner thường được sử dụng để hiện thị các danh sách dài các items.

    ListView View


    ListView hiển thị một danh sách các item trong danh sách cuộn theo chiều dọc. Để xem ListView sử dụng và làm việc thế nào, thêm một file mới vào thư mục res/layout tên là listview.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"
        >
        <ListView android:id="@+id/android:list"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent" />   
     
    </LinearLayout>
    Thêm một class mới vào thư mục src/net.learn2develop.androidviews tên là ListViewExample, như sau:
    package net.learn2develop.androidviews;
     
    import android.os.Bundle;
    import android.view.View;
    import android.widget.ArrayAdapter;
    import android.widget.ListView;
    import android.widget.Toast;
    import android.app.ListActivity;
     
    public class ListViewExample extends ListActivity
    {
        String[] presidents = {
                "Dwight D. Eisenhower",
                "John F. Kennedy",
                "Lyndon B. Johnson",
                "Richard Nixon",
                "Gerald Ford",
                "Jimmy Carter",
                "Ronald Reagan",
                "George H. W. Bush",
                "Bill Clinton",
                "George W. Bush",
                "Barack Obama"
        };
     
        @Override 
        public void onCreate(Bundle savedInstanceState)
        {
            super.onCreate(savedInstanceState); 
            setContentView(R.layout.listview);
     
            setListAdapter(new ArrayAdapter<String>(this,
                android.R.layout.simple_list_item_1, presidents));
        }   
     
        public void onListItemClick(
        ListView parent, View v,
        int position, long id)
        { 
            Toast.makeText(this,
                "You have selected " + presidents[position],
                Toast.LENGTH_SHORT).show();
        } 
    }
    Chú ý là lớp ListViewExample kế thừ từ lớp ListActivity chứ không phải là Activity Khai báo Activity mới này 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=".ListViewExample"
                      android:label="@string/app_name" />
     
        </application>
    </manifest>
    Sử đổi file ViewsActivity.java để sử dụng Activity vừa tạo ra như sau:

    PHP:
    package net.learn2develop.androidviews;
     
    import android.app.Activity;
    import android.content.Intent;
    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);
     
            
    startActivity(new IntentthisListViewExample.class));
     
        }
    }
    Kết quả thu được như hình sau:

    Spinner View


    Spinner chỉ hiển thị ra một item từ danh sách và cho phép người dùng lựa chọn giữa chúng. Thêm một file mới vào thư mục res/layout tên là spinner.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"
        >
        <Spinner
            android:id="@+id/spinner1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:drawSelectorOnTop="true" />       
     
    </LinearLayout>
    Tương tự chúng ta cũng thêm 1 file có tên là SpinnerExample trong package src/net.learn2develop.androidview như sau để xem nó dùng như thế nào.

Chia sẻ trang này