2012-04-03 51 views
6

Vì vậy, Android sẽ không còn cách nào để xây dựng hướng dẫn UI đẹp mắt này cho mọi người sử dụng. Nhưng tôi không thấy bất cứ nơi nào nó hiển thị mã ví dụ về cách xây dựng các yếu tố này.Android: Cách tạo các tab giống như các tab hiển thị trên Trang giao diện người dùng Android

Nguyên tắc giao diện người dùng cho các tab có thể được tìm thấy tại đây. http://developer.android.com/design/building-blocks/tabs.html.

Có ai biết cách tạo tab thích tab này không? enter image description here

Mọi trợ giúp sẽ được đánh giá cao, cảm ơn.

GIẢI PHÁP BÀI ĐĂNG
Ok, vì vậy, đây là những gì tôi đã làm sau khi có thể lãng phí khoảng 10 giờ cố gắng tạo một số tab trông đẹp mắt.
enter image description here

Trước tiên, tôi đã loại bỏ toàn bộ ý tưởng sử dụng tab triển khai của Android. Vì một lý do, tiện ích máy chủ lưu trữ tab giả sử không được dùng nữa cho thanh tác vụ nhưng thanh tác vụ chỉ hoạt động từ Android 3 trở lên.

Cuối cùng tôi đã tìm ra rằng nếu sử dụng bố cục tuyến tính và làm nền cho bố cục tuyến tính, tôi đặt hình ảnh tôi muốn sử dụng (sử dụng hình ảnh bản vá 9). Sau đó tạo một linearlayout và textview để đặt văn bản trên đầu trang của linearlayout đó. Sau đó, bố cục tuyến tính của bạn có thể nhấp. Sau đó, khi bạn nhận được nâng cao hơn, bạn có thể làm cho bạn bố trí tuyến tính nền một bộ chọn xml và bạn tốt để đi. Trong trường hợp bạn không nhận được tất cả những gì ở đây là mã của tôi.

LinearLayout

<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="fill_parent" 
    android:layout_height="50dp" 
    android:background="@color/main_screen_bg_color" 
    android:orientation="horizontal" 
    android:padding="2dp" > 

    <LinearLayout 
     android:layout_width="fill_parent" 
     android:layout_height="fill_parent" 
     android:layout_weight="1" 
     android:background="@drawable/selector_not_current" 
     android:clickable="true" 
     android:onClick="onClickSub" 
     android:orientation="horizontal" > 

     <LinearLayout 
      android:layout_width="fill_parent" 
      android:layout_height="fill_parent" 
      android:layout_weight="1" 
      android:gravity="center" 
      android:orientation="vertical" > 

      <TextView 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:singleLine="true" 
       android:text="Example 1" 
       android:textColor="@color/black" 
       android:textSize="18sp" 
       android:textStyle="bold" /> 
     </LinearLayout> 
    </LinearLayout> 

    <LinearLayout 
     android:layout_width="fill_parent" 
     android:layout_height="fill_parent" 
     android:layout_weight="1" 
     android:background="@drawable/selector_current" 
     android:clickable="true" 
     android:onClick="onClickFoodDetails" 
     android:orientation="horizontal" > 

     <LinearLayout 
      android:layout_width="fill_parent" 
      android:layout_height="fill_parent" 
      android:layout_weight="1" 
      android:gravity="center" 
      android:orientation="vertical" > 

      <TextView 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:singleLine="true" 
       android:text="Example 2" 
       android:textColor="@color/black" 
       android:textSize="18sp" 
       android:textStyle="bold" /> 
     </LinearLayout> 
    </LinearLayout> 
</LinearLayout> 

Ví dụ Selector

<selector xmlns:android="http://schemas.android.com/apk/res/android"> 
<item android:state_pressed="true" 
     android:drawable="@drawable/selected_pressed_tab" /> <!-- pressed --> 
<item android:state_focused="true" 
     android:drawable="@drawable/selected_pressed_tab" /> <!-- focused --> 
<item android:drawable="@drawable/selected_tab" /> <!-- default --> 

Hope this helps tất cả mọi người. Các tab trên Android quá khó gây phiền toái khi làm việc với nó dễ dàng hơn chỉ để làm cho riêng tôi từ đầu. Chúc may mắn!

+1

AFAIK, đó là giao diện mặc định của Android ICS sử dụng theme Holo. – Ghost

Trả lời

5

làm điều gì đó như thế này.

đây là mã hoạt động đầy đủ.thưởng thức

nơi nào đó trong phương pháp onCreate của hoạt động mở rộng Tabactivity

tabHost = getTabHost(); 
    Intent intent; 
    intent = new Intent().setClass(this, FirstActvity.class); 
    setupTab("NearBy", intent, R.drawable.firsttabdrawable); 
    intent = new Intent().setClass(this, SecondActivity.class); 
    setupTab("History", intent, R.drawable.secondtabdrawable); 
    intent = new Intent().setClass(this, ThirdActivity.class); 
    setupTab("Setting", intent, R.drawable.thirdtabdrawable); 

xác định phương pháp setupTab như

private void setupTab(String tag, Intent intent, int selectorId) { 
    View tabView = LayoutInflater.from(tabHost.getContext()).inflate(R.layout.view, null); 
    tabView.setBackgroundResource(selectorId); 
    TabSpec setContent = tabHost.newTabSpec(tag).setIndicator(tabView).setContent(intent); 
    tabHost.addTab(setContent); 
    } 

view.xml như

<?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" 
> 
</LinearLayout> 

và firsttabdrawable.xml trong thư mục drawable như

<?xml version="1.0" encoding="utf-8"?> 
<selector xmlns:android="http://schemas.android.com/apk/res/android"> 
    <!-- When selected, use grey --> 
    <item android:drawable="@drawable/selectedfirsttabimage" 
     android:state_selected="true" /> 
    <!-- When not selected, use white--> 
    <item android:drawable="@drawable/notselectedfirsttabimage" /> 
</selector> 

xác định secondtabdrawable.xml và thirddrawable.xml trong cùng một cách

+0

chỉ yêu cầu nhà thiết kế của bạn cắt 6 hình ảnh cho các tab ở trên – Javanator

+0

Điều này dường như đang hoạt động, tôi gần như đã thiết lập đúng. Bạn sử dụng tỷ lệ nào khi thiết kế các biểu tượng tab của riêng mình? Bạn sử dụng pixel x pixel nào? Từ ảnh chụp màn hình, tôi nhận được 120pixels X 48pixels. Đúng không? –

2

Các tab bạn cần là một phần của ActionBar. Cụ thể chúng được hiển thị khi ActionBar ở chế độ Tab điều hướng.

http://developer.android.com/guide/topics/ui/actionbar.html (xem dưới "Thêm Navigation Tabs")

Bạn có thể muốn sử dụng www.ActionbarSherlock.com mà là một thư viện mà sẽ cung cấp cho bạn ActionBar trên gần như tất cả các phiên bản của Android. Nó hoạt động giống như chính thức, và bao gồm các tab.

Không sử dụng TabActivity nữa, cũ và không được dùng nữa. ActionBar là tương lai.

Các vấn đề liên quan