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

时间: 2024-11-05 14:47:44

Android搜索框效果的相关文章

CSS3实现的苹果网站搜索框效果

在线演示 本地下载 用CSS3相关属性生成的动态搜索框效果.

Android搜索框/滚动视图/notification

1.搜索框(SearchView)的功能与用法 SearchView是搜索组件,其可以让用户在文本框内输入文件,并允许通过监听器监听用户输入.当用户输入完成后提交搜索,可通过监听器执行实际的搜索. 常用方法如下: ◆setIconfiedByDefault(boolean iconified):设置该搜索框默认是否自动缩小为图标; ◆setSubmitButtonEnabled(boolean enabled):设置是否显示搜索按钮; ◆setQueryHint(CharSequence hin

使用javascript ajax C#实现类似百度的搜索框效果

先看一下最终效果  样式不太好看,但是功能是完全可行的,在文本框中输入文字之后,会实现自动搜索的功能. 首先介绍一下原理: 文本框下方是一个div,里面是一个ul标签,初始状态此ul中不包含任何的li标签. 当文本框文字改变的时候,使用ajax把文本框内容取出来,传递到后台,在后台中从数据库查询数据并把结果返回到前台页面. 返回的结果格式设置为:A,B,C,D:以便在前台实现字符串分割. 前台页面把返回的字符串切分成数组,依次遍历并给ul添加li节点. 具体方法: ①前台布局就不多说了 ,重要的

js案例学习:搜索框效果

如图: <html><head> <title></title> <!--<link href="css.css" type="text/css" rel="stylesheet"/>--> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

仿百度自动补全搜索框效果(*附有源码下载)

页面效果及代码,(源码在下面的下载链接) <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="css/semantic.css"> <script type="text/javascript" src="jquery-autocomplete/jquery

用jsonp实现搜索框功能的实现

用jsonp实现搜索框功能的实现 前面的话: 在上周本来想发一篇模仿必应搜索的界面.但是在准备写文章之前突然想到前面学习了ajax技术,在这里我也让我的页面有一种不需要手动刷新就能获取到数据.但是发现用前面的方法并不能获取到我想要的效果.无奈前几天电脑换系统,把之前的源码丢了(前面有个不好的习惯就是把最近在做的东西放桌面).今天想彻底把这个问题搞明白. 用jquery和ajax进行初步的尝试: (本代码是参考慕课网,搜索框制作视频制作,有关具体详情请参考视频.自己之前的代码找不到了,之前最先的想

html css 模仿小米官网搜索框

写网页效果,掌握html,css,唯一的捷径就是多模仿,多练习.小米官网的搜索框效果看似简单,实际写代码的时候才发现要掌握好多css知识才能完成效果.浮动.导航条.鼠标经过.定位.文字框效果实现.js效果实现等等.下面这段代码仅仅用html.css写出了基本的样子,js效果,鼠标经过.点击事件,光标定位效果都还没有实现. 效果原图见小米官网:http://www.mi.com 搜索效果切换图: 最终效果: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1

vue搜索框中如何根据子类找到父类,并把子类和父类作为参数传递

问题: 最近做vue项目,需要做到搜索框,搜素的值是子类,跳转的时候还要带上子类的父类作为参数,这本来就是很简单的事情,技术菜,折腾了好久,请教大佬才瞬间明白,多么简单的事.故此记录 1 后台返回格式是 2 搜索框效果  3 如何通过点击子类获取父类并作为参数调转?下面贴出代码 给li注册点击事件并把子类的值拿到 goSearch(item) { let parent for(const key in this.objtest){ if(this.objtest[key].includes(it

向DataGrid数据表格增加查询搜索框

向DataGrid数据表格增加查询搜索框 效果如下: js代码: $(function(){ var dg = $('#dg').datagrid({ url:"${pageContext.request.contextPath}/OfferServlet",//servlet路径 columns:[[ {field:'offerid',title:'商品ID',width:100}, {field:'offername',title:'商品名称',width:100}, {field