22.01.04 피그마를 이용해서 메인페이지와 로그인 페이지를 만든다.
예상 화면
1. Figma
- 전체 요소 선택할때는 이름을 선택하면 된다.
- 색 코드값 복사해서 사용 가능
1-1. 이미지 추가
res/drawable에 이미지 다 넣음
-
던져넣기
-
복붙
1-2. Text 추가
sp 텍스트 사이즈 : 상대적인 크기
\n 줄바꿈
2. 이미지 디자인
activity_main.xml에서 디자인 탭으로 들어가서 조절 가능하다.
2-1. activity_main.xml
: 위 태그 정도만 써줘도 이미지는 들어가고
: 디자인 탭에서 수정이 가능하다. ( 2-2 참조)
2-2. 전체 화면
1) 각 요소들을 붙여준다.
: 이미지나 텍스트 등 모든 요소는 3면이 Constraint 내에 접해야 한다.
2) margin값을 따로 주지 않고 디자인 탭에서 좌우 0포인트를 주면 가운데 정렬이 되고 상단의 요소와 떨어지게도 만들수 있다.
3) 텍스트 크기, 색깔 등을 검색해서 설정할수 있다.
4) id값을 정할 때 사용한다.
: id는 애니메이션 등 효과를 줄 때 사용한다.
- 이미지 설정 후 자동으로 태그들이 추가 된 모습을 볼수있다.
3. 애니메이션 효과 넣기
3-1. 폴더 및 파일생성
-
res(리소스) 폴더에 신규 폴더를 생성하고 (anim) -
두개 파일을 생성한다.
- 파일은 애니메이션 리소스 파일로 생성한다.
3-2. 테스트파일 태그 작성
top_animayion.xml
: 애니메이션 작동여부 확인 정도의 간단한 코드
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:fromXDelta="0%"
android:fromYDelta="-200" <- 여기값이 -2000이면 위쪽 화면 밖에서 내려온다.
android:duration="2500"/>
<alpha
android:fromAlpha="0.1"
android:toAlpha="1.0"
android:duration="1500"/>
</set>3-3. MainActivity.java
-
애니메이션 변수 지정
:Animation topanim, bottomanim;
: Animation 부분에 오류가 났을때, alt+Enter 를 누르고 import 해준다. -
activity_main.xml에서 설정한 id와 다르게 설정해야 한다.
:activity_main.xml에서 사용한 요소들을 애니메이션용 변수로 설정한다.
:ImageView image;
:TextView tit1, tit2; -
변수에 애니메이션 설정하기 // R = res = 리소스폴더
: 위에서 설정한Animation변수에 각 애니메이션 설정 파일을 연결한다.
:topanim=AnimationUtils.loadAnimation(this,R.anim.top_animation);
:bottomanim=AnimationUtils.loadAnimation(this,R.anim.bottom_animation); -
hooks 연결
: 설정한 애니메이션 변수에activity_main.xml에서 정의한 id값을 불러와 연결한다. (hooks)
:image=findViewById(R.id.imageview);
:tit1=findViewById(R.id.title1);
:tit2=findViewById(R.id.title2); -
오브젝트(이미지, 텍스트)에 애니메이션 연결
:image.setAnimation(topanim);
:tit1.setAnimation(bottomanim);
:tit2.setAnimation(bottomanim);
3-4 전체적인 흐름
- 화면을 디자인 하면서 각 요소들에게 id를 부여한다.
- 애니메이션효과를 만든다.
:top_animation.xml,bottom_animation.xml - 애니메이션 변수를 정한다.
: 임의의 명칭
: 대신 미리 설정한 id 값과는 다르게
:activity_main.xml에서 사용한 요소들을 애니메이션용 변수로 설정한다. - 변수에 애니메이션 설정하기
: 위에서부터 내려오는 애니메이션,
: 아래에서 올라오는 애니메이션
: 두개를 사용하기 때문에 애니메이션 변수는 두개
:topanim,bottomanim - 애니메이션에서 쓰기위해 정의한 변수에
activity_main.xml에서 정의한 오브젝트들을 가져와서 연결한다 (hooks) - 오브젝트(이미지, 텍스트)에 애니메이션 연결한다.
public class MainActivity extends AppCompatActivity {
// 애니메이션 변수 지정
Animation topanim, bottomanim;
ImageView image;
TextView tit1, tit2;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// 상단 상태바 없애기
getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
WindowManager.LayoutParams.FLAG_FULLSCREEN);
// 메인화면 보이기
setContentView(R.layout.activity_main);
// 변수에 애니메이션 설정하기 // R = res = 리소스폴더
topanim=AnimationUtils.loadAnimation(this,R.anim.top_animation);
bottomanim=AnimationUtils.loadAnimation(this,R.anim.bottom_animation);
// hooks 연결
image=findViewById(R.id.imageview);
tit1=findViewById(R.id.title1);
tit2=findViewById(R.id.title2);
// 오브젝트(이미지, 텍스트)에 애니메이션 연결
image.setAnimation(topanim);
tit1.setAnimation(bottomanim);
tit2.setAnimation(bottomanim);
}
}4. 다음화면 넘어가기
- splash 사용 선언 (이 페이지 안에서만 사용됨 - 전역변수X)
:private static int SPLASH_SCREEN =5000; - 다음페이지로 넘어갈 Splash_Screen 적용
new Handler().postDelayed(new Runnable() {
@Override
public void run() {
// Intent 화면 전환 단위
Intent intent = new Intent(MainActivity.this,Main_page.class);
startActivity(intent);
finish();
}
},
SPLASH_SCREEN);
5. 베이스 설정
5-1. 제목 없애기
- 어플 실행시 상단의 제목을 없애준다.
:Splash_Screen이라는 제목 없앰.
5-2. 상단 상태바 없애기
MainActivity.java파일에서
:getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,WindowManager.LayoutParams.FLAG_FULLSCREEN);
View
눈에보이는 모든 요소
1. Widget
가장 많이 활용
2. Adapter
리스트 구현 (ListView)
3. Layout
<div></div>와 비슷함
공간분할, 화면분할
요소마다 사용법이 조금씩 다름
