自动填充文本框,突出显示建议列表中的键入字符

时间:2013-02-27 18:04:32

标签: android android-listview android-ui autocompletetextview

我一直致力于AutoCompleteTextView。当我们输入时,我能够在下拉列表中获得建议和所有建议。

So far

我的问题是:我们可以在建议下拉列表中突出显示已键入的字符吗?

4 个答案:

答案 0 :(得分:13)

我已经实现了这项功能。解决方案如下:

AutoCompleteAdapter.java

public class AutoCompleteAdapter extends ArrayAdapter<String> implements
        Filterable {

    private ArrayList<String> fullList;
    private ArrayList<String> mOriginalValues;
    private ArrayFilter mFilter;
    LayoutInflater inflater;
    String text = "";

    public AutoCompleteAdapter(Context context, int resource,
            int textViewResourceId, List<String> objects) {

        super(context, resource, textViewResourceId, objects);
        fullList = (ArrayList<String>) objects;
        mOriginalValues = new ArrayList<String>(fullList);
        inflater = LayoutInflater.from(context);

    }

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

    @Override
    public String getItem(int position) {
        return fullList.get(position);
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        View view = convertView;
        // tvViewResourceId = (TextView) view.findViewById(android.R.id.text1);
        String item = getItem(position);
        Log.d("item", "" + item);
        if (convertView == null) {
            convertView = view = inflater.inflate(
                    android.R.layout.simple_dropdown_item_1line, null);
        }
        // Lookup view for data population
        TextView myTv = (TextView) convertView.findViewById(android.R.id.text1);
        myTv.setText(highlight(text, item));
        return view;
    }

    @Override
    public Filter getFilter() {
        if (mFilter == null) {
            mFilter = new ArrayFilter();
        }
        return mFilter;
    }

    private class ArrayFilter extends Filter {
        private Object lock;

        @Override
        protected FilterResults performFiltering(CharSequence prefix) {
            FilterResults results = new FilterResults();
            if (prefix != null) {
                text = prefix.toString();
            }
            if (mOriginalValues == null) {
                synchronized (lock) {
                    mOriginalValues = new ArrayList<String>(fullList);
                }
            }

            if (prefix == null || prefix.length() == 0) {
                synchronized (lock) {
                    ArrayList<String> list = new ArrayList<String>(
                            mOriginalValues);
                    results.values = list;
                    results.count = list.size();
                }
            } else {
                final String prefixString = prefix.toString().toLowerCase();
                ArrayList<String> values = mOriginalValues;
                int count = values.size();

                ArrayList<String> newValues = new ArrayList<String>(count);

                for (int i = 0; i < count; i++) {
                    String item = values.get(i);
                    if (item.toLowerCase().contains(prefixString)) {
                        newValues.add(item);
                    }

                }

                results.values = newValues;
                results.count = newValues.size();
            }

            return results;
        }

        @SuppressWarnings("unchecked")
        @Override
        protected void publishResults(CharSequence constraint,
                FilterResults results) {

            if (results.values != null) {
                fullList = (ArrayList<String>) results.values;
            } else {
                fullList = new ArrayList<String>();
            }
            if (results.count > 0) {
                notifyDataSetChanged();
            } else {
                notifyDataSetInvalidated();
            }
        }

    }

    public static CharSequence highlight(String search, String originalText) {
        // ignore case and accents
        // the same thing should have been done for the search text
        String normalizedText = Normalizer
                .normalize(originalText, Normalizer.Form.NFD)
                .replaceAll("\\p{InCombiningDiacriticalMarks}+", "")
                .toLowerCase(Locale.ENGLISH);

        int start = normalizedText.indexOf(search.toLowerCase(Locale.ENGLISH));
        if (start < 0) {
            // not found, nothing to to
            return originalText;
        } else {
            // highlight each appearance in the original text
            // while searching in normalized text
            Spannable highlighted = new SpannableString(originalText);
            while (start >= 0) {
                int spanStart = Math.min(start, originalText.length());
                int spanEnd = Math.min(start + search.length(),
                        originalText.length());

                highlighted.setSpan(new ForegroundColorSpan(Color.BLUE),
                        spanStart, spanEnd, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);

                start = normalizedText.indexOf(search, spanEnd);
            }

            return highlighted;
        }
    }
}

MainActivity.java

public class MainActivity extends Activity {

    String[] languages = { "C", "C++", "Java", "C#", "PHP", "JavaScript",
            "jQuery", "AJAX", "JSON" };

    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);


        List<String> wordList = new ArrayList<String>(); 
        Collections.addAll(wordList, languages); 
        AutoCompleteAdapter adapter = new AutoCompleteAdapter(this,
                android.R.layout.simple_dropdown_item_1line,
                android.R.id.text1,wordList);
        AutoCompleteTextView acTextView = (AutoCompleteTextView) findViewById(R.id.languages);
        acTextView.setThreshold(1);
        acTextView.setAdapter(adapter);
    }
}

像魅力一样工作!

享受!

答案 1 :(得分:2)

我认为应该可以,只要你知道用户最后输入的字符的索引/索引。然后,您可以使用SpannableStringBuilder并设置ForegroundColorSpanBackgroundColorSpan,以便为角色提供突出显示的外观。

这个想法看起来有点像这样:

// start & end of the highlight
int start = ...;
int end = ...;
SpannableStringBuilder builder = new SpannableStringBuilder(suggestionText);
// set foreground color (text color) - optional, you may not want to change the text color too
builder.setSpan(new ForegroundColorSpan(Color.RED), start, end, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE); 
// set background color
builder.setSpan(new BackgroundColorSpan(Color.YELLOW), start, end, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
// set result to AutoCompleteTextView
autocompleteTextview.setText(builder);

请注意,只要您不键入其他字符,“加亮”就会保留。例如,您可能希望删除突出显示用户更改AutoCompleteTextView中的光标位置,但我会将其留给您。

答案 2 :(得分:1)

我知道回答这个问题已经很晚了,但是当我个人努力寻找答案时,最后我自己写了(借助@MH.ofcourse的答案),所以这里是:

首先,您必须创建一个Custom ArrayAdapter:

public class AdapterAustocomplete extends ArrayAdapter<String> {

private static final String TAG = "AdapterAustocomplete";
String q = "";

public AdapterAustocomplete(Context context, int resource, List objects) {
    super(context, resource, objects);
}


@Override
public View getView(int position, View convertView, ViewGroup parent) {


    String item = getItem(position);
    // Check if an existing view is being reused, otherwise inflate the view
    if (convertView == null) {
        convertView = 
   // I'll use a custom view for each Item , this way I can customize it also!
  G.inflater.from(getContext()).inflate(R.layout.textview_autocomplete, parent, false);

    }
    // Lookup view for data population
    TextView myTv = (TextView) convertView.findViewById(R.id.txt_autocomplete);

    int start = item.indexOf(q);
    int end = q.length()+start;
    SpannableStringBuilder builder = new SpannableStringBuilder(item);

    builder.setSpan(new ForegroundColorSpan(Color.RED), start, end, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);


    myTv.setText(builder);
    return convertView;
}

public void setQ(String q) {
    this.q = q;
}
}

在代码中,您要为AutoCompleteTextView设置适配器;

   AutoCompleteTextView myAutoComplete = findViewById(its_id);
   AdapterAustocomplete adapter_autoComplete = new AdapterAustocomplete(getActivity(), 0, items); // items is an arrayList of Strings
  adapter_autoComplete.setQ(q);
  myAutoComplete.setAdapter(adapter_autoComplete);

答案 3 :(得分:0)

感谢vadher jitendra,我写了一样的东西,并修复了一些错误。

  1. 将下拉式布局更改为拥有。

  2. 添加了在AutoCompleteTextView内单击时显示完整列表的功能。

  3. 修复了显示时冻结列表的错误(在highlight中添加了对空字符串的检查)。

row_dropdown.xml(项目布局):

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/text1"
    style="?android:attr/dropDownItemStyle"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="10dp"
    android:layout_marginRight="10dp"
    android:ellipsize="marquee"
    android:paddingTop="8dp"
    android:paddingBottom="8dp"
    android:singleLine="true"
    android:textColor="#333333"
    android:textSize="15sp"
    tools:text="text"
    tools:textAppearance="?android:attr/textAppearanceLargePopupMenu" />

要在键入时过滤列表,我们应该实现ArrayAdapter。它取决于项目(T类)。您以后可以使用AutoCompleteAdapter<String>或您喜欢的任何数据类。

AutoCompleteAdapter:

import android.content.Context;
import android.graphics.Typeface;
import android.text.Spannable;
import android.text.SpannableString;
import android.text.style.StyleSpan;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.Filter;
import android.widget.Filterable;
import android.widget.TextView;

import androidx.annotation.IdRes;
import androidx.annotation.LayoutRes;
import androidx.annotation.NonNull;
import androidx.annotation.Nullable;

import java.text.Normalizer;
import java.util.ArrayList;
import java.util.List;
import java.util.Locale;

public class AutoCompleteAdapter<T> extends ArrayAdapter<T> implements Filterable {

    private Context context;
    @LayoutRes
    private int layoutRes;
    @IdRes
    private int textViewResId;
    private ArrayList<T> fullList;
    private ArrayList<T> originalValues;
    private ArrayFilter filter;
    private LayoutInflater inflater;
    private String query = "";

    public AutoCompleteAdapter(@NonNull Context context, @LayoutRes int resource, @IdRes int textViewResourceId, @NonNull List<T> objects) {
        super(context, resource, textViewResourceId, objects);
        this.context = context;
        layoutRes = resource;
        textViewResId = textViewResourceId;
        fullList = (ArrayList<T>) objects;
        originalValues = new ArrayList<>(fullList);
        inflater = LayoutInflater.from(context);
    }

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

    @Override
    public T getItem(int position) {
        return fullList.get(position);
    }

    /**
     * You can use either
     * vadher jitendra method (getView)
     * or get the method from ArrayAdapter.java.
     */
//    @NotNull
//    @Override
//    public View getView(int position, View convertView, ViewGroup parent) {
//        View view = convertView;
//        T item = getItem(position);
//        Log.d("item", "" + item);
//        if (convertView == null) {
//            convertView = view = inflater.inflate(layoutRes, null);
//        }
//        // Lookup view for data population
//        TextView myTv = convertView.findViewById(textViewResId);
//        myTv.setText(highlight(query, item));
//        return view;
//    }
    @Override
    public @NonNull
    View getView(int position, @Nullable View convertView, @NonNull ViewGroup parent) {
        return createViewFromResource(inflater, position, convertView, parent, layoutRes);
    }

    private @NonNull
    View createViewFromResource(@NonNull LayoutInflater inflater, int position,
                                @Nullable View convertView, @NonNull ViewGroup parent, int resource) {
        final View view;
        final TextView text;

        if (convertView == null) {
            view = inflater.inflate(resource, parent, false);
        } else {
            view = convertView;
        }

        try {
            if (textViewResId == 0) {
                //  If no custom field is assigned, assume the whole resource is a TextView
                text = (TextView) view;
            } else {
                //  Otherwise, find the TextView field within the layout
                text = view.findViewById(textViewResId);

                if (text == null) {
                    throw new RuntimeException("Failed to find view with ID "
                            + context.getResources().getResourceName(textViewResId)
                            + " in item layout");
                }
            }
        } catch (ClassCastException e) {
            Log.e("ArrayAdapter", "You must supply a resource ID for a TextView");
            throw new IllegalStateException(
                    "ArrayAdapter requires the resource ID to be a TextView", e);
        }

        final T item = getItem(position);
        text.setText(highlight(query, item.toString()));
//        if (item instanceof CharSequence) {
//            text.setText(highlight(query, (CharSequence) item));
//        } else {
//            text.setText(item.toString());
//        }

        return view;
    }

    @Override
    public @NonNull
    Filter getFilter() {
        if (filter == null) {
            filter = new ArrayFilter();
        }
        return filter;
    }

    private class ArrayFilter extends Filter {
        private final Object lock = new Object();

        @Override
        protected FilterResults performFiltering(CharSequence prefix) {
            FilterResults results = new FilterResults();
            if (prefix == null) {
                query = "";
            } else {
                query = prefix.toString();
            }
            if (originalValues == null) {
                synchronized (lock) {
                    originalValues = new ArrayList<>(fullList);
                }
            }

            if (prefix == null || prefix.length() == 0) {
                synchronized (lock) {
                    ArrayList<T> list = new ArrayList<>(originalValues);
                    results.values = list;
                    results.count = list.size();
                }
            } else {
                final String prefixString = prefix.toString().toLowerCase();
                ArrayList<T> values = originalValues;
                int count = values.size();

                ArrayList<T> newValues = new ArrayList<>(count);

                for (int i = 0; i < count; i++) {
                    T item = values.get(i);
                    if (item.toString().toLowerCase().contains(prefixString)) {
                        newValues.add(item);
                    }

                }

                results.values = newValues;
                results.count = newValues.size();
            }

            return results;
        }

        @SuppressWarnings("unchecked")
        @Override
        protected void publishResults(CharSequence constraint, FilterResults results) {
            if (results.values != null) {
                fullList = (ArrayList<T>) results.values;
            } else {
                fullList = new ArrayList<>();
            }
            if (results.count > 0) {
                notifyDataSetChanged();
            } else {
                notifyDataSetInvalidated();
            }
        }

    }

    private static CharSequence highlight(@NonNull String search, @NonNull CharSequence originalText) {
        if (search.isEmpty())
            return originalText;

        // ignore case and accents
        // the same thing should have been done for the search text
        String normalizedText = Normalizer
                .normalize(originalText, Normalizer.Form.NFD)
                .replaceAll("\\p{InCombiningDiacriticalMarks}+", "")
                .toLowerCase(Locale.ENGLISH);

        int start = normalizedText.indexOf(search.toLowerCase(Locale.ENGLISH));
        if (start < 0) {
            // not found, nothing to do
            return originalText;
        } else {
            // highlight each appearance in the original text
            // while searching in normalized text
            Spannable highlighted = new SpannableString(originalText);
            while (start >= 0) {
                int spanStart = Math.min(start, originalText.length());
                int spanEnd = Math.min(start + search.length(),
                        originalText.length());

                highlighted.setSpan(new StyleSpan(Typeface.BOLD), spanStart, spanEnd, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);

                start = normalizedText.indexOf(search, spanEnd);
            }

            return highlighted;
        }
    }
}

为了显示在AutoCompleteTextView中单击时的下拉列表,我们需要按https://stackoverflow.com/a/26036902/2914140中所述覆盖setOnTouchListener。 Lint还会打印警告,因此我们必须编写一个自定义视图:

import android.content.Context;
import android.util.AttributeSet;
import android.view.MotionEvent;

import androidx.appcompat.widget.AppCompatAutoCompleteTextView;

/*
Avoids a warning "Custom view `AutoCompleteTextView` has setOnTouchListener called on it but does not override performClick".
 */
public class AutoCompleteTV extends AppCompatAutoCompleteTextView {

    public AutoCompleteTV(Context context) {
        super(context);
    }

    public AutoCompleteTV(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public AutoCompleteTV(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        if (event.getAction() == MotionEvent.ACTION_DOWN) {
            performClick();
        }
        return super.onTouchEvent(event);
    }

    @Override
    public boolean performClick() {
        super.performClick();
        return true;
    }
}

然后在activity_main.xml中使用它:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <com.google.android.material.textfield.TextInputLayout
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <com.example.autocompletetextview1.AutoCompleteTV
            android:id="@+id/languages"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="15dp"
            android:layout_marginRight="15dp"
            android:completionThreshold="1"
            android:hint="language"
            android:imeOptions="actionNext"
            android:maxLines="1"
            android:paddingLeft="10dp"
            android:paddingTop="15dp"
            android:paddingRight="10dp"
            android:paddingBottom="15dp"
            android:singleLine="true"
            android:textColor="#333333"
            android:textColorHint="#808080"
            android:textSize="12sp" />

    </com.google.android.material.textfield.TextInputLayout>

</LinearLayout>

我在这里使用TextInputLayout以获得更好的装饰,在这种情况下,我们必须添加材料设计组件:

在build.gradle中:

implementation 'com.google.android.material:material:1.3.0-alpha01'

和styles.xml中的

<style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
...

MainActivity:

import android.os.Bundle;
import android.view.MotionEvent;
import android.widget.AutoCompleteTextView;

import androidx.appcompat.app.AppCompatActivity;

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

public class MainActivity extends AppCompatActivity {

    String[] items = {"C", "C++", "Java", "C#", "PHP", "JavaScript", "jQuery", "AJAX", "JSON"};

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

        List<DataClass> wordList = new ArrayList<>();
        for (int i = 0; i < items.length; i++) {
            DataClass data = new DataClass(i, items[i]);
            wordList.add(data);
        }
        AutoCompleteAdapter<DataClass> adapter = new AutoCompleteAdapter<>(this,
                R.layout.row_dropdown, R.id.text1, wordList);
        //adapter.setDropDownViewResource(R.layout.row_dropdown);
        AutoCompleteTV acTextView = findViewById(R.id.languages);
        acTextView.setThreshold(1);
        acTextView.setAdapter(adapter);
        acTextView.setText("Java");
        acTextView.setOnTouchListener((v, event) -> {
                    if (event.getAction() == MotionEvent.ACTION_DOWN) {
                        ((AutoCompleteTextView) v).showDropDown();
                        v.requestFocus();
                        v.performClick(); // Added to avoid warning "onTouch lambda should call View#performClick when a click is detected".
                    }
                    return false;
                }
        );
    }
}

enter image description here enter image description here enter image description here