làm thế nào để có được thanh tabbar này

Question

thế nào để có được những thiết kế sau đây của một thanh tabbar

Khi một tab đang được chọn vào nút đường cong bắt buộc hiển thị trong tab riêng và khác để được điểm chung.

tôi đã nghĩ rằng việc thêm màu nền cố định là màu đỏ và tôi sẽ đặt các nút của hình ảnh có đường cong và không có đường cong. Nhưng tôi muốn biết liệu nó có được sửa chữa cho tất cả các thiết bị Android, bởi vì wat là chiều cao và chiều rộng của nút? cách đặt thanh tab có chiều cao cố định và chiều rộng ....

Answer 1

Tôi tìm thấy bằng một cách đơn giản như sau

Để có được redline ở dưới cùng của thanh tabbar tôi đã thêm một view dưới tab như sau

<TabHost 
    android:id="@android:id/tabhost" 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent" 
    xmlns:android="http://schemas.android.com/apk/res/android"> 

    <LinearLayout 
     android:layout_width="fill_parent" 
     android:id="@+id/linearLayout1" 
     android:layout_height="fill_parent" 
     android:orientation="vertical"> 

     <TabWidget 
      android:layout_width="fill_parent" 
      android:layout_height="wrap_content" 
      android:id="@android:id/tabs" 
      android:layout_alignParentBottom="true" 
      android:layout_weight="0"> 
     </TabWidget> 

     <View android:layout_width="fill_parent" android:layout_height="4dip" android:background="#ff0000" /> 

     <FrameLayout 
      android:layout_width="fill_parent" 
      android:layout_height="fill_parent" 
      android:id="@android:id/tabcontent" 
      android:layout_weight="1"> 
     </FrameLayout> 

    </LinearLayout> 
</TabHost> 

Sau đó, lớp thanh tabbar của tôi là như sau

public class CustomTabActivity extends TabActivity 
{ 
    @Override 
    public void onCreate(Bundle savedInstanceState) 
    { 
     super.onCreate(savedInstanceState); 
     setContentView(R.layout.tabbar); 

     addTab1(FirstTab.class); 
     addTab2(SecondTab.class); 
     addTab3(FirstTab.class); 
     addTab4(SecondTab.class); 
    } 

    private void addTab1(Class<?> c) 
    { 
     TabHost tabHost = getTabHost(); 
     Intent intent = new Intent(this, c); 
     TabHost.TabSpec spec = tabHost.newTabSpec("tab"); 

     View tabIndicator = LayoutInflater.from(this).inflate(R.layout.tab_indicator1, getTabWidget(), false); 
     ImageView icon = (ImageView) tabIndicator.findViewById(R.id.icon1); 

     spec.setIndicator(tabIndicator); 
     spec.setContent(intent); 
     tabHost.addTab(spec); 
    } 
} 

bố trí tab_indicator của tôi là như sau

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="0dip" 
    android:layout_height="55dip"  
    android:layout_weight="1" 
    android:orientation="vertical" 
    android:padding="5dp"> 

    <ImageView android:id="@+id/icon1" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_centerHorizontal="true" 
     android:background="@drawable/tab1">  
    </ImageView> 
</RelativeLayout> 

các tab1 trong drawable là một tập tin xml Selector như sau

<?xml version="1.0" encoding="utf-8"?> 
<selector xmlns:android="http://schemas.android.com/apk/res/android" > 
    <item android:state_focused="false" android:state_selected="false" 
     android:state_pressed="false" android:drawable="@drawable/home" /> 
    <item android:state_focused="false" android:state_selected="true" 
     android:state_pressed="false" android:drawable="@drawable/home_select_btn" /> 

</selector> 

Ở đây tôi đã thêm các hình ảnh được chọn với một uốn cong và hình ảnh không được chọn mà không uốn cong, mà tôi muốn hiển thị.

Cách này có vẻ rất dài nhưng tôi cảm thấy nó giống với thiết kế mà tôi cần.

Answer 2

Có thể this example sẽ hữu ích cho bạn. Đây là loại điều hướng tương tự mà ứng dụng Google+ có.