[Android] 안드로이드 - Api 를 사용한 MultiAutoCompleteTextView (태그자동완성 기능)
안드로이드에서 EditText 에 태그 자동완성 기능을 추가하려고 한다.
사용자가 입력하는 단어와 관련있는 태그를 하단에 리스트로 뿌려줄 것이다.
이럴 때 사용하는 View 가 바로 AutoCompleteTextView 이다.
이때, AutoCompleteTextView 를 extend 하는 EditText 를 사용하면, 사용자가 전체 텍스트를 입력하지 않아도 입력하는 텍스트와 연관된 단어들을 제안할 수 있다.
AutoCompleteTextView 는 한 개의 단어만을 자동으로 완성시키지만, MultiAutoCompleteTextView 는 콤마로 구분된 여러개의 단어들을 자동으로 완성시켜줄 수 있다.
0. multiAutoCompleteTextView 기본적인 사용 예시
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
// contries 라는 이름의 Array 초기화
val countries = resources.getStringArray(R.array.countries_array)
ArrayAdapter<String>(
this,
android.R.layout.simple_list_item_1,
countries
).also { adapter ->
autocomplete.setAdapter(adapter) // ArrayAdpater 는 검색어 목록을 보여주는데 사용
autocomplete.setTokenizer(SpaceTokenizer()) // Tokenizer 는 단어들을 띄어쓰기로 구분
}
}1. activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<MultiAutoCompleteTextView
android:id="@+id/autocomplete"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:completionThreshold="2"
android:completionHint="검색결과"
android:hint="검색어를 입력해주세요"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
app:layout_constraintBottom_toTopOf="@id/autocomplete"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>completionHint 는 검색 시 검색 리스트 맨 하단에 뜨는 문장
compeltionThreshold 는 검색어가 최소 몇자리일때 자동완성 기능을 실행할 것인가 (compeltionThreshold 가 2로 되어있다면, 1글자짜리 문자 상태에서는 검색이 시작되지 않고, 2글자가 되는 순간부터 자동완성 검색이 시작됨)
2. Adpater
사용자가 EditText 에 검색어를 입력하기 시작하면, 해당 검색어와 연관된 추천 검색어 목록이 EditText 하단에 리스트뷰로 보여진다. 이때 검색어 목록을 리스트뷰로 보여주도록 하기 위해 Adpater 를 사용한다.
0번의 예시와 같이 기본적인 ArrayAdapter 를 사용할 수도 있고, ArrayAdapter 를 상속받는 커스텀 Adapter 를 작성하여 사용할수도 있다.
class AutoSuggestAdapter(
context: Context,
resource: Int
) : ArrayAdapter<String>(context, resource), Filterable {
private var suggests: MutableList<String> = mutableListOf()
fun setSuggests(list: List<String>) {
suggests.clear()
suggests.addAll(list)
}
override fun getCount(): Int {
return suggests.size
}
override fun getItem(position: Int): String? {
return suggests[position]
}
override fun getFilter(): Filter {
return object : Filter() {
override fun performFiltering(constraint: CharSequence?): FilterResults {
val filterResults = FilterResults()
if (constraint != null) {
filterResults.apply {
values = suggests
count = suggests.size
}
}
return filterResults
}
override fun publishResults(constraint: CharSequence?, results: FilterResults?) {
if (results != null && results.count > 0) {
notifyDataSetChanged()
} else {
notifyDataSetInvalidated()
}
}
}
}
}
3. Tokenizer
MultiAutoCompleteTextView 는 Tokenizer 를 사용해야 한다.
tokenizer 는 기본적으로 제공하는 commaTokenizer() 를 사용할 수도 있고, Tokenizer 를 상속받아 커스텀하여 사용할 수도 있다. tokenizer 는 단어들을 구별할만한 특정한 기호들을 정해서 단어들을 구분해줄 수 있는 기능을 한다.
나는 콤마가 아닌 공백으로 단어들을 구별하고 싶어 SpaceTokenizer 를 커스텀하여 사용했다.
class SpaceTokenizer : MultiAutoCompleteTextView.Tokenizer {
override fun findTokenStart(text: CharSequence?, cursor: Int): Int {
var i = cursor
while (i > 0 && text!![i - 1] != ' ') {
i--
}
while (i < cursor && text!![i] == ' ') {
i++
}
return i
}
override fun findTokenEnd(text: CharSequence?, cursor: Int): Int {
var i = cursor
val len = text!!.length
while (i < len) {
if (text[i] == ' ') {
return i
} else {
i++
}
}
return len
}
override fun terminateToken(text: CharSequence?): CharSequence {
var i = text!!.length
while (i > 0 && text[i - 1] == ' ') {
i--
}
return if (i > 0 && text[i - 1] == ' ') {
text
} else {
if (text is Spanned) {
val sp = SpannableString("$text ")
TextUtils.copySpansFrom(
text, 0, text.length,
Any::class.java, sp, 0
)
sp
} else {
"$text "
}
}
}
}
4. AutoSuggestAdapter 를 사용하여 서버에서 검색어 추천목록을 가져오는 MultiAoutoTextView 구현하기
class MainActivity : AppCompatActivity() {
companion object {
private const val TAG = "ActivityPostSecond"
private const val TRIGGER_AUTO_COMPLETE = 200
private const val AUTO_COMPLETE_DELAY = 300L
}
private lateinit var adpater: AutoSuggetAdapter
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_post_second)
initMutliAutoCompleteTextView()
}
private fun initMutliAutoCompleteTextView() {
adapter = AutoSuggestAdapter(this, android.R.layout.simple_list_item_1)
val handler = Handler(Handler.Callback { msg ->
if (msg.what == TRIGGER_AUTO_COMPLETE) {
if (autocomplete.text.isNullOrEmpty()) {
getSuggestionApi(autocomplete.text.toString())
}
}
false
})
autocomplete.apply {
setAdapter(adapter)
setTokenizer(SpaceTokenizer())
addTextChangedListener(object : TextWatcher {
override fun afterTextChanged(s: Editable?) {}
override fun beforeTextChanged(
s: CharSequence?,
start: Int,
count: Int,
after: Int
) {
}
override fun onTextChanged(s: CharSequence?, start: Int, before: Int, count: Int) {
handler.removeMessages(TRIGGER_AUTO_COMPLETE)
handler.sendEmptyMessageDelayed(
TRIGGER_AUTO_COMPLETE,
AUTO_COMPLETE_DELAY
)
}
})
}
}
private fun getSuggestionsApi(query: Text) {
RetrofitClient.getTagRecommendation(query)
.enqueue(object :
Callback<List<String>> {
override fun onResponse(
call: Call<List<String>>,
response: Response<List<String>>
) {
val body = response.body()
if (body != null && response.isSuccessful) {
adapter.setSuggests(body)
} else {
// 통신 에러 처리
}
}
override fun onFailure(call: Call<List<String>>, t: Throwable) {
// 통신 에러 처리
}
})
}
}
참고 사이트 >>>
https://en.proft.me/2016/10/20/autocompletetextview-and-multiautocompletetextview/
http://www.codeplayon.com/2019/06/android-multiautocompletetextview-with-api-example-tutorial/
https://www.truiton.com/2018/06/android-autocompletetextview-suggestions-from-webservice-call/
https://sharp57dev.tistory.com/12
https://parkho79.tistory.com/83