장면

구현Instagram 및 Twitter 등의 서비스에서 볼 수 있는 "추적"단추.
추적되지 않은 상태의 문장은 '추적' 이고, 후속 상태의 문장이 '추적 중' 일 때, 단추의 표시는 6글자와 5글자의 모드가 있습니다.

문제점

버튼의 가로 너비를 wrap_content로 설정하면 추적 상태를 전환할 때마다 버튼 크기가 달라져 촌스러워진다1.
뒤를 밟다
추적 중

해결책

미리 TextView.setHint()에서 문자열'추적'을 설정하면 전체 각도 6글자의 폭을 보장할 수 있습니다.

견본

strings.xml

<resources>
    <string name="follow">フォローする</string>
    <string name="following">フォロー中</string>
</resources>

FollowButton.kt

import android.content.Context
import android.content.res.ColorStateList
import android.support.design.button.MaterialButton
import android.support.v4.content.ContextCompat
import android.util.AttributeSet

/**
 * 「フォロー」ボタン
 */
class FollowButton(context: Context?, attrs: AttributeSet?) : MaterialButton(context, attrs) {

    init {
        setHint(R.string.follow)
        switchFollow()
        setOnClickListener { toggle() }
    }

    private fun switchFollow() = context?.let { context ->
        setText(R.string.follow)
        setTextColor(ContextCompat.getColor(context, android.R.color.white))
        backgroundTintList = ColorStateList.valueOf(ContextCompat.getColor(context, android.R.color.holo_blue_light))
    }

    private fun switchFollowing() = context?.let { context ->
        setText(R.string.following)
        setTextColor(ContextCompat.getColor(context, android.R.color.black))
        backgroundTintList = ColorStateList.valueOf(ContextCompat.getColor(context, android.R.color.white))
    }

    private fun toggle() = context?.let { if (text == it.getString(R.string.following)) switchFollow() else switchFollowing() }
}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<layout 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"
    tools:context=".MainActivity">

    <android.support.constraint.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <tokyo.sample.FollowButton
            android:id="@+id/follow_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:cornerRadius="16dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent" />
    </android.support.constraint.ConstraintLayout>
</layout>

MainActivity.kt

import android.databinding.DataBindingUtil
import android.os.Bundle
import android.support.v7.app.AppCompatActivity
import tokyo.sample.databinding.ActivityMainBinding

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        val binding: ActivityMainBinding = DataBindingUtil.setContentView(this, R.layout.activity_main)
    }
}

결실

MaterialButton의 폭은 텍스트가 항상 "추적"일 때의 크기에 고정됩니다.
뒤를 밟다
추적 중


주관적 가치관.  ↩