Android实现一个带清除和提交按钮的清爽圆角搜索框

港控/mmm° 2023-10-09 20:21 62阅读 0赞

运行效果：

![21a12f81a27b40aebab5fef431f0c0cc.gif][]

![d0c357ea59fb400b9cf4202e36d93cc8.gif][]

放入Toolbar的效果

![431662e37fa54e02877bb0cc50bb5d61.png][]

![854332209bae4d5f94b8782b064ca457.png][]

清除按钮有内容才显示：

![c14556f0d98249d3b05aca96be4e383c.png][]

![74ad3b952ce74badbb217c8ca90bafc2.png][]

![9f1b1b9d606a4172933b4d1c2a3c919f.png][]

![fbea8a5f16a946848fd242282258d8ff.png][]

![9f635ea2af4f4a198f69aa4091b02d99.png][]

下面是教程：

> 实现一个圆角搜索框，可以使用`CardView`来实现，同时可以添加一个`EditText`和两个`ImageView`作为清除和提交按钮。

activity\_main

<?xml version="1.0" encoding="utf-8"?>
    <androidx.constraintlayout.widget.ConstraintLayout
            xmlns:android="http://schemas.android.com/apk/res/android"
            xmlns:tools="http://schemas.android.com/tools"
            xmlns:app="http://schemas.android.com/apk/res-auto"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#1e90ff"
            android:padding="10dp"
            tools:context=".MainActivity">
    
        <androidx.cardview.widget.CardView
                android:id="@+id/search_edit"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:cardCornerRadius="16dp"
                tools:ignore="MissingConstraints"
                android:layout_marginTop="20dp">
    
            <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal">
    
                <EditText
                        android:id="@+id/search_edit_text"
                        android:layout_width="0dp"
                        android:layout_height="match_parent"
                        android:layout_weight="1"
                        android:background="@null"
                        android:hint="Search"
                        android:maxLines="1"
                        android:padding="8dp"
                        android:textSize="16sp"
                        android:drawableLeft="@drawable/ic_baseline_search_24"
                        android:drawablePadding="6dp"
                        />
    
                <ImageView
                        android:id="@+id/search_clear_button"
                        android:layout_width="wrap_content"
                        android:layout_height="match_parent"
                        android:padding="8dp"
                        android:src="@drawable/ic_baseline_clear_24"/>
    
                <ImageView
                        android:id="@+id/search_submit_button"
                        android:layout_width="wrap_content"
                        android:layout_height="match_parent"
                        android:padding="8dp"
                        android:src="@drawable/ic_baseline_search_24"/>
    
            </LinearLayout>
    
        </androidx.cardview.widget.CardView>
    
    
    </androidx.constraintlayout.widget.ConstraintLayout>

> 其中，`EditText`的`background`设置为`@null`，使其没有边框，从而使`CardView`的边框成为搜索框的边框，同时设置`android:padding`来控制搜索框的内边距。
> 
> `ImageView`的`src`属性可以设置为自己定义的图标，如清除按钮和提交按钮的图标。
> 
> 接下来，在代码中获取`EditText`、清除按钮和提交按钮，并为它们设置相应的事件监听：

**MainActivity**

package com.example.round_search;
    
    import android.view.View;
    import android.widget.EditText;
    import android.widget.ImageView;
    import android.widget.Toast;
    import androidx.appcompat.app.AppCompatActivity;
    import android.os.Bundle;
    
    public class MainActivity extends AppCompatActivity {
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
    
            final EditText searchEditText = findViewById(R.id.search_edit_text);
            ImageView searchClearButton = findViewById(R.id.search_clear_button);
            ImageView searchSubmitButton = findViewById(R.id.search_submit_button);
    
           // 为清除按钮设置点击事件监听器
            searchClearButton.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    searchEditText.setText("");
                }
            });
    
            // 为提交按钮设置点击事件监听器
            searchSubmitButton.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    String keyword = searchEditText.getText().toString();
                    Toast.makeText(MainActivity.this,keyword,Toast.LENGTH_SHORT).show();
                    searchEditText.setText("");
                    // TODO: 处理搜索关键字
                }
            });
        }
    }

原创，转载请注明出处

[21a12f81a27b40aebab5fef431f0c0cc.gif]: https://img-blog.csdnimg.cn/21a12f81a27b40aebab5fef431f0c0cc.gif
[d0c357ea59fb400b9cf4202e36d93cc8.gif]: https://img-blog.csdnimg.cn/d0c357ea59fb400b9cf4202e36d93cc8.gif
[431662e37fa54e02877bb0cc50bb5d61.png]: https://img-blog.csdnimg.cn/431662e37fa54e02877bb0cc50bb5d61.png
[854332209bae4d5f94b8782b064ca457.png]: https://img-blog.csdnimg.cn/854332209bae4d5f94b8782b064ca457.png
[c14556f0d98249d3b05aca96be4e383c.png]: https://img-blog.csdnimg.cn/c14556f0d98249d3b05aca96be4e383c.png
[74ad3b952ce74badbb217c8ca90bafc2.png]: https://img-blog.csdnimg.cn/74ad3b952ce74badbb217c8ca90bafc2.png
[9f1b1b9d606a4172933b4d1c2a3c919f.png]: https://img-blog.csdnimg.cn/9f1b1b9d606a4172933b4d1c2a3c919f.png
[fbea8a5f16a946848fd242282258d8ff.png]: https://img-blog.csdnimg.cn/fbea8a5f16a946848fd242282258d8ff.png
[9f635ea2af4f4a198f69aa4091b02d99.png]: https://img-blog.csdnimg.cn/9f635ea2af4f4a198f69aa4091b02d99.png