Android搜索框效果

转载:http://blog.csdn.net/walker02/article/details/7917392

需求:项目中的有关搜索的地方,加上清空文字的功能,目的是为了增加用户体验,使用户删除文本更加快捷

解决过程:开始的时候感觉这个东西不太好实现,主要就是布局的问题,可能是开始顾虑的太多了,再加上当时产品催的不太紧,而且这个功能也不是必须实现的。但是今天不一样了,这个是老大让加上的,说别的很多应用中都有这个功能,没办法那就加上呗,试着去使用了相对布局去实现,把一个删除按键放在编辑框的右上方,当文字的时候就把删除按键给显示出来,当编辑框为空的时候就把删除按键给隐藏掉。布局代码

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:paddingBottom="50dp"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    
    <RelativeLayout android:id="@+id/top"
        android:layout_width="fill_parent"
        android:layout_alignParentTop="true"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:background="@drawable/top_background"
        android:layout_height="wrap_content">
        
        <Button android:id="@+id/btnSearch"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:layout_centerVertical="true"
            android:layout_alignParentRight="true"
            android:textSize="12sp"
            android:textStyle="bold"
            android:background="@drawable/search_btn_background"
            android:text="搜索"/>
        
        <RelativeLayout android:id="@+id/rlSearchFrameDelete"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:gravity="center_vertical"
            android:layout_toLeftOf="@id/btnSearch">
            
                <EditText android:id="@+id/etSearch"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:singleLine="true"
                    android:background="@drawable/search_frame"
                    android:layout_marginRight="10dp"
                    android:paddingLeft="32dp"
                    android:textSize="12sp"
                    android:hint="请输入文字..."/>
                
                <ImageView android:id="@+id/ivDeleteText"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentRight="true"
                    android:src="@drawable/delete"
                    android:layout_centerInParent="true"
                    android:paddingRight="20dp"
                    android:visibility="gone"/>
            
        </RelativeLayout>
        
        
    </RelativeLayout>
    
</RelativeLayout>

这代码是直接从项目那截取过来的,里面用到了一些小技巧,开发的时候用到的布局写法,其中以一种背景平铺,这个在以前的文章里讲述过。在主程序里主要是使用了EditText监听输入的功能,这个以前的文章也写过,这次在使用又复习了一遍。代码如下

public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ivDeleteText = (ImageView) findViewById(R.id.ivDeleteText);
        etSearch = (EditText) findViewById(R.id.etSearch);
        
        ivDeleteText.setOnClickListener(new OnClickListener() {
            
            public void onClick(View v) {
                etSearch.setText("");
            }
        });
        
        etSearch.addTextChangedListener(new TextWatcher() {
            
            public void onTextChanged(CharSequence s, int start, int before, int count) {
                // TODO Auto-generated method stub
                
            }
            
            public void beforeTextChanged(CharSequence s, int start, int count,
                    int after) {
                // TODO Auto-generated method stub
                
            }
            
            public void afterTextChanged(Editable s) {
                if (s.length() == 0) {
                    ivDeleteText.setVisibility(View.GONE);
                } else {
                    ivDeleteText.setVisibility(View.VISIBLE);
                }
            }
        });

现在就可以实现开始描述的要求了。这里面还用到了一张背景图是.9.png的,能大能小哦 

Demo代码:http://pan.baidu.com/s/1pJOiXab

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Android 中,你可以使用动画来实现搜索框的切换效果。以下是一个示例代码,展示了如何使用属性动画来实现搜索框的淡入淡出效果: 首先,在你的布局文件中添加一个搜索框视图,例如 EditText: ```xml <EditText android:id="@+id/searchBox" android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="Search" android:textColorHint="@color/colorHint" /> ``` 接下来,在你的 Java 或 Kotlin 代码中,你可以使用属性动画来实现搜索框的切换效果。下面是一个使用淡入淡出动画的示例代码: ```java import android.animation.ObjectAnimator; import android.os.Bundle; import android.view.View; import android.widget.EditText; public class MainActivity extends AppCompatActivity { private EditText searchBox; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); searchBox = findViewById(R.id.searchBox); } public void toggleSearchBox(View view) { if (searchBox.getVisibility() == View.VISIBLE) { // 淡出动画 ObjectAnimator animator = ObjectAnimator.ofFloat(searchBox, "alpha", 1f, 0f); animator.setDuration(300); animator.start(); searchBox.setVisibility(View.GONE); } else { // 淡入动画 ObjectAnimator animator = ObjectAnimator.ofFloat(searchBox, "alpha", 0f, 1f); animator.setDuration(300); animator.start(); searchBox.setVisibility(View.VISIBLE); } } } ``` 在上面的示例代码中,我们首先通过 findViewById() 方法获取搜索框的引用,并在 toggleSearchBox() 方法中切换搜索框的可见性。当搜索框从可见状态切换到不可见状态时,我们使用 alpha 属性动画将其淡出;当搜索框从不可见状态切换到可见状态时,我们使用 alpha 属性动画将其淡入。 你可以在你的项目中根据实际需求来调整动画效果和持续时间。希望这个示例能帮助到你!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值