当前位置: 首页 > 知识库问答 >
问题:

如何创建带有点指示器的Android视图寻呼机?

仲孙献
2023-03-14

如何创建这样一个Android ViewPager?

共有3个答案

孙乐逸
2023-03-14

您可以查看我的库来处理您的请求:https://github.com/tommybuonomo/dotsindicator

在 XML 布局中

  <com.tbuonomo.viewpagerdotsindicator.DotsIndicator
      android:id="@+id/dots_indicator"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_centerHorizontal="true"
      app:dotsColor="@color/colorPrimary"
      app:dotsSize="16dp"
      app:dotsWidthFactor="3"
      />

在Java代码中

dotsIndicator = (DotsIndicator) findViewById(R.id.dots_indicator);
viewPager = (ViewPager) findViewById(R.id.view_pager);
adapter = new ViewPagerAdapter();
viewPager.setAdapter(adapter);
dotsIndicator.setViewPager(viewPager);
岳飞航
2023-03-14

首先创建一个布局,为显示在视图页面上的点提供一个线条布局

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <android.support.v4.view.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>


    <LinearLayout
        android:id="@+id/pager_dots"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="10dp"
        android:background="@android:color/transparent"
        android:gravity="center_horizontal"
        android:orientation="horizontal">
    </LinearLayout>

</RelativeLayout>

之后创建 2 个可绘制对象

1.未选择的绘图

<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="oval" xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@android:color/transparent"/>
    <size android:width="12dp" android:height="12dp"/>

    <stroke android:width="1dp" android:color="#ffffff"/>
</shape>

2. 选定的可绘制

<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="oval" xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@android:color/transparent"/>
    <size android:width="12dp" android:height="12dp"/>

    <stroke android:width="1dp" android:color="#000000"/>
</shape>

之后设置适配器

private LinearLayout llPagerDots;
private ViewPager viewPager;
private ArrayList<String> eventImagesUrl;
private HomeViewPagerAdapter homeViewPagerAdapter;
private ImageView[] ivArrayDotsPager;

public void setUpViewPager() {
    viewPager = (ViewPager) findViewById(R.id.view_pager);
    llPagerDots = (LinearLayout) findViewById(R.id.pager_dots);

    homeViewPagerAdapter = new HomeViewPagerAdapter(mContext, eventImagesUrl);

    viewPager.setAdapter(homeViewPagerAdapter);

    setupPagerIndidcatorDots();

    ivArrayDotsPager[0].setImageResource(R.drawable.page_indicator_selected);

    viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

        }

        @Override
        public void onPageSelected(int position) {
            for (int i = 0; i < ivArrayDotsPager.length; i++) {
                ivArrayDotsPager[i].setImageResource(R.drawable.page_indicator_unselected);
            }
            ivArrayDotsPager[position].setImageResource(R.drawable.page_indicator_selected);
        }

        @Override
        public void onPageScrollStateChanged(int state) {

        }
    });
}

创建一个方法setupPagerIndidcatorDots():

private void setupPagerIndidcatorDots() {
    ivArrayDotsPager = new ImageView[eventImagesUrl.size()];
    for (int i = 0; i < ivArrayDotsPager.length; i++) {
        ivArrayDotsPager[i] = new ImageView(getActivity());
        LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
        params.setMargins(5, 0, 5, 0);
        ivArrayDotsPager[i].setLayoutParams(params);
        ivArrayDotsPager[i].setImageResource(R.drawable.page_indicator_unselected);
        //ivArrayDotsPager[i].setAlpha(0.4f);
        ivArrayDotsPager[i].setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                view.setAlpha(1);
            }
        });
        llPagerDots.addView(ivArrayDotsPager[i]);
        llPagerDots.bringToFront();
    }
蒲功
2023-03-14

所有我们需要的是:ViewPager,TabLayout和2个选定的和默认的点绘图。

首先,我们必须将TabLayout添加到我们的屏幕布局中,并将其与ViewPager连接。我们可以通过两种方式做到这一点:

<androidx.viewpager.widget.ViewPager
    android:id="@+id/photos_viewpager"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.material.tabs.TabLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
</androidx.viewpager.widget.ViewPager>

在这种情况下,TabLayout将自动与ViewPager连接,但TabLayout将在ViewPager旁边,而不是在它上面。

<androidx.viewpager.widget.ViewPager
    android:id="@+id/photos_viewpager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

<com.google.android.material.tabs.TabLayout
    android:id="@+id/tab_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"/>

在这种情况下,我们可以将< code>TabLayout放在任何地方,但是我们必须以编程方式将< code>TabLayout与< code>ViewPager连接起来

ViewPager pager = (ViewPager) view.findViewById(R.id.photos_viewpager);
PagerAdapter adapter = new PhotosAdapter(getChildFragmentManager(), photosUrl);
pager.setAdapter(adapter);

TabLayout tabLayout = (TabLayout) view.findViewById(R.id.tab_layout);
tabLayout.setupWithViewPager(pager, true);

一旦我们创建了布局,我们就必须准备我们的点。所以我们创建了三个文件:selected_dot.xmldefault_dot.xmltab_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape
            android:innerRadius="0dp"
            android:shape="ring"
            android:thickness="8dp"
            android:useLevel="false">
            <solid android:color="@color/colorAccent"/>
        </shape>    
    </item>
</layer-list>
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape
            android:innerRadius="0dp"
            android:shape="ring"
            android:thickness="8dp"
            android:useLevel="false">
            <solid android:color="@android:color/darker_gray"/>
        </shape>    
    </item>
</layer-list>
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/selected_dot"
          android:state_selected="true"/>

    <item android:drawable="@drawable/default_dot"/>
</selector>

现在,我们只需要在XML布局中的<code>TabLayout</code>中添加3行代码。

app:tabBackground="@drawable/tab_selector"
app:tabGravity="center"
app:tabIndicatorHeight="0dp"
 类似资料:
  • 我正在尝试使用PagerAdapter显示来自可绘制视图寻呼机的图像。为此,我编写了以下代码-- //调用PagerAdapter 下面是我的适配器类-- 下面是我的对话框 xml-- 下面是 ViewPager Item xml-- //下面是解释当前如何显示空的ViewPager的屏幕截图-- 当我调试应用程序时,一切似乎都很好,但不知道为什么图像没有显示在ViewPager中。请帮忙..

  • 我想在垂直视图页中实现一个recyclerview。我当前的布局如下所示 如果我从Fragment1滑动到Fragment2,一切正常。我可以在回收器视图中上下滚动。如果我尝试滑动/滚动回Fragment1,就会出现问题。 如果用户已滚动到回收器视图的顶部,我想将下一个“向上”滚动事件转发到垂直视图页页面。我尝试过重写 方法,但遗憾的是仍然没有成功。有什么想法吗?感谢您的帮助:)

  • 你好 我已经做了很长时间的编程,但刚刚开始为android开发,至少可以说它和c有很大的不同。。。 无论如何,我正在尝试实现一个带有一些选项卡的gui,它应该能够在向左/向右滑动时更改选项卡。这些选项卡是通过actionbar(确切地说是ActionBarSherlock)实现的,即使用支持库中的ViewPager进行滑动。单个选项卡是片段(SherlockFragment:s)。在底部应该有某种

  • 我怎样才能在Android中获得类似这样的东西? 我已经用深度页面转换器实现了一个viewpager,但是我想不出在后面添加项目预览的方法。

  • 问题内容: 我想使列表视图中的所有列表项都打开到一个新页面中,因此每个列表视图项都打开到一个我可以使用的新黑色页面上。我根本不知道该如何实现。我已经连续搜索了几个小时,找不到解决方案的答案。如果有人可以显示和/或解释如何执行此操作而不是提供链接,将不胜感激,但是两者之一都很有帮助。 到目前为止,这是我的代码: 这是在我的string.xml中 这是在我的activity_main.xml中。 我应

  • 我需要制作一个电子商务应用程序类型的屏幕,具有多个viewpager和recycler视图。 我实现了它,但我的1/2视图寻呼机在回收器视图中可见,一旦我旋转设备,我的第一个视图寻呼机也会消失。 我的活动: 我的视图寻呼机片段: 我的回收器视图的主适配器: 我的视图寻呼机适配器: 我的水平回收器视图适配器: 主要活动布局: 水平滚动布局: 查看寻呼机布局: 根据我的JSON数据,在recycler