2012-08-01 1 views
20

Có thể có cả hai, một spinner/dropdown ở trên cùng và các tab ngay bên dưới thanh hành động? Tôi muốn sử dụng spinner ở trên cùng của thanh hành động như bộ điều khiển chuyển đổi xem (ví dụ: chế độ xem bảng hoặc chế độ xem biểu đồ) trong khi các tab bên dưới sẽ hiển thị các danh sách dữ liệu khác nhau.Có thể sử dụng các tab thả xuống và các tab dưới dạng điều hướng trong thanh hành động không?

Các ảnh chụp màn hình dưới đây minh họa chính xác những gì tôi muốn đạt được:

enter image description here

Nếu nó không thể có cả hai chế độ trong thanh hành động, tôi có thể đặt dấu TabWidget ở đầu xem nội dung của tôi. Tuy nhiên, tôi hơi không chắc chắn nếu tôi nên có một mảnh hoặc một hoạt động cho mỗi tab.

+0

Tôi chắc chắn nếu thanh tác vụ quá dài, nó sẽ tạo một hàng khác. –

+0

Tại sao bạn muốn làm điều này? Dường như có thể gây nhầm lẫn cho người dùng. –

+4

@JeffAxelrod quora thực hiện điều này cho ứng dụng Android của họ. Xem http://marketingland.com/wp-content/ml-loads/2012/09/quora-android.jpg –

Trả lời

3

EDIT:

Có thể sử dụng danh sách thả xuống và các tab như điều hướng trong thanh hành động?

No. Mã trong ActionBarView (khi cuộc gọi setNavigationMode (int) kết thúc) sử dụng lệnh chuyển đổi, vì vậy không thể kết hợp các chế độ.

Một số kết hợp giữa chế độ điều hướng của thanh tác vụ và câu trả lời trước của tôi vẫn là tùy chọn hợp lệ: Bạn có thể sử dụng custom view trong Thanh tác vụ và sử dụng ViewPager cho nội dung. Mỗi tab trong ViewPager sẽ là một đoạn mà bạn có thể cập nhật theo cách thủ công (thay đổi kiểu xem) từ hoạt động gốc khi xoay vòng được thay đổi.

Lưu ý phụ, có các thư viện của bên thứ ba như ViewPagerExtensions cung cấp các tab cố định xuất hiện mà không phải sử dụng các tab ActionBar.

+0

Trong trường hợp này, tôi sẽ cần thay đổi chế độ điều hướng của thanh tác vụ từ NAVIGATION_MODE_LIST thành NAVIGATION_MODE_TAB. Điều này sẽ làm cho spinner trong thanh hành động biến mất. –

+0

Không, trong trường hợp này thanh tác vụ sẽ không liên quan gì đến điều hướng và các tab sẽ không là một phần của thanh tác vụ. EDIT: thay đổi mô tả của tôi trong câu trả lời – roflharrison

+0

Bạn có thể tham khảo một ví dụ không? Tôi không chắc liệu tôi có hiểu ý bạn không. Cảm ơn! –

1
Is it possible to use dropdown AND tabs as navigation in the action bar? 

Không thể trong mặc định lib sử dụng dơi bạn có thể tạo tùy chỉnh xem thanh tác vụ và thiết rằng một thể

thử này một mã

action_bar.xml 

<LinearLayout 
    android:id="@+id/actionbar_linearLayout_menu" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_alignParentRight="true" 
    android:layout_alignParentTop="true" 
    android:layout_marginTop="2dip" 
    android:gravity="right" > 

    <ImageView 
     android:id="@+id/actionbar_imageView_menu_search" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_marginRight="5dip" 
     android:padding="8dp" 
     android:src="@drawable/button_search_selector" /> 

    <ImageView 
     android:id="@+id/actionbar_imageView_menu_myaccount" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_marginRight="5dip" 
     android:padding="8dp" 
     android:src="@drawable/button_myaccount_selector" /> 

    <ImageView 
     android:id="@+id/actionbar_imageView_menu_settings" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_marginRight="5dip" 
     android:padding="8dp" 
     android:src="@drawable/button_settings_selector" /> 
</LinearLayout> 

<LinearLayout 
    android:id="@+id/actionbar_linearLayout_title" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_alignParentLeft="true" 
    android:layout_alignParentTop="true" 
    android:layout_toLeftOf="@+id/actionbar_linearLayout_menu" > 

    <Spinner 
     android:id="@+id/actionbar_spi_menu" 
     style="@style/MenuSpinnerTextViewItem" 
     android:layout_width="80dip" 
     android:layout_height="34dip" 
     android:layout_alignParentLeft="true" 
     android:layout_alignParentTop="true" 
     android:layout_marginTop="6dip" 
     android:background="@drawable/spinner_bg" 
     android:paddingLeft="3dip" 
     android:spinnerMode="dropdown" 
     android:visibility="gone" /> 

    <com.smartdeal.util.SmartDealTextView 
     android:id="@+id/actionbar_txt_title" 
     style="@style/Style_Text_Bold" 
     android:layout_width="wrap_content" 
     android:layout_height="match_parent" 
     android:layout_marginTop="4dip" 
     android:gravity="left" 
     android:padding="5dip" 
     android:text="Smart Deal" 
     android:textColor="@android:color/white" 
     android:textSize="18dip" /> 
</LinearLayout> 

<LinearLayout 
    android:id="@+id/actionbar_linearLayout_search" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:layout_alignParentLeft="true" 
    android:layout_alignParentRight="true" 
    android:layout_alignParentTop="true" 
    android:background="@drawable/serch_bg" 
    android:visibility="gone" > 

    <ImageView 
     android:id="@+id/actionbar_imageView_searchMenu_search" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:src="@drawable/search_icon_selected" /> 

    <EditText 
     android:id="@+id/actionbar_edt_searchMenu" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_marginLeft="5dip" 
     android:layout_weight="1" 
     android:background="@null" 
     android:singleLine="true" 
     android:textColor="@android:color/white" 
     android:textSize="18dip" > 
    </EditText> 

    <ImageView 
     android:id="@+id/actionbar_imageView_searchMenu_cancel" 
     android:layout_width="wrap_content" 
     android:layout_height="match_parent" 
     android:layout_gravity="center_horizontal" 
     android:layout_marginLeft="5dip" 
     android:src="@drawable/search_cancel" /> 
</LinearLayout> 

BaseActivity.java

{ 
final ActionBar ab = getSupportActionBar(); 
     ab.setDisplayHomeAsUpEnabled(true); 
     final LayoutInflater inflater = (LayoutInflater) getSystemService("layout_inflater"); 
     ab.setDisplayShowTitleEnabled(false); 
     // ab.setTitle("Settings"); 
     View view = inflater.inflate(R.layout.actionbar_view, null); 

     linLayoutMenu = (LinearLayout) view 
       .findViewById(R.id.actionbar_linearLayout_menu); 
     linLayoutSearch = (LinearLayout) view 
       .findViewById(R.id.actionbar_linearLayout_search); 
     linLayoutTitle = (LinearLayout) view 
       .findViewById(R.id.actionbar_linearLayout_title); 

     txtTitle = (TextView) view.findViewById(R.id.actionbar_txt_title); 
     spiMenu = (Spinner) view.findViewById(R.id.actionbar_spi_menu); 

     menuSearch = (ImageView) view 
       .findViewById(R.id.actionbar_imageView_menu_search); 
     menuMyaccount = (ImageView) view 
       .findViewById(R.id.actionbar_imageView_menu_myaccount); 
     menuSettings = (ImageView) view 
       .findViewById(R.id.actionbar_imageView_menu_settings); 
     menuSearchCancel = (ImageView) view 
       .findViewById(R.id.actionbar_imageView_searchMenu_cancel); 

     menuSearch.setOnClickListener(this); 
     menuMyaccount.setOnClickListener(this); 
     menuSettings.setOnClickListener(this); 
     menuSearchCancel.setOnClickListener(this); 

     if (this instanceof HistoryActivity) { 
      txtTitle.setVisibility(View.GONE); 
      spiMenu.setVisibility(View.VISIBLE); 

      List<String> list = new ArrayList<String>(); 
      list.add("History"); 
      list.add("Activity"); 

      MenuListAdapter menuList = new MenuListAdapter(this, list); 
      spiMenu.setAdapter(menuList); 

     } else { 
      txtTitle.setVisibility(View.VISIBLE); 
      spiMenu.setVisibility(View.GONE); 
     } 

     ab.setCustomView(view); 
     ab.setDisplayShowCustomEnabled(true); 
} 

ViewActivity.java

TabListener {

private ListView historyList; 
private ArrayList<String> list; 
LinearLayout linLayoutHistory, linLayoutActivity; 
private ActionBar actionBar; 

@Override 
public void onCreate(Bundle savedInstanceState) { 
    // TODO Auto-generated method stub 
    super.onCreate(savedInstanceState); 
    setContentView(R.layout.....); 

    initComponent(); 

} 

private void initComponent() { 
    // setActionBarHomeUpAsEnable(true); 

    linLayoutActivity = (LinearLayout) findViewById(R.id.history_activity_linLayout_activity); 
    linLayoutHistory = (LinearLayout) findViewById(R.id.history_activity_linLayout_history); 

    historyList = (ListView) findViewById(R.id.history_activity_listView); 
    list = new ArrayList<String>(); 

    spiMenu.setOnItemSelectedListener(new OnItemSelectedListener() { 

     @Override 
     public void onItemSelected(AdapterView<?> arg0, View arg1, 
       int arg2, long arg3) { 
      // TODO Auto-generated method stub 


     } 

     @Override 
     public void onNothingSelected(AdapterView<?> arg0) { 
      // TODO Auto-generated method stub 

     } 
    }); 

} 


@Override 
public boolean onCreateOptionsMenu(Menu menu) { 
    // TODO Auto-generated method stub 

    actionBar = getSupportActionBar(); 

    actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS); 
    ActionBar.Tab month_tab = actionBar.newTab() 
      .setText(getResources().getString(R.string.tab_month)) 
      .setTabListener(this); 
    ActionBar.Tab year_tab = actionBar.newTab() 
      .setText(getResources().getString(R.string.tab_year)) 
      .setTabListener(this); 
    ActionBar.Tab all_tab = actionBar.newTab() 
      .setText(getResources().getString(R.string.tab_all)) 
      .setTabListener(this); 

    actionBar.addTab(month_tab); 
    actionBar.addTab(year_tab); 
    actionBar.addTab(all_tab); 

    return super.onCreateOptionsMenu(menu); 

} 

@Override 
public void onTabSelected(Tab tab, FragmentTransaction ft) { 
    // TODO Auto-generated method stub 

} 

@Override 
public void onTabUnselected(Tab tab, FragmentTransaction ft) { 
    // TODO Auto-generated method stub 

} 

@Override 
public void onTabReselected(Tab tab, FragmentTransaction ft) { 
    // TODO Auto-generated method stub 

} 
1

Bạn cũng có thể tạo ra một nhà cung cấp các tùy chỉnh để đạt được một spinner trong thanh hành động. Vì vậy, không cần phải tạo ra một thanh hành động toàn bộ. Bằng cách thực hiện việc này và sử dụng các tab làm chế độ điều hướng, mục tiêu của bạn được đáp ứng.

2

Có thể. Tôi đã cố gắng để đạt được một giao diện người dùng giống hệt với những gì bạn đã thể hiện, và đã bị mắc kẹt cho đến khi tôi thử một cái gì đó khá đơn giản nhưng cũng hơi khó hiểu.

Những gì tôi đã làm là thiết lập một Spinner như giao diện tùy chỉnh của tôi cho ActionBar, và sau đó:

ActionBar actionBar = getActionBar(); actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);

Dưới đây là một ví dụ về những gì tôi có ý nghĩa.

Tabs Code:

ActionBar actionBar = getActionBar(); 
actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS); 

actionBar.addTab(actionBar.newTab().setText("Today").setTabListener(this)); 
actionBar.addTab(actionBar.newTab().setText("List").setTabListener(this)); 
actionBar.addTab(actionBar.newTab().setText("Month").setTabListener(this)); 

Trong hoạt động cha mẹ cho hoạt động này, tôi đã làm điều này:

Context contextTheme = new ContextThemeWrapper(this, R.style.ActionBarSpinner); 
Spinner actionBarSpinner = new Spinner(contextTheme); 

// Specify a SpinnerAdapter to populate the dropdown list. 
actionBarSpinnerAdapter = new ActionBarSpinnerAdapter(actionBar.getThemedContext(), dropdownValues); 
actionBarSpinner.setAdapter(actionBarSpinnerAdapter); 

// Set up the dropdown list navigation in the action bar. 
actionBarSpinner.setOnItemSelectedListener(this); 

actionBar.setCustomView(actionBarSpinner); 

Điều này làm cho hiệu quả mang lại cho tôi một cái nhìn tùy chỉnh cho ActionBar, nhưng sau đó tôi có thể đặt navigationMode thành tab để cho phép tôi có các tab tôi muốn. Đặt trình lắng nghe sự kiện thích hợp trên mỗi mục, và thì đấy!

+0

Tôi không khuyên bạn nên làm điều này. Khi xoay thiết bị, thanh tác vụ bị ẩn và chế độ xem tùy chỉnh được đặt ở bên phải của các tab, ít nhất trong trường hợp của tôi không phải là thứ tôi muốn. Ngoài ra, bạn cần phải cung cấp cho phong cách ActionBarSpinner để hoàn thành câu trả lời của bạn. Và, bạn cần phải ẩn tiêu đề, nếu không spinner của bạn được đặt ở bên phải của tiêu đề: actionBar.setDisplayShowTitleEnabled (false); – Maragues