滑动片段的导航（显示？）

Question

我想为我的滑动片段提供某种导航显示（我真的不知道如何更好地解释这一点）就像你在这里看到的一样（我想要的是下面的小点）。

我已经让滑动片段工作了，只是希望有某种指示器可以显示你在滑动它们时的实际位置。

感谢您的任何建议！

Answer 1

您可以通过无线电组使用以下代码轻松添加寻呼机指示器

用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 中的视图寻呼机下方取一个 Radio 组

<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" />

Answer 2

因此，我找到了一种显示此片段的方法，在 Nielsh 响应的帮助/启发下，我实现了一个 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