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

问：

它是主页上的 uc 浏览器工具栏，当用户单击主屏幕上的搜索 bara 时，它会展开左端用户欲望搜索引擎和右端取消按钮和搜索栏之间的麦克风当用户输入任何内容时，按钮 chage mic 按钮变为明文按钮，取消按钮变为搜索按钮，其他与以前相同，没有变化当用户点击谷歌图片按钮时，搜索引擎列表显示，用户选择他要搜索查询的搜索引擎。在这个孔过程中，只有按钮在搜索栏中更改它们没有变化。但是在我的 xml 文件中，任何用户都可以清楚地看到有三个工具栏相互传输。请anyon告诉我我能做什么？

<?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 搜索栏一样具有确切的行为。有人有什么建议吗？

XML 布局浏览器 Android-工具栏

答：

0赞 Rahul Rokade 9/9/2023 #1

请更改图标并使用此布局

<?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>

0赞 Arshad Siddiqui 9/10/2023

Rahul Brother：感谢您的回复，但我的整个问题是，当用户输入任何内容时，按钮会更改，麦克风按钮会更改为明文按钮，取消按钮会更改为搜索按钮，其他与之前相同，没有更改。我希望我的搜索栏行为与 UC 浏览器搜索栏相同。

0赞 Rahul Rokade 9/11/2023

请使用这个“addTextChangedListener”

0赞 Rahul Rokade 9/11/2023 #2

这是java代码，请用你这边，麦克风代码不可用

public class NewActivity extends AppCompatActivity {
private Context context;
private EditText edtSearch;
private ImageView imgMic, imgSearch, imgClose, imgGoogle;
private TextView txtCancel;
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_new);
    init();
}
private void init(){
    context = this;
    edtSearch = findViewById(R.id.edt_search);
    imgMic = findViewById(R.id.img_mic);
    imgGoogle = findViewById(R.id.img_google);
    imgSearch = findViewById(R.id.img_search);
    imgClose = findViewById(R.id.img_close);
    txtCancel = findViewById(R.id.txt_cancel);
    imgClose.setVisibility(View.GONE);
    imgMic.setVisibility(View.VISIBLE);
    imgSearch.setVisibility(View.VISIBLE);
    txtCancel.setVisibility(View.GONE);
    setOnClick();
}
private void setOnClick() {
    imgClose.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            imgMic.setVisibility(View.VISIBLE);
            edtSearch.setText(" ");
            imgSearch.setVisibility(View.VISIBLE);
            txtCancel.setVisibility(View.GONE);
        }
    });
    edtSearch.addTextChangedListener(new TextWatcher() {
        @Override
        public void beforeTextChanged(CharSequence s, int start, int count, int after) {
            if (count == 0){
                imgMic.setVisibility(View.VISIBLE);
            }
        }
        @Override
        public void onTextChanged(CharSequence s, int start, int before, int count) {
            imgClose.setVisibility(View.VISIBLE);
            imgMic.setVisibility(View.GONE);
            imgSearch.setVisibility(View.GONE);
            txtCancel.setVisibility(View.VISIBLE);
        }
        @Override
        public void afterTextChanged(Editable s) {
        }
    });
}}

XML 代码

<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/img_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/img_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:id="@+id/img_close"
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:src="@drawable/img_close"
        app:tint="@android:color/darker_gray"
        android:layout_marginEnd="5dp"
        android:layout_gravity="center_vertical|center"
        android:padding="5dp"
        android:visibility="gone"/>
    <ImageView
        android:id="@+id/img_mic"
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:src="@drawable/img_mic"
        app:tint="@android:color/darker_gray"
        android:layout_marginEnd="5dp"
        android:layout_gravity="center_vertical|center"
        android:padding="5dp"
        android:visibility="gone"/>
    <View
        android:layout_width="0.8dp"
        android:layout_height="15dp"
        android:layout_marginTop="5dp"
        android:layout_marginHorizontal="1dp"
        android:background="@color/black"/>
    <ImageView
        android:id="@+id/img_search"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:src="@drawable/img_search"
        android:layout_gravity="center_vertical|center"
        app:tint="@android:color/darker_gray"
        android:padding="5dp"
        android:visibility="gone"/>
    <TextView
        android:id="@+id/txt_cancel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical|center"
        android:gravity="center"
        android:textColor="@android:color/darker_gray"
        android:textSize="8sp"
        android:text="Cancel"
        android:padding="5dp"
        android:visibility="gone"/>
</LinearLayout>

上一个：溢出菜单在活动中的工具栏上不起作用

下一个：如何为每个片段应用不同的工具栏（actionbar）布局？

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

How to create search bar like uc browser search bar toolbar in android studio Kotlin?

评论

评论