簡體   English   中英

Android ActionBar:帶有操作按鈕的可折疊SearchView

[英]Android ActionBar: collapsible SearchView with action button

在展開搜索視圖時,如何使用可折疊搜索視圖構建ActionBar ,並且單個操作項可見? 為了更具描述性,這就是我需要的:

在此輸入圖像描述 請注意,還有其他菜單項和android:uiOptions="splitActionBarWhenNarrow"AndroidManifest.xml定義。

我嘗試設置自定義搜索項目布局:

menu.xml文件

<item
    android:id="@+id/menu_search"
    android:actionLayout="@layout/actionbar_search"
    android:icon="@drawable/action_search"
    android:showAsAction="always|collapseActionView"
    android:title="@string/search" />

actionbar_search.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="right"
    android:orientation="horizontal" >

    <com.actionbarsherlock.widget.SearchView
        android:id="@+id/search_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:iconifiedByDefault="false"
        android:queryHint="@string/search_hint" />

    <ImageButton
        android:id="@+id/add_item"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        style="@style/Widget.Sherlock.ActionButton"
        android:src="@drawable/content_new"/>

</LinearLayout>

但默認情況下,搜索視圖會占用所有可用寬度,而按鈕則不可見。 我不知道如何強制SearchView填充應用程序圖標和菜單項之間的所有可用空間。 我發現只有android:maxWidth屬性,但這只允許硬編碼維度,我正在尋找一些更靈活的解決方案。 我還試用了RelativeLayoutandroid:layout_toRightOf="@id/search_view"沒有運氣。

在考慮了評論中的建議后,許多谷歌搜索和測試成功地獲得了預期的效果。 我並不為這個解決方案感到驕傲,但它有效,它不是太復雜,應該足夠這個案例。

在簡歷中我做了什么:

  1. ActionBar customView中使用自定義“添加項目”按鈕放置SearchView
  2. android:actionLayout的搜索項中刪除了collapseActionViewandroid:actionLayout menu.xml
  3. 以編程方式折疊/擴展SearchView

一些代碼可以更好地理解我的所作所為。 也許這對某人有用。

menu.xml文件

<item
    android:id="@+id/menu_search"
    android:icon="@drawable/action_search"
    android:showAsAction="always"
    android:title="@string/search" />

// ... other menu items

actionbar_search.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="right"
    android:orientation="horizontal">

    <com.actionbarsherlock.widget.SearchView
        android:id="@+id/search_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:iconifiedByDefault="false"
        android:queryHint="@string/search_hint"
        android:visibility="invisible" />

    <ImageButton
        android:id="@+id/add_item"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        style="@style/Widget.Sherlock.ActionButton"
        android:src="@drawable/content_new"
        android:title="@string/add_item" />

</LinearLayout>

MainActivity.java

@Override
public void onCreate(Bundle savedInstanceState) {
    // ...
    actionBar.setCustomView(R.layout.actionbar_search);
    actionBarCustomView = ab.getCustomView();
    searchView = ((SearchView) actionBarCustomView.findViewById(R.id.search_view));
    searchView.setOnCloseListener(new SearchView.OnCloseListener() {
        @Override
        public boolean onClose() {
            searchView.setVisibility(View.INVISIBLE);
            return false;
        }
    });
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    switch (item.getItemId()) {
        // ...
        case R.id.menu_search:
            if (searchView.getVisibility() == View.VISIBLE) {
                searchView.setIconified(true);
                searchView.setVisibility(View.INVISIBLE);
            } else {
                searchView.setMaxWidth(abCustomView.getWidth() - addButton.getWidth());
                searchView.setVisibility(View.VISIBLE);
                searchView.setIconified(false);
            }
            break;
        // ...
    }
    return true;
}

@Override
public void onBackPressed() {

    if (searchView.getVisibility() == View.VISIBLE) {
        searchView.setIconified(true);
        searchView.setVisibility(View.INVISIBLE);
        return;
    }

    // ...
}

您只能使用yourmenu.xml來執行此操作。

將其他菜單圖標設置為始終顯示為操作。 您的menu.xml應如下所示:

<item
    android:id="@+id/menu_search"
    android:actionLayout="@layout/actionbar_search"
    android:icon="@drawable/action_search"
    android:showAsAction="always|collapseActionView"
    android:title="@string/search"
/>
<item
    android:id="@+id/your_other_menu_id"
    android:showAsAction="always"
    android:icon="@android:drawable/your_other_menu_ic"
 />

你可以這樣做

@Override
public boolean onCreateOptionsMenu(Menu menu) {
     getMenuInflater().inflate(R.menu.main, menu);
     MenuItem searchItem = menu.findItem(R.id.action_search);
     searchView = (SearchView) MenuItemCompat.getActionView(searchItem);
     searchView.setIconified(true); //to be opened collapsed
    return true;
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    switch(item.getItemId()){

        case R.id.action_search:
            searchView.setIconified(false);// to Expand the SearchView when clicked
            return true;
    }    
    return false;
}

並在menu.xml中搜索項目make

showAsAction = “總是”

注意:我使用的是android.support.v7.widget.SearchView,但在你的情況下並不重要

只是一個更改菜單xml。 showaction前綴到您的應用名稱

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto" >

<item
    android:id="@+id/menu_search"
    android:actionLayout="@layout/actionbar_search"
    android:icon="@drawable/action_search"
    app:showAsAction="always|collapseActionView"
    android:title="@string/search"
/>

</menu>

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM