Android编程自定义搜索框实现方法【附demo源码下载】

本文实例讲述了Android编程自定义搜索框实现方法。分享给大家供大家参考,具体如下:

先来看效果图吧~

分析:这只是模拟了一个静态数据的删除与显示

用EditText+PopupWindow+listView实现的

步骤:

1.先写出搜索框来-activity_mian布局:

<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"
  >
  <EditText
    android:id="@+id/et"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    />
   <ImageView
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:id="@+id/click"
     android:layout_alignParentRight="true"
     android:src="@drawable/down_arrow"/>
</RelativeLayout>

效果:

2.数据的加载,把数据写在ArrayList数组中,然后用适配器加载出来~

data=new ArrayList<String>();
for(int i=0;i<20;i++){
  data.add("1000"+i);
}
list.setAdapter(new MyAdapter());

3.点击箭头出现数据,在EditText搜索框下面出现,用PopupWindow实现~

@Override
public void onClick(View v) {
  // TODO Auto-generated method stub
  switch (v.getId()) {
  case R.id.click:
    //if(popup==null){
    /*TextView tv=new TextView(this);
    tv.setText("123243");*/
      list.setAdapter(new MyAdapter());
      popup=new PopupWindow(list, et.getWidth(), 500);
      popup.setFocusable(true);
      //点击屏幕以外的区域会关掉
      popup.setOutsideTouchable(true);
      popup.setBackgroundDrawable(new ColorDrawable());
     //显示在哪个控件的下面
      popup.showAsDropDown(et);
    // }else{
    //  popup=null;
     //}
     break;
  default:
    break;
  }
}

4.listview适配器加载数据并且点击清除数据的图片,数据会消失:

class MyAdapter extends BaseAdapter{
@Override
public int getCount() {
  // TODO Auto-generated method stub
  if(data!=null){
  return data.size();
  }else {
    return 0;
  }
}
@Override
public Object getItem(int position) {
  // TODO Auto-generated method stub
  return null;
}
@Override
public long getItemId(int position) {
  // TODO Auto-generated method stub
  return 0;
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
  // TODO Auto-generated method stub
  View view=View.inflate(MainActivity.this, R.layout.listview, null);
  TextView tv=(TextView) view.findViewById(R.id.tv);
  ImageView iv=(ImageView) view.findViewById(R.id.iv);
  text=data.get(position);
  tv.setText(text);
  iv.setOnClickListener(new OnClickListener() {
    @Override
    public void onClick(View v) {
      // TODO Auto-generated method stub
      data.remove(text);
      notifyDataSetChanged();
    }
  });
  return view;
}
}

5.listview的点击,PopupWindow的消失,EditText数据的显示:

list.setOnItemClickListener(new OnItemClickListener() {
  @Override
  public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
    // TODO Auto-generated method stub
    et.setText(text);
    et.setSelection(text.length());//光标在text的后面
    //PopupWindow消失
    popup.dismiss();
  }
});

这样就实现了自定义搜索框~

完整MainActivity:

public class MainActivity extends Activity implements OnClickListener{
  private ImageView click;
  private EditText et;
  private PopupWindow popup;
  ListView list;
  List<String>data;
  String text;
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    et=(EditText) findViewById(R.id.et);
    click=(ImageView) findViewById(R.id.click);
    click.setOnClickListener(this);
    list=new ListView(this);
    list.setOnItemClickListener(new OnItemClickListener() {
      @Override
      public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
        // TODO Auto-generated method stub
        et.setText(text);
        et.setSelection(text.length());//光标在text的后面
        //PopupWindow消失
        popup.dismiss();
      }
    });
    data=new ArrayList<String>();
    for(int i=0;i<20;i++){
      data.add("1000"+i);
    }
  }
  @Override
  public void onClick(View v) {
    // TODO Auto-generated method stub
    switch (v.getId()) {
    case R.id.click:
      //if(popup==null){
      /*TextView tv=new TextView(this);
      tv.setText("123243");*/
        list.setAdapter(new MyAdapter());
        popup=new PopupWindow(list, et.getWidth(), 500);
        popup.setFocusable(true);
        //点击屏幕以外的区域会关掉
        popup.setOutsideTouchable(true);
        popup.setBackgroundDrawable(new ColorDrawable());
       //显示在哪个控件的下面
        popup.showAsDropDown(et);
      // }else{
      //  popup=null;
       //}
       break;
    default:
      break;
    }
  }
  class MyAdapter extends BaseAdapter{
    @Override
    public int getCount() {
      // TODO Auto-generated method stub
      if(data!=null){
      return data.size();
      }else {
        return 0;
      }
    }
    @Override
    public Object getItem(int position) {
      // TODO Auto-generated method stub
      return null;
    }
    @Override
    public long getItemId(int position) {
      // TODO Auto-generated method stub
      return 0;
    }
    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
      // TODO Auto-generated method stub
      View view=View.inflate(MainActivity.this, R.layout.listview, null);
      TextView tv=(TextView) view.findViewById(R.id.tv);
      ImageView iv=(ImageView) view.findViewById(R.id.iv);
      text=data.get(position);
      tv.setText(text);
      iv.setOnClickListener(new OnClickListener() {
        @Override
        public void onClick(View v) {
          // TODO Auto-generated method stub
          data.remove(text);
          notifyDataSetChanged();
        }
      });
      return view;
    }
 }
}

listview布局:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  >
  <ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/user"/>
  <TextView
    android:id="@+id/tv"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginLeft="100dp"/>
  <ImageView
    android:id="@+id/iv"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:src="@drawable/delete"/>
</RelativeLayout>

附:完整实例代码点击此处本站下载

更多关于Android相关内容感兴趣的读者可查看本站专题:《Android开发入门与进阶教程》、《Android调试技巧与常见问题解决方法汇总》、《Android基本组件用法总结》、《Android视图View技巧总结》、《Android布局layout技巧总结》及《Android控件用法总结》

希望本文所述对大家Android程序设计有所帮助。

(0)

相关推荐

  • Android搜索框SearchView属性和用法详解

    SearchView简介 SearchView是Android原生的搜索框控件,它提供了一个用户界面,用于用户搜索查询. SearchView默认是展示一个search的icon,点击icon展开搜索框,如果你想让搜索框默认就展开,可以通过setIconifiedByDefault(false);实现. SearchView属性 SearchView使用 xml中定义SearchView: <?xml version="1.0" encoding="utf-8"

  • Android搜索框(SearchView)的功能和用法详解

    SearchView是搜索框组件,它可以让用户在文本框里输入文字,通过监听器取得用户的输入,当用户点击搜索时,监听器执行实际的搜索. 1.SearchView组件的常用方法如下: ①setIconifiedByDefault(boolean iconified) ===> 设置搜索框默认是否自动缩小为图标. ②setOnQueryTextListener(SearchView,OnQueryTextListener listener) ===> 为搜索框设置监听器 ③setSubmitButt

  • Android中如何实现清空搜索框的文字

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

  • android搜索框上下滑动变色效果

    搜索框上下滑动变透明度是现在APP中很常见的效果,先看看效果: 首先来看下布局骨架: <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

  • Android搜索框组件SearchView的基本使用方法

    SearchView是android系统中内置的一个搜索框组件,可以很方便在添加在用户界面之上,但是也带来了一些问题,那就是searchview的UI是固定的,定制起来会很麻烦,如果对SearchView的要求比较高,完全可以采用button和EditText自己实现.这里先简单的说说SearchView的使用: main.xml: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" x

  • Android 改变图标原有颜色和搜索框的实例代码

    图标改变颜色:Drawable的变色,让Android也能有iOS那么方便的图片色调转换,就像同一个图标,但是有多个地方使用,并且颜色不一样,就可以用这个方法了. 搜索框: 一般是EditText实现,本文 实现 TextView图片和文字居中,键盘搜索. 来看看效果图: 图标改变颜色:第一个界面的左边(二维码)和右边(更多)两个实现,我放进去的图片是黑色的,显示出来是白色的. 搜索框:第一个界面的图片和文字居中,还可以设置间距,第二个见面搜索设置键盘搜索按钮,点击搜索监听事件,清除内容的图标.

  • Android EditText搜索框实现图标居中

    类似这样EditText 搜索框,hiht 提示有一个icon并且text内容. 重写EditText : package mobi.truekey.weapp2.widget; import android.content.Context; import android.content.res.TypedArray; import android.graphics.Canvas; import android.graphics.Paint; import android.graphics.dr

  • Android SearchView搜索框组件的使用方法

    SearchView是搜索框组件,它可以让用户在文本框里输入文字,通过监听器取得用户的输入,当用户点击搜索时,监听器执行实际的搜索. 本文就为大家分享了SearchView搜索框组件的使用方法,供大家参考,具体内容如下 效果: 代码SearchActivity.java package com.jialianjia.bzw.activity; import android.os.Bundle; import android.widget.ArrayAdapter; import android.

  • Android顶部(toolbar)搜索框实现的实例详解

    Android顶部(toolbar)搜索框实现的实例详解 本文介绍两种SearchView的使用情况,一种是输入框和搜索结果不在一个activity中,另一种是在一个activity中. 首先编写toolbar的布局文件 toolbar中图标在menu文件下定义一个布局文件实现 示例代码: <menu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.

  • Android实现实时搜索框功能

    AutoCompleteTextView,自动完成文本框. 用于实现允许用户输入一定字符后,显示一个下拉菜单,供用户从中选择,当用户选择某个选项后,按用户选择自动填写该文本框. 该组件继承EditText,所以它支持EditText组件提供的属性,同时,该组件该支持如下功能. activity_main.xml <?xml version="1.0" encoding="utf-8"?> <android.support.constraint.Co

  • Android自定义View实现搜索框(SearchView)功能

    概述 在Android开发中,当系统数据项比较多时,常常会在app添加搜索功能,方便用户能快速获得需要的数据.搜索栏对于我们并不陌生,在许多app都能见到它,比如豌豆荚 在某些情况下,我们希望我们的自动补全信息可以不只是纯文本,还可以像豌豆荚这样,能显示相应的图片和其他数据信息,因此Android给我们提供的AutoCompleteTextView往往就不够用,在大多情况下我们都需要自己去实现搜索框. 分析 根据上面这张图,简单分析一下自定义搜索框的结构与功能,有 1. 搜索界面大致由三部门组成

  • Android搜索框通用版

    之前项目总会遇到很多搜索框类的功能,虽然不是很复杂,不过每次都要去自己处理数据,并且去处理搜索框的变化,写起来也比较麻烦,今天来做一个比较简单的通用搜索栏. 先看下效果图: 没什么特别的,只是今天要做的就是简单的把搜索框的内容封装一下. 一.分析功能 先考虑一下,搜索框一般都是由一个搜索图标(一般都是一个放大镜),一个输入框和一个清除按钮组成.然后会通过监听输入框的变化去处理清除按钮的显示和隐藏并且去过滤相关的数据.最后去刷新适配器,显示过滤后的数据.基本上搜索框的功能都大同小异. 有了上边的分

随机推荐