Bài 5 - Các Layout cơ bản Android

1. Linear Layout

1.1 Giới thiệu Linear Layout

LinearLayout là một view group sắp xếp các phần tử trong nó theo một hướng dọc hoặc ngang, được chỉ định thông qua attribute android:orientation

1.2 Ví dụ giao diện cần tạo



1.3 Code

1.3.1 Code XML
<?xml version="1.0" encoding="utf-8"?>
<!-- Parent linear layout with vertical orientation -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:layout_marginTop="25dp"
 android:orientation="vertical" >
<TextView
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"
 android:padding="5dip"
 android:text="Email" />
<EditText
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"
 android:layout_marginBottom="10dip" />
<TextView
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"
 android:padding="5dip"
 android:text="Password" />
<EditText
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"
 android:layout_marginBottom="10dip" />
 <!-- Child linear layout with horizontal orientation -->
<LinearLayout
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"
 android:layout_marginTop="10dp"
 android:orientation="horizontal" >
<Button
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"
 android:layout_marginLeft="10dp"
 android:layout_marginRight="10dp"
 android:layout_weight="1"
 android:background="#FFD57D"
 android:gravity="center"
 android:text="Login" />
<Button
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"
 android:layout_marginLeft="10dp"
 android:layout_marginRight="10dp"
 android:layout_weight="1"
 android:background="#FF9900"
 android:gravity="center"
 android:text="Cancel" />
 </LinearLayout>
</LinearLayout>
1.3.2 Code Java
package quyetdv.android.layoutbasic;
import android.os.Bundle;
import android.app.Activity;
public class LinearLayoutActivity extends Activity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        this.setTitle("Linear Layout");
        setContentView(R.layout.linear_layout);
    }
}

2. Relative Layout

2.1 Giới thiệu Relative Layout

RelativeLayout là một view group hiển thị các thành phần con dựa vào mối quan hệ vị trí giữa chúng với nhau hoặc giữa chúng với thành phần cha chứa nó.

2.2 Ví dụ giao diện cần tạo

RelativeLayout

2.3 Code

2.3.1 Code XML
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"
 android:layout_marginTop="25dp" >
<TextView
 android:id="@+id/lblEmail"
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"
 android:padding="5dp"
 android:text="Email" />
<EditText
 android:id="@+id/edEmail"
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"
 android:layout_below="@id/lblEmail" />
<TextView
 android:id="@+id/lblPassword"
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"
 android:layout_below="@id/edEmail"
 android:layout_marginTop="10dp"
 android:padding="5dp"
 android:text="Password" />
<EditText
 android:id="@+id/edPassword"
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"
 android:layout_below="@id/lblPassword"
 android:layout_marginBottom="10dp" />
<Button
 android:id="@+id/btnLogin"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_alignParentLeft="true"
 android:layout_below="@id/edPassword"
 android:layout_centerHorizontal="false"
 android:layout_centerInParent="false"
 android:layout_centerVertical="false"
 android:layout_marginRight="10dp"
 android:background="#FFD57D"
 android:text="Login" />
<Button
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_alignParentRight="false"
 android:layout_alignTop="@id/btnLogin"
 android:layout_toRightOf="@id/btnLogin"
 android:background="#FF9900"
 android:text="Cancel" />
<!-- btnGoHome position relative to parent layout -->
 <Button
 android:id="@+id/btnGoHome"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_alignParentBottom="true"
 android:layout_centerHorizontal="true"
 android:background="#319DEA"
 android:text="Go to Home Page"
 android:paddingLeft="10dp"
 android:paddingRight="10dp"
 android:textColor="#FFFFFF" />
</RelativeLayout>
2.3.2 Code Java
package quyetdv.android.layoutbasic;
import android.os.Bundle;
import android.app.Activity;
public class RelativeLayoutActivity extends Activity {
@Override
 protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    this.setTitle("Relative Layout");
    setContentView(R.layout.relative_layout);
 }
}

3. Table Layout

3.1 Giới thiệu Table Layout

TableLayout cho phép đặt các thành phần thành các hàng và cột tương tự như bảng trong html.

3.2 Ví dụ giao diện cần tạo

TableLayout

3.3 Code

3.3.1 Code XML
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:background="#ffffff"
 android:shrinkColumns="*"
 android:stretchColumns="*" >
<!-- Row 1 with single column -->
<TableRow
 android:id="@+id/tableRow1"
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"
 android:gravity="center_horizontal" >
<TextView
 android:id="@+id/tv1"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:layout_span="3"
 android:background="#47BDED"
 android:padding="18dip"
 android:text="Row 1"
 android:textColor="#000000" />
 </TableRow>
<!-- Row 2 with 3 columns -->
<TableRow
 android:id="@+id/tableRow2"
 android:layout_width="match_parent"
 android:layout_height="wrap_content" >
<TextView
 android:id="@+id/tv21"
 android:layout_weight="1"
 android:background="#FFB500"
 android:gravity="center"
 android:padding="20dip"
 android:text="Row 2 column 1"
 android:textColor="#000000" />
<TextView
 android:id="@+id/tv22"
 android:layout_weight="1"
 android:background="#FFFA99"
 android:gravity="center"
 android:padding="20dip"
 android:text="Row 2 column 2"
 android:textColor="#000000" />
<TextView
 android:id="@+id/tv23"
 android:layout_weight="1"
 android:background="#FFC03E"
 android:gravity="center"
 android:padding="20dip"
 android:text="Row 2 column 3"
 android:textColor="#000000" />
 </TableRow>
<!-- Row 3 with 2 columns -->
<TableRow
 android:id="@+id/tableRow3"
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"
 android:gravity="center_horizontal" >
<TextView
 android:id="@+id/tv31"
 android:layout_weight="1"
 android:background="#00B9CD"
 android:gravity="center"
 android:padding="20dip"
 android:text="Row 3 column 1"
 android:textColor="#000000" />
<TextView
 android:id="@+id/tv32"
 android:layout_weight="1"
 android:background="#58F5FF"
 android:gravity="center"
 android:padding="20dip"
 android:text="Row 3 column 2"
 android:textColor="#000000" />
 </TableRow>
</TableLayout>
3.3.2 Code Java
package quyetdv.android.layoutbasic;
import android.os.Bundle;
import android.app.Activity;
public class TableLayoutActivity extends Activity {
@Override
 protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    this.setTitle("Table Layout");
    setContentView(R.layout.table_layout );
 }
}

4. TabHost Layout

4.1 Giới thiệu TabHost Layout

Một TabHost Layout gồm có 3 phần : TabHost, TabWidget và FrameLayout
TabHostLayout_Diagram
  • TabHost : Là container chính chứa các Tab buttons và Tab contents
  • TabWidget : Để định dạng cho các Tab buttons : Nhãn , icon, …
  • FrameLayout : là container để chứa các layout cho Tab contens. Chỉ có FrameLayout là view group được dùng cho Tab contents, không thể dùng các loại Layout khác.

4.2 Ví dụ giao diện cần tạo

TabHostLayout

4.3 Code

4.3.1 Code XML
<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
 android:id="@android:id/tabhost"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent" >
<LinearLayout
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 android:orientation="vertical" >
<TabWidget
 android:id="@android:id/tabs"
 android:layout_width="fill_parent"
 android:layout_height="wrap_content" />
<FrameLayout
 android:id="@android:id/tabcontent"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent" />
 </LinearLayout>
</TabHost>
4.3.2 Code Java
package quyetdv.android.layoutbasic;
import android.app.TabActivity;
import android.content.Intent;
import android.os.Bundle;
import android.widget.TabHost;
import android.widget.TabHost.TabSpec;
public class TabHostLayoutActivity extends TabActivity {
 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 this.setTitle("TabHost Layout");
 setContentView(R.layout.tabhost_layout);
TabHost tabHost = getTabHost();
// Tab1
 TabSpec tab1 = tabHost.newTabSpec("Tab1");
 tab1.setIndicator("Tab1");
 Intent tab1Intent = new Intent(this, Tab1Activity.class);
 tab1.setContent(tab1Intent);
// Tab2
 TabSpec tab2 = tabHost.newTabSpec("Tab2");
 tab2.setIndicator("Tab2");
 Intent tab2Intent = new Intent(this, Tab2Activity.class);
 tab2.setContent(tab2Intent);
// Tab1
 TabSpec tab3 = tabHost.newTabSpec("Tab3");
 tab3.setIndicator("Tab3");
 Intent tab3Intent = new Intent(this, Tab3Activity.class);
 tab3.setContent(tab3Intent);
// Adding all TabSpec to TabHost
 tabHost.addTab(tab1);
 tabHost.addTab(tab2);
 tabHost.addTab(tab3);
 }
}

5. ListView Layout

5.1 Giới thiệu ListView

  • ListView là một view group hiển thị các phần tử dưới dạng một danh sách có thể cuộn được
  • Các phần tử được chèn vào ListView bằng cách sử dụng một Adapter lấy dữ liệu từ một nguồn nào đó ( một mảng hoặc một truy vấn dữ liệu )

5.2 Ví dụ giao diện cần tạo

Ví dụ ListView hiển thị dữ liệu đơn giản ( danh sách chữ cái ) từ một mảng String có sẵn.
ListViewLayout

5.3 Code

5.3.1 Code XML
<?xml version="1.0" encoding="utf-8"?>
<ListView xmlns:android="http://schemas.android.com/apk/res/android"
 android:id="@+id/listview"
 android:layout_width="match_parent"
 android:layout_height="wrap_content" >
</ListView>
5.3.2 Code Java
package quyetdv.android.layoutbasic;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.widget.Toast;
public class ListViewLayoutActivity extends Activity {
 private ListView listView;
private final String[] values = new String[] { "A", "B", "C", "D", "E",
 "F", "J", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R",
 "S", "T", "U", "V", "Ư", "X", "Y", "Z" };
@Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 this.setTitle("ListView Layout");
 setContentView(R.layout.listview_layout);
listView = (ListView) findViewById(R.id.listview);
ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,
 android.R.layout.simple_list_item_1, values);
listView.setAdapter(adapter);
listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
 public void onItemClick(AdapterView<?> arg0, View arg1, int arg2,
 long arg3) {
 Toast.makeText(getBaseContext(),
 "position = " + arg2 + " ; value = " + values[arg2],
 Toast.LENGTH_SHORT).show();
 }
 });
 }
}

6. GridView Layout

6.1 Giới thiệu GridView

  • GridView là một view group hiển thị các phần tử dưới dạng một lưới 2 chiều có thể cuộn được
  • Các phần tử được chèn vào GridView bằng cách sử dụng một ListAdapter

6.2 Ví dụ giao diện cần tạo

Ví dụ GridView hiển thị dữ liệu đơn giản ( danh sách chữ cái ) từ một mảng String có sẵn.
GridViewLayout

6.3 Code

6.3.1 Code XML
<?xml version="1.0" encoding="utf-8"?>
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
 android:id="@+id/gridview"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 android:columnWidth="50dp"
 android:gravity="center"
 android:numColumns="auto_fit"
 android:stretchMode="columnWidth" >
</GridView>
6.3.2 Code Java
package quyetdv.android.layoutbasic;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.GridView;
import android.widget.Toast;
public class GridViewLayoutActivity extends Activity {
 private GridView gridview;
 private final String[] values = new String[] { "A", "B", "C", "D", "E",
 "F", "J", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R",
 "S", "T", "U", "V", "Ư", "X", "Y", "Z" };
@Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 this.setTitle("GridView Layout");
 setContentView(R.layout.gridview_layout);
gridview = (GridView) findViewById(R.id.gridview);
ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,
 android.R.layout.simple_list_item_1, values);
gridview.setAdapter(adapter);
gridview.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
 public void onItemClick(AdapterView<?> arg0, View arg1, int arg2,
 long arg3) {
 Toast.makeText(getBaseContext(),
 "position = " + arg2 + " ; value = " + values[arg2],
 Toast.LENGTH_SHORT).show();
 }
 });
 }
}

7. Frame Layout

7.1 Giới thiệu FrameLayout

FrameLayout là một vùng chiếm chỗ trên màn hình để hiển thị một nội dung cụ thể nào đó. Phần tử con luôn hiển thị ở góc trên trái của FrameLayout và không thể thay đổi được. Các phần tử sau sẽ nằm chồng lên phần tử trước ( thứ tự trước, sau theo thứ tự trong tập tin xml ).

7.2 Ví dụ giao diện cần tạo

Giả sử bạn cần tạo 1 giao diện hiển thị gồm :
  • Một bức ảnh toàn màn hình
  • Một dòng chữ giới thiệu vắn tắt ở cạnh trên bức ảnh
  • Một dòng chữ ghi thông tin tác giả ở cạnh dưới bức ảnh
FrameLayout

7.3 Code

7.3.1 Code XML
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent" >
<ImageView
 android:id="@+id/ImageView01"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 android:scaleType="matrix"
 android:src="@drawable/keangnam" >
 </ImageView>
<TextView
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"
 android:text="A view of Keangnam"
 android:textColor="#FFF200"
 android:textSize="24dp" />
<TextView
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"
 android:layout_gravity="bottom"
 android:gravity="right"
 android:text="quyetdo289.wordpress.com"
 android:textColor="#FFFFFF"
 android:textSize="16dp" />
</FrameLayout>
7.3.2 Code Java
package quyetdv.android.layoutbasic;
import android.os.Bundle;
import android.app.Activity;
public class FrameLayoutActivity extends Activity {
@Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 this.setTitle("Frame Layout");
 setContentView(R.layout.frame_layout );
 }
}

Share:

0 Nhận xét

Categories

. . . 1 [English | DVD] Trọn Bộ DVD Effortless English 3 Ajax 1 Andengine 3 Android 41 Android Studio Cài đặt và phím tắt thông dụng 1 API 1 App Android 1 Applicaiton Chat Multi Client 1 ASP.NET 9 Bài tập lập trình C/C++ có lời giải 1 Bài tập thuật toán C/C++ Và Tuyển tập đề thi olympic 2 Bắt đầu Học Lập Trình 4 Blogger 2 C/C++ 16 C# 21 Câu hỏi phỏng vấn Android 1 Cocos2d-JS 3 Cocos2d-x 3 Code game android 3 Công Cụ Lập Trình 13 Công nghệ 3 Cosos2d 1 CSS 1 Cuộc sống 15 Custom Button trong Android 2 Design Patterns 3 DevExpress 1 Đồ Án 1 DOREMON - NOBITA 2 Dự án 1 Ebook Android 1 English 8 Example Custom Android 1 facebook 1 Fedora 2 Freelancer 1 Game Android 4 Game Android AndEngine 1 Giới thiệu về Ajax 1 Hiệu ứng lắc trong android 1 Hướng dẫn cài đặt Mac OS trên VMware 1 Hướng dẫn download tài liệu miễn phí của website tailieu.vn 1 Hướng dẫn lập trình android 11 Hướng dẫn lập trình Windows Phone 3 Hướng đối tượng 2 Internet được khôi phục 1 Internet of Things 1 iOS 33 Java 9 Kiểm thử phần mềm 1 Kinh nghiệm lập trình 17 Kỹ Năng 1 Lập trình Android FPT Software Training 1 Lập Trình Game Đa Nền Tảng 2 Lập trình game mobile 2 Lập trình iOS FPT Software Training 1 Lập trình mạng 2 LẬP TRÌNH VIÊN CHUYÊN NGHIỆP TRÊN THIẾT BỊ DI ĐỘNG 2 Laptop 1 Libgdx 1 LinQ 3 Linux 6 Load CSDL SQL server ASP.NET 1 Lỗi Eclipse Ctr + Space 1 Mạng Xã Hôi 1 máy thật PC 1 Mbook TIN HỌC A 1 Mbook TIN HỌC B 1 mỗi bài 20 câu 1 NGAN-HANG-DE-THI-TRAC-NGHIEM-ASP.NET 1 Nguyên tắc ngón tay cái trong thiết kế ứng dụng cho điện thoại 1 Nhập môn lập trình C 14 Những câu hỏi phỏng vấn "xương" nhất 1 Những điểm mới kỳ thi THPT quốc gia 2015 1 Object C 1 Phần mềm 3 PHP 2 Phương pháp luyện thi TOEIC 1 Python 2 Review Game 1 SEO 4 Share Acc Fshare 1 Share VIP Miễn phí 1 Sinh viên mới tốt nghiệp – viết gì trong CV 1 Socket Android Client to PC Server C# 2 Socket Chat nhiều Client với server C# 2 Source code 4 Source code game C# 1 Source code game iOS 2 T3H-KHTN 7 Tài Liệu Android 7 Tài Liệu C# 4 Tài liệu hướng dẫn lập trình game với cocos2d-x 1 Tài Liệu iOS 7 Tài Liệu IT 3 Tài Liệu Java 2 Tài liệu Lập trình iOS Tiếng Việt đầy đủ TTTH đại học khoa học tự nhiên 1 Tài Liệu PHP 1 TÀI LIỆU THIẾT KẾ SỐ 1 Tài Liệu Windows Phone 1 Tạo Group Mail Google 1 Tạo hiệu ứng trong lập trình iOS 1 Tạo tên CoCaCoLa 1 Thắc mắc C/C++ 3 THẬP PHÂN sang NHỊ PHÂN không sử dụng MẢNG 1 Thiết kế giao diện Android - App Calculation Android Studio 1 Thiết kế giao diện phần mềm 1 Thuật ngữ cơ bản trong lập trình game AndEngine 1 Thuật toán 5 Thuật toán điều phối FCFS 1 Tiếng Anh 2 Tin Tức 1 Toàn bộ tài liệu ĐTVT 5 năm học 1 Tổng hợp những nơi người lái xe hay bị mắc lỗi tại TPHCM 1 Tutorials Android 2 Tuyến cáp quang AAG đã sửa xong 1 Unity 1 Vim 1 Visual Studyo 2013 1 WEB 1 Website nén JS và CSS tốt nhất 1 Websites Developer 2 Windows 10 Technical Preview 1 Windows Phone 5 WPF 1 XAMARIN 1 Xóa project appcompat_v 1