AndroidAndroid开发Android知识

Android——轻松打造搜索页

2016-11-30  本文已影响658人  Yankee1967

前言

项目需要,要求自定义一个searchview,其实Android自带的就有这个控件,而且做得很好,还有一些是通过修改样式来打造,笔者更喜欢把它抽出来成为一个控件,这样在以后的使用中会方便很多,于是在网上找了找资料,综合各大神的代码,给出自己的解决方案。有不准确的地方,欢迎各位指出,笔者加以改正,共同学习。
上效果图:

d18fbe8a-cdae-4cf3-a5de-91652e50e700.gif

1、这个搜索框控件的布局并不是很复杂,左上方那个搜索的小图片是个ImageView,中间是EditText,最右边的小垃圾桶是个ImageView,只是在未输入搜索内容的时候visibility为gone,而搜索框下方是个gridview,gridview放的是搜索的热词,显示搜索内容的是一个webview,gridview是盖在webview上面的,之前有小伙伴问我怎么盖在另外一个控件上,原理很简单,把gridview的xml布局代码写在webview的xml布局代码下方就行。。。(很简单但是很有效)
2、这种由几个控件组成的自定义控件首先要做的是写布局文件,布局文件没什么好说的,上代码:

<?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"

 >

 <LinearLayout

 android:orientation="horizontal"

 android:layout_width="match_parent"

 android:id="@+id/search_area"

 android:background="@drawable/rect_gray"

 android:layout_height="wrap_content">

 <ImageView

 android:layout_marginLeft="10dp"

 android:src="@android:drawable/ic_menu_search"

 android:id="@+id/search_iv_search"

 android:layout_gravity="left|center_vertical"

 android:layout_width="wrap_content"

 android:layout_height="wrap_content"/>

 <EditText

 android:id="@+id/search_et_input"

 android:layout_gravity="center_vertical"

 android:layout_margin="10dp"

 android:layout_width="0dp"

 android:layout_weight="1"

 android:layout_height="wrap_content"

 android:textSize="16sp"

 android:background="@null"

 android:imeOptions="actionSearch"

 android:inputType="text"

 android:textCursorDrawable="@null"

 android:hint="Google search"/>

 <ImageView

 android:visibility="gone"

 android:layout_marginRight="10dp"

 android:src="@android:drawable/ic_menu_delete"

 android:id="@+id/search_iv_delete"

 android:layout_gravity="right|center_vertical"

 android:layout_width="wrap_content"

 android:layout_height="wrap_content"/>

 </LinearLayout>

 <WebView

 android:layout_width="match_parent"

 android:layout_height="match_parent"

 android:layout_below="@id/search_area"

 android:id="@+id/search_wv_result"

 />

 <GridView

 android:layout_below="@id/search_area"

 android:background="@drawable/rect_gray"

 android:numColumns="2"

 android:id="@+id/search_lv_tips"

 android:layout_width="match_parent"

 android:layout_height="wrap_content">

 </GridView >

</RelativeLayout>

3、布局代码中就可以猜测到,我们将在一个LinearLayout或者一个RelativeLayout中去操作,我们让这个自定义控件继承自LinearLayout(当然也可以继承自RelativeLayout),这里可能需要频繁的调用开始搜索的代码,去做搜索onSearch()方法里的内容,还有就是每次搜索的时候都要隐藏键盘,
至于这个EditChangedListener,只是为了在在输入过程中动态的一些操作 ,笔者也是第一次使用TextWatcher。有gridview的地方就免不了adapter,通过外部设置给自定义控件一个adapter
直接上代码吧:

public class YankeeSearchView extends LinearLayout implements View.OnClickListener {
 private EditText etInput;

 private ImageView ivDelete;

 private ImageView ivSearch;

 private Context mContext;

 private GridView lvTips;

 private WebView wvSearch;

 private ArrayAdapter<String> mHintAdapter;

 private SearchViewListener mListener;

 public YankeeSearchView(Context context, AttributeSet attrs) {

 super(context, attrs);

 mContext = context;

 LayoutInflater.from(context).inflate(R.layout.search_layout, this);

 initViews();

 }

 private void initViews() {

 etInput = (EditText) findViewById(R.id.search_et_input);

 ivDelete = (ImageView) findViewById(R.id.search_iv_delete);

 ivSearch=(ImageView) findViewById(R.id.search_iv_search);

 lvTips = (GridView) findViewById(R.id.search_lv_tips);

 wvSearch= (WebView) findViewById(R.id.search_wv_result);

 wvSearch.setOnTouchListener(new OnTouchListener() {

 @Override

 public boolean onTouch(View v, MotionEvent event) {

 lvTips.setVisibility(GONE);

 return false;

 }

 });

 lvTips.setOnItemClickListener(new AdapterView.OnItemClickListener() {

 @Override

 public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {

 String text = lvTips.getAdapter().getItem(i).toString();

 etInput.setText(text);

 etInput.setSelection(text.length());

 lvTips.setVisibility(View.GONE);

 notifyStartSearching(text);

 }

 });

 ivDelete.setOnClickListener(this);

 ivSearch.setOnClickListener(this);

 etInput.addTextChangedListener(new EditChangedListener());

 etInput.setOnClickListener(this);

 etInput.setOnEditorActionListener(new TextView.OnEditorActionListener() {

 @Override

 public boolean onEditorAction(TextView textView, int actionId, KeyEvent keyEvent) {

 if (actionId == EditorInfo.IME_ACTION_SEARCH) {

 lvTips.setVisibility(GONE);

 notifyStartSearching(etInput.getText().toString());

 }

 return true;

 }

 });

 }

 private void notifyStartSearching(String text){

 if (mListener != null) {

 mListener.onSearch(etInput.getText().toString());

 }

 InputMethodManager imm = (InputMethodManager) mContext.getSystemService(Context.INPUT_METHOD_SERVICE);

 imm.toggleSoftInput(0, InputMethodManager.HIDE_NOT_ALWAYS);

 }

 public void setTipsHintAdapter(ArrayAdapter<String> adapter) {

 this.mHintAdapter = adapter;

 if (lvTips.getAdapter() == null) {

 lvTips.setAdapter(mHintAdapter);

 }

 }

 private class EditChangedListener implements TextWatcher {

 @Override

 public void beforeTextChanged(CharSequence charSequence, int i, int i2, int i3) {

 }

 @Override

 public void onTextChanged(CharSequence charSequence, int i, int i2, int i3) {

 if (!"".equals(charSequence.toString())) {

 ivDelete.setVisibility(VISIBLE);

 lvTips.setVisibility(VISIBLE);

 } else {

 ivDelete.setVisibility(GONE);

 if (mHintAdapter != null) {

 lvTips.setAdapter(mHintAdapter);

 }

 lvTips.setVisibility(GONE);

 }

 }

 @Override

 public void afterTextChanged(Editable editable) {

 }

 }

 @Override

 public void onClick(View view) {

 switch (view.getId()) {

 case R.id.search_et_input:

 lvTips.setVisibility(VISIBLE);

 break;

 case R.id.search_iv_delete:

 etInput.setText("");

 ivDelete.setVisibility(GONE);

 break;

 case R.id.search_iv_search:

 lvTips.setVisibility(GONE);

 notifyStartSearching(etInput.getText().toString());

 break;

 }

 }

 public void setSearchViewListener(SearchViewListener listener) {

 mListener = listener;

 }

 public interface SearchViewListener {

 void onSearch(String text);

 }

 public void setWebViewUrl(String url){

 if (url!=null){

 wvSearch.loadUrl(url);

 wvSearch.setWebViewClient(new WebViewClient() {

 @Override

 public boolean shouldOverrideUrlLoading(WebView view, String url) {

 view.loadUrl(url);

 return true;

 }

 });

 }

 }

}

4、代码里都是一些隐藏显示的操作,比较重要的是对外的接口,还有就是setWebViewUrl()方法,用来对输入内容展开搜索。构造函数里传入了三个参数,传入一个布局文件,如果要自定义item,可以写一个adapter,demo中为了简单,使用的是Android自带的只有一个textview的布局,而adapter使用的是ArrayAdapter<String>,再有就是通过简单修改代码就可以把gridview替换成ListView,笔者不操作了

5、至于调用,在activity_main布局文件中只要添加:

<com.yankee.yankeesearchview.YankeeSearchView

 android:id="@+id/main_search_layout"

 android:layout_width="match_parent"

 android:layout_height="wrap_content"/>

6、在activity中,通过给searchview设置listener复写onSearch()方法,在方法里操作,别忘了通过setTipsHintAdapter()方法设置adapter:

public class MainActivity extends AppCompatActivity{

 private YankeeSearchView searchView;

 private ArrayAdapter<String> hintAdapter;

 private List<String> hintData;

 private static int HINT_SIZE=6;

 @Override

 protected void onCreate(Bundle savedInstanceState) {

 super.onCreate(savedInstanceState);

 setContentView(R.layout.activity_main);

 initData();

 initView();

 }

 private void initView() {

 searchView = (YankeeSearchView) findViewById(R.id.main_search_layout);

 searchView.setSearchViewListener(new YankeeSearchView.SearchViewListener() {

 @Override

 public void onSearch(String text) {

 Toast.makeText(MainActivity.this, "Search Complete", Toast.LENGTH_SHORT).show();

 searchView.setWebViewUrl("https://www.baidu.com/baidu?ie=utf-8&wd="+text);

 }

 });

 searchView.setTipsHintAdapter(hintAdapter);

 }

 private void initData() {

 hintData = new ArrayList<>(HINT_SIZE);

 for (int i = 1; i <= HINT_SIZE; i++) {

 hintData.add("Rio Olympic Games");

 }

 hintAdapter = new ArrayAdapter<>(this, android.R.layout.simple_list_item_1, hintData);

 }

}
上一篇 下一篇

猜你喜欢

热点阅读