您的位置:首页 > 移动开发 > Android开发

android:打造自定义searchView

2016-07-15 14:36 519 查看

1、前言

在我们的安卓项目中,少不了搜索框的使用,虽然google为我们提供了searchView,但是无论是其使用还是样式的修改都非常困难。

本文提供一种自定义searchView的实现思路,在它的基础上再参照美工的设计图略加修改即可实现一个美观漂亮的searchView,省去使用官方原配带来的一系列烦恼。

与官方自带的相比,它有如下优点:

使用简单,完全的自定义view

样式定制化简单

提供搜索按钮的监听操作

容易修改扩充

效果图:



2、SimplerSeacherView的编写

SimplerSeacherView
继承自
EditTextView
,先将键盘的回车键改成搜索按钮,俩行代码搞定。

setSingleLine(true);
setImeOptions(EditorInfo.IME_ACTION_SEARCH);


注意,以上俩行代码缺一不可,必须设置单行显示。

设置左侧的搜索图标:

// 设置搜索图标
Drawable drawableLeft = getResources().getDrawable(R.drawable.search);
drawableLeft.setBounds(0, 0, drawableLeft.getMinimumWidth(),
drawableLeft.getMinimumHeight());
setCompoundDrawables(drawableLeft, null, null, null);

// 设置图标边距
mDrawblePadding = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,
mDrawblePadding, getContext().getResources().getDisplayMetrics());
setCompoundDrawablePadding(mDrawblePadding);


这里取个巧,直接通过设置drawableLeft实现左侧显示搜索图标的效果,接下来是设置图标与内容的距离,为了适配,将像素值
mDrawblePadding
转化为屏幕平度相关的dp值。

这样整个外观就实现了,接下来是搜索按钮的监听以及回调:

// 设置键盘按钮事件
setOnEditorActionListener(new OnEditorActionListener()
{
@Override
public boolean onEditorAction(TextView v, int actionId, KeyEvent event)
{
// 搜索键
if (actionId == EditorInfo.IME_ACTION_SEARCH)
{
// 隐藏软件盘
hideKeyBody();

if (mOnSearcherClickListener != null)
{
mOnSearcherClickListener.onSeacherClick(getText().toString().trim());
}
}
return false;
}
});


当用户点击键盘的搜索按钮时,进行监听处理,根据
actionId
判断用户点击的按钮,
EditorInfo.IME_ACTION_SEARCH
即是搜索按钮,然后通过监听事件
mOnSearcherClickListener
回调到外部执行业务代码。

贴上完整代码:

public class SimplerSeacherView extends EditText
{

private int mDrawblePadding = 6;
private OnSeacherClickListener mOnSearcherClickListener;

public SimplerSeacherView(Context context, AttributeSet attrs, int defStyle)
{
super(context, attrs, defStyle);

init();
}

public SimplerSeacherView(Context context, AttributeSet attrs)
{
super(context, attrs);

init();

// 设置键盘按钮事件
setOnEditorActionListener(new OnEditorActionListener()
{
@Override
public boolean onEditorAction(TextView v, int actionId, KeyEvent event)
{
// 搜索键
if (actionId == EditorInfo.IME_ACTION_SEARCH)
{
// 隐藏软件盘
hideKeyBody();

if (mOnSearcherClickListener != null)
{
mOnSearcherClickListener.onSeacherClick(getText().toString().trim());
}
}
return false;
}
});
}

protected void hideKeyBody()
{
InputMethodManager imm = (InputMethodManager) getContext().getSystemService(
Context.INPUT_METHOD_SERVICE);

imm.showSoftInput(this, 0);

}

public SimplerSeacherView(Context context)
{
this(context, null);
}

private void init()
{
setSingleLine(true);
setImeOptions(EditorInfo.IME_ACTION_SEARCH);

//设置边框
setBackgroundResource(R.drawable.shap_search_bg);

// 设置搜索图标
Drawable drawableLeft = getResources().getDrawable(R.drawable.search);
drawableLeft.setBounds(0, 0, drawableLeft.getMinimumWidth(),
drawableLeft.getMinimumHeight());
setCompoundDrawables(drawableLeft, null, null, null);

// 设置图标边距
mDrawblePadding = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,
mDrawblePadding, getContext().getResources().getDisplayMetrics());
setCompoundDrawablePadding(mDrawblePadding);
}

public void setOnSeacherClickListener(OnSeacherClickListener onSearcherClickListener)
{
this.mOnSearcherClickListener = onSearcherClickListener;
}

public interface OnSeacherClickListener
{

/**
* 搜素点击监听
* @author 漆可
* @date 2016-7-19 下午8:49:28
* @param content 搜素类容
*/
void onSeacherClick(String content);
}
}


3、使用

布局文件添加:

<com.example.seacherview.SimplerSeacherView
android:id="@+id/searcher"
android:layout_width="match_parent"
android:layout_height="30dp"
android:layout_marginTop="10dp"
android:layout_marginRight="16dp"
android:gravity="center_vertical"
android:layout_marginLeft="16dp"
android:textSize="14sp"
android:textCursorDrawable="@null"
android:paddingLeft="6dp"
android:paddingRight="6dp"
android:hint="请输入搜素类容" />


activity获取与监听设置:

@Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

SimplerSeacherView seacherView = (SimplerSeacherView) findViewById(R.id.searcher);

seacherView.setOnSeacherClickListener(this);
}

@Override
public void onSeacherClick(String content)
{
Toast.makeText(this, content, 1).show();
}


4、完整代码

最后复制完整demo下载地址:http://download.csdn.net/detail/q649381130/9580595
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  android searchView