Навигация (отображение?) Для скольжения фрагментов

Question

Я хотел бы иметь какой-нибудь навигационный дисплей для моих скользящих фрагментов (я не знаю, как объяснить это лучше), что-то вроде того, что вы видите здесь (маленькие точки - это то, что я хочу).

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

Спасибо за любые советы !!

Answer 1

Итак, я нашел способ отображения этого фрагмента, с помощью / вдохновением ответа Нильша я реализовал вариант Java.Сначала добавьте RadioGroup в свой файл MainActivity.xml

    <RadioGroup
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal|bottom"
    android:orientation="horizontal"
    android:id="@+id/radio_group">
    <RadioButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/radioButton"
        android:checked="true" />
    <RadioButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/radioButton2"
        />
    <RadioButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/radioButton3" />
</RadioGroup>

Инициализируйте свою группу радиопереключателей, затем просто добавьте onPageListener в ViewPager и инициализируйте

        (...)
        radioGroup = (RadioGroup)findViewById(R.id.radio_group);
        (...)
        viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
        @Override
        public void onPageScrolled(int i, float v, int i1) {

        }

        @Override
        public void onPageSelected(int position) {
            page = position;
            switch (position){
                case 0:
                    radioGroup.check(R.id.radioButton);
                    break;
                case 1:
                    radioGroup.check(R.id.radioButton2);
                    break;
                case 2:
                    radioGroup.check(R.id.radioButton3);
                    break;
            }
        }

        @Override
        public void onPageScrollStateChanged(int i) {

        }
    }); // viewpager on page change listener

Answer 2

Вы можете легко добавить индикатор пейджера, используя следующий код через группу радиостанций

Код, написанный на Kotlin

import kotlinx.android.synthetic.main.activity_test.*
class TestActivity : AppCompatActivity(){ 
override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_test)

 customImageAdapter = MyCustomPagerAdapter(this@TestActivity, numbers)
        vpIntro.adapter = customImageAdapter
    /* Add Circle indicator for view the current page*/
        addRadioButtons(4, rgPagerIndicator)

vpIntro.setOnPageChangeListener(object : ViewPager.OnPageChangeListener {
            override fun onPageScrollStateChanged(state: Int) {

            }

            override fun onPageScrolled(position: Int, positionOffset: Float, positionOffsetPixels: Int) {

            }

            override fun onPageSelected(position: Int) {
                currentPos = position
                rgPagerIndicator.check(position)
            }
        })
}

Добавить функцию радиокнопки

fun addRadioButtons(number: Int, rgPager: RadioGroup) {//, radioButtons: java.util.ArrayList<RadioButton>
//        radioButtons.clear()
        rgPager.removeAllViews()
        if (number > 1) {
            for (i in 0 until number) {
                val params_button: RadioGroup.LayoutParams
                val device_height = 1184

                val display = windowManager.defaultDisplay
                val size = Point()
                display.getSize(size)
                val width = size.x
                val height = size.y

                if (device_height == height) {
                    params_button = RadioGroup.LayoutParams(25, 25)
                    params_button.setMargins(7, 0, 7, 0)
                } else {
                    params_button = RadioGroup.LayoutParams(35, 35)
                    params_button.setMargins(10, 0, 10, 0)
                }

                val rdbtn = RadioButton(this@WelcomeActivity)
                rdbtn.isEnabled = false
                rdbtn.id = i
                rdbtn.layoutParams = params_button
                rdbtn.setBackgroundResource(R.drawable.bg_viewpager_indicator)
                rdbtn.setButtonDrawable(R.color.transparent)
                if (i == 0) {
                    rdbtn.isChecked = true
                }

                rgPager.addView(rdbtn)
            }
        }
    }

Возьмите одну радиогруппу под пейджером просмотра в формате xml

<RadioGroup
        android:id="@+id/rgPagerIndicator"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:layout_marginBottom="@dimen/margin_10"
        android:gravity="center"
        android:orientation="horizontal" />