안드로이드 앱 프로그래밍 - 17(머터리얼 라이브러리)

- 머터리얼 라이브러리

머터리얼 라이브러리란 애니메이션을 넣어 아름답고 직관적인 경험을 사용자에게 선사하는 라이브러리입니다. 포인트는 애니메이션입니다. 

 

- 앱바와 코디네이터 뷰를 사용하여 스크롤 연동하기

애니메이션중 하나인 스크롤을 머터리얼 라이브러리를 사용해서 연동해보겠습니다. 예를들어 유튜브의 경우에 가로로 보는 영상을 하나 틀고 아래 관련동영상 부분을 스크롤하게되면 영상은 가만히 있고 아래쪽만 스크롤되게됩니다. 이때는 스크롤이 연동되지 않은 상태입니다. 하지만 유튜브 컨텐츠중 세로로보는 영상이라면 아래 관련 동영상 부분을 스크롤하게되면 영상도 올라가게됩니다. 이때를 스크롤이 연동되었다고 말합니다.

 

<앱바>

보통 어플을 만들때 앱바를 많이들 사용합니다. 앱바는 위쪽의 꾸밀 수 있는 영역을 의미합니다. 유튜브에서는 영상을 앱바에 넣어서 꾸미고있습니다. 현업에서 앱바를 논리적인 뷰로 많이 사용합니다. 또한 스크롤 뷰를 사용할때도 앱바부분과 아래쪽부분의 스크롤을 연동합니다. 따라서 우리도 앱바를 만들어보고 아래쪽이랑 스크롤을 연동해보겠습니다. 그전에 앱바를만들고 사진을 넣고 앱바 밑에는 텍스트뷰를 만들어보겠습니다. 앱바를 사용하려면 머터리얼라이브러리를 선언해야하지만 자동으로 선언됩니다. 따라서 xml만 잘 써주면됩니다. 앱바에 툴바를 넣고 크기를 242dp만큼 늘려보겠습니다. 먼저 메인액티비티.xml입니다.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="242dp"
        android:id="@+id/appbar"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
        <androidx.appcompat.widget.Toolbar
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:id="@+id/toolbar"/>
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/image1"
            android:scaleType="fitXY"/>
    </com.google.android.material.appbar.AppBarLayout>

    <TextView
        android:id="@+id/newstext"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:scrollbars="vertical"
        android:text="키움은 대승적 차원에서 FA 정찬헌의 사인트레이드를 추진하기로 했다. FA 시장이 열릴 때부터 정찬헌과의 계약에 관심이 없었다. 사인트레이드조차 생각하지 않고 방관해왔다. 그러나 33세 우완투수가 시장에서 관심을 받지 못하자 숨통을 열어줬다.
정찬헌 측은 키움에 고맙다는 반응이지만, 사실 키움으로서도 선수가 이대로 프로에서의 생명이 끊기는 것에 대한 약간의 부담은 있었다고 봐야 한다. 정찬헌은 LG 시절 허리수술 후 철저한 관리를 받았지만, 더 이상 건강이슈가 있는 투수가 아니다. 아직 그렇게 많은 나이도 아니다.;
시간과의 싸움이다. 이미 10개 구단의 1~2군 스프링캠프 명단이 확정됐다. 정찬헌 에이전트 브리온컴퍼니 박희진 팀장은 “이제 찬헌이의 필요성을 생각해주는 구단이 있다면 적극적으로 협상에 임할 것이다. (계약하는 구단의)1군 캠프를 당장 따라가긴 어렵겠지만, 최대한 빨리 결정하는 게 좋을 것 같다. 그래야 2군 캠프부터 가든 개인훈련을 하든 마음 편하게 할 수 있을 것 같다”라고 했다.;
박희진 팀장은 25일 키움의 사인트레이드 협조에 대한 연락을 받은 뒤 곧바로 대다수 구단에 연락했다. 서울에서 개인훈련 중인 정찬헌의 투구 영상도 빠짐없이 돌렸다. 정찬헌은 현재 건강하며, 특정한 보직을 원하는 것도 아니다. 계약만 하면, 곧바로 캠프에 합류할 수 있는 몸 상태다.;
3~4개 구단으로부터 정찬헌 영입을 ‘검토’하겠다는 답변을 받았다. 애당초 B등급 보상이 아닌, 사인트레이드라면 정찬헌을 원하는 구단이 있을 것이라는 전망이 많았다. 박희진 팀장은 “캠프 가기 전에 연락이 올지, 조금 더 눈치싸움을 해서 2월까지 갈지 지켜봐야 할 것 같다. 팀이 결정돼야 선수가 확실하게 준비를 할 수 있다”라고 했다.마침 사인트레이드가 결정된 26일은 정찬헌의 생일이었다. 요즘 정찬헌은 개인훈련을 하면서도 이런저런 생각이 많다는 후문이다. 분명한 건 정찬헌의 가치를 아는 구단이 있으며, FA 미아로 남을 가능성은 낮다는 전망이 지배적이다.;
한 구단 관계자는 박희진 팀장에게 “코치라면 당장 데려오고 싶다”라고 했다. 그만큼 정찬헌은 LG 시절부터 덕아웃 리더로서 젊은 투수들에게 선한 영향을 미친 선배다. 키움에서 보낸 1년 반 역시 그랬다. 젊은 투수들이 정찬헌을 잘 따랐다. 어느 팀을 가더라도 잘 융화될 수 있으며, 어떤 보직도 소화할 수 있는 투수다.;
박희진 팀장은 “조건의 차이는 있겠지만, 그 부분을 욕심 내기보다 먼저 제안이 오는 구단과 되도록 계약하고 싶은 마음이다”라고 했다. 먼저 제안이 오는 구단과 키움 사이에서 입장을 조율해 최대한 빨리 사인트레이드를 이끌어내겠다는 계획이다. 키움도 기왕 사인트레이드를 하기로 한 만큼, 어지간한 조건이면 수용할 것으로 보인다.;
구단들이 2월 스프링캠프, 나아가 3월 시범경기를 치르다 보면 계획대로 흘러가지 않는 경우가 많다. 핵심전력으로 생각한 투수가 갑자기 부상할 수도 있고, 팀의 목표가 수정되면서 투수가 더 필요한 경우가 생길 수도 있다. 정찬헌에게 2월의 구세주가 나타날 가능성은 충분하다.키움은 대승적 차원에서 FA 정찬헌의 사인트레이드를 추진하기로 했다. FA 시장이 열릴 때부터 정찬헌과의 계약에 관심이 없었다. 사인트레이드조차 생각하지 않고 방관해왔다. 그러나 33세 우완투수가 시장에서 관심을 받지 못하자 숨통을 열어줬다.
정찬헌 측은 키움에 고맙다는 반응이지만, 사실 키움으로서도 선수가 이대로 프로에서의 생명이 끊기는 것에 대한 약간의 부담은 있었다고 봐야 한다. 정찬헌은 LG 시절 허리수술 후 철저한 관리를 받았지만, 더 이상 건강이슈가 있는 투수가 아니다. 아직 그렇게 많은 나이도 아니다.;
시간과의 싸움이다. 이미 10개 구단의 1~2군 스프링캠프 명단이 확정됐다. 정찬헌 에이전트 브리온컴퍼니 박희진 팀장은 “이제 찬헌이의 필요성을 생각해주는 구단이 있다면 적극적으로 협상에 임할 것이다. (계약하는 구단의)1군 캠프를 당장 따라가긴 어렵겠지만, 최대한 빨리 결정하는 게 좋을 것 같다. 그래야 2군 캠프부터 가든 개인훈련을 하든 마음 편하게 할 수 있을 것 같다”라고 했다.;
박희진 팀장은 25일 키움의 사인트레이드 협조에 대한 연락을 받은 뒤 곧바로 대다수 구단에 연락했다. 서울에서 개인훈련 중인 정찬헌의 투구 영상도 빠짐없이 돌렸다. 정찬헌은 현재 건강하며, 특정한 보직을 원하는 것도 아니다. 계약만 하면, 곧바로 캠프에 합류할 수 있는 몸 상태다.;
3~4개 구단으로부터 정찬헌 영입을 ‘검토’하겠다는 답변을 받았다. 애당초 B등급 보상이 아닌, 사인트레이드라면 정찬헌을 원하는 구단이 있을 것이라는 전망이 많았다. 박희진 팀장은 “캠프 가기 전에 연락이 올지, 조금 더 눈치싸움을 해서 2월까지 갈지 지켜봐야 할 것 같다. 팀이 결정돼야 선수가 확실하게 준비를 할 수 있다”라고 했다.마침 사인트레이드가 결정된 26일은 정찬헌의 생일이었다. 요즘 정찬헌은 개인훈련을 하면서도 이런저런 생각이 많다는 후문이다. 분명한 건 정찬헌의 가치를 아는 구단이 있으며, FA 미아로 남을 가능성은 낮다는 전망이 지배적이다.;
한 구단 관계자는 박희진 팀장에게 “코치라면 당장 데려오고 싶다”라고 했다. 그만큼 정찬헌은 LG 시절부터 덕아웃 리더로서 젊은 투수들에게 선한 영향을 미친 선배다. 키움에서 보낸 1년 반 역시 그랬다. 젊은 투수들이 정찬헌을 잘 따랐다. 어느 팀을 가더라도 잘 융화될 수 있으며, 어떤 보직도 소화할 수 있는 투수다.;
박희진 팀장은 “조건의 차이는 있겠지만, 그 부분을 욕심 내기보다 먼저 제안이 오는 구단과 되도록 계약하고 싶은 마음이다”라고 했다. 먼저 제안이 오는 구단과 키움 사이에서 입장을 조율해 최대한 빨리 사인트레이드를 이끌어내겠다는 계획이다. 키움도 기왕 사인트레이드를 하기로 한 만큼, 어지간한 조건이면 수용할 것으로 보인다.;
구단들이 2월 스프링캠프, 나아가 3월 시범경기를 치르다 보면 계획대로 흘러가지 않는 경우가 많다. 핵심전력으로 생각한 투수가 갑자기 부상할 수도 있고, 팀의 목표가 수정되면서 투수가 더 필요한 경우가 생길 수도 있다. 정찬헌에게 2월의 구세주가 나타날 가능성은 충분하다.키움은 대승적 차원에서 FA 정찬헌의 사인트레이드를 추진하기로 했다. FA 시장이 열릴 때부터 정찬헌과의 계약에 관심이 없었다. 사인트레이드조차 생각하지 않고 방관해왔다. 그러나 33세 우완투수가 시장에서 관심을 받지 못하자 숨통을 열어줬다.
정찬헌 측은 키움에 고맙다는 반응이지만, 사실 키움으로서도 선수가 이대로 프로에서의 생명이 끊기는 것에 대한 약간의 부담은 있었다고 봐야 한다. 정찬헌은 LG 시절 허리수술 후 철저한 관리를 받았지만, 더 이상 건강이슈가 있는 투수가 아니다. 아직 그렇게 많은 나이도 아니다.;
시간과의 싸움이다. 이미 10개 구단의 1~2군 스프링캠프 명단이 확정됐다. 정찬헌 에이전트 브리온컴퍼니 박희진 팀장은 “이제 찬헌이의 필요성을 생각해주는 구단이 있다면 적극적으로 협상에 임할 것이다. (계약하는 구단의)1군 캠프를 당장 따라가긴 어렵겠지만, 최대한 빨리 결정하는 게 좋을 것 같다. 그래야 2군 캠프부터 가든 개인훈련을 하든 마음 편하게 할 수 있을 것 같다”라고 했다.;
박희진 팀장은 25일 키움의 사인트레이드 협조에 대한 연락을 받은 뒤 곧바로 대다수 구단에 연락했다. 서울에서 개인훈련 중인 정찬헌의 투구 영상도 빠짐없이 돌렸다. 정찬헌은 현재 건강하며, 특정한 보직을 원하는 것도 아니다. 계약만 하면, 곧바로 캠프에 합류할 수 있는 몸 상태다.;
3~4개 구단으로부터 정찬헌 영입을 ‘검토’하겠다는 답변을 받았다. 애당초 B등급 보상이 아닌, 사인트레이드라면 정찬헌을 원하는 구단이 있을 것이라는 전망이 많았다. 박희진 팀장은 “캠프 가기 전에 연락이 올지, 조금 더 눈치싸움을 해서 2월까지 갈지 지켜봐야 할 것 같다. 팀이 결정돼야 선수가 확실하게 준비를 할 수 있다”라고 했다.마침 사인트레이드가 결정된 26일은 정찬헌의 생일이었다. 요즘 정찬헌은 개인훈련을 하면서도 이런저런 생각이 많다는 후문이다. 분명한 건 정찬헌의 가치를 아는 구단이 있으며, FA 미아로 남을 가능성은 낮다는 전망이 지배적이다.;
한 구단 관계자는 박희진 팀장에게 “코치라면 당장 데려오고 싶다”라고 했다. 그만큼 정찬헌은 LG 시절부터 덕아웃 리더로서 젊은 투수들에게 선한 영향을 미친 선배다. 키움에서 보낸 1년 반 역시 그랬다. 젊은 투수들이 정찬헌을 잘 따랐다. 어느 팀을 가더라도 잘 융화될 수 있으며, 어떤 보직도 소화할 수 있는 투수다.;
박희진 팀장은 “조건의 차이는 있겠지만, 그 부분을 욕심 내기보다 먼저 제안이 오는 구단과 되도록 계약하고 싶은 마음이다”라고 했다. 먼저 제안이 오는 구단과 키움 사이에서 입장을 조율해 최대한 빨리 사인트레이드를 이끌어내겠다는 계획이다. 키움도 기왕 사인트레이드를 하기로 한 만큼, 어지간한 조건이면 수용할 것으로 보인다.;
구단들이 2월 스프링캠프, 나아가 3월 시범경기를 치르다 보면 계획대로 흘러가지 않는 경우가 많다. 핵심전력으로 생각한 투수가 갑자기 부상할 수도 있고, 팀의 목표가 수정되면서 투수가 더 필요한 경우가 생길 수도 있다. 정찬헌에게 2월의 구세주가 나타날 가능성은 충분하다.키움은 대승적 차원에서 FA 정찬헌의 사인트레이드를 추진하기로 했다. FA 시장이 열릴 때부터 정찬헌과의 계약에 관심이 없었다. 사인트레이드조차 생각하지 않고 방관해왔다. 그러나 33세 우완투수가 시장에서 관심을 받지 못하자 숨통을 열어줬다.
정찬헌 측은 키움에 고맙다는 반응이지만, 사실 키움으로서도 선수가 이대로 프로에서의 생명이 끊기는 것에 대한 약간의 부담은 있었다고 봐야 한다. 정찬헌은 LG 시절 허리수술 후 철저한 관리를 받았지만, 더 이상 건강이슈가 있는 투수가 아니다. 아직 그렇게 많은 나이도 아니다.;
시간과의 싸움이다. 이미 10개 구단의 1~2군 스프링캠프 명단이 확정됐다. 정찬헌 에이전트 브리온컴퍼니 박희진 팀장은 “이제 찬헌이의 필요성을 생각해주는 구단이 있다면 적극적으로 협상에 임할 것이다. (계약하는 구단의)1군 캠프를 당장 따라가긴 어렵겠지만, 최대한 빨리 결정하는 게 좋을 것 같다. 그래야 2군 캠프부터 가든 개인훈련을 하든 마음 편하게 할 수 있을 것 같다”라고 했다.;
박희진 팀장은 25일 키움의 사인트레이드 협조에 대한 연락을 받은 뒤 곧바로 대다수 구단에 연락했다. 서울에서 개인훈련 중인 정찬헌의 투구 영상도 빠짐없이 돌렸다. 정찬헌은 현재 건강하며, 특정한 보직을 원하는 것도 아니다. 계약만 하면, 곧바로 캠프에 합류할 수 있는 몸 상태다.;
3~4개 구단으로부터 정찬헌 영입을 ‘검토’하겠다는 답변을 받았다. 애당초 B등급 보상이 아닌, 사인트레이드라면 정찬헌을 원하는 구단이 있을 것이라는 전망이 많았다. 박희진 팀장은 “캠프 가기 전에 연락이 올지, 조금 더 눈치싸움을 해서 2월까지 갈지 지켜봐야 할 것 같다. 팀이 결정돼야 선수가 확실하게 준비를 할 수 있다”라고 했다.마침 사인트레이드가 결정된 26일은 정찬헌의 생일이었다. 요즘 정찬헌은 개인훈련을 하면서도 이런저런 생각이 많다는 후문이다. 분명한 건 정찬헌의 가치를 아는 구단이 있으며, FA 미아로 남을 가능성은 낮다는 전망이 지배적이다.;
한 구단 관계자는 박희진 팀장에게 “코치라면 당장 데려오고 싶다”라고 했다. 그만큼 정찬헌은 LG 시절부터 덕아웃 리더로서 젊은 투수들에게 선한 영향을 미친 선배다. 키움에서 보낸 1년 반 역시 그랬다. 젊은 투수들이 정찬헌을 잘 따랐다. 어느 팀을 가더라도 잘 융화될 수 있으며, 어떤 보직도 소화할 수 있는 투수다.;
박희진 팀장은 “조건의 차이는 있겠지만, 그 부분을 욕심 내기보다 먼저 제안이 오는 구단과 되도록 계약하고 싶은 마음이다”라고 했다. 먼저 제안이 오는 구단과 키움 사이에서 입장을 조율해 최대한 빨리 사인트레이드를 이끌어내겠다는 계획이다. 키움도 기왕 사인트레이드를 하기로 한 만큼, 어지간한 조건이면 수용할 것으로 보인다.;
구단들이 2월 스프링캠프, 나아가 3월 시범경기를 치르다 보면 계획대로 흘러가지 않는 경우가 많다. 핵심전력으로 생각한 투수가 갑자기 부상할 수도 있고, 팀의 목표가 수정되면서 투수가 더 필요한 경우가 생길 수도 있다. 정찬헌에게 2월의 구세주가 나타날 가능성은 충분하다." />
</LinearLayout>

아래는 메인액티비티.kt 파일입니다.

 

class MainActivity : AppCompatActivity() {
    //토클객체 선언
    lateinit var toggle: ActionBarDrawerToggle
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        val binding = ActivityMainBinding.inflate(layoutInflater) //activity_main_xml 파일의 객체들을 가져옵니다.
        setContentView(binding.root) //activity_main_xml을 화면에 출력합니다.
        binding.newstext.setMovementMethod(ScrollingMovementMethod()) //스크롤을 가능하게 해줍니다.

        setSupportActionBar(binding.toolbar) //툴바를 등록해줍니다.
    }
}

아래는 실행화면입니다.

해당 화면에서 텍스트뷰부분을 위로 스크롤하게되면 앱바에 있는 사진이 변동이 없습니다. 이제 스크롤을 연동시켜주겠습니다.

 

- 코디네이터 레이아웃과 중첩 스크롤뷰로 스크롤 연동

코디네이터 레이아웃은 스크롤을 연동할때 꼭 필요한 레이아웃입니다. 즉 앱바와 텍스트뷰가 코디네이터 레이아웃태그 안에 있어야합니다. 하지만, 코디네이터 레이아웃 자체만으로는 리사이클러 뷰와 앱바 레이아웃 만이 연동이 가능합니다. 우리는 텍스트뷰와 앱바를 연동할것입니다. 따라서 코디네이터 레이아웃에 중첩 스크롤뷰를 사용해서 텍스트뷰와 앱바를 연동시킬 것입니다. 방법은 아래와 같습니다. 먼저 액티비티.xml 파일입니다.

<?xml version="1.0" encoding="utf-8"?>
<com.google.android.material.circularreveal.coordinatorlayout.CircularRevealCoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">
        <com.google.android.material.appbar.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="242dp"
            android:id="@+id/appbar"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
            <androidx.appcompat.widget.Toolbar
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:id="@+id/toolbar"
                app:layout_scrollFlags="scroll|enterAlways"/>
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/image1"
                android:scaleType="fitXY"
                app:layout_scrollFlags="scroll|enterAlways"/>
        </com.google.android.material.appbar.AppBarLayout>
        <androidx.core.widget.NestedScrollView
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">
            <TextView
                android:id="@+id/newstext"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:scrollbars="vertical"
                android:text="@string/newtext" />
        </androidx.core.widget.NestedScrollView>
</com.google.android.material.circularreveal.coordinatorlayout.CircularRevealCoordinatorLayout>

위 코드의 원리는 중첩 스크롤뷰부분에 behavior 속성에 appvar에게 스크롤뷰 행동을 전달하고, appbar는 scrollFlags에 따라 항상 스크롤 입력을 받습니다. 따라서 textview의 스크롤이 있게되면 앱바에게 전달되며 같이 스크롤이 되는 것입니다. 아래는 메인액티비티.kt 파일입니다.

package com.example.test

import android.os.Bundle
import android.text.method.ScrollingMovementMethod
import androidx.appcompat.app.ActionBarDrawerToggle
import androidx.appcompat.app.AppCompatActivity
import com.example.test.databinding.ActivityMainBinding


class MainActivity : AppCompatActivity() {
    //토클객체 선언
    lateinit var toggle: ActionBarDrawerToggle
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        val binding = ActivityMainBinding.inflate(layoutInflater) //activity_main_xml 파일의 객체들을 가져옵니다.
        setContentView(binding.root) //activity_main_xml을 화면에 출력합니다.
        binding.newstext.setMovementMethod(ScrollingMovementMethod()) //스크롤을 가능하게 해줍니다.

        setSupportActionBar(binding.toolbar) //툴바를 등록해줍니다.
    }
}

아래는 실행화면입니다.