안드로이드

뷰페이저를 활용한 안내 배너 전환기능 구현

톰이야요 2023. 11. 10. 08:00

콩콩데이터 안드로이드앱에 배너 전환기능을 구현했습니다. 자바버전으로는 소스를 찾기가 힘들어 구현한걸 올려놓습니다. 기존의 고정된 이미지링크에서 배너가 자동으로 전환되는 기능을 바꾼겁니다.

<콩콩데이터앱>

 

 

 

    //배너광고를 위한 viewpager2 추가
    implementation "androidx.viewpager2:viewpager2:1.0.0"
    def lifecycle_version = "2.2.0"
    implementation "androidx.lifecycle:lifecycle-viewmodel-ktx:$lifecycle_version"

gradle 파일에 뷰페이저를 추가합니다.

 

 

 

package com.main.knh.kong;

import android.view.View;

public interface Banner_Interaction extends View.OnClickListener {
    void onBannerItemClicked(Banner_Item bannerItem);
}

<app/src/main/java/com/main/knh/kong/Banner_Interaction.java>

 

package com.main.knh.kong;

import com.example.knh.proj2019_2.R;

public class Banner_Item {
    private String name, company, text;
    private int color, textColor, textCompanyColor;

    public Banner_Item(String name, String company, String text, int color, int textcolor) {
        this.name = name;
        this.company = company;
        this.text = text;
        this.color = color;
        this.textColor = textcolor;
    }

    public String getName() {return name;}
    public String getCompany() {return company;}
    public String getText() {return text;}
    public int getColor() {
        return color;
    }
    public int getTextCompanyColor() {return R.color.colorGray;}
    public int getTextColor() {
        return textColor;
    }
}

<app/src/main/java/com/main/knh/kong/Banner_Item.java>

 

package com.main.knh.kong;

import androidx.lifecycle.MutableLiveData;
import androidx.lifecycle.LiveData;
import androidx.lifecycle.ViewModel;

import java.util.List;

public class Banner_ViewModel extends ViewModel {
    private MutableLiveData<List<Banner_Item>> _bannerItemList = new MutableLiveData<>();
    private MutableLiveData<Integer> _currentPosition = new MutableLiveData<>();

    public LiveData<List<Banner_Item>> getBannerItemList() {
        return _bannerItemList;
    }

    public LiveData<Integer> getCurrentPosition() {
        return _currentPosition;
    }

    public Banner_ViewModel() {
        _currentPosition.setValue(0);
    }

    public void setBannerItems(List<Banner_Item> list) {
        _bannerItemList.setValue(list);
    }

    public void setCurrentPosition(int position) {
        //_currentPosition.setValue(position);
        _currentPosition.postValue(position); //백그라운드 스레드에서 호출시 postValue를 사용
    }
}

<app/src/main/java/com/main/knh/kong/Banner_ViewModel.java>

package com.main.knh.kong;

import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;

import com.example.knh.proj2019_2.R;

import java.util.List;

public class Banner_ViewPagerAdaptor extends RecyclerView.Adapter<RecyclerView.ViewHolder> {
    public static final int BANNER_ITEM_COUNT = 25;
    private List<Banner_Item> bannerItemList;
    private Banner_Interaction interaction;

    public Banner_ViewPagerAdaptor(Banner_Interaction interaction) {
        this.interaction = interaction;
    }

    @NonNull
    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View itemView = LayoutInflater.from(parent.getContext()).inflate(R.layout.banner_item_layout, parent, false);
        return new BannerViewHolder(itemView, interaction);
    }

    @Override
    public int getItemCount() {
        return BANNER_ITEM_COUNT;
    }

    @Override
    public void onBindViewHolder(@NonNull RecyclerView.ViewHolder holder, int position) {
        if (bannerItemList != null) {
            ((BannerViewHolder) holder).bind(bannerItemList.get(position));
        }
    }

    // Functions
    public void submitList(List<Banner_Item> list) {
        bannerItemList = list;
        notifyDataSetChanged();
    }

    // ViewHolder
    public class BannerViewHolder extends RecyclerView.ViewHolder {
        private Banner_Interaction interaction;
        private TextView textviewBannerCompany, textviewBannerText;
        private ImageView imageViewBannerCI;
        private LinearLayout layout, layout_text;

        public BannerViewHolder(View itemView, Banner_Interaction interaction) {
            super(itemView);
            this.interaction = interaction;
            textviewBannerCompany = itemView.findViewById(R.id.textView_banner_company);
            textviewBannerText = itemView.findViewById(R.id.textView_banner_name);
            layout = itemView.findViewById(R.id.BannerItemLayout);
            layout_text = itemView.findViewById(R.id.banner_background_layout);
            imageViewBannerCI = itemView.findViewById(R.id.imageView_banner_ci);


            itemView.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    if (bannerItemList != null) {
                        interaction.onBannerItemClicked(bannerItemList.get(getAdapterPosition()));
                    }
                }
            });
        }

        public void bind(Banner_Item bannerItem) {
            layout_text.setBackgroundColor(bannerItem.getColor());
            textviewBannerCompany.setBackgroundColor(bannerItem.getColor());
            textviewBannerCompany.setText(bannerItem.getCompany());
            textviewBannerCompany.setTextColor(bannerItem.getTextCompanyColor());
            textviewBannerText.setBackgroundColor(bannerItem.getColor());
            textviewBannerText.setText(bannerItem.getText());
            textviewBannerText.setTextColor(bannerItem.getTextColor());
            switch(bannerItem.getName())
            {
                case "police_crime": imageViewBannerCI.setImageResource(R.drawable.ci_police); break;
                case "khnp_radiorate": imageViewBannerCI.setImageResource(R.drawable.ci_khnp); break;
                case "khnp_powerate": imageViewBannerCI.setImageResource(R.drawable.ci_khnp); break;
                case "khnp_weather": imageViewBannerCI.setImageResource(R.drawable.ci_khnp); break;
                case "khnp_air": imageViewBannerCI.setImageResource(R.drawable.ci_khnp); break;
                case "khnp_wastewater": imageViewBannerCI.setImageResource(R.drawable.ci_khnp); break;
                case "khnp_inoutwater": imageViewBannerCI.setImageResource(R.drawable.ci_khnp); break;
                case "khnp_rwm": imageViewBannerCI.setImageResource(R.drawable.ci_khnp); break;
                case "khnp_majorproject": imageViewBannerCI.setImageResource(R.drawable.ci_khnp); break;
                case "keco_airpredict": imageViewBannerCI.setImageResource(R.drawable.ci_keco); break;
                case "keco_airpollution": imageViewBannerCI.setImageResource(R.drawable.ci_keco); break;
                case "kpx_sukub": imageViewBannerCI.setImageResource(R.drawable.ci_kpx); break;
                case "kospo_geninfo": imageViewBannerCI.setImageResource(R.drawable.ci_kospo); break;
                case "kobis_boxoffice": imageViewBannerCI.setImageResource(R.drawable.ci_kobis); break;
                default: imageViewBannerCI.setImageResource(R.drawable.ci_gov); break;
            }
        }
    }
}

<app/src/main/java/com/main/knh/kong/Banner_ViewPagerAdaptor.java>

 

 

위의 코드를 수정하면, 이미지배너를 띄우거나, 텍스트를 추가하거나, 배너의 여러가지를 변경해서 표시할 수 있습니다.

 

 

   //////////////////////
   //  배너 관련함수 모음 //
   //////////////////////
   private void initViewPager2(View view) {
       ViewPager2 viewPager2 = view.findViewById(R.id.bannerViewpager);
       viewPagerAdapter = new Banner_ViewPagerAdaptor(this);
       viewPager2.setAdapter(viewPagerAdapter);

       viewPager2.registerOnPageChangeCallback(new ViewPager2.OnPageChangeCallback() {
           @Override
           public void onPageSelected(int position) {
               super.onPageSelected(position);
               isRunning = true;

               TextView tvPageNumber = view.findViewById(R.id.textview_pagenumber);
               tvPageNumber.setText(String.valueOf(position + 1));

               viewModel.setCurrentPosition(position);
           }
       });
   }

    //베너
    private void subscribeObservers(View view) {
        viewModel.getBannerItemList().observe(this, new Observer<List<Banner_Item>>() {
            @Override
            public void onChanged(List<Banner_Item> bannerItemList) {
                viewPagerAdapter.submitList(bannerItemList);
            }
        });
        viewModel.getCurrentPosition().observe(this, new Observer<Integer>() {
            @Override
            public void onChanged(Integer currentPosition) {
                ViewPager2 viewPager2 = view.findViewById(R.id.bannerViewpager);
                viewPager2.setCurrentItem(currentPosition);
            }
        });
    }

    private void autoScrollViewPager() {
        new Thread(new Runnable() {
            @Override
            public void run() {
                while (isRunning) {
                    try {
                        Thread.sleep(3000);
                    } catch (InterruptedException e) {
                        e.printStackTrace();
                    }
                    int currentPosition = viewModel.getCurrentPosition().getValue();
                    if (currentPosition >= 0) {
                        viewModel.setCurrentPosition((currentPosition + 1) % Banner_ViewPagerAdaptor.BANNER_ITEM_COUNT);
                    }
                }
            }
        }).start();
    }

    @Override
    public void onPause() {
        super.onPause();
        isRunning = false;
    }

    @Override
    public void onResume() {
        super.onResume();
        isRunning = true;
    }

    @Override
    public void onClick(View view) {
    }

    @Override
    public void onBannerItemClicked(Banner_Item bannerItem) {
        switch (bannerItem.getName())
        {
            case "customs_tradestat": ((MainActivity)getActivity()).GoFragment("customs_tradestat", "balance"); break;
            case "mohw_covid": ((MainActivity)getActivity()).GoFragment("mohw_covid", "7"); break;
            case "molit_apttrade": ((MainActivity)getActivity()).GoFragment("molit_apttrade","11110", "000000"); break;
            case "khnp_radiorate": ((MainActivity)getActivity()).GoFragment("khnp_radiorate", "KR"); break;
            case "khnp_powerate": ((MainActivity)getActivity()).GoFragment("khnp_powerate", "KR"); break;
            case "khnp_weather": ((MainActivity)getActivity()).GoFragment("khnp_weather", "KR"); break;
            case "khnp_air": ((MainActivity)getActivity()).GoFragment("khnp_air", "KR"); break;
            case "khnp_inoutwater": ((MainActivity)getActivity()).GoFragment("khnp_inoutwater", "KR"); break;
            case "khnp_wastewater": ((MainActivity)getActivity()).GoFragment("khnp_wastewater", "KR"); break;
            case "khnp_rwm": ((MainActivity)getActivity()).GoFragment("khnp_rwm", "2100"); break;
            case "khnp_majorproject": ((MainActivity)getActivity()).GoFragment("khnp_majorproject", "SKN5"); break;

            default: ((MainActivity) getActivity()).GoFragment(bannerItem.getName()); return;
        }



    }


    ///////배너관련 함수 끝 //
    
    
    
    
    
    
            //베너
        TextView textView_banner_count = (TextView) view.findViewById(R.id.textView_banner_count);
        textView_banner_count.setText("/" + Banner_ViewPagerAdaptor.BANNER_ITEM_COUNT);
        viewModel = new ViewModelProvider(this).get(Banner_ViewModel.class);
        viewModel.setBannerItems(
                Arrays.asList(
                        //0
                        new Banner_Item("mpva_people", getString(R.string.mpva), getString(R.string.mpva_people), getResources().getColor(R.color.colorBannerBg_01), getResources().getColor(R.color.colorBlack)),
                        new Banner_Item("ftc_caseinfo", getString(R.string.ftc), getString(R.string.ftc_caseinfo), getResources().getColor(R.color.colorBannerBg_02), getResources().getColor(R.color.colorBlack)),
                        new Banner_Item("pipc_manageresult", getString(R.string.pipc), getString(R.string.pipc_manageresult), getResources().getColor(R.color.colorBannerBg_03), getResources().getColor(R.color.colorBlack)),
                        new Banner_Item("customs_tradestat", getString(R.string.customs), getString(R.string.customs_tradestat), getResources().getColor(R.color.colorBannerBg_04), getResources().getColor(R.color.colorBlack)),
                        new Banner_Item("moe_bookinfo", getString(R.string.moe), getString(R.string.moe_bookinfo), getResources().getColor(R.color.colorBannerBg_05), getResources().getColor(R.color.colorBlack)),
                        new Banner_Item("msit_companylist", getString(R.string.msit), getString(R.string.msit_companylist), getResources().getColor(R.color.colorBannerBg_06), getResources().getColor(R.color.colorBlack)),
                        new Banner_Item("mnd_accident", getString(R.string.mnd), getString(R.string.mnd_accident), getResources().getColor(R.color.colorBannerBg_07), getResources().getColor(R.color.colorBlack)),
                        new Banner_Item("police_crime", getString(R.string.police), getString(R.string.police_crime), getResources().getColor(R.color.colorBannerBg_08), getResources().getColor(R.color.colorBlack)),
                        new Banner_Item("mohw_covid", getString(R.string.mohw), getString(R.string.mohw_covid), getResources().getColor(R.color.colorBannerBg_09), getResources().getColor(R.color.colorBlack)),
                        new Banner_Item("moel_disaster", getString(R.string.moel), getString(R.string.moel_disaster), getResources().getColor(R.color.colorBannerBg_10), getResources().getColor(R.color.colorBlack)),
                        //10
                        new Banner_Item("mogef_sexoffender", getString(R.string.mogef), getString(R.string.mogef_sexoffender), getResources().getColor(R.color.colorBannerBg_11), getResources().getColor(R.color.colorBlack)),
                        new Banner_Item("molit_apttrade", getString(R.string.molit), getString(R.string.molit_apttrade), getResources().getColor(R.color.colorBannerBg_12), getResources().getColor(R.color.colorBlack)),
                        new Banner_Item("khnp_radiorate", getString(R.string.khnp), getString(R.string.khnp_radiorate), getResources().getColor(R.color.colorBannerBg_13), getResources().getColor(R.color.colorBlack)),
                        new Banner_Item("khnp_powerate", getString(R.string.khnp), getString(R.string.khnp_powerate), getResources().getColor(R.color.colorBannerBg_14), getResources().getColor(R.color.colorBlack)),
                        new Banner_Item("khnp_weather", getString(R.string.khnp), getString(R.string.khnp_weather), getResources().getColor(R.color.colorBannerBg_15), getResources().getColor(R.color.colorBlack)),
                        new Banner_Item("khnp_air", getString(R.string.khnp), getString(R.string.khnp_air), getResources().getColor(R.color.colorBannerBg_16), getResources().getColor(R.color.colorBlack)),
                        new Banner_Item("khnp_wastewater", getString(R.string.khnp), getString(R.string.khnp_wastewater), getResources().getColor(R.color.colorBannerBg_01), getResources().getColor(R.color.colorBlack)),
                        new Banner_Item("khnp_inoutwater", getString(R.string.khnp), getString(R.string.khnp_inoutwater), getResources().getColor(R.color.colorBannerBg_02), getResources().getColor(R.color.colorBlack)),
                        new Banner_Item("khnp_rwm", getString(R.string.khnp), getString(R.string.khnp_rwm), getResources().getColor(R.color.colorBannerBg_03), getResources().getColor(R.color.colorBlack)),
                        new Banner_Item("khnp_majorproject", getString(R.string.khnp), getString(R.string.khnp_majorproject), getResources().getColor(R.color.colorBannerBg_04), getResources().getColor(R.color.colorBlack)),
                        //20
                        new Banner_Item("keco_airpredict", getString(R.string.keco), getString(R.string.keco_airpredict), getResources().getColor(R.color.colorBannerBg_05), getResources().getColor(R.color.colorBlack)),
                        new Banner_Item("keco_airpollution", getString(R.string.keco), getString(R.string.keco_airpollution), getResources().getColor(R.color.colorBannerBg_06), getResources().getColor(R.color.colorBlack)),
                        new Banner_Item("kpx_sukub", getString(R.string.kpx), getString(R.string.kpx_sukub), getResources().getColor(R.color.colorBannerBg_07), getResources().getColor(R.color.colorBlack)),
                        new Banner_Item("kospo_geninfo", getString(R.string.kospo), getString(R.string.kospo_geninfo), getResources().getColor(R.color.colorBannerBg_08), getResources().getColor(R.color.colorBlack)),
                        new Banner_Item("kobis_boxoffice", getString(R.string.kobis), getString(R.string.kobis_boxoffice), getResources().getColor(R.color.colorBannerBg_09), getResources().getColor(R.color.colorBlack))
                )
        );
        initViewPager2(view);
        subscribeObservers(view);
        autoScrollViewPager();

메인화면 코드입니다. 쓰레드를 이용해 5초단위로 전환시켜주는 부분입니다.

 

참고하세요!