[Android] Spannable과 정규식으로 해시태그 기능 만들어보기

SNS를 보면 해시태그 기능이 있다. 해시태그는 ‘#’ 기호 다음에 공백 없이 단어나 문구를 붙여서 작성된다.

EditText안에서 작성된 텍스트 중 # 기호로 시작하는 텍스트의 색상을 변경하고, 추출하는 코드를 작성해보자.

본 실습의 모든 코드는 Activity내에서만 작성되었다.

Span이란?

Span은 안드로이드에서 텍스트의 일부분에 특별한 속성을 부여하는 데 사용되는 개념이다.

텍스트의 특정 부분에 다른 스타일, 색상, 크기를 적용하거나 클릭 가능하게 만들 때 Span을 사용합니다.

이번에는 클릭 가능하게 만들기 위해 Span을 사용한다.

정규식(Regular Expression)이란?

정규식은 문자열에서 특정 패턴을 찾거나 매칭하는 데 사용되는 도구이다.

복잡한 문자열 처리 작업을 간단하게 해결할 수 있게 해줍니다.

이번에는 문자열에서 해시태그를 추출하기 위해 사용한다.

실습 설명

 

• 다음과 같은 레이아웃을 구성하고, 입력 후 버튼을 누르면 해시태그는 추출하고, 색상을 변경하여 표시하도록 한다.
• 일반 문자는 클릭도, 색상변경도 되지 않는다.
• 해시태그를 클릭하면 해당 텍스트를 로그로 남겨보도록 하겠다.

 

 

 

 

 

 

 

 

1. 버튼 클릭

        binding.buttonComplete.setOnClickListener {
            val inputText = binding.editTextHashtag.text.toString()
            displayHashtags(inputText)
            binding.editTextHashtag.text.clear()
        }

버튼클릭시 EditText의 텍스트를 가져온다.

extractHashtags(inputText)를 호출하여 해시태그를 추출한다.

추출한 해시태그를 표시한다.

2. 해시태그 추출, 표시하기

    private fun displayHashtags(text: String) {
        val spannableString = SpannableString(text)
        val matcher = Pattern.compile("#\\\\w+").matcher(text)

        while (matcher.find()) {
            val hashtag = matcher.group()
            val clickableSpan = object : ClickableSpan() {
                override fun onClick(widget: View) {
                    Log.d("HashtagClicked", hashtag)
                }

                override fun updateDrawState(ds: TextPaint) {
                    super.updateDrawState(ds)
                    ds.color = Color.BLUE
                    ds.isUnderlineText = false
                }

            }

텍스트 전체를 Span으로 변경한다.

정규식을 활용하여 텍스트내 해시태그를 추출한다.

~~\\\\S: 공백이 아닌 모든 문자를 포함한다.~~

\\\\w: 단어 문자를 나타낸다

• 다음 문자에 #이 다시 있을경우 그 전까지 인식한다.
• +: 앞의 패턴(여기서는 \\\\w)이 하나 이상 반복됨을 의미

단어, 공백을 기준으로 # 문자가 들어가 있는 패턴을 정의한다.

Matcher를 활용하여 패턴과 일치하는 문자열을 찾는다.

• find(): 패턴과 일치하는 다음 부분 문자열을 탐색
• group(): 마지막으로 찾은 일치 부분을 반환

다음과 같은 결과로 #java#kotlin hello_world를 입력하면 [”java”, “kotlin”]으로 추출될 것이다.

• onClick(): Span이 클릭 시 이벤트를 처리한다. 현재는 로그만 남겨두었다.
  • 여기서 검색요청을 통해 해시태그 기능을 완성할 수 있다.
• updateDrawState(): Span의 시각적인 스타일을 담는다. (color, font, underline)
  • isUnderlineText을 false로 설정하여 밑줄을 제거했다.
  • ClickableSpan의 기본은 true이다.

            spannableString.setSpan(
                clickableSpan,
                matcher.start(),
                matcher.end(),
                Spanned.SPAN_EXCLUSIVE_EXCLUSIVE
            )
        }

        binding.textViewHashtags.apply {
            setText(spannableString)
            movementMethod = LinkMovementMethod.getInstance()
            highlightColor = Color.TRANSPARENT
        }
    }

LinkMovementMethod: TextView 내에서 클릭 가능한 요소(예: URL, 전화번호, 이메일 주소 등)를 처리하는 메커니즘을 제공하는 클래스이다.

hlightColor:TextView에서 텍스트가 선택되었을 때 나타나는 배경색을 지정하는 속성이다. 이 속성은 사용자가 텍스트를 길게 누르거나 선택할 때 어떤 부분이 선택되었는지 시각적으로 표시한다.

현재는 투명하게 지정했다.