Cấp bậc tác giả:

JAVA

Tạo ứng dụng lên lịch làm việc

Được viết bởi QuangIT ngày 14/09/2012 lúc 04:48 PM
Trong bài 1 mình đã giới thiệu qua cách sử dụng Edit Text và Text View. Thực chất các View còn lại cũng có cách sử dụng tương tự, bạn sẽ kết hợp nhiều View khác nhau để cho ra giao diện mình mong muốn.
  • 0
  • 1284

Tạo ứng dụng lên lịch làm việc


Trong bài 1 mình đã giới thiệu qua cách sử dụng Edit Text và Text View. Thực chất các View còn lại cũng có cách sử dụng tương tự, bạn sẽ kết hợp nhiều View khác nhau để cho ra giao diện mình mong muốn. Ở đây mình sẽ đề cập nhiều tới List View (theo ý kiến mình là View khó sử dụng nhất).


Yêu cầu: Xây dựng một chương trình cho phép nhập nội dung công việc và thời gian rồi đưa ra list công việc


Tạo project, đặt tên tùy ý.

VD:

Project name: Example 2

Build Target: Chọn Android 1.5

Application name: Example 2

Package name: at.exam

Create Activity: Example

=> Kích nút Finish.

Giao diện ta thiết kế ở đây có 1 Linear Layout làm thành phần chính, các thành phần con của nó gồm 1 Edit Text (dùng để nhập nội dung công việc), 1 Linear Layout (lại gồm các thành phần con để nhập giờ và phút thực hiện công việc), 1 Button (để thêm nội dung công việc vào List View) và 1 List View dùng để list các công việc bạn đã nhập.

Từ khóa lines được dùng để cố định số dòng và nên sử dụng với Edit Text thay vì dùng mỗi wrap_content vì nếu sd wrap_content thì Edit Text sẽ tự giãn ra nếu dòng nhập vào vượt giới hạn đường bao (làm hỏng giao diện bạn thiết kế).

Từ khóa gravity thông báo các thành phần con sẽ được sắp xếp ntn ở thành phần cha. Ở đây mình dùng "center" nghĩa là thành phần con nằm ở trung tâm. Hãy thử thêm vào 1 Edit Text: android:gravity="center"

Tại res/main.xml, copy dòng này vào:

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    android:orientation="vertical" >


    <EditText

android:id="@+id/work_enter"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:hint="@string/work_hint"

android:lines="1"

android:textSize="24px"

/>


    <LinearLayout

        android:id="@+id/linearLayout1"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:orientation="vertical" >

        <TextView

        android:layout_width="50px"

        android:layout_height="wrap_content"

        android:text="@string/hour_edit"

        android:typeface="normal"

        android:textSize="15px"

        android:textStyle="bold"

        android:padding="5px"

        />

        <EditText

        android:id="@+id/hour_edit"

        android:layout_width="45px"

        android:layout_height="wrap_content"

        android:hint="12"

        android:textColorHint="@color/hint_color"

        android:textSize="20px"

        android:gravity="center"

        android:padding="5px"

        android:numeric="integer"

        android:maxLength="2"

        />

        <TextView

        android:layout_width="65px"

        android:layout_height="wrap_content"

        android:text="@string/minute_edit"

        android:typeface="normal"

        android:textSize="15px"

        android:textStyle="bold"

        android:padding="5px"

        />

        <EditText

        android:id="@+id/minute_edit"

        android:layout_width="45px"

        android:layout_height="wrap_content"

        android:hint="00"

        android:textColorHint="@color/hint_color"

        android:textSize="20px"

        android:gravity="center"

        android:padding="5px"

        android:numeric="integer"

        android:maxLength="2"

        />

    </LinearLayout>

    <Button

    android:id="@+id/button"

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

    android:gravity="center"

    android:text="@string/button_content"

    />

    <ListView

    android:id="@+id/list"

    android:layout_width="fill_parent"

    android:layout_height="wrap_content"

    />

</LinearLayout>


Tới values/strings.xml chỉnh sửa như sau:

<?xml version="1.0" encoding="utf-8"?>

<resources>

    <string name="app_name">VD: Time</string>

    <string name="work_hint">Enter the work    here</string>

    <string name="hour_edit">Hour</string>

    <string name="minute_edit">Minute</string>

    <string name="button_content">Add work</string>


</resources>


Tạo mới colors.xml trong values với nội dung:

<?xml version="1.0" encoding="utf-8"?>

<resources>

    <color name="hint_color">#cccccc</color>

</resources>

OK, vậy là đã hoàn thiện phần giao diện. Các bạn có thể cho chạy thử ngay để kiểm tra xem giao diện đã như ý muốn chưa chứ không cần đợi hoàn thành cả code (Run as -> Android Application).

Giờ tới Code. Tới thư mục src/Example.java và thay đổi nội dung file như sau:

package at.exam;


import java.util.ArrayList;


import android.app.Activity;

import android.os.Bundle;

import android.app.AlertDialog;

import android.content.DialogInterface;

import android.os.Bundle;

import android.view.View;

import android.view.View.OnClickListener;

import android.widget.ArrayAdapter;

import android.widget.Button;

import android.widget.EditText;

import android.widget.ListView;

public class Example extends Activity {

/** Called when the activity is first created. */

@Override

public void onCreate(Bundle savedInstanceState) {

    super.onCreate(savedInstanceState);

    setContentView(R.layout.main);

    //Tao mang de chua String noi dung cong viec va gio

    final ArrayList<String> arrayWork = new    ArrayList<String>();

    //Adapter dung de ket noi mang voi List View

    final ArrayAdapter<String> arrayAdapter = new ArrayAdapter<String>(this,android.R.layout.simple_list_item_1,arrayWork);

    //Cac EditText de vao noi dung cong viec duoc lay ve tu XML

    final EditText workEnter = (EditText)findViewById(R.id.work_enter);

    final EditText hourEdit = (EditText)findViewById(R.id.hour_edit);

    final EditText minuteEdit = (EditText)findViewById(R.id.minute_edit);

    //Button khi nhan se them cong viec vao ListView

    final Button button = (Button)findViewById(R.id.button);

    //ListView chua danh sach cong viec

    final ListView list = (ListView)findViewById(R.id.list);

    //Can set Adapter cho list de biet se lay noi dung tu mang arrayWork

    list.setAdapter(arrayAdapter);

    //Ðinh nghia Listener xu ly su kien nhan vào button

    OnClickListener add = new OnClickListener() {

        @Override

        public void onClick(View v) {

            //Neu 1 trong 3 Edit Text khong co noi dung thi hien len thong bao

            if(workEnter.getText().toString().equals("") || hourEdit.getText().toString().equals("") || minuteEdit.getText().toString().equals("")) {

            AlertDialog.Builder builder = new AlertDialog.Builder(Example.this);

            builder.setTitle("Info missing");

            builder.setMessage("Please enter all information of the work");

            builder.setPositiveButton("Continue", new DialogInterface.OnClickListener() {

                public void onClick(DialogInterface dialog, int which) {

                // TODO Auto-generated method stub

                }

            });

            builder.show();

            }

            //Lay noi dung cong viec va thoi gian ra tu Edit Text va dua vao list

            else {

            String str = workEnter.getText().toString() + " - " + hourEdit.getText().toString() + ":" + minuteEdit.getText().toString();

            arrayWork.add(0,str);

            arrayAdapter.notifyDataSetChanged();

            workEnter.setText("");

            hourEdit.setText("");

            minuteEdit.setText("");

            }

        }

    };

    //set Listener cho button

    button.setOnClickListener(add);

    }

}

Nguồn bài viết: Dngaz.com

BÌNH LUẬN BÀI VIẾT

Bài viết mới nhất

LIKE BOX

Bài viết được xem nhiều nhất

HỌC HTML