Android上的样式搜索视图(min21)

时间:2017-02-22 14:04:56

标签: android xml android-layout customization uisearchbar

我正在尝试在Android Studio上为我的应用程序自定义搜索栏。我想要实现的结果是:My Search bar and the Quora's one

我正在尝试关注G的文档(https://developer.android.com/guide/topics/search/search-dialog.html)而没有结果。

这是我的代码:

Styles.xml

  <style name="CustomSearchViewStyle" parent="Widget.AppCompat.SearchView">
        <item name ="voiceIcon">@drawable/ic_flag</item>
        <item name="searchIcon">@drawable/ic_search</item>
        <item name="queryBackground">@color/DarkYellow</item>
        <item name="android:background">@color/MainYellow</item>
        <item name="android:paddingBottom">20dp</item>
        <item name="android:paddingTop">5dp</item>
        <item name="android:paddingStart">-15dp</item>
        <item name="android:paddingEnd">15dp</item>
        <item name="android:inputType">textCapWords</item>
    </style>

Searchable.xml

 <?xml version="1.0" encoding="utf-8"?>

    <searchable
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:label="@string/app_name"
        android:voiceSearchMode="showVoiceSearchButton|launchRecognizer"

    />

MainActivity.xml

 <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.v7.widget.SearchView
            android:id="@+id/top_search_bar"
            style="@style/CustomSearchViewStyle"
            android:layout_width="match_parent"
            android:layout_height="@dimen/search_bar_height"
            android:layout_alignParentStart="true"
            app:iconifiedByDefault="false"
            app:queryHint="@string/search_hint"
            android:layout_alignParentEnd="true" />
    </RelativeLayout>

无法理解为什么我无法在查询字段内的“提示文本”后面放置自定义图标,也不能在条形图末尾添加语音搜索图标。

我尝试激活此属性: <item name="searchHintIcon">@drawable/ic_search</item> 但没有任何反应。

你有什么建议吗?

非常感谢你。

度过愉快的一天。

UPDATE :似乎在xml或java文件中删除字符串“setIconifiedByDefault”会显示提示图标,但我想让我的searchBar始终没有图标化(始终可见),所以并没有解决我的问题。

1 个答案:

答案 0 :(得分:1)

好的,似乎我们找到了解决问题的方法。 (感谢我的队友Claffolo)

老实说,我无法弄明白如何解决我的问题所以我们更倾向于创建我们的个人搜索栏,而不是使用谷歌的搜索栏。

这是我们取得的成果:Search Bar(我将徽标替换为主图标,因为我们更喜欢隐藏我们的徽标。),非常类似于我想要的徽标,呃?

这是我的 activity_main.xml

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v7.widget.Toolbar
        android:id="@+id/my_toolbar"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:background="?attr/colorPrimary"
        android:layout_alignParentStart="true"
        android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingTop="2dp"
            android:paddingEnd="16dp">

            <ImageView
                android:id="@+id/search_bar_hint_icon"
                android:layout_width="32dp"
                android:layout_height="32dp"
                android:src="@drawable/ic_search"/>

            <EditText
                android:id="@+id/search_bar_edit_text"
                android:layout_width="0dp"
                android:hint="@string/search_hint"
                android:textColorHint="@color/LightYellow"
                android:backgroundTint="@color/DarkYellow"
                android:background="@color/DarkYellow"
                android:inputType="textCapWords"
                android:layout_weight="1"
                android:layout_height="32dp" />

            <ImageButton
                android:id="@+id/search_bar_voice_icon"
                android:layout_width="32dp"
                android:layout_height="32dp"
                android:background="@drawable/ic_mic" />

        </LinearLayout>

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

    <ImageView
        android:id="@+id/imageview_logo"
        android:layout_width="match_parent"
        android:layout_height="35dp"
        android:layout_below="@id/my_toolbar"
        android:src="@drawable/ic_home"
        android:background="@color/MainYellow"
        />
</RelativeLayout>

因为你可以看到它是一个由三个元素组成的结构:一个 EditText ,用于处理输入,一个 ImageView ,在搜索之前由该镜头图标表示提示TextBox和 ImageButton ,处理voice_speech事件的mic_icon按钮。所有这些都是 linearLayout 中的位置,在工具栏中,我必须在EditText中放置layout_weight = 1字段以获得您在图片。

无论如何,这是我们处理代码的方式:

<强> MainActivity.java

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //SETUP TOOLBAR
        Toolbar myToolbar = (Toolbar) findViewById(R.id.my_toolbar);
        setSupportActionBar(myToolbar);
}
    voice_search_button = (ImageButton)findViewById(R.id.search_bar_voice_icon);
    editText = (EditText) findViewById(R.id.search_bar_edit_text);
    editText.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            fragmentManager.beginTransaction().replace(R.id.fragment_container, new SearchResultsFragment()).commit();
        }
    });

    editText.setOnFocusChangeListener(new View.OnFocusChangeListener() {
        @Override
        public void onFocusChange(View v, boolean hasFocus) {
            if(hasFocus){
                fragmentManager.beginTransaction().replace(R.id.fragment_container, new SearchResultsFragment()).commit();
            }
        }
    });

要处理voice_speech事件,请在MainActivity.java中的 onCreate 覆盖方法下添加以下内容:

  //Voice Search Listener
        voice_search_button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                promptSpeechInput();
            }
        });

并覆盖这两种方法:

/**
 * Showing google speech input dialog
 * */
private void promptSpeechInput() {
    Intent intent = new Intent(RecognizerIntent.ACTION_RECOGNIZE_SPEECH);
    intent.putExtra(RecognizerIntent.EXTRA_LANGUAGE_MODEL,
            RecognizerIntent.LANGUAGE_MODEL_FREE_FORM);
    intent.putExtra(RecognizerIntent.EXTRA_LANGUAGE, Locale.getDefault());
    intent.putExtra(RecognizerIntent.EXTRA_PROMPT,
            getString(R.string.speech_prompt));
    try {
        startActivityForResult(intent, REQ_CODE_SPEECH_INPUT);
    } catch (ActivityNotFoundException a) {
        Toast.makeText(getApplicationContext(),
                getString(R.string.speech_not_supported),
                Toast.LENGTH_SHORT).show();
    }
}

/**
 * Receiving speech input
 * */
@Override
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
    super.onActivityResult(requestCode, resultCode, data);

    switch (requestCode) {
        case REQ_CODE_SPEECH_INPUT: {
            if (resultCode == RESULT_OK && null != data) {

                ArrayList<String> result = data
                        .getStringArrayListExtra(RecognizerIntent.EXTRA_RESULTS);
                editText.setText(result.get(0));
                //TODO AVVIARE ATTIVITA' CON TESTO RESULT.GET(0)
            }
            break;
        }

    }
}

最后,我们仍在处理即时搜索和过滤功能,感谢这位回答此问题的人:How to filter a RecyclerView with a SearchView

希望这有助于某人,我最终会更新我的答案。

度过愉快的一天。