如何在android studio Kotlin中创建像uc浏览器搜索栏工具栏一样的搜索栏？

问题描述 投票：0回答：1

It's uc browser toolbar on home page It's screen when user click onsearch bara on home screen then it's expand left end user desire search engine and right end cancel button and mic in between search bar When user type anything then the button chage mic button change into clear text button and cancel button change into go search button,other are same as before there is no changes When user click on google image button then search engine list show and user chose which search engine he want to seach query. 在此洞过程中，只有按钮发生变化，搜索栏中没有变化。 但在我的 xml 文件中，任何用户都可以清楚地看到他们的三个工具栏相互传输。请任何人都可以告诉我我能做什么？

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16dp"
    tools:context=".fragment.HomeFragment">


    <androidx.appcompat.widget.Toolbar
        android:id="@+id/first_toolbar"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="@drawable/custom_design"
        android:elevation="6dp"
        android:minHeight="?attr/actionBarSize"
        android:theme="?attr/actionBarTheme"
        android:visibility="visible"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:ignore="MissingConstraints">

        <LinearLayout
            android:id="@+id/search_bar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal"
            tools:layout_editor_absoluteX="16dp">


            <ImageButton
                android:id="@+id/google"
                android:layout_width="46dp"
                android:layout_height="46dp"
                android:layout_marginTop="0dp"
                android:layout_marginBottom="10dp"
                android:layout_weight="1"
                android:background="?attr/selectableItemBackground"
                android:clickable="true"
                android:contentDescription="@string/google_image"
                android:focusable="true"
                android:src="@drawable/google"
                tools:ignore="TouchTargetSizeCheck,DuplicateSpeakableTextCheck,ImageContrastCheck" />


            <TextView
                android:id="@+id/search_input"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_toStartOf="@id/mic"
                android:layout_toEndOf="@id/google"
                android:background="@android:color/transparent"
                android:clickable="true"
                android:focusable="true"
                android:gravity="center"
                android:paddingStart="8dp"
                android:paddingEnd="8dp"
                android:text="@string/search_or_enter_url"
                android:textColor="#494747"
                android:textSize="18sp"
                tools:ignore="ObsoleteLayoutParam" />


            <ImageButton
                android:id="@+id/mic"
                android:layout_width="46dp"
                android:layout_height="46dp"
                android:layout_marginTop="0dp"
                android:layout_marginEnd="2dp"
                android:layout_marginBottom="10dp"
                android:layout_weight="1"
                android:background="?attr/selectableItemBackground"
                android:clickable="true"
                android:contentDescription="@string/mic"
                android:focusable="true"
                android:src="@drawable/baseline_mic_24"
                tools:ignore="TouchTargetSizeCheck" />

        </LinearLayout>

    </androidx.appcompat.widget.Toolbar>

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/second_toolbar"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="@color/white"
        android:elevation="6dp"
        android:minHeight="?attr/actionBarSize"
        android:theme="?attr/actionBarTheme"
        android:visibility="gone"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:menu="@menu/second_toolbar_menu"
        tools:ignore="MissingConstraints">

        <!-- This is the search bar layout -->

        <LinearLayout
            android:id="@+id/second_search_bar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginStart="0dp"
            android:orientation="horizontal"
            tools:layout_editor_absoluteX="16dp">

            <!-- Google Image -->

            <ImageButton
                android:id="@+id/second_google"
                android:layout_width="46dp"
                android:layout_height="46dp"
                android:layout_marginTop="3dp"
                android:layout_marginBottom="10dp"
                android:layout_weight="1"
                android:background="?attr/selectableItemBackground"
                android:contentDescription="@string/google_image"
                android:src="@drawable/google"
                tools:ignore="TouchTargetSizeCheck,DuplicateSpeakableTextCheck,ImageContrastCheck" />

            <!-- EditText for input -->

            <EditText
                android:id="@+id/second_search_input"
                android:layout_width="wrap_content"
                android:layout_height="52dp"
                android:layout_weight="1"
                android:autofillHints="Enter Text or Search Url"
                android:background="@android:color/transparent"
                android:hint="Search or Enter URL"
                android:imeOptions="actionSearch"
                android:inputType="text"
                android:paddingStart="8dp"
                android:paddingEnd="8dp"
                android:singleLine="true"
                android:textColorHint="#494747"
                tools:ignore="HardcodedText,VisualLintTextFieldSize" />

            <!-- Mic / Cross Button -->

            <ImageButton
                android:id="@+id/second_mic"
                android:layout_width="46dp"
                android:layout_height="46dp"
                android:layout_marginTop="3dp"
                android:layout_marginBottom="10dp"
                android:layout_toStartOf="@id/cancel_search"
                android:layout_weight="1"
                android:background="?attr/selectableItemBackground"
                android:contentDescription="@string/mic"
                android:src="@drawable/baseline_mic_24"
                tools:ignore="ObsoleteLayoutParam,TouchTargetSizeCheck" />

            <!-- Divider divide between mic and textView -->
            <View
                android:id="@+id/divider"
                android:layout_width="2dp"
                android:layout_height="40dp"
                android:layout_marginTop="6dp"
                android:layout_toStartOf="@id/cancel_search"
                android:layout_toEndOf="@id/mic"
                android:background="?android:attr/listDivider"
                android:outlineAmbientShadowColor="@color/black_light"
                app:layout_constraintTop_toTopOf="parent"
                tools:ignore="ObsoleteLayoutParam,UnusedAttribute" />

            <!-- cancel search / search_Or_Go -->

            <TextView
                android:id="@+id/cancel_search"
                android:layout_width="46dp"
                android:layout_height="48dp"
                android:layout_alignParentEnd="true"
                android:layout_marginEnd="5dp"
                android:layout_weight="1"
                android:clickable="true"
                android:focusable="true"
                android:gravity="center"
                android:text="@string/cancel"
                android:textColor="#434141"
                tools:ignore="ObsoleteLayoutParam,TextSizeCheck,TouchTargetSizeCheck" />


        </LinearLayout>

    </androidx.appcompat.widget.Toolbar>

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/third_toolbar"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="@color/white"
        android:elevation="6dp"
        android:minHeight="?attr/actionBarSize"
        android:theme="?attr/actionBarTheme"
        android:visibility="gone"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:menu="@menu/second_toolbar_menu"
        tools:ignore="MissingConstraints">

        <!-- This is the search bar layout -->

        <LinearLayout
            android:id="@+id/third_search_bar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginStart="0dp">

            <!-- Google Image -->
            <ImageButton
                android:id="@+id/third_google"
                android:layout_width="46dp"
                android:layout_height="46dp"
                android:layout_marginTop="5dp"
                android:layout_marginBottom="10dp"
                android:layout_weight="1"
                android:background="?attr/selectableItemBackground"
                android:contentDescription="@string/google_image"
                android:src="@drawable/google"
                tools:ignore="TouchTargetSizeCheck,DuplicateSpeakableTextCheck,ImageContrastCheck" />

            <!-- EditText for input -->
            <EditText
                android:id="@+id/third_search_input"
                android:layout_width="wrap_content"
                android:layout_height="52dp"
                android:layout_weight="1"
                android:autofillHints="Enter Text or Search Url"
                android:background="@android:color/transparent"
                android:hint="Search or Enter URL"
                android:imeOptions="actionSearch"
                android:inputType="text"
                android:paddingStart="8dp"
                android:paddingEnd="8dp"
                android:singleLine="true"
                android:textColor="#494747"
                android:textColorHint="#494747"
                tools:ignore="HardcodedText,VisualLintTextFieldSize" />

            <!-- It's clear text in EditText for input -->
            <ImageView
                android:id="@+id/clear_text"
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:layout_gravity="center"
                android:layout_marginTop="10dp"
                android:layout_marginBottom="10dp"
                android:layout_weight="1"
                android:backgroundTint="@color/black_light"
                android:clickable="true"
                android:contentDescription="TODO"
                android:focusable="true"
                android:src="@drawable/baseline_cancel_24"
                tools:ignore="ContentDescription,HardcodedText,ObsoleteLayoutParam,TouchTargetSizeCheck" />

            <View
                android:id="@+id/second_divider"
                android:layout_width="2dp"
                android:layout_height="40dp"
                android:layout_marginTop="6dp"
                android:layout_toStartOf="@id/cancel_search"
                android:layout_toEndOf="@id/search_Or_Go"
                android:background="?android:attr/listDivider"
                android:outlineAmbientShadowColor="@color/black_light"
                app:layout_constraintTop_toTopOf="parent"
                tools:ignore="ObsoleteLayoutParam,UnusedAttribute" />

            <!-- when user click search_Or_Go button then it will go to search page using webview -->
            <ImageView
                android:id="@+id/search_Or_Go"
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:layout_marginTop="5.5dp"
                android:layout_marginBottom="10dp"
                android:layout_weight="1"
                android:clickable="true"
                android:contentDescription="TODO"
                android:focusable="true"
                android:src="@drawable/baseline_search_24"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                tools:ignore="ContentDescription,HardcodedText,TouchTargetSizeCheck" />

        </LinearLayout>

    </androidx.appcompat.widget.Toolbar>

</androidx.constraintlayout.widget.ConstraintLayout>

我希望我的搜索栏具有与 uc 搜索栏完全相同的行为。有人有什么建议吗？

android xml android-layout browser android-toolbar
1个回答
0
投票

请更改图标并使用此布局

<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:padding="5dp"
tools:context=".activity.NewActivity">
<ImageView
    android:id="@+id/google"
    android:layout_width="30dp"
    android:layout_height="30dp"
    android:src="@drawable/ic_menu"
    app:tint="@color/black"
    android:layout_centerVertical="true"
    android:layout_alignParentStart="true"
    android:layout_gravity="start"
    android:padding="5dp"/>
<EditText
    android:id="@+id/edt_search"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_toEndOf="@id/google"
    android:layout_toStartOf="@id/box_one"
    android:layout_marginHorizontal="2dp"
    android:layout_centerVertical="true"
    android:background="@android:color/transparent"
    android:inputType="text"
    android:textSize="12sp"
    android:textColor="@color/black"
    android:hint="search here"/>
<LinearLayout
    android:id="@+id/box_one"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentEnd="true"
    android:layout_centerVertical="true"
    android:layout_centerHorizontal="true"
    android:orientation="horizontal">
    <ImageView
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:src="@drawable/ic_menu"
        app:tint="@color/black"
        android:layout_marginEnd="5dp"
        android:layout_gravity="center_vertical|center"
        android:padding="5dp"/>
    <View
        android:layout_width="0.8dp"
        android:layout_height="15dp"
        android:layout_marginTop="5dp"
        android:layout_marginHorizontal="1dp"
        android:background="@color/black"/>
    <ImageView
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:src="@drawable/ic_menu"
        android:layout_gravity="center_vertical|center"
        app:tint="@color/black"
        android:padding="5dp"/>
</LinearLayout>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.