Question

我想在工具栏中添加带有编辑文字的搜索栏，如下图所示

我的toolbar.xml： -

    <?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:local="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:minHeight="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    local:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    local:popupTheme="@style/ThemeOverlay.AppCompat.Light" >

    <EditText
        android:id="@+id/searchEditText"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        />

    </android.support.v7.widget.Toolbar>

在工具栏中添加编辑文本后，我的工具栏显示如下： -

Answer 1

根据我的理解，我希望这段代码可以帮助你...

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:elevation="10dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/gray_500"
        android:orientation="vertical"
        android:gravity="center|right">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:background="@color/white"
            android:orientation="horizontal"
            android:gravity="center|right">
            <TextView
                android:layout_width="0dp"
                android:layout_height="60dp"
                android:layout_weight="8"
                android:layout_margin="5dp"
                android:text="snap deal"
                android:gravity="center" >
            </TextView>

            <TextView
                android:layout_width="0dp"
                android:layout_height="60dp"
                android:layout_weight="2"
                android:layout_margin="5dp"
                android:ems="10"
                android:text="Img"
                android:gravity="center" >
            </TextView>


        </LinearLayout>
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:background="@color/white"
            android:gravity="center|right">

            <EditText
                android:id="@+id/editMobileNo"
                android:layout_width="match_parent"
                android:layout_height="40dp"
                android:layout_margin="5dp"
                android:background="@drawable/login_edittext"
                android:ems="10"
                android:hint="Find your dil ki deal"
                android:drawableLeft="@drawable/search"
                android:gravity="center" >
            </EditText>

        </LinearLayout>

    </LinearLayout>

</android.support.v7.widget.Toolbar>

这是EditText login_edittext.xml

的自定义形状

 <?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <gradient 
                android:angle="270"
                android:endColor="@color/white"
                android:startColor="@color/white" />
            <stroke 
                android:width="1dp"
                android:color="@color/gray_500" />
            <corners 
                android:radius="1dp" />
            <padding 
                android:bottom="10dp" 
                android:left="10dp" 
                android:right="10dp" 
                android:top="10dp" />
        </shape>
    </item>

</selector>

这只是素描......你需要改变颜色，大小，图像等......

Answer 2

我相信您要查找的视图是SearchView。您可以在menu.xml上定义要将其添加到ActionBar / ToolBar的内容。像这样：

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/search"
        android:icon="@drawable/search_icon"
        android:title="@string/search"
        app:actionViewClass="android.support.v7.widget.SearchView"
        app:showAsAction="always" />

</menu>

回到您的活动或片段，您可以操纵搜索视图行为并查看：

@Override
public void onPrepareOptionsMenu(Menu menu) {
    super.onPrepareOptionsMenu(menu);
    MenuItem searchViewMenuItem = menu.findItem(R.id.search);
    searchView = (SearchView) searchViewMenuItem.getActionView();
    ImageView v = (ImageView) searchView.findViewById(android.support.v7.appcompat.R.id.search_button);
    v.setImageResource(R.drawable.search_icon); //Changing the image

    if (!searchFor.isEmpty()) {
        searchView.setIconified(false);
        searchView.setQuery(searchFor, false);
    }

    searchView.setQueryHint(getResources().getString(R.string.search_hint));
    searchView.setOnQueryTextListener(new SearchView.OnQueryTextListener() {
        @Override
        public boolean onQueryTextSubmit(String query) {
          //Do your search
        }

        @Override
        public boolean onQueryTextChange(String newText) {
            if(newText.isEmpty()) clearSearch();
            return false;
        }
    });
}

这是一种更简单的方法。最明智的方法是实际上有一个活动来响应您的搜索意图。有关该信息的更多信息，请访问：http://developer.android.com/intl/pt-br/guide/topics/search/search-dialog.html

Answer 3

只需在工具栏中添加一个编辑文本，如下所示：

Before:                                     After:

HEAser_1    HEADer_2    heaDER_3            HEASER_1    HEADER_2    HEADER_3
--------    --------    --------            --------    --------    --------
    1       sTphn       pRCELL               1          Stphn       PRCELL
    2       ADIL        mlr                  2          Adil        MLR
    3       Mlling      sNN                  3          Mlling      SNN
    4       Rosemary    Irvine               4          Rosemary    IRVINE
    5                                        5
    6       JIA         pAn                  6          Jia         PAN
    7       MAJID       doost                7          Majid       DOOST
    8       WILLIAM     smith                8          William     SMITH
    9                                        9
   10       VIssUT      domklAng             10         Vissut      DOMKLANG
   11       RoDNy       mCdermid             11         Rodny       MCDERMID
   12       RoBrt       pACker               12         Robrt       PACKER
   13       PAUL        retz                 13         Paul        RETZ
   14       TRoY        mACpherson           14         Troy        MACPHERSON
   15       CATHRYN     stAfford             15         Cathryn     STAFFORD

Answer 4

您可以直接将searchview放在工具栏内的activity.xml中并初始化它。我猜你会得到所需的布局。

Answer 5

我喜欢上面的TextEdit解决方案以实现向后兼容。

为了实现原始示例，还有两件事需要考虑：

在Activity xml TextEdit定义上添加：

机器人：drawableStart =＆＃34; @android：可拉伸/ ic_menu_search＆＃34;

                               // To add the magnifying glass.

机器人：提示=＆＃34; @串/ Search_Txt＆＃34;

                              // To add the hint message.

在String xml文件中添加：

字符串名称=＆＃34; Search_Txt＆＃34;＆gt;找到您的稀释交易
```
                         // Customize your message here.
```

注意：SearchView替代方案需要API 21。

享受。

如何在工具栏中添加带编辑文本的搜索栏

5 个答案: