android:打造自定义searchView
16lz
2021-01-22
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 Editview中加小图标或者文字实现
- android 百度地图路线规划去掉节点图标
- 在Android主屏幕上删除启动器图标(就像Google Play一样)
- android未经检查的单选按钮已经检查过
- Android Toolbar返回按钮颜色修改
- Android实现桌面图标通知数量角标
- 在不同状态下使用两个图像切换按钮
- 如何让按钮共享android中对话框宽度的一半?
- 安卓,如何让两个按钮相邻,宽度相同