jump to navigation

Tạo giao diện trên Android 13/11/2010

Posted by hnb1988 in Android Development.
trackback

Lâu quá, không có thời gian tiếp tục với Android.

Hôm nay tìm hiểu thêm cách tạo giao diện, cách này đơn giản với file xml.

Tài liệu sử dụng vẫn là vẫn là Hello Android – Chương 3 – Bắt đầu với trang 43🙂

Mình sẽ làm lần lượt cho đến khi hoàn thành game Sudoku này luôn ha, hôm nay mình tìm hiểu cách tạo giao diện với layout view của Android.

Mình cũng làm theo ví dụ chương 3 trong hello Android (trang 43).

Game là Sudoku, giao diện sẽ gồm

1 logo của game. Logo này các bạn cho một ảnh làm đại diện. Logo mình đặt là của game Sudoku của Gameloft (công ty hiện tại mình làm…. hiihi)

2 Các button, Continue game, New game, help, about..

Tạo game sudoku

Tạo game sudoku

——————————————————————–

Giờ chúng ta bắt đầu tạo layout.

Bạn tạo project với tên game nào đó, như mình Sudoku chẳng hạn

Tìm một image cho vào thư mục drawable trong thư mục source của bạn, để sau này mình draw một image làm logo game.

Để tạo layout bạn mở file layout/main.xml  để modified lại layout.

Bạn nhìn thấy layout : LinearLayout

Layout này có 2 thuộc tính ngang và dọc dùng để sắp xếp các view theo chiều ngang hay dọc.

Trong ví dụ này chúng ta có thể tách ra làm 2 LinearLayout, một cái dùng để chứa logo game, một cái chứa các button.

Để vẽ logo, chúng ta thêm layout như thế này:

<LinearLayout
android:orientation=”vertical”
android:layout_width=”fill_parent”
android:layout_height=”fill_parent”
android:layout_weight=”1″
>
<ImageView
android:id=”@+id/imgSudoku”
android:layout_width=”fill_parent”
android:layout_height=”fill_parent”
android:src=”@drawable/image”
/>
</LinearLayout>

android:id:  ID của image (logo)

android:src: Source image

Để vẽ button, chúng ta làm như sau:

<Button
android:id=”@+id/continue_game”
android:text=”Continue Game”
android:layout_width=”200px”
android:layout_height=”50px”
android:lines=”1″
android:padding=”10px”
android:layout_gravity=”center”
/>

android:text: Text hiển thị trên button

android:layout_width (_height) chiều cao, chiều dài button

android:lines : Đường viền button

android:padding:Khoảng cách giữa 2 button

——————————————————————–

Như vậy code của chúng ta sẽ như sau:

<?xml version=”1.0″ encoding=”utf-8″?>
<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android&#8221;
android:orientation=”vertical”
android:layout_width=”fill_parent”
android:layout_height=”fill_parent”
>
<LinearLayout
android:orientation=”vertical”
android:layout_width=”fill_parent”
android:layout_height=”fill_parent”
android:layout_weight=”1″
>

<ImageView
android:id=”@+id/imgSudoku”
android:layout_width=”fill_parent”
android:layout_height=”fill_parent”
android:src=”@drawable/image”

/>
</LinearLayout>
<LinearLayout
android:orientation=”vertical”
android:layout_width=”fill_parent”
android:layout_height=”fill_parent”
android:layout_weight=”1″
>

<Button
android:id=”@+id/continue_game”
android:text=”Continue Game”
android:layout_width=”200px”
android:layout_height=”50px”
android:lines=”1″
android:padding=”10px”
android:layout_gravity=”center”
/>
<Button
android:id=”@+id/new_game”
android:text=”New Game”
android:layout_width=”200px”
android:layout_height=”50px”
android:lines=”1″
android:padding=”10px”
android:layout_gravity=”center”
/>
<Button
android:id=”@+id/help_game”
android:text=”Help Game”
android:layout_width=”200px”
android:layout_height=”50px”
android:lines=”1″
android:padding=”10px”
android:layout_gravity=”center”
/>
<Button
android:id=”@+id/quit_game”
android:text=”Quit Game”
android:layout_width=”200px”
android:layout_height=”50px”
android:lines=”1″
android:padding=”10px”
android:layout_gravity=”center”
/>

</LinearLayout>

<TextView
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:text=”@string/hello”
/>

</LinearLayout>

 

Và giao diện với code như trên🙂

Giao diện game sudoku

Giao diện game sudoku

——————————————————————–

Các bạn có thể sử dụng một số layout khác để tùy biến giao diện cho mình. Mình ví dụ thêm một cái nữa như TableLayout, các bạn thử xem như thế nào.

<TableLayout : Đặt các view ở dưới dạng bảng>

Mình sẽ cho 2 button nằm trên 1 dòng (row). Các bạn modified lại như thế này

<TableLayout
android:layout_height=”wrap_content”
android:layout_width=”wrap_content”
android:layout_gravity=”center”
android:stretchColumns=”*”>
<TableRow>
<Button
android:id=”@+id/continue_game”
android:text=”Continue Game”
/>
<Button
android:id=”@+id/new_game”
android:text=”New Game”
/>
</TableRow>
<TableRow>
<Button
android:id=”@+id/help_game”
android:text=”Help Game”
/>
<Button
android:id=”@+id/quit_game”
android:text=”Quit Game”
/>
</TableRow>
</TableLayout>
</LinearLayout>

Rồi giờ chúng ta sẽ xem giao diện sẽ đổi như thế nào.🙂

Giao diện ở dạng TableLayout

Giao diện ở dạng TableLayout

Nhìn cũng được ha…🙂

——————————————————————–

Hôm sau chúng ta sẽ tiếp tục với một vài tùy biến khác….

Chào các bạn, chúc một ngày làm việc vui !

 

bloghnb

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: