반응형


ScrollView 내부에 ImageView와 TextView를 같이 넣어서 화면 스크롤시 이미지와 텍스트 뷰가 스크롤되도록 구현한 예제입니다.


최초 작성 2019. 2. 21



실행시키면 다음 처럼 동작합니다.

예제를 실행시키면  위에는 이미지가 보이고 아래에는 텍스트가 보입니다.




화면을 위로 스크롤하면 이미지와 텍스트뷰가 같이 이동하면서 스크롤됩니다.


  




예제 코드를 다음처럼 테스트해 볼 수 있습니다.


1. 앱에서 보여줄 이미지 파일을 드래그하여 res \ drawable 폴더에 넣습니다.





2. activity_main.xml 파일을 다음처럼 작성합니다.

ScrollView에 ImageView와 TextView를 같이 넣을 수 없기 때문에 LinearLayout를 사용하여 집어넣습니다.


<?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:gravity="center"
   android:orientation="vertical">

   <ScrollView
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:orientation="vertical"
       android:gravity ="center"
       android:fillViewport="true"
       android:layout_marginTop="0dp"
       android:id="@+id/scrollView">
       <LinearLayout
           android:orientation="vertical"
           android:id="@+id/layout"
           android:layout_width="match_parent"
           android:layout_height="wrap_content">

           <ImageView
               android:id="@+id/imageview"
               android:layout_width="match_parent"
               android:layout_height="wrap_content"
               android:scaleType="fitCenter"
               android:adjustViewBounds="true"/>

           <TextView
               android:id="@+id/textview"
               android:layout_width="match_parent"
               android:layout_height="wrap_content"
               android:textSize="15sp" />
       </LinearLayout>
   </ScrollView>
</LinearLayout>




3. MainActivity.java에서는 이미지 뷰에 보여줄 이미지와 텍스트 뷰에 보여줄 텍스트를 지정해주는 것외에는 특별한 기능이 없습니다.


package com.tistory.webnautes.scrollview_test;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.ImageView;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

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

       ImageView imageView = (ImageView)findViewById(R.id.imageview);
       TextView textView = (TextView)findViewById(R.id.textview);

       // drawable에 있는 이미지를 지정합니다.
       imageView.setImageResource(R.drawable.moon);


       // 100 줄의 텍스트를 생성합니다.
       String text = "";
       for(int i=0; i<100; i++)
           text += i + "\n";
       textView.setText(text);
   }
}




참고

https://stackoverflow.com/questions/36285402/alternating-textview-and-imageview-inside-a-scrollview




반응형

해보고 확인한 것을 문서화하여 기록합니다.


공부한 내용을 공유하는 공간입니다.
부족함이 있지만 도움이 되었으면 합니다.
잘못된 부분이나 개선점을 알려주시면 감사하겠습니다.



포스트 작성시에는 문제 없었지만 이후 문제가 생길 수 있습니다.
문제가 생기면 포스트와 바뀐 환경이 있나 먼저 확인해보세요.

질문을 남겨주면 가능한 빨리 답변드립니다.


제가 쓴 책도 한번 검토해보세요 ^^

  • 네이버 블러그 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 카카오스토리 공유하기

댓글을 달아 주세요

TistoryWhaleSkin3.4">