如何实现Android仿简书搜索框效果？示例代码分享！

当然，以下是一个简单的示例代码，用于在Android中实现仿简书搜索框效果：，，“xml，，`，，`

java，EditText searchEditText = findViewById(R.id.search_edit_text);，searchEditText.addTextChangedListener(new TextWatcher() {，    @Override，    public void beforeTextChanged(CharSequence s, int start, int count, int after) {}，，    @Override，    public void onTextChanged(CharSequence s, int start, int before, int count) {}，，    @Override，    public void afterTextChanged(Editable s) {，        if (s.length() > 0) {，            // 显示清除按钮，        } else {，            // 隐藏清除按钮，        }，    }，});，

`，，这段代码展示了一个带有提示文本的EditText`，并添加了一个文本变化监听器来处理输入内容的变化。你可以根据需要进一步自定义样式和功能。

在Android开发中，实现一个仿简书搜索框效果需要结合多种UI组件和动画效果，以下是一个详细的示例代码，展示如何实现这一效果。

1. 项目结构

我们需要创建一个新的Android项目，并设置好基本的布局文件和资源文件。

1.1 布局文件 (activity_main.xml)

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <!-搜索框 -->
    <LinearLayout
        android:id="@+id/search_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:padding="16dp"
        android:background="#FFF"
        android:elevation="4dp">
        <ImageView
            android:id="@+id/search_icon"
            android:layout_width="24dp"
            android:layout_height="24dp"
            android:src="@drawable/ic_search" />
        <EditText
            android:id="@+id/search_input"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:hint="搜索文章、用户、标签"
            android:textSize="16sp"
            android:background="@null" />
        <ImageView
            android:id="@+id/clear_icon"
            android:layout_width="24dp"
            android:layout_height="24dp"
            android:src="@drawable/ic_clear"
            android:visibility="gone" />
    </LinearLayout>
    <!-搜索结果列表 -->
    <ListView
        android:id="@+id/search_results"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/search_bar"
        android:visibility="gone"/>
</RelativeLayout>

1.2 资源文件 (drawable/ic_search.xml, drawable/ic_clear.xml)

ic_search.xml：

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24">
    <path
        android:fillColor="#000"
        android:pathData="M15.5,14h-0.79l-0.28,-0.27C15.41,12.59,16,11.11,16,9.5  C16,5.91,13.09,3,9.5,3S3,5.91,3,9.5S5.91,16,9.5,16c1.61,0,3.09,-0.59,4.23,-1.57l0.27,0.28v0.79l5,4.99L20.49,19l-4.99,-5V14zM9.5,14C7.01,14,5,11.99,5,9.5S7.01,5,9.5,5 14,7.01,14,9.5S11.99,14,9.5,14z"/>
</vector>

ic_clear.xml：

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24">
    <path
        android:fillColor="#000"
        android:pathData="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12z"/>
</vector>

2. MainActivity 代码

2.1 MainActivity.java

package com.example.jianshusearch;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.text.Editable;
import android.text.TextWatcher;
import android.view.View;
import android.widget.EditText;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.Toast;
public class MainActivity extends AppCompatActivity {
    private EditText searchInput;
    private ImageView clearIcon;
    private ListView searchResults;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        searchInput = findViewById(R.id.search_input);
        clearIcon = findViewById(R.id.clear_icon);
        searchResults = findViewById(R.id.search_results);
        searchInput.addTextChangedListener(new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {}
            @Override
            public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {
                if (charSequence.length() > 0) {
                    clearIcon.setVisibility(View.VISIBLE);
                    // 模拟搜索操作，这里可以替换为实际的搜索逻辑
                    Toast.makeText(MainActivity.this, "Searching for: " + charSequence, Toast.LENGTH_SHORT).show();
                } else {
                    clearIcon.setVisibility(View.GONE);
                }
            }
            @Override
            public void afterTextChanged(Editable editable) {}
        });
        clearIcon.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                searchInput.setText("");
            }
        });
    }
}

3. 动画效果（可选）

为了增强用户体验，我们可以添加一些动画效果，比如搜索框展开和收缩的动画，以下是一个简单的实现示例：

3.1 动画资源文件 (res/anim/expand_collapse.xml)

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <scale
        android:duration="300"
        android:fromXScale="0.0"
        android:toXScale="1.0"
        android:fromYScale="0.0"
        android:toYScale="1.0"
        android:pivotX="0%"
        android:pivotY="0%" />
</set>

3.2 MainActivity 修改以支持动画效果

package com.example.jianshusearch;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.text.Editable;
import android.text.TextWatcher;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.EditText;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.Toast;
public class MainActivity extends AppCompatActivity {
    private EditText searchInput;
    private ImageView clearIcon;
    private ListView searchResults;
    private boolean isExpanded = false;
    private Animation expandCollapse;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        searchInput = findViewById(R.id.search_input);
        clearIcon = findViewById(R.id.clear_icon);
        searchResults = findViewById(R.id.search_results);
        expandCollapse = AnimationUtils.loadAnimation(this, R.anim.expand_collapse);
        searchInput.addTextChangedListener(new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {}
            @Override
            public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {
                if (charSequence.length() > 0) {
                    clearIcon.setVisibility(View.VISIBLE);
                    // 模拟搜索操作，这里可以替换为实际的搜索逻辑
                    Toast.makeText(MainActivity.this, "Searching for: " + charSequence, Toast.LENGTH_SHORT).show();
                } else {
                    clearIcon.setVisibility(View.GONE);
                }
            }
            @Override
            public void afterTextChanged(Editable editable) {}
        });
        clearIcon.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                searchInput.setText("");
            }
        });
    }
}

通过以上步骤，我们实现了一个类似于简书搜索框的Android应用，这个示例展示了如何使用EditText、ImageView和ListView来构建一个基本的搜索界面，并添加了一些简单的动画效果来提升用户体验。

原创文章，作者：未希，如若转载，请注明出处：https://www.kdun.com/ask/1261005.html

本网站发布或转载的文章及图片均来自网络，其原创性以及文中表达的观点和判断不代表本网站。如有问题，请联系客服处理。