안드로이드 ConstraintLayout 사용법

ConstraintLayout 기본예제 입니다.

http://www.uwanttolearn.com/android/constraint-layout-hell/

에서 많은 도움을 받았습니다.

최종 결과물은 위와 같습니다.

이미지뷰, 텍스트뷰, 버튼을 이용해서 기본적인 샘플을 만들 것 입니다.

<?xml version="1.0" encoding="utf-8"?>

<android.support.constraint.ConstraintLayout 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"

    android:id="@+id/container"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    tools:context=".MainActivity"

    android:orientation="vertical">

 

    <ImageView

        android:id="@+id/imageView"

        android:layout_width="64dp"

        android:layout_height="64dp"

        android:layout_marginStart="44dp"

        android:layout_marginTop="44dp"

        android:layout_marginEnd="8dp"

        android:src="@mipmap/ic_launcher"

        app:layout_constraintEnd_toStartOf="@+id/clickBtn"

        app:layout_constraintStart_toStartOf="parent"

        app:layout_constraintTop_toTopOf="parent" />

 

    <TextView

        android:id="@+id/textView"

        android:layout_width="174dp"

        android:layout_height="64dp"

        android:layout_marginStart="8dp"

        android:layout_marginTop="44dp"

        android:layout_marginEnd="8dp"

        android:text="android studio example 입니다. 막 이렇게 저렇게 그렇게 구렇게 기렇게 지렇게...두두두ㅜㄷ"

        app:layout_constraintEnd_toEndOf="parent"

        app:layout_constraintHorizontal_bias="1.0"

        app:layout_constraintStart_toEndOf="@+id/clickBtn"

        app:layout_constraintTop_toTopOf="parent" />

 

    <Button

        android:id="@+id/clickBtn"

        android:layout_width="128dp"

        android:layout_height="64dp"

        android:layout_marginEnd="160dp"

        android:layout_marginBottom="208dp"

        android:tag="reset"

        android:text="click"

        app:layout_constraintBottom_toBottomOf="parent"

        app:layout_constraintEnd_toEndOf="parent" />

</android.support.constraint.ConstraintLayout>

Colored by Color Scripter

cs

<Button

        android:id="@+id/clickBtn"

        android:layout_width="128dp"

        android:layout_height="64dp"

        android:layout_marginEnd="160dp"

        android:layout_marginBottom="208dp"

        android:tag="reset"

        android:text="click"

        app:layout_constraintBottom_toBottomOf="parent"

        app:layout_constraintEnd_toEndOf="parent" />

xml 상에서

marginEnd가 160dp로 설정되어 있다는 것을

기억하고 넘어가야합니다.

이렇게 비교적 편하게 ConstaintLayout은

xml을 마우스를 통해서 이끌 수 있고 각종 속성값들이 존재합니다.

MainActivity에서는 위에서 속성값으로 지정한 margin 값을 통해서

버튼이 움직이는 애니메이션과 같은 역할을 할 수 있도록 하는 예제입니다.

 
class MainActivity extends AppCompatActivity{
    private Button clickBtn;
    private ConstraintLayout container;
    private ConstraintSet applyConstraintSet = new ConstraintSet();
    private ConstraintSet resetConstraintSet = new ConstraintSet();
 
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        container = findViewById(R.id.container);
        clickBtn = findViewById(R.id.clickBtn);
        clickBtn.setOnClickListener(onClickListener);
        applyConstraintSet.clone(container);
        resetConstraintSet.clone(container);
    }
 
    private void onApplyClick(){
        applyConstraintSet.setMargin(R.id.clickBtn, ConstraintSet.END, 8);
        applyConstraintSet.applyTo(container);
    }
 
    private void onResetClick(){
        resetConstraintSet.applyTo(container);
    }
 
    View.OnClickListener onClickListener = new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            if(view.getId()==R.id.clickBtn){
                if(view.getTag().toString().equals("reset")){
                    view.setTag("apply");
                    onApplyClick();
                }else{
                    view.setTag("reset");
                    onResetClick();
                }
            }
        }
    };
 
 
}

여기서 주의 깊게 봐야할 코드는 

우선 ConstaintSet 객체입니다.

applyConstraintSet.clone(container);

해당 코드는 ConstaintSet 객체를 통해서 ConstaintLayout인 container 객체의 속성값들을 담습니다.

그래서 applyConstraintSet 와 resetConstraintSet 객체가 ConstaintLayout의 속성을 그대로 갖게 됩니다.

private void onApplyClick(){

        applyConstraintSet.setMargin(R.id.clickBtn, ConstraintSet.END, 8);

        applyConstraintSet.applyTo(container);

    }

해당 코드를 통해서 applyConstraintSet의 속성값을 변경시킨 후에 .resetConstraintSet.applyTo(container); container의 속성값을

clone했던 값에서 margin을 END만큼 8만큼 준 값을 applyTo하여 보여줄 것 입니다.

그리고 버튼을 다시 누르게 되면

private void onResetClick(){

        resetConstraintSet.applyTo(container);

    }

을 통해서 다시 원상태의 ConstaintLayout의 값으로 돌아가는 것 입니다.

마지막에 진행했던 것과 다르게

setMargin시에 애니메이션과 같은 효과를 낼 수 있습니다.

private void onApplyClick(){
        TransitionManager.beginDelayedTransition(container);
        applyConstraintSet.setMargin(R.id.clickBtn, ConstraintSet.END, 8);
        applyConstraintSet.applyTo(container);
}
private void onResetClick(){
        TransitionManager.beginDelayedTransition(container);
        resetConstraintSet.applyTo(container);
}

onApplyClick()와 onResetClick() 함수에

TransitionManager.beginDelayedTransition(container);을 지정시켜주게 되면

해당 setMargin 시에 애니메이션이 일어나게 됩니다.

저의 중간 목표는

게시글이 있다면 이런식으로 애니메이션 효과를 주는 것입니다.

해당 코드는 이미지뷰의 속성값들을 삭제시켜주고 메인 레이아웃의 크기에 맞게 바꿔준 것입니다.

private void onApplyClick(){
        TransitionManager.beginDelayedTransition(container);
        applyConstraintSet.setVisibility(R.id.textView,ConstraintSet.GONE);
        applyConstraintSet.clear(R.id.imageView);
        applyConstraintSet.connect(R.id.imageView,ConstraintSet.LEFT,R.id.container,ConstraintSet.LEFT,0);
        applyConstraintSet.connect(R.id.imageView,ConstraintSet.RIGHT,R.id.container,ConstraintSet.RIGHT,0);
        applyConstraintSet.connect(R.id.imageView,ConstraintSet.TOP,R.id.container,ConstraintSet.TOP,0);
        applyConstraintSet.connect(R.id.imageView,ConstraintSet.BOTTOM,R.id.container,ConstraintSet.BOTTOM,0);
        applyConstraintSet.applyTo(container);
}

코드에서 보는 것과 같이

onApplyClick을 누르게 되면

imageView의 applyConstraintSet를 clear해주게 되면 각종 속성값들이 제거 되고

connect를 통해서 LEFT, RIGHT, TOP, BOTTOM의 값들을 container의 크기로 바꿔줍니다.

1인 개발자 감자튀김입니다.

시간표 어플리케이션과

다이어리 어플리케이션 등 

일상 어플리케이션을 만드는 것을 좋아합니다.

2018/10/21 - [나의 일기] - (리뷰) 시간표 어플리케이션 - 담다

2018/07/15 - [나의 일기] - #담아두다 #일상 #다이어리 #어플리케이션