Source: https://www.edwith.org/boostcourse-android/lecture/17112/



1. 트윈 애니메이션

보여줄 대상을 연산한 후 그 결과를 연속적으로 보여준다. 

애니메이션 대상(View, Drawable)과 변환 방식을 지정하면 애니메이션 효과가 생긴다. 

효과: 위치이동(Traslate), 확대/축소(Scale), 회전(Rotate), 투명도(Alpha)


Interplator

accerlerate_interplator: 애니메이션 효과를 점점 빠르게 나타나도록 만듬

decerlerate_interplator: 애니메이션 효과를 점점 느리게 나타나도록 만듬

accerlerate_decerlerate_interplator: 애니메이션 효과를 점점 빠르다가 느리게 나타나도록 만듬

anticipate_interplator: 애니메이션 효과를 시작 위치에서 조금 뒤로 당겼다가 시작하도록 만듬

overshoot_interplator: 애니메이션 효과를 종료 위치에서 조금 지나쳤다가 종료되도록 만듬



2. 실행 결과 화면

  


 

3. activity_main.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center"
    tools:context="com.tistory.qlyh8.practice.MainActivity">
 
    <Button
        android:id="@+id/button"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:text="시작"/>
 
 
</LinearLayout>
 
cs



4. res/anim/scale.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<?xml version="1.0" encoding="utf-8"?>
<!--
    위치 이동: <translate>, 회전: <rotate>, 확대/축소: <scale>, 투명도: <alpha>
    애니메이션 집합(여러 애니메이션 동작): <set>
    <set> 태그 안에는 여러 개의 태그가 들어갈 수 있다.
    
    startOffset: 시작시간
    duration: 지속시간
    pivotX, pivotY: X축, Y축
    fromXScale,fromYScale: 시작할 때의 확대/축소비율
    toXScale, toYScale: 끝날 때의 확대/축소비율
-->
<!-- 원래의 크기에서 세 배의 크기로 확대되고, 줄어드는 애니메이션 -->
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <scale
        android:duration="2500"
        android:pivotX="50%"
        android:pivotY="50%"
        android:fromXScale="1.0"
        android:fromYScale="1.0"
        android:toXScale="3.0"
        android:toYScale="3.0" />
 
    <scale
        android:startOffset="1500"
        android:duration="2500"
        android:pivotX="50%"
        android:pivotY="50%"
        android:fromXScale="1.0"
        android:fromYScale="1.0"
        android:toXScale="0.3"
        android:toYScale="0.3" />
</set>
 
cs



5. MainActivity.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
package com.tistory.qlyh8.practice;
 
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
 
 
public class MainActivity extends AppCompatActivity {
    
    @Override
    protected void onCreate(final Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        findViewById(R.id.button).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Animation anim = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.scale);
                view.startAnimation(anim);
            }
        });
    }
}
cs



6. 참고

- Animation Resources: https://developer.android.com/guide/topics/resources/animation-resource

- Animation and Transitions: https://developer.android.com/training/animation/

저작자표시

'Android' 카테고리의 다른 글

스플래시 화면 (Splash Screen)  (0) 2018.08.24
슬라이딩 애니메이션 (Sliding Animation)  (0) 2018.08.24
스레드 애니메이션 (Thread Animation)  (0) 2018.08.24
RecyclerView (리사이클러뷰)  (0) 2018.08.23
음성 녹음하기  (0) 2018.08.23

Source: https://www.edwith.org/boostcourse-android/lecture/17111/



1. 실행 결과 화면

    



2. activity_main.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center"
    tools:context="com.tistory.qlyh8.practice.MainActivity">
 
    <Button
        android:id="@+id/button"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:text="시작"/>
 
    <ImageView
        android:id="@+id/image_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
 
</LinearLayout>
 
cs



3. MainActivity.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
package com.tistory.qlyh8.practice;
 
import android.content.res.Resources;
import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.os.Handler;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.ImageView;
 
import java.util.ArrayList;
 
 
public class MainActivity extends AppCompatActivity {
 
    private ImageView imageView;
    ArrayList<Drawable> drawableList = new ArrayList<>();
    Handler handler;
 
    @Override
    protected void onCreate(final Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        imageView = findViewById(R.id.image_view);
        handler = new Handler();
 
        Resources res = getResources();
        drawableList.add(res.getDrawable(R.drawable.image22));
        drawableList.add(res.getDrawable(R.drawable.image33));
        drawableList.add(res.getDrawable(R.drawable.image44));
        drawableList.add(res.getDrawable(R.drawable.image55));
        drawableList.add(res.getDrawable(R.drawable.image66));
 
        findViewById(R.id.button).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                    AnimThread thread = new AnimThread();
                    thread.start();
            }
        });
    }
 
    class AnimThread extends Thread {
        // 일정 시간 간격으로 이미지뷰의 이미지를 다른 이미지로 설정
        public void run() {
            int index = 0;
            for (int i = 0; i < 100; i++) {
                final Drawable drawable = drawableList.get(index);
                index += 1;
                if (index > 4) {index = 0;}
 
                handler.post(new Runnable() {
                    public void run() {
                        imageView.setImageDrawable(drawable);
                    }
                });
 
                try {
                    Thread.sleep(500);
                } catch(Exception e) {
                    e.printStackTrace();
                }
            }
        }
    }
}
cs



4. 참고

- Animations and Transitions: https://developer.android.com/training/animation/

저작자표시

'Android' 카테고리의 다른 글

슬라이딩 애니메이션 (Sliding Animation)  (0) 2018.08.24
트윈 애니메이션 (Tween Animation)  (0) 2018.08.24
RecyclerView (리사이클러뷰)  (0) 2018.08.23
음성 녹음하기  (0) 2018.08.23
동영상 재생하기  (0) 2018.08.23

Source: https://www.edwith.org/boostcourse-android/lecture/20492/



1. 실행 결과 화면

    



2. build.gradle (app)

의존성 추가

1
implementation 'com.android.support:recyclerview-v7:27.1.1'
cs



3. activity_main.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center"
    tools:context="com.tistory.qlyh8.practice.MainActivity">
 
    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
 
</LinearLayout>
 
cs



4. recyclerview_item.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="10dp"
    android:orientation="vertical"
    android:gravity="center"
    android:background="@android:color/holo_purple"
    tools:context="com.tistory.qlyh8.practice.MainActivity">
   <TextView
       android:id="@+id/text1"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_marginRight="10dp"
       android:gravity="center"
       android:textSize="25sp"
       android:textColor="@android:color/white"
       tools:text="Name" />
    <TextView
        android:id="@+id/text2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="20sp"
        android:textColor="@android:color/white"
        tools:text="010-0000-0000"/>
</LinearLayout>
 
cs



5. PersonItem.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
package com.tistory.qlyh8.practice;
 
// 각 아이템을 위한 데이터 클래스
public class PersonItem {
    private String name;
    private String mobile;
 
    PersonItem(String name, String mobile) {
        this.name = name;
        this.mobile = mobile;
    }
 
    public String getName() {
        return name;
    }
 
    public void setName(String name) {
        this.name = name;
    }
 
    public String getMobile() {
        return mobile;
    }
 
    public void setMobile(String mobile) {
        this.mobile = mobile;
    }
}
 
cs



6. RecyclerViewHolder.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
package com.tistory.qlyh8.practice;
 
import android.support.v7.widget.RecyclerView;
import android.view.View;
import android.widget.TextView;
 
/*
 * 화면에 보일 때 사용되는 각각의 뷰는 뷰홀더에 담아두게 된다.
 * 뷰홀더 객체가 생성될 때 뷰가 전달되는데, 뷰홀더 객체는 뷰를 담아두고 뷰에 표시될 데이터를 설정한다.
 * 뷰홀더는 재사용된다.
 */
class RecyclerViewHolder extends RecyclerView.ViewHolder {
 
    private TextView textView1, textView2;
    private RecyclerViewAdapter.itemClickListener listener;
 
    RecyclerViewHolder(View itemView) {
        super(itemView);
 
        textView1 = itemView.findViewById(R.id.text1);
        textView2 = itemView.findViewById(R.id.text2);
 
        itemView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                int position = getAdapterPosition();
                if (listener != null) {
                    listener.onItemClick(RecyclerViewHolder.this, view, position);
                }
            }
        });
    }
 
    // PersonItem 객체를 전달받아 뷰홀더 안에 있는 뷰에 데이터 설정
    void setItem(PersonItem item) {
        textView1.setText(item.getName());
        textView2.setText(item.getMobile());
    }
 
    void setOnItemClickListener(RecyclerViewAdapter.itemClickListener listener) {
        this.listener = listener;
    }
}
 
cs



7. RecyclerViewAdapter.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
package com.tistory.qlyh8.practice;
 
import android.content.Context;
import android.support.annotation.NonNull;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
 
import java.util.ArrayList;
 
 
// 각 아이템을 위한 데이터를 담는 어댑터
public class RecyclerViewAdapter extends RecyclerView.Adapter<RecyclerViewHolder>  {
 
    private Context context;
    private ArrayList<PersonItem> items = new ArrayList<>();
    private itemClickListener listener;
 
    public interface itemClickListener {
        void onItemClick(RecyclerViewHolder holder, View view, int position);
    }
 
    RecyclerViewAdapter(Context context) {
        this.context = context;
    }
 
    @Override
    public int getItemCount() {
        return items.size(); // 어댑터에서 관리하는 아이템의 개수를 반환
    }
 
    @NonNull
    @Override
    public RecyclerViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        // recyclerview_item XML 레이아웃을 이용해 뷰 객체를 만든 후 뷰홀더에 담아 반환
        LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        View itemView = inflater.inflate(R.layout.recyclerview_item, parent, false);
        return new RecyclerViewHolder(itemView);
    }
 
    @Override
    public void onBindViewHolder(@NonNull RecyclerViewHolder holder, int position) {
        // 뷰홀더에 각 아이템의 데이터를 설정
        PersonItem item = items.get(position);
        holder.setItem(item);
        holder.setOnItemClickListener(listener);
    }
 
    public void addItem(PersonItem item) {
        items.add(item);    // 아이템 추가
    }
 
    public void addItems(ArrayList<PersonItem> items) {
        this.items = items; // 아이템 배열 추가
    }
 
    public PersonItem getItem(int position) {
        return items.get(position); // 아이템 가져오기
    }
 
    public void setOnItemClickListener(itemClickListener listener) {
        this.listener = listener;
    }
}
 
cs


 

8. MainActivity.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
package com.tistory.qlyh8.practice;
 
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.View;
import android.widget.Toast;
 
 
public class MainActivity extends AppCompatActivity {
 
    private RecyclerViewAdapter adapter;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        // RecyclerView 는 껍데기 역할만 한다.
        RecyclerView recyclerView = findViewById(R.id.recycler_view);
 
        // 가로 방향으로 레이아웃 설정
        // reverseLayout: 아이템이 보이는 방향. true 지정시 아래에서 위로 올라감
        LinearLayoutManager layoutManager = new LinearLayoutManager(this,
                LinearLayoutManager.HORIZONTAL, false);
        recyclerView.setLayoutManager(layoutManager);
 
        adapter = new RecyclerViewAdapter(getApplicationContext());
        adapter.addItem(new PersonItem("Amy", "010-1000-1000"));
        adapter.addItem(new PersonItem("John", "010-2000-2000"));
        adapter.addItem(new PersonItem("Tom", "010-3000-3000"));
        recyclerView.setAdapter(adapter);   // 어뎁터 설정
 
        // 아이템 클릭 이벤트 설정
        adapter.setOnItemClickListener(new RecyclerViewAdapter.itemClickListener() {
            @Override
            public void onItemClick(RecyclerViewHolder holder, View view, int position) {
                PersonItem item = adapter.getItem(position);
                Toast.makeText(getApplicationContext(), "이름: "+item.getName(), Toast.LENGTH_SHORT).show();
            }
        });
    }
}
cs



9. 참고

- Create a List with RecyclerView

  https://developer.android.com/guide/topics/ui/layout/recyclerview

- Android UI 멋지게 만들기

  https://academy.realm.io/kr/posts/gotocph-israel-ferrer-camacho-android-ui/

- RecyclerView와 Realm으로 만드는 GridLayout

  https://academy.realm.io/kr/posts/android-recycler-view/

- Android RecyclerView 요약

  https://medium.com/@bansooknam/android-recyclerview-%EC%9A%94%EC%95%BD-aaea4a9c95e7



저작자표시

'Android' 카테고리의 다른 글

트윈 애니메이션 (Tween Animation)  (0) 2018.08.24
스레드 애니메이션 (Thread Animation)  (0) 2018.08.24
음성 녹음하기  (0) 2018.08.23
동영상 재생하기  (0) 2018.08.23
음악 재생하기  (0) 2018.08.23

+ Recent posts

티스토리툴바