如何像搜索栏一样实施Google Play

时间:2016-06-13 10:09:17

标签: android material-design searchbar

我需要在我的应用中实现搜索,它应该看起来像这样

Google play store search bar

有人会非常关心,向我解释它是如何完成的。提前致谢

1 个答案:

答案 0 :(得分:1)

您可以为此创建自定义布局。 1.采取相对布局,并给它一个圆形的边框背景。 2.在其中添加汉堡包图标。 3.在其中添加麦克风图标。 4.在中心添加edittext。 然后手动点击汉堡包图标和麦克风图标。

我有一些不完全相同的代码,但您可以相应地编辑和更改它。

.config(['$stateProvider', '$urlRouterProvider', 'authProvider', '$httpProvider', '$locationProvider',
  'jwtInterceptorProvider',function ($stateProvider, $urlRouterProvider, authProvider, $httpProvider, $locationProvider,
  jwtInterceptorProvider) {
.....
}]);

然后处理点击事件,例如在麦克风上点击

打开谷歌语音搜索
<RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:layout_marginLeft="@dimen/activity_horizontal_margin"
            android:layout_marginRight="@dimen/activity_horizontal_margin"
            android:background="@drawable/editext_border">

            <ImageView
                android:id="@+id/iv_search_mic"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentLeft="true"
                android:layout_centerVertical="true"
                android:src="@drawable/ic_mic_green" />

            <EditText
                android:id="@+id/ed_home_searchbar"
                fontPath="fonts/weblysleekuisl.ttf"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_toLeftOf="@+id/iv_search_icon"
                android:layout_toRightOf="@+id/iv_search_mic"
                android:background="@android:color/transparent"
                android:hint="@string/action_search"
                android:imeOptions="actionSearch"
                android:padding="10dp"
                android:singleLine="true"
                android:textColor="@color/colorText"
                android:textCursorDrawable="@drawable/color_cursor"
                android:textSize="@dimen/text_xxsmall" />

            <ImageView
                android:id="@+id/iv_search_icon"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:layout_centerVertical="true"
                android:src="@drawable/ic_search_green" />

        </RelativeLayout>

然后onActivityResult方法

searchMic.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                OnSwap.getInstance().trackEvent(TAG, "searchMic", "searchMic Clicked");
                Intent intent = new Intent(RecognizerIntent.ACTION_RECOGNIZE_SPEECH);
                intent.putExtra(RecognizerIntent.EXTRA_LANGUAGE_MODEL,
                        RecognizerIntent.LANGUAGE_MODEL_FREE_FORM);
                intent.putExtra(RecognizerIntent.EXTRA_PROMPT, "Search");
                startActivityForResult(intent, VOICE_INPUT_REQUEST_CODE);
            }
        });