Наличие ImageView в виде страниц внутри ViewPager: поиск возможного подхода при изменении ширины страницы - PullRequest
0 голосов
/ 21 апреля 2019

У меня есть ViewPager, который показывает предыдущую и следующую страницу, но я хочу изменить границы невыбранных страниц и сделать их меньше.

Эти изображения показывают границы макета этих страниц:

ViewPAger with page boundaries

Мне нужно уменьшить ширину страницы для грибов и груш.

Метод getPageWidth был единственным вариантом, который я имел в виду:

override fun getPageWidth(position: Int): Float {
        val absPosition = Math.abs(position - startOffset)

        return if (absPosition >= 1) {
            0.5f
        } else {
            0.9f
        }
 }

Это изменит ширину элементов 1 & 2 на 0,9 и изменит ширину элементов 0 &> 2 'на 0,5. Мне нужно оставить показанный элемент в покое и удалить поле для остальных страниц.

Коды, которые важны:

override fun instantiateItem(container: ViewGroup, position: Int): Any {
            val img = LayoutInflater.from(this@PagerActivity).inflate(R.layout.profile_image_card, container, false) as ImageView
            img.setImageResource(imageIds[position])
            container.addView(img)
            if (imageIds[position] == R.drawable.choose) {
                img.setOnClickListener {
                    Log.d("PAGER_PARADISE", "clicked on choose image")
                    //TODO: select from gallery
                }
            }

            img.setOnClickListener {
                profilePager?.currentItem = position
            }
            return img
        }

преобразователь страниц (показаны другие элементы меньшего размера:

override fun transformPage(page: View, position: Float) {
    val absPosition = Math.abs(position - startOffset)
    if (absPosition >= 1) {
        //page.setElevation(baseElevation);
        page.scaleY = smallerScale
        page.scaleX = smallerScale
    } else {
        // This will be during transformation
        //page.setElevation(((1 - absPosition) * raisingElevation + baseElevation));
        page.scaleX = (smallerScale - 1) * absPosition + 1
        page.scaleY = (smallerScale - 1) * absPosition + 1
    }
}

Это изображение (сделанное с помощью графических редакторов) может помочь увидеть фактический желаемый результат:

ViewPager With different width

EDIT:

Когда я устанавливаю pageMargin в отрицательное значение (например, -18), они сближаются, но из-за большего размера currentItem он выглядит разбитым и смещенным (зазор между центральными элементами буксировки меньше, чем остальные)

margin to -18

...