Tạo Tab - Android - Source code demo - AFgame
Monday, 05-12-2016, 6:30 PM
AFgame                                               

Chi sẻ kiến thức lập trình - Các demo và ứng dụng mở


Welcome Guest
Menu
Demo - HTML Hack [3]
Java - Swing [5]
Java - 2D Graphics [1]
Java - IO [3]
Java - Audio [1]
Java - Lập trình mạng [2]
Java - Trí tuệ nhân tạo [7]
Java - Lập Trình Nâng Cao [5]
Java - BT Lập trình mạng [6]
Java - Common [2]
C# [1]
Android [15]
Database [1]
Jsp/Servlet [5]
Application [1]
Tài liệu [3]
Thành viên đăng bài [0]
Nơi dành cho thành viên đăng các bài viết hoàn chỉnh hoặc các câu hỏi
Search
Statistics

Total online: 1
Guests: 1
Users: 0
Tạo Tab
14-05-2012, 9:48 PM
Để tạo được màn hình với nhiều Tab container với android chúng ta có một cách khá đơn giản như sắp trình bày bên dưới. Trước tiên có thể hình dung tab như sau:


Tạo một tab đơn giản:
Vào layout > main.xml viết nội dung như sau:


<TabHost android:layout_width="fill_parent"
android:layout_height="fill_parent" android:id="@+id/tabHost"
xmlns:android="http://schemas.android.com/apk/res/android">
<TabWidget android:layout_width="fill_parent"
android:layout_height="wrap_content" android:id="@android:id/tabs" />
<FrameLayout android:layout_width="fill_parent"
android:layout_height="fill_parent" android:id="@android:id/tabcontent">
<LinearLayout android:layout_width="fill_parent"
android:layout_height="wrap_content" android:id="@+id/tab1"
android:orientation="vertical" android:paddingTop="60px">
<TextView android:layout_width="fill_parent"
android:layout_height="100px" android:text="This is tab1"
android:id="@+id/txt1" />

</LinearLayout>

<LinearLayout android:layout_width="fill_parent"
android:layout_height="fill_parent" android:id="@+id/tab2"
android:orientation="vertical" android:paddingTop="60px">
<TextView android:layout_width="fill_parent"
android:layout_height="100px" android:text="This is tab 2"
android:id="@+id/txt2" />

</LinearLayout>

<LinearLayout android:layout_width="fill_parent"
android:layout_height="fill_parent" android:id="@+id/tab3"
android:orientation="vertical" android:paddingTop="60px">
<TextView android:layout_width="fill_parent"
android:layout_height="100px" android:text="This is tab 3"
android:id="@+id/txt3" />

</LinearLayout>
<LinearLayout android:layout_width="fill_parent"
android:layout_height="fill_parent" android:id="@+id/tab4"
android:orientation="vertical" android:paddingTop="60px">
<TextView android:layout_width="fill_parent"
android:layout_height="100px" android:text="This is tab 4"
android:id="@+id/txt3" />

</LinearLayout>
</FrameLayout>

</TabHost>

Trong activity:

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);

TabHost tabHost = (TabHost) findViewById(R.id.tabHost);
tabHost.setup();

TabSpec spec1 = tabHost.newTabSpec("");

//Set content cho tab tương ứng
spec1.setContent(R.id.tab1);
//Set tên và icon cho tab
spec1.setIndicator("New songs", getResources().getDrawable(R.drawable.ic_tab_artists_white));


TabSpec spec2 = tabHost.newTabSpec("");
spec2.setIndicator("Top Viet Nam");
spec2.setContent(R.id.tab2);

TabSpec spec3 = tabHost.newTabSpec("");
spec3.setIndicator("Top Au My");
spec3.setContent(R.id.tab3);
TabSpec spec4 = tabHost.newTabSpec("");
spec4.setIndicator("Top Han");
spec4.setContent(R.id.tab4);

tabHost.addTab(spec1);
tabHost.addTab(spec2);
tabHost.addTab(spec3);
tabHost.addTab(spec4);
}
Kết quả sẽ như hình bên dưới:


Vậy nếu muốn tạo icon cho tab với kiểu khi chọn vào thì thể hiện icon  này và khi không chọn thì thể hiện icon khác phải làm sao?
Các bạn đế ý lại phương thức:
spec1.setIndicator("New songs", getResources().getDrawable(R.drawable.ic_tab_artists_white));
ic_tab_artists_white là icon ic_tab_artists_white.png chúng ta copy dán vào trong drawable
bây giờ đổi lại (R.drawable.ic_tab_artists_white) thành (R.drawable.ic_tab_songs) với ic_tab_songs la file ic_tab_songs.xml tạo ra trong thư mục drawable với nội dung sau:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Khi chon hien mau xam -->
<item android:drawable="@drawable/ic_tab_artists_grey"
android:state_selected="true" />
<!-- Khi khong chon hien mau trang -->
<item android:drawable="@drawable/ic_tab_artists_white" />
</selector>

Kết quả

Các hình icon có trong bài:  

Category: Android | Added by: as_fancy | Tags: Demo, java, Android, khanh, layout, asfancy, as_fancy, tab, afgame
Views: 1370 | Rating: 5.0/1
Total comments: 0
Giới Thiệu
Nghe Radio Zing
- Nhiều kênh
- Thêm kênh tùy thích
- Hẹn giờ tắt



Hát karaoke arirang
- Tìm kiếm nhanh chóng
- Hát thoải mái
- Nhạc beat Arirang chính hãng

Copyright AFgame © 2016
Trường ĐH Nông Lâm TP.HCM
Create a free website with uCoz