Android 上的样式搜索视图(min21)
Styling Search View on Android (min21)
我正尝试在 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>
无法理解为什么我不能在 "Hint Text" 后面放置自定义图标,也不能在查询字段内的栏末放置语音搜索图标。
我试图激活这个 属性:
<item name="searchHintIcon">@drawable/ic_search</item>
但什么也没发生。
你对此有什么建议吗?
非常感谢。
祝你有愉快的一天。
UPDATE:似乎删除 xml 或 java 文件中的字符串 "setIconifiedByDefault" 会显示提示图标,但我会喜欢让我的 searchBar 始终不图标化(始终可见)所以,这不能解决我的问题。
好的,看来我们找到了解决问题的方法。
(感谢我的队友 Claffolo)
老实说,我不知道如何解决我的问题,所以我们更愿意创建我们的个人搜索栏,而不是使用 Google 的搜索栏。
这是我们取得的结果: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由搜索提示文本框和 ImageButton 之前的镜头图标表示,mic_icon 按钮处理 voice_speech 事件。它们全部都放在 linearLayout 中,在 Toolbar 中,我不得不在 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;
}
}
}
最后,我们仍在处理即时搜索和过滤功能,这要感谢在此回答的人:
希望这对某人有所帮助,我最终会更新我的答案。
祝你有愉快的一天。
我正尝试在 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>
无法理解为什么我不能在 "Hint Text" 后面放置自定义图标,也不能在查询字段内的栏末放置语音搜索图标。
我试图激活这个 属性:
<item name="searchHintIcon">@drawable/ic_search</item>
但什么也没发生。
你对此有什么建议吗?
非常感谢。
祝你有愉快的一天。
UPDATE:似乎删除 xml 或 java 文件中的字符串 "setIconifiedByDefault" 会显示提示图标,但我会喜欢让我的 searchBar 始终不图标化(始终可见)所以,这不能解决我的问题。
好的,看来我们找到了解决问题的方法。 (感谢我的队友 Claffolo)
老实说,我不知道如何解决我的问题,所以我们更愿意创建我们的个人搜索栏,而不是使用 Google 的搜索栏。
这是我们取得的结果: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由搜索提示文本框和 ImageButton 之前的镜头图标表示,mic_icon 按钮处理 voice_speech 事件。它们全部都放在 linearLayout 中,在 Toolbar 中,我不得不在 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;
}
}
}
最后,我们仍在处理即时搜索和过滤功能,这要感谢在此回答的人:
希望这对某人有所帮助,我最终会更新我的答案。
祝你有愉快的一天。