[Android_카카오페이클론코딩] 레이아웃 클릭시 border 이동 (layout click border transition other layout)

2021. 8. 23. 17:08카테고리 없음

[Android] 레이아웃 클릭시 border 이동 (layout click border transition other layout)

애니메이션 공부도 할겸 관련글들을 많이 찾아보았다

View 그리기 부터 시작해서 애니메이션(ValueAnimator) , 트랜지션(Transition), Tab 레이아웃을 클릭할 때 각 탭들 아래에 있는 인디케이터 이동방식처럼 구현해보려고 Tablayout 클래스 를 분석하기도 했는데 내가 원하는 방식처럼 동작하기는 쉽지 않았다 ㅠㅠ

그래서 고안한 방법이 FrameLayout 과 내부 레이아웃의 조합으로 클릭시에 각 레이아웃의 y 좌표로 이동시키는 방법이었는데..
혹시 다른방법이 있으시다면 댓글로 알려주시면 감사하겠습니다 ㅠㅠ

자바코드와 레이아웃 첨부합니다!

        findViewById(R.id.ll_2).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Log.d("jhy","click1");
                ObjectAnimator animator = ObjectAnimator.ofFloat(findViewById(R.id.ll_indicator),"translationY",
                        findViewById(R.id.ll_2).getY());
                animator.setDuration(500);
                animator.start();
            }
        });
        findViewById(R.id.ll_1).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                ObjectAnimator animator = ObjectAnimator.ofFloat(findViewById(R.id.ll_indicator),"translationY",
                        findViewById(R.id.ll_1).getY());
                animator.setDuration(500);
                animator.start();
            }
        });
        findViewById(R.id.ll_3).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                ObjectAnimator animator = ObjectAnimator.ofFloat(findViewById(R.id.ll_indicator),"translationY",
                        findViewById(R.id.ll_3).getY());
                animator.setDuration(500);
                animator.start();
            }
        });

 

    <LinearLayout
        android:layout_marginTop="50dp"
        android:id="@+id/ll_parent"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">



            <LinearLayout
                android:background="@color/purple_200"
                android:id="@+id/ll_1"
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:orientation="horizontal"></LinearLayout>

            <LinearLayout
                android:background="@color/purple_500"
                android:id="@+id/ll_2"
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:layout_marginTop="55dp"
                android:orientation="horizontal">

            </LinearLayout>
            <LinearLayout
                android:background="@color/purple_700"
                android:id="@+id/ll_3"
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:layout_marginTop="110dp"
                android:orientation="horizontal">

            </LinearLayout>
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:id="@+id/ll_indicator"
                android:background="@drawable/border_background">

            </LinearLayout>
        </FrameLayout>
    </LinearLayout>

구현영상입니다~