[Tự học lập trình Android] Bài 14: Tìm hiểu về Tab Selector trong Android

Tìm hiểu về Tab Selector trong Android

- Tab Selector giống như Property Sheet trong Visual C, giống như Tab Control C#, hay trong Java:
Hình 1

- Đối với Android, mỗi Tab bạn nên thiết kế trên một Layout khác nhau, rồi trong Main Layout bạn chứa các tab đó vào (Tức là nếu như ứng dụng bạn có 3 Tab con thì sẽ tạo 3 Layout khác nhau rồi include chúng vào Main layout, chứ đừng thiết kế tất tần tật trong một Main Layout nó sẽ gây khó khăn trong việc sửa lỗi).
- Tôi trình bày sơ qua lý thuyết về Tab selector:
+ Tab selector gồm có 3 phần: Tab Host, Tab Widgets và FrameLayout.
Hình 2

+Tab Host: Là Container chính chứa các Tab buttons và Tab contents
+Tab Widget: Để định dạng cho các Tab buttons : Nhãn, Icon…
+FrameLayout: là Container để chứa các layout cho Tab contents, ta chỉ có thể dùng FrameLayout cho Tab contents, không thể dùng các loại Layout khác. Nếu bạn thắc mắc tại vì sao lại là FrameLayout mà không phải là các Layout khác? thì Tôi chỉ nói đơn giản thế này: Cho dù bạn có nhấn vào các Tab nào đi nữa thì layout tương ứng với mỗi Tab mà bạn vừa nhấn vào cũng chỉ xuất hiện cùng một chỗ trên màn hình điện thoại, điều này chỉ có FrameLayout mới giải quyết được.

*** Hình minh họa về giao diện trong bài ví dụ Tab Selector của Tôi như sau:
Hình 3
- Tab đầu tiên “1-CALCULATOR” là giao diện cho phép tính công trừ nhân chia, Tab thứ 2 “2-HISTORY” dùng để hiển thị danh sách các phép toàn đã thực hiện.
- Cấu trúc tổng quan của ứng dụng:
Hình 4

- Vì ứng dụng của Tôi có 2 Tab nên Tôi sẽ tạo 2 tabs: tab1_layout.xml và tab2_layout.xml, 2 tabs này sẽ được chứa vào main layout activity_main.xml, vậy tổng cộng Tôi có 3 Layout.
- Ta vào xem main layout (activity_main.xml):
- Xem Outline để dễ tưởng tượng:
Hình 5

-Còn đây là source XML:

<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/LinearLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">
<TabHost
android:id="@android:id/tabhost"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TabWidget
android:id="@android:id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</TabWidget>
<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="@+id/tab1"
android:layout_width="match_parent"
android:layout_height="match_parent">
<includelayout="@layout/tab1_layout"/>
</LinearLayout>
<LinearLayout
android:id="@+id/tab2"
android:layout_width="match_parent"
android:layout_height="match_parent">
<includelayout="@layout/tab2_layout"/>
</LinearLayout>
</FrameLayout>
</LinearLayout>
</TabHost>
</LinearLayout>

- Bạn nhìn vào dòng lệnh 30 và 36:

<include layout=”@layout/tab1_layout”/>
<include layout=”@layout/tab2_layout”/>

Đó chính là cách include một layout này vào trong một layout khác.

- Tiếp tục ta xem tab1_layout.xml, Tôi lấy lại bài tập trước về cộng trừ nhân chia:

<TableLayoutxmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/TableLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:stretchColumns="*">
<TableRow
android:id="@+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_span="4"
android:background="#5B8020"
android:gravity="center"
android:text="Cộng trừ nhân chia"
android:textColor="#FFFFFF"
android:textSize="20sp"/>
</TableRow>
<TableRow
android:id="@+id/tableRow2"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Số a:"/>
<EditText
android:id="@+id/editsoa"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_span="3"
android:ems="10"
android:inputType="number">
<requestFocus/>
</EditText>
</TableRow>
<TableRow
android:id="@+id/tableRow3"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="@+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Số b:"/>
<EditText
android:id="@+id/editsob"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_span="3"
android:ems="10"
android:inputType="number"/>
</TableRow>
<TableRow
android:id="@+id/tableRow4"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:id="@+id/btncong"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="+"/>
<Button
android:id="@+id/btntru"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="-"/>
<Button
android:id="@+id/btnnhan"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="*"/>
<Button
android:id="@+id/btnchia"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="/"/>
</TableRow>
<TableRow
android:id="@+id/tableRow5"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="@+id/txtketqua"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_span="4"
android:background="#5B8020"
android:textColor="#FFFFFF"
android:textSize="25sp"/>
</TableRow>
</TableLayout>

- Và xem tiếp tab2_layout.xml, đơn giản là chỉ có 1 ListView chứa danh sách các phép toán đã thực hiện bên Tab1:

<?xmlversion="1.0"encoding="utf-8"?>
<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ListView
android:id="@+id/lvhistory"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</ListView>
</LinearLayout>

- Giờ bạn xem MainActivity để biết được cách cấu hình Tabhost:

importjava.util.ArrayList;
importandroid.os.Bundle;
importandroid.app.Activity;
importandroid.view.View;
importandroid.view.View.OnClickListener;
importandroid.widget.ArrayAdapter;
importandroid.widget.Button;
importandroid.widget.EditText;
importandroid.widget.ListView;
importandroid.widget.TabHost;
importandroid.widget.TextView;
importandroid.widget.Toast;

publicclassMainActivity extendsActivity {
//Enum để thực hiện phép toán
enumOperator
{
Cong,//phép cộng
Tru,//phép trừ
Nhan,//phép nhân
Chia//phép chia
}
Button btncong,btntru,btnnhan,btnchia;
EditText editsoa,editsob;
TextView txtkq;
ListView lvHistory;
ArrayList<String>array_operator=newArrayList<String>();
ArrayAdapter<String>adapter=null;
//Variable in listener
OnClickListener myclick=newOnClickListener() {
@Override
publicvoidonClick(View arg0) {
switch(arg0.getId())
{
caseR.id.btncong:
{
processOperator(Operator.Cong);
}
break;
caseR.id.btntru:
{
processOperator(Operator.Tru);
}
break;
caseR.id.btnnhan:
{
processOperator(Operator.Nhan);
}
break;
caseR.id.btnchia:
{
processOperator(Operator.Chia);
}
}
}
};

publicvoidprocessOperator(Operator op)
{
String sa=editsoa.getText()+"";
String sb=editsob.getText().toString();
inta=Integer.parseInt(sa);
intb=Integer.parseInt(sb);
String kq="";
switch(op)
{
caseCong:
kq=a+" + "+b +" = "+(a+b);
break;
caseTru:
kq=a+" - "+b +" = "+(a-b);
break;
caseNhan:
kq=a+" * "+b +" = "+(a*b);
break;
caseChia:
if(b!=0)
kq=a+" / "+b +" = "+(a*1.0/b);
else
kq="b phai khac 0";
break;
default:
kq="Invalid operator!";
}
txtkq.setText(kq);
array_operator.add(kq);
adapter.notifyDataSetChanged();
}
@Override
protectedvoidonCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
loadTabs();
doFormWidgets();
}
//Cấu hình tab
publicvoidloadTabs()
{
//Lấy Tabhost id ra trước (cái này của built - in android
finalTabHost tab=(TabHost) findViewById(android.R.id.tabhost);
//gọi lệnh setup
tab.setup();
TabHost.TabSpec spec;
//Tạo tab1
spec=tab.newTabSpec("t1");
spec.setContent(R.id.tab1);
spec.setIndicator("1-Calculator");
tab.addTab(spec);
//Tạo tab2
spec=tab.newTabSpec("t2");
spec.setContent(R.id.tab2);
spec.setIndicator("2-History");
tab.addTab(spec);
//Thiết lập tab mặc định được chọn ban đầu là tab 0
tab.setCurrentTab(0);
//Ở đây Tôi để sự kiện này để các bạn tùy xử lý
//Ví dụ tab1 chưa nhập thông tin xong mà lại qua tab 2 thì báo...
tab.setOnTabChangedListener(new
TabHost.OnTabChangeListener() {
publicvoidonTabChanged(String arg0) {
String s="Tab tag ="+arg0 +"; index ="+
tab.getCurrentTab();
Toast.makeText(getApplicationContext(),
s, Toast.LENGTH_LONG).show();}
});
}
//Khởi tạo các đối tượng và gán ADapter cho ListView
publicvoiddoFormWidgets()
{
btncong=(Button) findViewById(R.id.btncong);
btntru=(Button) findViewById(R.id.btntru);
btnnhan=(Button) findViewById(R.id.btnnhan);
btnchia=(Button) findViewById(R.id.btnchia);
editsoa=(EditText) findViewById(R.id.editsoa);
editsob=(EditText) findViewById(R.id.editsob);
txtkq=(TextView) findViewById(R.id.txtketqua);
lvHistory=(ListView) findViewById(R.id.lvhistory);
btncong.setOnClickListener(myclick);
btntru.setOnClickListener(myclick);
btnnhan.setOnClickListener(myclick);
btnchia.setOnClickListener(myclick);
adapter=newArrayAdapter<String>(this,android.R.layout.simple_list_item_1,array_operator);
lvHistory.setAdapter(adapter);
}
}


Tham khảo: duythanhcse


-----------------------------------------

Quảng cáo

Загрузка...

Categories

8051 (1) AI (1) AI programming (1) amazon (1) Android (27) ASP (1) Assembly (17) Bài giảng (2) Bài giảng lập trình C và Cpp (16) bài giảng quản lý dự án CNTT (1) bài tập java (1) bài tập lập trình (1) Bài viết hay (62) Bản đồ tư duy (1) Bidvertiser (1) Biểu diễn thuật toán (1) bitcoin (1) blockchain (1) Blockchain là gì (1) Bubble-Sort (1) C (77) C Plus Plus (103) C sharp (11) C++ (3) cấu trúc dữ liệu giải thuật (1) Cây (tree) (2) Cây quyết định (3) CDSL phân tán (1) Chữa bài tập Java (1) code assembly (1) Công nghệ điện toán đám mây (1) Công nghệ lập trình (1) Cơ sở dữ liệu (10) CSS (2) Cuộc cách mạng công nghiệp 4.0 (1) Danh ngôn lập trình (1) Danh sách liên kết (list) (1) Datamining (4) Đại số gia tử và ứng dụng (1) đăng ký Amazon (1) Đăng ký hosting (2) đặt hàng trên Amazon (1) Đệ quy (2) Đồ họa (4) Độ phức tạp của thuật toán (1) ebook-csdl (1) ebook-giaithuat (1) ebook-laptrinh (1) ebook-phancung-mang (1) ebook-tinhocungdung (1) ebook-web (1) Exceptions (1) Genetic Algorithm (1) Giải hệ phương trình tuyến tính (5) giải thuật (3) giải thuật Đệ quy (1) Giáo trình (2) Góc học tập (34) Góc suy ngẫm (1) Google App Engine (2) Heap-Sort (1) Hệ quản trị CSDL (1) Học lập trình (125) Học lập trình C và CPP qua ví dụ (15) học lập trình Java (7) HostGator (1) hợp ngữ (1) HPH (25) HTML (1) Hướng Dẫn Đăng Ký Tên Miền và Host Trên Hostgator (1) hướng dẫn mua host (1) hướng dẫn nhận tiền (1) hướng dẫn payoneer (1) Hướng dẫn sử dụng Emu8086 (1) hướng dẫn viết báo (1) hướng đăng ký tên miền (1) Insert-sort (2) iOS (1) Java (50) Java Căn bản (5) java core (3) Java GUI (1) JavaScript (3) Kiếm tiền online (10) Kỹ thuật đồ họa máy tính (9) Kỹ thuật lập trình (16) kỹ thuật SEO (1) Lập trình 8051 với C/C++ (1) Lập trình căn bản (7) Lập trình Cơ sở dữ liệu (2) Lập trình điều khiển thiết bị (1) Lập trình hợp ngữ (1) Lập trình hướng đối tượng (38) Lập trình hướng đối tượng với Java (6) Lập trình mạng (6) Lập trình mobile (3) Lập trình nhúng (1) Lập trình trí tuệ nhân tạo (1) lập trình vi xử lý (1) lập trình viên (1) Lập trình viên độc lập (1) Luyện thi IC3 (4) Lý thuyết Cơ sở dữ liệu (2) Lý thuyết đồ thị (11) Mạng máy tính (1) Mẹo tìm kiếm trên Google (1) Merge-Sort (1) MS Access (1) Mua hàng trên Amazon (1) Nghiên cứu khoa học (1) ngon-ngu-khac (1) Ngôn ngữ lập trình (1) Nhúng code Assembly trong C\C++ (2) Những lỗi thường gặp khi lập trình (1) Oracle (1) Pascal (3) payoneer (1) people-group (1) phần cứng máy tính (1) PHP (1) Quản lý dự án CNTT (1) Queue (hàng đợi) (1) Quick-Sort (1) Seclection-sort (2) SEO (1) SQL (5) Stack (ngăn xếp) (1) Swift (8) tài liệu CNTT miễn phí (2) Tài liệu tham khảo (2) thanh toán quốc tế (1) Thiết kế Web (2) Thủ thuật máy tính (5) thuattoan-khac (1) Thuật toán (41) Thuật toán di truyền (2) Thuật toán Đệ quy (4) Thuật toán K-Mean (1) Thuật toán khác (9) Thuật toán leo đồi (1) Thuật toán ma trận (7) Thuật toán Sắp Xếp -Sort (9) Thuật toán Tìm kiếm - Search (5) Thương mại điện tử (4) Tiện ích máy tính (3) Tìm hiểu Blockchain (1) Tìm kiếm nhị phân (2) Tìm kiếm tuần tự (Line search) (2) Tin học văn phòng (5) Tin tức công nghệ (7) Tính định thức của ma trận (1) Toán rời rạc (12) Trí tuệ nhân tạo (8) Tự học lập trình Android (14) Tự học lập trình C và CPP (14) tự học lập trình iOS (8) Tự học lập trình java qua các ví dụ (7) Ứng dụng cơ sở dữ liệu (1) VB (2) vẽ ngôi nhà (1) ví dụ Assembly (1) xcode (8) XML (1) Xử lý ma trận (mảng 2 chiều) (7) Xử lý mảng 1 chiều (1) Xử lý ngoại lệ (1)