Fragment实现搜索界面(搜索历史、搜索提示词、搜索结果)切换

1月23日修改:搜索历史界面可以清除搜索历史;关键词联想界面联想词提示


本次设计需求是实现一个搜索界面:

  1. 进入搜索界面,搜索框下方显示搜索历史,可以编辑搜索历史;
  2. 点击搜索框输入关键词后,会自动根据关键词联想呈现包含输入的列表;
  3. 点击搜索框,输入关键后,搜索框右侧出现“x”,点击清除当前全部搜索词;
  4. 搜索框右侧有搜索按钮,点击显示搜索结果。
    1月23日新增功能
  5. 搜索历史界面的搜索历史可以点击删除
  6. 搜索提示词点击进行搜索(关键词高亮功能待完善)
    界面如下:


    搜索历史
    搜索提示词

    博主的大体思路是利用fragment实现三个界面,根据activity中输入框内的文字变化来判断切换界面。
    主activity的输入框是我自定义的一个ClearEditText,输入文字后会在右侧显示"X",点击可以清除文字。
    搜索历史界面FragmentSearchHistory中有三个空间,分别为一个textview,显示“历史纪录”,一个button,显示“全部清除”,一个listview,显示搜索记录。通过点击“全部清除”和每条搜索记录右侧的“x”,可以清除搜索记录。
    联想词提示界面FragmentSearchKeyWords布局就是一个listview,通过点击每个item,可以自动填充到输入框,并进行搜索。
    搜索界面界面FragmentSearchResult目前只有一个listview,数据是固定的。


SearchPage
搜索界面,包含三个fragment,通过clearEditText.addTextChangedListener监听输入框状态,根据输入框状态来显示fragment,这里切换fragment用的replace方式,每次切换都会重新加载fragment。
代码如下:

package com.example.zyk97.infotest.Activity;

import android.os.Bundle;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.support.v7.app.AppCompatActivity;
import android.text.Editable;
import android.text.TextWatcher;
import android.view.View;
import android.widget.Button;

import com.example.zyk97.infotest.Fragment.FragmentSearchHistory;
import com.example.zyk97.infotest.Fragment.FragmentSearchKeyWords;
import com.example.zyk97.infotest.Fragment.FragmentSearchResult;
import com.example.zyk97.infotest.R;
import com.example.zyk97.infotest.Update.UpdateSearch;
import com.example.zyk97.infotest.Utils.ClearEditText;

import java.util.ArrayList;
import java.util.List;

public class SearchPage extends AppCompatActivity {
    private List updateSearchList = new ArrayList<>();
    private Button back;//返回按钮,清楚文字按钮
    private ClearEditText clearEditText;//搜索输入框
    private Button searchconfirm;
    private FragmentSearchHistory f1;//搜索历史
    private FragmentSearchKeyWords f2;//关键字联想
    private FragmentSearchResult f3;//搜索结果

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.searchpage);
        initView();
        backToPre();
        initFragment();
    }

    public void initView() {
        clearEditText = findViewById(R.id.input);
        searchconfirm = findViewById(R.id.confirm);
    }

    private void initFragment() {
        f1 = new FragmentSearchHistory();
        f2 = new FragmentSearchKeyWords();
        f3 = new FragmentSearchResult();

        //开启事务
        FragmentManager fragmentManager = getSupportFragmentManager();
        FragmentTransaction ft = fragmentManager.beginTransaction();
        ft.add(R.id.content, f1);
//        ft.add(R.id.content,f2).hide(f2);
//        ft.add(R.id.content,f3).hide(f3);
        ft.commit();
        showKeyWords();
        showResult();
    }

    //判断显示哪一个Fragment
    private void showKeyWords() {

        clearEditText.addTextChangedListener(new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence s, int start, int count, int after) {

            }

            @Override
            public void onTextChanged(CharSequence s, int start, int before, int count) {
                FragmentManager fragmentManager = getSupportFragmentManager();
                FragmentTransaction ft = fragmentManager.beginTransaction();
                if (clearEditText.getText().toString().length() > 0) {
                    ft.replace(R.id.content, f2);//输入框有文字,显示联想词提示界面
                } else {
                    ft.replace(R.id.content, f1);//输入框无文字,显示搜索历史界面
                }
                ft.commit();
            }

            @Override
            public void afterTextChanged(Editable s) {

            }
        });
    }

    //监听搜索按钮,点击显示搜索结果
    private void showResult() {

        searchconfirm.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                FragmentManager fragmentManager = getSupportFragmentManager();
                FragmentTransaction ft = fragmentManager.beginTransaction();
                ft.replace(R.id.content, f3);
                ft.commit();
            }
        });
    }

    //返回键
    private void backToPre() {
        back = findViewById(R.id.back);
        back.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                finish();
            }
        });
    }
}

FragmentSearchHistory
界面,要注意到,实现点击listview每个item中的不同控件,响应不同事件,这里每个item是由一个textview(搜索历史)+button(x)组成,点击“x”可以删除搜索历史。

package com.example.zyk97.infotest.Fragment;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.ListView;
import android.widget.TextView;

import com.example.zyk97.infotest.Adapter.SearchHistoryAdapter;
import com.example.zyk97.infotest.R;
import com.example.zyk97.infotest.Update.UpdateSH;

import java.util.ArrayList;
import java.util.List;

import butterknife.BindView;
import butterknife.ButterKnife;
import butterknife.Unbinder;

public class FragmentSearchHistory extends Fragment implements SearchHistoryAdapter.clickinview {

    protected Button button;
    protected TextView textView;
    protected ListView listView;
    protected TextView allDelete;
    protected List list = new ArrayList<>();
    Unbinder unbinder;

    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.frag_searchhistory, container, false);
        initView(view);
        list = initinfo();
        SearchHistoryAdapter adapter = new SearchHistoryAdapter(getActivity(), R.layout.searchhistoryitem, list, FragmentSearchHistory.this);
        listView.setAdapter(adapter);
        unbinder = ButterKnife.bind(this, view);

        motionEvent();
        return view;
    }

    private void motionEvent() {
        allDelete.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                list.clear();
                SearchHistoryAdapter adapter = new SearchHistoryAdapter(getActivity(), R.layout.searchhistoryitem, list, FragmentSearchHistory.this);
                listView.setAdapter(adapter);
            }
        });
    }

    private void initView(View view) {
        listView = view.findViewById(R.id.list_search_history);
        button = view.findViewById(R.id.sh_delete);
        textView = view.findViewById(R.id.sh_search);
        allDelete=view.findViewById(R.id.all_delete);
    }

    @Override
    public void click_delete(View view) {
        int values = (int) view.getTag();
        UpdateSH updateSH = list.get(values);
        list.remove(updateSH);
        SearchHistoryAdapter adapter = new SearchHistoryAdapter(getActivity(), R.layout.searchhistoryitem, list, FragmentSearchHistory.this);
        listView.setAdapter(adapter);

    }

    @Override
    public void click_search(View view) {
        int values = (int) view.getTag();
    }

    //数据集
    public List initinfo() {
        List updateSearchHistoryList = new ArrayList();
        UpdateSH one = new UpdateSH("海淀五大时间");
        UpdateSH two = new UpdateSH("菜单是怎么炼成的");
        updateSearchHistoryList.add(one);
        updateSearchHistoryList.add(two);
        return updateSearchHistoryList;
    }

    @Override
    public void onDestroyView() {
        super.onDestroyView();
        unbinder.unbind();
    }
}

SearchHistoryAdapter
是搜索历史listview的适配器,在其中定义了一个接口,用于实现点击item中不同控件相应不同事件。

package com.example.zyk97.infotest.Adapter;

import android.content.Context;
import android.support.v7.widget.LinearLayoutCompat;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.BaseAdapter;
import android.widget.Button;
import android.widget.LinearLayout;
import android.widget.TextView;

import com.example.zyk97.infotest.R;
import com.example.zyk97.infotest.Update.UpdateSH;

import org.w3c.dom.Text;

import java.util.List;

import butterknife.OnClick;

public class SearchHistoryAdapter extends BaseAdapter {
    Context context;
    int layout;
    List list;
    clickinview clickinview;

    public SearchHistoryAdapter(Context context, int layout, List list,clickinview clickinview){
        this.context=context;
        this.layout=layout;
        this.list=list;
        this.clickinview=clickinview;
    }
    public interface clickinview
    {
         void click_delete(View view);
         void click_search(View view);
    }

    @Override
    public  int getCount(){
        return  list.size();
    }

    @Override
    public Object getItem(int position){
        return list.get(position);
    }

    @Override
    public long getItemId(int position){
        return position;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent){
        convertView= LayoutInflater.from(context).inflate(layout,null);
        Button button=convertView.findViewById(R.id.sh_delete);
        TextView textView=convertView.findViewById(R.id.sh_search);
        button.setTag(position);
        textView.setText(list.get(position).getText());
        textView.setTag(position);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                clickinview.click_delete(v);
            }
        });
        textView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                clickinview.click_search(v);
            }
        });
        return convertView;
    }
}

FragmentSearchKeyWords
界面要住的是动态刷新数据,这里博主是通过final ClearEditText input = getActivity().findViewById(R.id.input);获取activity中的输入框,然后根据输入框的文字状态来动态刷新数据。
博主实现这个功能时遇到一个坑:第一次输入关键词时,listview不显示,但之后可以正常响应。经过仔细研究发现,是因为第一次输入文字时,是activity中输入框监听方法的响应了事件,但是FragmentSearchKeyWords的监听方法没有响应,但切换到FragmentSearchKeyWords界面后,获取的输入框监听方法正常工作。所以博主在frgament的onCreateView方法中,获取第一次输入的关键词,并根据这个关键词刷新数据,这样这个功能目前完成无bug。
这里有一个值得注意的地方是从一个fragment跳转到另一个fragment的实现:

                //从搜索联想词提示界面跳转到搜索历史界面
                FragmentSearchResult fragmentSearchResult=new FragmentSearchResult();
                FragmentManager fragmentManager=getFragmentManager();
                FragmentTransaction ft=fragmentManager.beginTransaction();
                ft.replace(R.id.content,fragmentSearchResult);
                ft.commit();

下面是代码:

package com.example.zyk97.infotest.Fragment;

import android.content.Context;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.text.Editable;
import android.text.TextWatcher;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.ListView;

import com.example.zyk97.infotest.Adapter.SearchKeyWordAdapter;
import com.example.zyk97.infotest.R;
import com.example.zyk97.infotest.Utils.ClearEditText;
import com.example.zyk97.infotest.Utils.KeyWordMatch;

import java.util.ArrayList;
import java.util.List;

public class FragmentSearchKeyWords extends Fragment {

    final String TAG = "cheat";
    private ListView listView;
    private List list = new ArrayList<>();//后台数据集
    private List matchList = new ArrayList<>();//显示的关联词数据集

    @Override
    public void onAttach(Context context) {
        super.onAttach(context);
    }

    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.frag_searchkeywords, container, false);


        initlist();//从后台获取数据集
        listView = view.findViewById(R.id.list_search_key);
        SearchKeyWordAdapter adapter = new SearchKeyWordAdapter(getActivity(), R.layout.searchkeyworditem, matchList);
        listView.setAdapter(adapter);


        /*首次页面跳转时判断应显示的提示次
        因为input监听事件第一次不触发
         */
        final ClearEditText input = getActivity().findViewById(R.id.input);
        if(input.getText().toString().length()>0) {
            KeyWordMatch keyWordMatch = new KeyWordMatch();
            matchList.clear();
            matchList.addAll(keyWordMatch.getHighlightMatch(list, input.getText().toString()));
        }

        changeMatchList(view);
        adapter.notifyDataSetChanged();
        return view;
    }

    private void changeMatchList(View view) {
        final ClearEditText input = getActivity().findViewById(R.id.input);
        input.addTextChangedListener(new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence s, int start, int count, int after) {

            }

            @Override
            public void onTextChanged(CharSequence s, int start, int before, int count) {
                if (s.toString().length() > 0) {
                    KeyWordMatch keyWordMatch = new KeyWordMatch();
                    matchList.clear();
                    matchList.addAll(keyWordMatch.getHighlightMatch(list, s.toString())); SearchKeyWordAdapter adapter = new SearchKeyWordAdapter(getActivity(), R.layout.searchkeyworditem, matchList);
                    listView.setAdapter(adapter);
                }
            }

            @Override
            public void afterTextChanged(Editable s) {

            }
        });

        listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView parent, View view, int position, long id) {
                ClearEditText input = getActivity().findViewById(R.id.input);
//                Button confirm = getActivity().findViewById(R.id.confirm);
                input.setText(listView.getAdapter().getItem(position).toString());
                FragmentSearchResult fragmentSearchResult=new FragmentSearchResult();
                FragmentManager fragmentManager=getFragmentManager();
                FragmentTransaction ft=fragmentManager.beginTransaction();
                ft.replace(R.id.content,fragmentSearchResult);
                ft.commit();
            }
        });
    }

    private void initlist() {
        /*当输入框为空时,fragment会变为搜索历史fragment,再次输入文字,
        又会变成联想词fragment,因为使用了replace,所以会重新加载,所以
        每次都要清空list,再重新添加
        */
        list.clear();
        list.add("海尔");
        list.add("格力");
        list.add("美的");
        list.add("讯飞");
        list.add("大疆");
        list.add("奎格");
    }
}

SearchKeyWordAdapter
是搜索联想词界面的listview的适配器,博主为了实现关键词高亮功能,准备用Html符号来改变关键词颜色。在给listview加载数据时,使用searchSKW.setText(Html.fromHtml(updateSKW,1));。在判断显示的联想词时,在判断算法中,给符合要求的联想词中的关键字前后加上keyword,以此实现关键词高亮。目前关键词高亮功能还有bug(只能亮一个字;点击提示词后,显示在输入框的联想词带有html符号)。
代码如下:


import android.content.Context;
import android.text.Html;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.TextView;

import com.example.zyk97.infotest.R;

import java.util.List;

public class SearchKeyWordAdapter extends ArrayAdapter {

    private final int resourcedId;

    public SearchKeyWordAdapter(Context context, int textViewResourcedId, List objects) {
        super(context, textViewResourcedId, objects);
        resourcedId = textViewResourcedId;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        String updateSKW = (String) getItem(position);
        View view = LayoutInflater.from(getContext()).inflate(resourcedId, null);

        TextView searchSKW = view.findViewById(R.id.searchkeyword_item);
        //通过html格式来设置字体颜色
        searchSKW.setText(Html.fromHtml(updateSKW,1));
        return view;
    }
}

KeyWordMatch
判断算法如下:

package com.example.zyk97.infotest.Utils;

import java.util.ArrayList;
import java.util.List;

public class KeyWordMatch {
    public void KeyEordMatch() {
    }

    ;

    /**
     * @param list 主串数组list
     * @param sub  字串
     * @return 返回一个匹配完成的数组list
     */
    public List getMatch(List list, String sub) {
        List matchList = new ArrayList<>();
        for (int i = 0; i  getHighlightMatch(List list, String sub) {
        StringBuilder sb;
        String s;
        List matchList = new ArrayList<>();
        for (int i = 0; i ");
                sb.insert(s.indexOf(sub)+23,"");//24为的长度
                s=sb.toString();
                matchList.add(s);
            }
        }
        return matchList;
    }
}

FragmentSearchHistory
搜索历史界面代码很简单,就是现实一个listview:

package com.example.zyk97.infotest.Fragment;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.ListView;
import android.widget.TextView;

import com.example.zyk97.infotest.Adapter.SearchHistoryAdapter;
import com.example.zyk97.infotest.R;
import com.example.zyk97.infotest.Update.UpdateSH;

import java.util.ArrayList;
import java.util.List;

import butterknife.BindView;
import butterknife.ButterKnife;
import butterknife.Unbinder;

public class FragmentSearchHistory extends Fragment implements SearchHistoryAdapter.clickinview {

    protected Button button;
    protected TextView textView;
    protected ListView listView;
    protected TextView allDelete;
    protected List list = new ArrayList<>();
    Unbinder unbinder;

    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.frag_searchhistory, container, false);
        initView(view);
        list = initinfo();
        SearchHistoryAdapter adapter = new SearchHistoryAdapter(getActivity(), R.layout.searchhistoryitem, list, FragmentSearchHistory.this);
        listView.setAdapter(adapter);
        unbinder = ButterKnife.bind(this, view);

        motionEvent();
        return view;
    }

    private void motionEvent() {
        allDelete.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                list.clear();
                SearchHistoryAdapter adapter = new SearchHistoryAdapter(getActivity(), R.layout.searchhistoryitem, list, FragmentSearchHistory.this);
                listView.setAdapter(adapter);
            }
        });
    }

    private void initView(View view) {
        listView = view.findViewById(R.id.list_search_history);
        button = view.findViewById(R.id.sh_delete);
        textView = view.findViewById(R.id.sh_search);
        allDelete=view.findViewById(R.id.all_delete);
    }

    @Override
    public void click_delete(View view) {
        int values = (int) view.getTag();
        UpdateSH updateSH = list.get(values);
        list.remove(updateSH);
        SearchHistoryAdapter adapter = new SearchHistoryAdapter(getActivity(), R.layout.searchhistoryitem, list, FragmentSearchHistory.this);
        listView.setAdapter(adapter);

    }

    @Override
    public void click_search(View view) {
        int values = (int) view.getTag();
    }

    //数据集
    public List initinfo() {
        List updateSearchHistoryList = new ArrayList();
        UpdateSH one = new UpdateSH("海淀五大时间");
        UpdateSH two = new UpdateSH("菜单是怎么炼成的");
        updateSearchHistoryList.add(one);
        updateSearchHistoryList.add(two);
        return updateSearchHistoryList;
    }

    @Override
    public void onDestroyView() {
        super.onDestroyView();
        unbinder.unbind();
    }
}

SearchAdapter
搜索历史界面的适配器:

package com.example.zyk97.infotest.Adapter;

import android.content.Context;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.TextView;

import com.example.zyk97.infotest.R;
import com.example.zyk97.infotest.Update.UpdateSearch;

import java.util.List;

public class SearchAdapter extends ArrayAdapter {
    private final int resourceId;

    public SearchAdapter(Context context, int textViewResourceId, List objects) {
        super(context, textViewResourceId, objects);
        resourceId = textViewResourceId;
    }

    @Override
    public View getView(int position, @Nullable View convertView, @NonNull ViewGroup parent) {
        UpdateSearch updateSearch = (UpdateSearch) getItem(position);
        View view = LayoutInflater.from(getContext()).inflate(resourceId, null);

        TextView searchResult = view.findViewById(R.id.search_item);
        searchResult.setText(updateSearch.getSearch());
        return view;
    }
}

以上就是全部的代码,下面给出相应的布局文件:
searchpage.xml




    

        

frag_searchhistory.xml



    
    
    
        
    
        

    

searchhistoryitem.xml




    

    

frag_searchkeywords.xml



    

        

    

searchkeyworditem.xml




    

frag_searchresult.xml


    

        

    

searchitem.xml




    

以上就是我实现搜索界面的所有代码,这次搜索界面还有很多需求,下次实现后,再来补
本文样例完整代码InfoTest
本文参考:

  • 《Android输入框中加入清除按钮》,阳春面
  • 《Listview列表的内部点击事件使用》,weixin_39028072
  • 《从一个Fragment跳转到另一个Fragment
    》,我要一直往前走
  • 《Android 一个TextView中设置文字不同字体大小和颜色的最完整方法
    》,qq_32320807

你可能感兴趣的:(Fragment实现搜索界面(搜索历史、搜索提示词、搜索结果)切换)