[Android/안드로이드] ViewPager 양쪽 뷰 살짝 보이게 만들기

ViewPager를 사용하다보면 꽉 찬 화면을 보여주는 경우도 있지만, 양쪽 뷰가 보이도록 나오는 레이아웃을 원하는 경우도 있습니다. 

 

 

 

MainActivity.java

	
    import androidx.appcompat.app.AppCompatActivity;
	import androidx.viewpager.widget.ViewPager;
	
	import android.os.Bundle;
	
	import java.util.ArrayList;
	
	public class MainActivity extends AppCompatActivity {
	
	    ViewPager viewPager;
	    private ArrayList<Integer> imageList;
	    @Override
	    protected void onCreate(Bundle savedInstanceState) {
	        super.onCreate(savedInstanceState);
	        setContentView(R.layout.activity_main);
	
	        viewPager = findViewById(R.id.viewPager);
	        this.initializeData();
	
	        viewPager.setClipToPadding(false);
	
	        viewPager.setPadding(100, 0, 100, 0);
	        viewPager.setPageMargin(50);
	
	        viewPager.setAdapter(new ViewPagerAdapter(this, imageList));
	
	    }
	
	    public void initializeData()
	    {
	        imageList = new ArrayList();
	
	        imageList.add(R.drawable.iron_man);
	        imageList.add(R.drawable.spider_man);
	        imageList.add(R.drawable.doctor);
	        imageList.add(R.drawable.hulk);
	        imageList.add(R.drawable.black_panther);
	    }
	}
    

 

ViewPagerAdapter.java

	
	import androidx.annotation.NonNull;
	import androidx.viewpager.widget.PagerAdapter;
	
	import java.util.ArrayList;
	
	public class ViewPagerAdapter extends PagerAdapter {
	    private Context mContext;
	    private ArrayList<Integer> imageList;
	
	    public ViewPagerAdapter(Context context, ArrayList<Integer> imageList)
	    {
	        this.mContext = context;
	        this.imageList = imageList;
	    }
	
	    @NonNull
	    @Override
	    public Object instantiateItem(@NonNull ViewGroup container, int position) {
	        LayoutInflater inflater = (LayoutInflater)mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
	        View view = inflater.inflate(R.layout.item_movie, null);
	
	        ImageView imageView = view.findViewById(R.id.imageView);
	        imageView.setImageResource(imageList.get(position));
	
	        container.addView(view);
	
	        return view;
	    }
	
	    @Override
	    public int getCount() {
	        return imageList.size();
	    }
	
	    @Override
	    public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
	        container.removeView((View)object);
	    }
	
	    @Override
	    public boolean isViewFromObject(@NonNull View view, @NonNull Object o) {
	        return (view == (View)o);
	    }
	}
    

 

activity_main.xml

	
    <?xml version="1.0" encoding="utf-8"?>
	<androidx.constraintlayout.widget.ConstraintLayout 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"
	    tools:context=".MainActivity">
	
	    <androidx.viewpager.widget.ViewPager
	        android:id="@+id/viewPager"
	        android:layout_width="wrap_content"
	        android:layout_height="wrap_content"
	        app:layout_constraintBottom_toBottomOf="parent"
	        app:layout_constraintLeft_toLeftOf="parent"
	        app:layout_constraintRight_toRightOf="parent"
	        app:layout_constraintTop_toTopOf="parent" />
	
	</androidx.constraintlayout.widget.ConstraintLayout>
    

 

item_movie.xml

	
    <?xml version="1.0" encoding="utf-8"?>
	<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
	    xmlns:app="http://schemas.android.com/apk/res-auto"
	    android:layout_width="match_parent"
	    android:layout_height="wrap_content">
	
	    <ImageView
	        android:id="@+id/imageView"
	        android:layout_width="0dp"
	        android:layout_height="0dp"
	        android:adjustViewBounds="true"
	        android:scaleType="centerCrop"
	        app:layout_constraintBottom_toBottomOf="parent"
	        app:layout_constraintDimensionRatio="H,1:1"
	        app:layout_constraintEnd_toEndOf="parent"
	        app:layout_constraintStart_toStartOf="parent"
	        app:layout_constraintTop_toTopOf="parent" />
	</androidx.constraintlayout.widget.ConstraintLayout>
	

 

핵심 코드는 MainActivity에서 

 	
    viewPager.setClipToPadding(false);

    viewPager.setPadding(100, 0, 100, 0);
    viewPager.setPageMargin(50);
    

setClipToPadding은  하위의 child레이아웃에 padding을 먹게 도와주는 속성입니다.

cliptopadding속성을 주고 viewpager에 padding값과 margin값을 주게되면 양쪽 뷰가 보이게됩니다~