"할일관리 어플" #5 FAB 버튼 여러개 두기

 

FAB 펼친 모습

\닫은 모습

---

xml 코드

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fabSub"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        android:src="@drawable/ic_action_sub"/>

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fabMain"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        android:src="@drawable/ic_action_main"/>

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fabPlus"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        android:src="@drawable/ic_action_plus"/>

 

kotlin 코드

class MainActivity : AppCompatActivity() {
    private lateinit var binding: ActivityMainBinding //viewBinder
    private var isFabOpen = false

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        //viewBinder setting
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        binding.fabPlus.setOnClickListener { //기본 FAB 클릭시
            toggleFab()
        }

        binding.fabMain.setOnClickListener { //M FAB 클릭시
            Toast.makeText(this@MainActivity,"Main FAB 클릭",Toast.LENGTH_SHORT).show()
            val intent = Intent(this@MainActivity, ShowMainPlanActivity::class.java).apply {  }
            startActivity(intent)
        }

        binding.fabSub.setOnClickListener { //S FAB 클릭시
            Toast.makeText(this@MainActivity,"Sub FAB 클릭",Toast.LENGTH_SHORT).show()
            val intent = Intent(this@MainActivity, EditMainPlanActivity::class.java).apply {  }
            startActivity(intent)
        }
    }

    //FAB 버튼 클릭시 동작하는 애니메이션
    private fun toggleFab(){
        Toast.makeText(this@MainActivity,"add FAB 클릭 ${isFabOpen}",Toast.LENGTH_SHORT).show()

        //플로팅 액션 버튼 닫기 - 열려있는 플로팅 버튼 집어넣는 애니메이션 세팅
        if(isFabOpen){
            ObjectAnimator.ofFloat(binding.fabMain, "translationY", 0f).apply { start() }
            ObjectAnimator.ofFloat(binding.fabSub, "translationY",0f).apply{start()}
            ObjectAnimator.ofFloat(binding.fabPlus, View.ROTATION,45f,0f).apply{start()}
        }else{ //플로팅 액션 버튼 열기 - 닫혀있는 플로팅 버튼 꺼내는 애니메이션 세팅
            ObjectAnimator.ofFloat(binding.fabMain, "translationY", -180f).apply { start() }
            ObjectAnimator.ofFloat(binding.fabSub, "translationY",-360f).apply{start()}
            ObjectAnimator.ofFloat(binding.fabPlus, View.ROTATION,0f,45f).apply{start()}
        }
        isFabOpen = !isFabOpen
    }