1. 안드로이드 레이아웃 기본 개념
 |
| 작은 빨간 상자부분을 클릭하면 layout_width가 변경된다. 일직선으로 체크된 경우는 원래 설정해놓았던 길이값으로 세팅된다. |
 |
| 구불구불한 선으로 변경되었다. layout_width 값이 0dp(=match_constraint) 가 되면서 부모 레이아웃의 여유공간에 꽉 차게 된다. |
 |
| 꺽쇠 두개모양은 layout_width를 wrap_content으로 변경시킨다. wrap_content는 내용물 사이즈에 맞게 채워진다. |
2. 레이아웃 xml 파일 생성하기
 |
| [res] -> [layout] 폴더를 우클릭 한 후 [New] -> [Layout resource file] 클릭 |
 |
| Root element 에는 원하는 레이아웃 명을 작성하면 자동으로 리스트가 뜬다. |
3. 가이드 라인 추가하기
 |
| 가로, 세로 가이드라인을 추가할 수 있다. |
 |
| 가이드라인을 기준으로 뷰들의 위치를 설정할 수 있다. |
4. 레이아웃 xml 속성
 |
| 레이아웃 xml 상단 |
//xmlns:android 안드로이드 기본 SDK에 포함되어 있는 속성
xmlns:android="http://schemas.android.com/apk/res/android"
//xmlns:app 프로젝트에서 사용하는 외부 라이브러리에 포함되어 있는 속성,
//app 이라는 단어는 다른 단어로 바꿀 수 있음
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns: 로 시작하는 속성은 하나의 파일에 한번만 사용이 된다.
xmlns:의 뒤에 android라는 이름이 나머지 속성의 접두어로 사용된다.
예를 들며 android:layout_width는 xmlns:android로 지정된 정보를 참조하여 사용한다는 의미이다. (do it 안드로이드 105p 참조)
cf) 제약 레이아웃에서 뷰끼리 연결 할 때 사용하는 XML 속성 명명 규칙
layout_constraint[source 뷰의 연결점]_[target 뷰의 연결점]="[target 뷰의 id]"
5. id 속성 - 뷰를 구분하는 구분자
*형식
@+id/아이디 값6. 크기를 표시하는 단위와 마진
픽셀(px) 단위가 아닌, dp 와 sp 단위를 사용하여 해상도가 다른 단말에서도 뷰의 크기를 비슷하게 보이도록 할 수 있다.
- dp(dip) : 밀도 독립적 픽셀. 160dpi 화면을 기준으로 한 픽셀
- sp(sip) : 축적 독립적 픽셀. 텍스트 크기를 지정할 때 사용하는 단위. 단말의 글꼴 설정에 맞추어 표시되는 글자 크기가 바뀔 수 있다.
- in : 인치. 1인치로 된 물리적 길이
- mm : 밀리미터. 1밀리미터로 된 물리적 길이
- em : 텍스트 크기. 글꼴과 상관없이 동일한 텍스트 크기 표시.
뷰에는 dp , 글자에는 sp 단위를 사용한다.
7. 파일이 저장되는 위치
1) 프로젝트 창
- 소스 파일 : /app/java/<패키지명>/<파일명>
- xml 레이아웃 파일 : /app/res/layout/<파일명>
- 이미지 파일 : /app/res/drawable/<파일명>
2) 파일 탐색기
- 소스 파일 : /app/src/main/java/<패키지명>/<파일명>
- xml 레이아웃 파일 : /app/src/main/res/layout/<파일명>
- 이미지 파일 : /app/src/main/res/drawable/<파일명>
res에 파일을 저장할 때 파일명은 반드시 소문자,숫자,_기호만 사용 가능하다.
또한 첫 글자는 숫자가 될 수 없다.
8. 자바 코드에서 화면을 구성하기
* LayoutCodeActivity.java
package org.techtown.samplelinearlayout;
import android.os.Bundle;
import android.widget.Button;
import android.widget.LinearLayout;
import androidx.appcompat.app.AppCompatActivity;
public class LayoutCodeActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//리니어 레이아웃을 만들고 방향을 세로로 설정
LinearLayout mainLayout = new LinearLayout(this);
mainLayout.setOrientation(LinearLayout.VERTICAL);
//추가할 뷰에 설정할 파라미터를 생성
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
LinearLayout.LayoutParams.MATCH_PARENT,
LinearLayout.LayoutParams.WRAP_CONTENT);
//버튼을 생성하고 파라미터를 설정 한 후 리니어레이아웃에 추가
Button button1 = new Button(this);
button1.setText("Button1");
button1.setLayoutParams(params);
mainLayout.addView(button1);
//새로 만든 레이아웃을 화면에 설정
setContentView(mainLayout);
}
}* app/manifests/AndroidManifest.xml
 |
| 빨간 네모 부분의 name을 위에서 작성한 java 파일명으로 세팅하면 앱을 실행했을때 처음 보이는 화면이 된다. |
9. 뷰 정렬하기
- layout_gravity : 부모 컨테이너의 여유 공간에서 뷰를 정렬함
- gravity : 뷰 안의 내용물을 정렬
- baselineAligned : 뷰 안의 텍스트들의 아래쪽 바닥면을 정렬
 |
| baselineAligned 가 true 일 때 모습. 텍스트 기준으로 정렬됨 |
 |
| baselineAligned 가 false 일 때 모습 |
10. 마진(margin) 과 패딩(padding)
- margin : 뷰 테두리 바깥쪽 공간. layout_margin 속성으로 지정
- padding : 뷰 테두리 안쪽 공간. 뷰 내용물과 뷰 테두리선과의 공간. padding 속성으로 지정
11. 여유 공간 분할 (layout_weight 속성)
layout_weight 속성에 숫자 값은 분할 비율이 된다.
그 값의 비율 만큼 여유 공간을 분할한 후 해당 뷰에게 할당한다.
cf) 뷰의 가로길이를 1:2 그 자체로 분할하여 할당하고 싶을 때
 |
| 두개의 텍스트뷰의 layout_width 속성을 0dp로 주고, layout_weight을 각각 1,2로 주면 가로 공간을 1:2 비율로 차지한다. |
12. 상대 레이아웃 속성
- layout_alignParent위치 : 부모 컨테이너와의 상대적 위치 설정
- layout_위치 : 다른 뷰와의 상대적 위치를 설정
 |
| id가 button인 뷰의 속성을 보면 layout_above와 layout_below 속성을 이용해 button2의 위에, 그리고 button4의 아래에 위치하도록 설정 |
 |
| 버튼 위치 확인. |
13. 테이블 레이아웃
- stretchColumns : 특정 열을 자동으로 확장. 가로 방향의 여유공간을 채워서 컬럼을 생성함
- shrinkColumns : 특정 열을 자동으로 축소.
 |
| 열을 콤마로 연결하여 값을 설정한다. 0,1,2 열은 추가 공간을 차지하게 된다. 테이블의 열은 0부터 시작한다. |
- 테이블 레이아웃에 추가되는 뷰에 지정하는 속성
- layout_column : 칼럼 인덱스를 지정하여 순서를 설정
- layout_span : 여러 컬럼에 걸칠 수 있도록 설정 가능
 |
| layout_column을 2로 설정하여 2번째 열에 버튼이 위치하도록 설정 |
 |
| layout_span을 2로 설정하면 뷰가 2칸을 차지하도록 할 수 있다. |
14. 프레임 레이아웃과 뷰 전환
프레임 레이아웃에 뷰를 넣으면 하나의 뷰만 화면에 표시된다.
프레임 레이아웃은 중첩(Overlay) 기능이 있다.
 |
| 버튼에 onClick 이벤트를 추가하였다. |
public class MainActivity extends AppCompatActivity {
ImageView imageView;
ImageView imageView2;
int imageIndex = 0;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// setContentView 메소드의 파라미터로 XML 파일을 넘겨주는데
// 이로 인하여 소스와 XML 파일이 연결된다.
setContentView(R.layout.activity_main);
//파일이 연결되고 나면 아래와 같이 R.id.id명을 이용하여 이미지뷰를 참조할 수 있게 된다.
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;
}
}
}15. 스크롤 뷰 만들기
스크롤 뷰를 이용하여 화면에 스크롤을 달 수 있다.
 |
| HorizontalScrollView 안에 ScrollView를 넣음으로써 수평과 수직 스크롤을 둘다 사용할 수 있다. |
public class MainActivity extends AppCompatActivity {
ScrollView scrollView;
ImageView imageView;
BitmapDrawable bitmap;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
scrollView = findViewById(R.id.scrollView);
imageView = findViewById(R.id.imageView);
//수평 스크롤바 사용 기능 설정하기
scrollView.setHorizontalScrollBarEnabled(true);
//리소스의 이미지 참조하기
Resources res = getResources();
//getDrawable을 이용하여 이미지를 지정하기
bitmap = (BitmapDrawable) res.getDrawable(R.drawable.image01);
//원본 이미지 가로와 세로 길이 알아내기
int bitmapWidth = bitmap.getIntrinsicWidth();
int bitmapHeight = bitmap.getIntrinsicHeight();
/*
이미지 리소스와 이미지 크기 설정
원본 사이즈를 이미지뷰에 세팅함으로써 화면사이즈보다 큰 이미지뷰로 설정하여
스크롤이 생기도록 하기 위함.
*/
imageView.setImageDrawable(bitmap);
imageView.getLayoutParams().width = bitmapWidth;
imageView.getLayoutParams().height = bitmapHeight;
}
public void onButton1Clicked(View v){
changeImage();
}
public void changeImage(){
//버튼이 클릭 될 때마다 다른 이미지 리소스를 가져옴
Resources res = getResources();
bitmap = (BitmapDrawable) res.getDrawable(R.drawable.image02);
int bitmapWidth = bitmap.getIntrinsicWidth();
int bitmapHeight = bitmap.getIntrinsicHeight();
imageView.setImageDrawable(bitmap);
imageView.getLayoutParams().width = bitmapWidth;
imageView.getLayoutParams().height = bitmapHeight;
}
}
댓글 없음:
댓글 쓰기