Android ScrollView 예제 - ImageView와 TextView를 함께 스크롤하는 방법

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