Basic Lesson 2: Basic controls in Android

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: 9,106
    Trong bài này, bạn sẽ xem xét các view cơ bản trong Android cho phép bạn hiển thị thông tin văn bản cũng như thực hiện một số lựa chọn cơ bản. Đặc biệt, bạn sẽ tìm hiểu về các view sau đây:
    • TextView
    • EditText
    • Button
    • ImageButton
    • CheckBox
    • ToggleButton
    • RadioButton
    • RadioGroup
    TextView View

    Khi bạn tạo một Project Android, Eclipse luôn luôn tạo ra các file main.xml(nằm trong res/layout) có chứa <TextView>:
    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"
        >
     
        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="@string/hello"
            />
     
    </LinearLayout>
    TextView được sử dụng để hiển thị văn bản cho người dùng. Đây là view cơ bản nhất mà bạn chắc chắn sẽ phải dùng qua khi bạn phát triển ứng dụng Android. Nếu bạn cần phải cho phép người dùng chỉnh sửa các văn bản hiển thị, bạn nên sử dụng lớp con của TextView là EditText, được đề cập đến trong phần tiếp theo. Bên cạnh TextView, cái mà bạn sẽ thường xuyên dùng nhất, có một số điều khiển cơ bản khác mà bạn sẽ sử dụng rất thường xuyên, Đó là: Button, ImageButton, EditText, CheckBox, ToggleButton, Radiobutton, và RadioGroup. Đầu tiên, thêm một file mới vào res/layout là basicviews.xml. Nó thường sử dụng các phần tử 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/btnSave"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="Save"
            />
        <Button android:id="@+id/btnOpen"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Open"
            />       
        <ImageButton android:id="@+id/btnImg1"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"       
            android:src="@drawable/icon"
            />
        <EditText android:id="@+id/txtName"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            />
        <CheckBox android:id="@+id/chkAutosave"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="Autosave"
            /> 
        <CheckBox android:id="@+id/star"
            style="?android:attr/starStyle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            />                   
     
        <RadioGroup android:id="@+id/rdbGp1"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            >             
            <RadioButton android:id="@+id/rdb1"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="Option 1"
                />
            <RadioButton android:id="@+id/rdb2"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"       
                android:text="Option 2"
                /> 
        </RadioGroup>
     
        <ToggleButton android:id="@+id/toggle1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            />
     
    </LinearLayout>
    Lưu ý rằng: bạn sử dụng id để xác định view. Id của view phải bắt đầu với "@+id/" ghi sau tên của view. File XML trên chứa các view sau đây:
    • Button - biểu diễn nút ấn
    • ImageButton - tương tự như button, ngoài ra nó hiển thị một hình ảnh
    • EditText - là lớp con của TextView, ngoài ra nó cho phép người dùng chỉnh sửa nội dung văn bản của nó.
    • CheckBox - một loại đặc biệt của button có hai trạng thái - checked hoặc unchecked.
    • RadioGroup và Radiobutton - Radiobutton có hai trạng thái - hoặc checked hoặc unchecked. Khi một Radiobutton được checked, nó không thể unchecked. RadioGroup được sử dụng để nhóm một hoặc nhiều RadioButton lại với nhau, qua đó cho phép chỉ có một Radiobutton được checked trong RadioGroup
    • ToggleButton - hiển thị trạng thái checked/unchecked bằng 1 vệt sáng
    Hình sau cho thấy các view khác nhau sẽ hiện thị các trạng thái khác nhau. Trong đó, phía bên phải của hình cho thấy CheckBox, Radiobutton, và ToggleButton trong trạng thái checked.
    Android-views2-2
    PHP:
    package net.learn2develop.androidviews;
     
    import android.app.Activity;
    import android.os.Bundle;
    import android.view.View;
    import android.widget.Button;
    import android.widget.CheckBox;
    import android.widget.RadioGroup;
    import android.widget.Toast;
    import android.widget.ToggleButton;
    import android.widget.RadioGroup.OnCheckedChangeListener;
     
    public class 
    BasicViewsExample extends Activity
    {
        @
    Override
        
    public void onCreate(Bundle savedInstanceState) {
            
    super.onCreate(savedInstanceState);
            
    setContentView(R.layout.basicviews);
     
            
    //---Button view---
            
    Button btnOpen = (ButtonfindViewById(R.id.btnOpen);
            
    btnOpen.setOnClickListener(new View.OnClickListener() {
                public 
    void onClick(View v) {
                    
    Toast.makeText(getBaseContext(),
                            
    "You have clicked the Open button",
                            
    Toast.LENGTH_SHORT).show();
                }
            });
     
            
    Button btnSave = (ButtonfindViewById(R.id.btnSave);
            
    btnSave.setOnClickListener(new View.OnClickListener()
            {
                public 
    void onClick(View v) {
                    
    DisplayToast("You have clicked the Save button");
                }
            });
     
            
    //---CheckBox---
            
    CheckBox checkBox = (CheckBoxfindViewById(R.id.chkAutosave);
            
    checkBox.setOnClickListener(new View.OnClickListener()
            {
                public 
    void onClick(View v) {
                    if (((
    CheckBox)v).isChecked())
                        
    DisplayToast("CheckBox is checked");
                    else
                        
    DisplayToast("CheckBox is unchecked");           
                }
            });
     
            
    //---RadioButton---
            
    RadioGroup radioGroup = (RadioGroupfindViewById(R.id.rdbGp1);       
            
    radioGroup.setOnCheckedChangeListener(new OnCheckedChangeListener()
            {
                public 
    void onCheckedChanged(RadioGroup groupint checkedId) {
                    
    //---displays the ID of the RadioButton that is checked---
                    
    DisplayToast(Integer.toString(checkedId));
                }
            });
     
            
    //---ToggleButton---
            
    ToggleButton toggleButton = (ToggleButtonfindViewById(R.id.toggle1);
            
    toggleButton.setOnClickListener(new View.OnClickListener()
            {
                public 
    void onClick(View v) {
                  if (((
    ToggleButton)v).isChecked())
                        
    DisplayToast("Toggle button is On");
                  else
                      
    DisplayToast("Toggle button is Off");
                }
            });
        }
     
        private 
    void DisplayToast(String msg)
        {
            
    Toast.makeText(getBaseContext(), msg,
                    
    Toast.LENGTH_SHORT).show();       
        }   
    }
    Đặc biệt, chương trình sẽ hiển thị trên một thông báo (bằng cách sử dụng lớp Toast) khi các view được nhấp vào. Thêm các dòng in đậm sau vào file AndroidManifest.xml để đăng kí BasicViewsExample activity:
    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=".BasicViewsExample"
                      android:label="@string/app_name" />
     
        </application>
    </manifest>
    Để hiển thị Activity BasicViewsExample, thêm dòng in đậm sau vào file ViewsActivity.java:
    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);       
     
            
    //---load the BasicViewsExample activity---
            
    startActivity(new Intent(thisBasicViewsExample.class));
        }
    }

    Hình sau cho thấy tin nhắn hiển thị khi ToggleButton được nhấp.
    Android-views2-3
    Muốn dùng EditText để nhập password với ký tự đại diện là "." thì đặt thuộc tính password =true như sau:
    PHP:
    <EditText android:id="@+id/txtName"
            
    android:layout_width="fill_parent"
            
    android:layout_height="wrap_content"
            
    android:password "true"
            
    />

    kết quả như hình dưới đây:
    Android-views2-4
    ProgressBar View

    ProgressBar cung cấp thông tin phản hồi trực quan của một số công việc. Ví dụ, bạn có thể tải một số dữ liệu từ web và cần phải cập nhật cho người dùng về tình trạng tải về. Trong trường hợp này,ProgressBar là một lựa chọn tốt cho công việc này. Sử dụng cùng một Activity tạo ra trong phần trước, thêm các yếu tố sau đây trong tập tin basicviews.xml:
    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"
        >   
     
        <ProgressBar android:id="@+id/progressbar"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"       
            />
     
        <Button android:id="@+id/btnSave"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="Save"
            />
        <!-
            Other views omitted
        -->
    </LinearLayout>
    Chế độ mặc định của ProgressBar là không xác định - đó là, nó hiển thị một hành động theo chu kỳ. Chế độ này rất hữu ích cho công việc mà không có một dấu hiệu rõ ràng khi nào chúng sẽ được hoàn thành. Ví dụ, bạn sending một dữ liệu đến một dịch vụ web và chờ đợi máy chủ respond. Dòng code cho thấy cách bạn có thể tắt một tiến trình nền để mô phỏng thực hiện một số nhiệm vụ dài. Khi hoàn thành nhiệm vụ, bạn ẩn ProgressBar bằng cách setting Visibility = GONE (giá trị 8):
    PHP:
    import android.widget.ProgressBar;
    import android.os.Handler;
     
    public class 
    BasicViewsExample extends Activity
    {   
        private static 
    int progress 0;
        private 
    ProgressBar progressBar;
        private 
    int progressStatus 0;
        private 
    Handler handler = new Handler();
     
        @
    Override
        
    public void onCreate(Bundle savedInstanceState)
        {
            
    super.onCreate(savedInstanceState);
            
    setContentView(R.layout.basicviews);
     
            
    progressBar = (ProgressBarfindViewById(R.id.progressbar);
     
            
    //---do some work in background thread---
            
    new Thread(new Runnable()
            {
                public 
    void run()
                {
                    
    //---do some work here---
                    
    while (progressStatus 10)
                    {
                        
    progressStatus doSomeWork();
                    }
     
                    
    //---hides the progress bar---
                    
    handler.post(new Runnable()
                    {
                        public 
    void run()
                        {
                            
    //---0 - VISIBLE; 4 - INVISIBLE; 8 - GONE---
                            
    progressBar.setVisibility(8);
                        }
                    });
                }   
     
                
    //---do some long lasting work here---
                
    private int doSomeWork()
                {
                    try {
                        
    //---simulate doing some work---
                        
    Thread.sleep(500);
                    } catch (
    InterruptedException e)
                    {
                        
    e.printStackTrace();
                    }
                    return ++
    progress;
                }
     
            }).
    start(); 
     
            
    //...
            //...
        
    }
     
        
    //...
    }
    Sự khác biệt giữa INVISIBLE và GONE là hằng số, INVISIBLE chỉ đơn giản là ẩn ProgressBar. GONE bỏ đi ProgressBar từ Activity này và không mất bất kỳ không gian trong Activity. Bên trái của hình sau cho thấy ProgressBar trong Activity.
    Android-views2-5
    Nếu bạn không muốn hiển thị ở chế độ ProgressBar không xác định, bạn có thể sửa đổi nó để hiển thị như một thanh ngang. Các thuộc tính phong cách sau đây xác định ProgressBar để hiển thị một horizontal bar:
    PHP:
     <ProgressBar android:id="@+id/progressbar"
            
    android:layout_width="wrap_content"
            
    android:layout_height="wrap_content"
            
    style="?android:attr/progressBarStyleHorizontal"
            
    />
    Xem dòng code sau:
    PHP:
    public class BasicViewsExample extends Activity
    {   
        private static 
    int progress 0;
        private 
    ProgressBar progressBar;
        private 
    int progressStatus 0;
        private 
    Handler handler = new Handler();
     
        @
    Override
        
    public void onCreate(Bundle savedInstanceState) {
            
    super.onCreate(savedInstanceState);
            
    setContentView(R.layout.basicviews);
     
            
    progressBar = (ProgressBarfindViewById(R.id.progressbar);
     
            
    //---do some work in background thread---
            
    new Thread(new Runnable()
            {
                public 
    void run()
                {
                    while (
    progressStatus 100)
                    {
                        
    progressStatus doSomeWork();
     
                        
    //---Update the progress bar---
                        
    handler.post(new Runnable()
                        {
                            public 
    void run() {
                                
    progressBar.setProgress(progressStatus);
                            }
                        });
     
                    }
                    
    //---hides the progress bar---
                    
    handler.post(new Runnable()
                    {
                        public 
    void run() {
                            
    //---0 - VISIBLE; 4 - INVISIBLE; 8 - GONE---
                            
    progressBar.setVisibility(8);
                        }
                    });
                }   
     
                private 
    int doSomeWork()
                {
                    try
                    {
                        
    //---simulate doing some work---
                        
    Thread.sleep(500);
                    } catch (
    InterruptedException e)
                    {
                        
    e.printStackTrace();
                    }
                    return ++
    progress;
                }
     
            }).
    start(); 
     
            
    //...
            //...
        
    }
    }
    Android-views2-6
    AutoCompleteTextView View

    AutoCompleteTextView là một view tương tự như xem EditText (trên thực tế nó là một lớp con của EditText), ngoại ra nó hiển thị một danh sách các đề xuất hoàn thành tự động trong khi người dùng đang gõ. Thêm một file mới vào res/layout là autocomplete.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"
        >
        <AutoCompleteTextView android:id="@+id/txtCountries"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            />                 
    </LinearLayout>
    Thêm vào project lớp "AutoCompleteExample" như sau:
    PHP:
    package net.learn2develop.androidviews;
     
    import android.app.Activity;
    import android.os.Bundle;
    import android.widget.ArrayAdapter;
    import android.widget.AutoCompleteTextView;
     
    public class 
    AutoCompleteExample extends Activity
    {
        
    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.autocomplete);
     
            
    ArrayAdapter<Stringadapter = new ArrayAdapter<String>(this,
                
    android.R.layout.simple_dropdown_item_1linepresidents);
     
            
    AutoCompleteTextView textView = (AutoCompleteTextView)
                    
    findViewById(R.id.txtCountries);
            
    textView.setThreshold(3);
            
    textView.setAdapter(adapter);       
        }
    }
    Lưu ý rằng danh sách được lấy từ một đối tượng ArrayAdapter. Phương thức setThreshold() Xác định số lượng ký tự mà người dùng phải nhập trước khi đề xuất hoàn thành được hiển thị trong một trình đơn thả xuống. Thêm các dòng sau in đậm vào file AndroidManifest.xml đăng ký hoạt động AutoCompleteExample mới:
    Mã:
    <?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=".AutoCompleteExample"
                      android:label="@string/app_name" />
     
        </application>
    </manifest>
    Chỉnh sửa file ViewsActivity.java 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(thisAutoCompleteExample.class));
     
        }
    }
    Kết quả như sau:
    Android-views2-7
    SummaryTrong bài viết này, chúng ta đã biết được một số view rất phổ biến mà chúng ta sẽ sử dụng trong lập trình Android. Trong hai bài báo tiếp theo, tôi sẽ đi sâu vào 1 số view nữa mà bạn có thể sử dụng trong việc xây dựng các killer Android applications của mình.
    android, hướng dẫn, view, basic control
    luongan, kidsoul, lettertran4 others thích bài này.
  2. thanhlong90.it

    thanhlong90.it Admin Support Staff Member

    Nem chú ý tiêu đề bài viết có tiếng việt càng tốt nhé, các từ khóa tiếng anh quan trọng trong bài viết thì nhớ đánh Tags vào, thanks!
    luongan, zozonameChiến thích bài này.
  3. tranhongson

    tranhongson New Member

    mấy a ơi cho e hỏi tí? lập trinh android vào babcan ha? rồi sau đó mới cài vào dt phai không?
  4. zozoname

    zozoname New Member

    anh cho em hỏi chỗ phần đăng kí BasicViewsExample là em đã tạo file java ViewActivity.java rồi, cũng đã đăng kí BasicViewsExample trong file AndroidManifest.xml nhưng sao trong file ViewActivity.java lại báo lỗi chỗ
    BasicViewsExample.class. Em không hiểu tại sao nữa !! anh giúp em xem lỗi này sửa sao. tks anh

    Các file đính kèm:

    luongan thích bài này.
  5. royalbluetn

    royalbluetn New Member

    mình đang học trên android studio nhưng code bên này và bên eclip có mấy chỗ khác nhau: ai biết code bên android studio chỉ mình với
    Ví dụ như: removeCallback,DisplayToast,postDelay.... không thấy có trong studio
  6. thanhlong90.it

    thanhlong90.it Admin Support Staff Member

    khác nhau về thao tác chứ không có khác nhau về code bạn nhé!
    royalbluetn thích bài này.
  7. royalbluetn

    royalbluetn New Member

    khác thao tác là sao? bạn có thể nói rõ hơn giúp mình không? mình mới tìm hiểu nên còn rất nhiều thứ không rõ. mình làm ví dụ bên trên nhưng đến code postDisplay là báo lỗi không có. cả removeCallback nữa.mình search trên google mấy hôm rồi không ra hoặc mình không biết gõ đúng key. hix
  8. NHATTA

    NHATTA Member

    Trong code có phần sử dụng: DisplayToast(1 chuỗi) cái DisplayToast ở đâu vậy
  9. SoledadNguyen

    SoledadNguyen New Member

    sao em new Handler(); với handler.post bị lỗi vậy mọi người?

Chia sẻ trang này