[Android] 동적으로 레이아웃 추가하기 - HorizontalScrollView, Glide

평소처럼 ArrayList <-> Adapter <-> ListView 모양으로 구현하려다가 RecyclerView 라이브러리 사용을 피하고 싶어서 레이아웃을 추가하는 방식으로 가로 형태의 스크롤 뷰를 만들어봤습니다.

 

 

결과 모습

 

 

---

 

먼저, build.gradle (Module: app) 파일의  dependencies 블록 안에 glide 라이브러리 추가한 뒤 Sync now 클릭

// Glide 라이브러리
implementation 'com.github.bumptech.glide:glide:4.10.0'

 

1. MainActivity.java

public class MainActivity extends AppCompatActivity {
    ArrayList<SampleItem> arrayList;

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

        arrayList = new ArrayList<>();
        SampleItem sampleItem = new SampleItem("aa", "1000원","https://cdn.pixabay.com/photo/2018/01/10/23/53/rabbit-3075088_1280.png");

        arrayList.add(sampleItem);
        arrayList.add(sampleItem);
        arrayList.add(sampleItem);
        arrayList.add(sampleItem);

        for (int i = 0; i < arrayList.size(); i++){
            // 추가할 레이아웃
            SubLayout subLayout = new SubLayout(getApplicationContext(), arrayList.get(i));
            // 추가될 위치
            LinearLayout layout = (LinearLayout)findViewById(R.id.input_here_layout);
            layout.addView(subLayout);
        }

    }
}

 

2. activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textAlignment="center"
        android:text="List"/>

    <HorizontalScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <LinearLayout
            android:id="@+id/input_here_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"></LinearLayout>
    </HorizontalScrollView>

</LinearLayout>

 

3. SampleItem.java

public class SampleItem {
    String name;
    String price;
    String imageUrl;

    SampleItem(String name, String price, String imageUrl) {
        this.name = name;
        this.price = price;
        this.imageUrl = imageUrl;
    }
    public String getImageUrl() {
        return imageUrl;
    }

    public String getName() {
        return name;
    }

    public String getPrice() {
        return price;
    }
}

 

4. SubLayout.java

public class SubLayout extends LinearLayout {
    
    public SubLayout(Context context, AttributeSet attrs, SampleItem sampleItem) {
        super(context, attrs);
        init(context, sampleItem);
    }

    public SubLayout(Context context, SampleItem sampleItem) {
        super(context);
        init(context, sampleItem);
    }

    private void init(Context context, SampleItem sampleItem) {
        LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        inflater.inflate(R.layout.layout_sub_layout, this, true);

        ImageView img = (ImageView)findViewById(R.id.glide_imageview);
        TextView tvName = (TextView)findViewById(R.id.tv_name);
        TextView tvPrice = (TextView)findViewById(R.id.tv_price);
        
        // 이미지 로드 라이브러리 사용 ImageUrl to Image
        Glide.with(this)
                .load(sampleItem.getImageUrl().toString())
                .override(300,300)
                .centerCrop()
                .placeholder(R.drawable.ic_launcher_foreground)
                .into(img);
        tvName.setText(sampleItem.getName());
        tvPrice.setText(sampleItem.getPrice());
    }
}

 

5. layout_sub_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/glide_imageview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/tv_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/tv_price"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</LinearLayout>

 

---

구현 방식은 ArrayList <-> Adapter <-> ListView와 거의 동일해요.

SampleItem에 필요한 데이터 타입을 세팅하고

MainActivity에서 원하는 이미지와 텍스트 등 데이터 삽입하고

SubLayout에서 터치 이벤트 추가와 화면에 표시