다양한 Layout

Du-Hyeon, Kim·2023년 8월 29일
0

Android

목록 보기
2/12

Layout

1. xml DESIGN 화면

뷰 <- 뷰그룹
뷰그룹은 뷰를 상속 받은 것임(계층구조)
Object > View > TestView / ViewGroup > Button / LinearLayout

2. MainActrivity

AppCompatActivity를 상속받음
안드로이드 os의 activity manager가 mainactivity의 활동을 관리함

3. XML 레이아웃의 구성

뷰 태그 + 속성
<시작 태그
속성1="속성값"
속성1="속성값"
</끝 태그>

눈에 보이는 것 -> 속성들 </>
레이아웃 -> <androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

width와 height는 필수 속성
android:layout_width="wrap_content"
android:layout_height="wrap_content"

wrap_content = 안에 들어있는 내용물에 따라 크기만큼 자동조정됨
match_parent = 부모 layout에 꽉 맞춤

요소들은 부모 layout의 상대적 위치 혹은
다른 요소들로부터의 거리로도 표현 가능하다

guide선을 이용해 배치를 할 수도 있다.

4. px vs dp

화면 밀도와 상관 없이 자동으로 크기를 맞춰줌
px은 화면 px로 계산
dp는 화면 상 비율로 알아서 자동변환

5.대표적인 레이아웃

ConstraintLayout

제약조건 기반 모델

LinearLayout

박스 모델 (박스를 쌓는 원리)
세로방향 쌓기 / 가로 방향 쌓기
이것을 레이아웃을 안에 넣어서 필요한 부분별로 layout 특성을 설정한다.

RelativeLayout

규칙 기반 모델
ConstraintLayout이 상대기반에 기능을 추가한 것이다.

FrameLayout

싱글 모델
한 번에 하나의 뷰만 보여주는 레이아웃
많이 사용됨
뷰를 추가할 수 있으나, 안에 들어가는 게 아니라,
위로 중첩되는 원리이다.
visability로 보일 것을 조절

TableLayout

격자 모델
excel sheet과 같은 원리
웹에서 많이 사용하는 방법이지만, android에서는 다양한 조합을 통해서 사용하는 것이 훨씬 자유롭다.

6. 뷰의 영역(padding, margin ...)

padding : 내용물과 border간의 거리
margin : border과 다른 view 혹은 layout간의 거리
border : 요소의 테두리
box : 뷰의 영역

LinearLayout

1. layout의 orientation 속성

horizontal / vertical
로 쌓을 방향을 결정

vertical

horizontal

2. layout_gravity

정렬 방향
right : 오른쪽 정렬
bottom : 아래 정렬(linear layout에서는 효과x)
center : 가로 세로 모두 가운데 정렬
center_horizontal
center_verital

3. gravity

layout_ 빠져있으면,
내용물의 속성이다.
button에선 text의 위치

4. textsize

단위는 sp를 사용

5. baselineAligned (layout의 속성)

글자가 다른 요소들의 글자와 동일 선상에 놓이게 할 수 있다.
text기준 정렬에 도와줌

6. layout_weigh

세로 방향 공간 분할
button의 height를 0dp로 놓고
button의 layout_weigh를 원하는 만큼 button에 배분해준다.

RelativeLayout


말그대로 layout과의 상대적 위치로 정의함

1. layout_below / layout_above

component가 차지할 layout의 위치의 시작과 끝을 정의할 수있다.

#FrameLayout

image는 대부분 res>drawable에 저장함

2. frame layout 구성하기

linearLayout > button + FrameLayout으로 구성

그리고 그 안에 FrameLayout안에 imageview 넣기

3. 버튼으로 이미지 변경하기

onClick 함수를 구성하고
id로 imageview를 찾고,
visibility 속성으로 이미지를 보여줌을 바꾼다.

FrameLayout특성상 쌓는 것이기 때문에 visibility를 조절하지 않으면,
겹쳐서 보인다.

public class MainActivity extends AppCompatActivity {
    ImageView imageView;
    ImageView imageView2;

    int imageIndex = 0;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        imageView = findViewById(R.id.imageView);
        imageView2 = findViewById(R.id.imageView2);
    }

    public void onButton1Clicked(View v){
        changeImage();
    }

    public void changeImage(){
        if(imageIndex ==0){
            imageView.setVisibility(View.VISIBLE);
            imageView2.setVisibility(View.INVISIBLE);

            imageIndex = 1;
        } else if (imageIndex == 1) {
            imageView.setVisibility(View.INVISIBLE);
            imageView2.setVisibility(View.VISIBLE);

            imageIndex = 0;
        }
    }
}

ScrollView

내용이 많아지면 자동으로 scroll을 생성함

1. backgroud

16진수 코드 값으로 scrollview의 배경색깔을 선택 가능하다.

0개의 댓글