Gmail의 수신자 표시줄과 같은 칩의 텍스트 구현(Chips Edit Text)

개막사

이번에 개발한 샘플 응용 프로그램 캡처
사용자가 여러 요소를 선택할 때의 인터페이스로 EditText에 입력된 내용을 사용하여 축소하고, 선택한 요소를 칩으로 표시하는 UI가 널리 사용되고 있다(Gmail, Google Hangout, 페이스북 Messenger 등)
이런 UI는 Chips EditText나 Token EditText라고 불리는데 쓸 수 있는 게 여러 개 있다. 하지만구글 직원 Roman Nurik이 소개한 것 AOSP(Android 오픈 소스 프로젝트)의 일부로 공개돼 대단하다.자기가 가려운 데를 쓰지 못하다.
그래서 저는 후자를 참고하여 통용적인 느낌으로 다시 실시kpbird/chipsedittext하는 김에 설치의 일부분을 설명합니다. 후자의 저자인 KPBird도 https://github.com/daisy1754/ChipTextViewHelper했습니다. 이 글은 그 부분의 번역에 가까운 위치에 있어서 영어를 아는 사람이 원문을 읽는 것이 좋을 것 같습니다.

내 Spannable 만들기

Chip을 실현하기 위해 문자열 장식 등 종류실장법 문장 (영어)를 이용한다.

Spannable를 통해 xml 파일에서 View 생성

View#layout에서 도면 결과를 가져오고 복사된 Bitmap

을 생성합니다.

2의bitmap을 이용하여 LayoutInflater

구체적으로 다음과 같은 느낌

class ChipSpan extends ImageSpan {
    public ChipSpan(Context context, int viewResource, int textViewId,
                    int imageViewId, Uri iconUri, CharSequence text) {
        super(context, createBitmap(context, viewResource, textViewId, imageViewId, iconUri, text));
    }

    private static Bitmap createBitmap(Context context, int viewResource, int textViewId,
                                       int imageViewId, Uri iconUri, CharSequence text) {
        LayoutInflater inflater
                = (LayoutInflater) context.getSystemService(Activity.LAYOUT_INFLATER_SERVICE);
        View view = inflater.inflate(viewResource, null);
        ((TextView) view.findViewById(textViewId)).setText(text);
        ((ImageView) view.findViewById(imageViewId)).setImageURI(iconUri);

        int spec = View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED);
        view.measure(spec, spec);

        // Viewの描画サイズを計算する
        view.layout(0, 0, view.getMeasuredWidth(), view.getMeasuredHeight());

        // Viewの描画結果を取得するためBitmap/Canvasを用意する
        Bitmap bitmap = Bitmap.createBitmap(
                view.getWidth(), view.getHeight(), Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(bitmap);
        canvas.translate(-view.getScrollX(), -view.getScrollY());
        view.draw(canvas);
        view.setDrawingCacheEnabled(true);

        // 描画結果を新しいBitmapとしてコピー
        Bitmap viewBmp = view.getDrawingCache().copy(Bitmap.Config.ARGB_8888, true);
        view.destroyDrawingCache();
        return viewBmp;
    }
}

Spannable StringBuilder를 사용하여 태그가 있는 텍스트 만들기

하나의 문자열은 위에서 아이콘으로 표시할 수 있으며, 나중에 어떤 부분을 장식하는지 알려줄 수 있다.
칩 디스플레이 요소로 selectedItems 변수로 저장하면

SpannableStringBuilder spannableStringBuilder = new SpannableStringBuilder();

// 文字の指定
for (int i = 0; i < selectedItems.size(); i++) {
    spannableStringBuilder.append(selectedItems.get(i).getDisplayName());
    spannableStringBuilder.append(delimiter);
}

// 装飾の指定
int cursorIndex = 0;
for(ChipItem item : selectedItems){
    String chipText = item.getDisplayName();
    spannableStringBuilder.setSpan(
            new ChipSpan(textView.getContext(), R.layout.default_chip_item,
                    R.id.chip_item_name, R.id.chip_item_icon,
                    item.getIconUri(), chipText),
            cursorIndex, cursorIndex + chipText.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
    cursorIndex = cursorIndex + chipText.length() + delimiter.length();
}

textView.setText(spannableStringBuilder);

주요 부분은 이런 느낌이다. 앞서 말한 바와 같이 독립적으로 활동하는 데모어 프라이ImageSpan가 GiitHub에서 공개됐다. 주요 부분은 프로그램 라이브러리로 잘라낸 것이니 가능하면 사용해 주십시오.