带有底部点的Android ViewPager

 孟hinrichs 发布于 2023-02-10 13:56

我想在我的ViewPager中添加3个底部点,就像这样.

3个底点 3个底点 3个底点

我使用FragmentActivity并支持库ViewPager.

8 个回答
  • 不需要那么多代码.

    你可以做到这一切的东西,而只用编码这么多viewpagertablayout.

    你的主要布局:

    <RelativeLayout
       xmlns:android="http://schemas.android.com/apk/res/android"
       xmlns:app="http://schemas.android.com/apk/res-auto"
       android:layout_
       android:layout_>
    
       <android.support.v4.view.ViewPager
           android:id="@+id/pager"
           android:layout_
           android:layout_>
    
       </android.support.v4.view.ViewPager>
       <android.support.design.widget.TabLayout
           android:id="@+id/tabDots"
           android:layout_alignParentBottom="true"
           android:layout_
           android:layout_
           app:tabBackground="@drawable/tab_selector"
           app:tabGravity="center"
           app:tabIndicator/>
    </RelativeLayout>
    

    在活动或片段中连接UI元素,如下所示:

    Java代码:

    mImageViewPager = (ViewPager) findViewById(R.id.pager);
    TabLayout tabLayout = (TabLayout) findViewById(R.id.tabDots);
    tabLayout.setupWithViewPager(mImageViewPager, true);
    

    就是这样,你很高兴.

    您需要在drawable文件夹中创建以下xml资源文件.

    tab_indicator_selected.xml

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

    tab_indicator_default.xml

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

    tab_selector.xml

     <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
    
        <item android:drawable="@drawable/tab_indicator_selected"
              android:state_selected="true"/>
    
        <item android:drawable="@drawable/tab_indicator_default"/>
    </selector>
    

    感觉像我一样懒惰?好吧,以上所有代码都转换成了一个库!

    用法

    在您的gradle中添加以下内容:

    <com.chabbal.slidingdotsplash.SlidingSplashView
            android:id="@+id/splash"
            android:layout_
            android:layout_
            app:imageResources="@array/img_id_arr"/>
    

    将以下内容添加到"活动"或"片段"布局中.

    <integer-array name="img_id_arr">
       <item>@drawable/img1</item>
       <item>@drawable/img2</item>
       <item>@drawable/img3</item>
       <item>@drawable/img4</item>
    </integer-array>
    

    implementation 'com.chabbal:slidingdotsplash:1.0.2'例如中创建一个整数数组

    <RelativeLayout
       xmlns:android="http://schemas.android.com/apk/res/android"
       xmlns:app="http://schemas.android.com/apk/res-auto"
       android:layout_
       android:layout_>
    
       <android.support.v4.view.ViewPager
           android:id="@+id/pager"
           android:layout_
           android:layout_>
    
       </android.support.v4.view.ViewPager>
       <android.support.design.widget.TabLayout
           android:id="@+id/tabDots"
           android:layout_alignParentBottom="true"
           android:layout_
           android:layout_
           app:tabBackground="@drawable/tab_selector"
           app:tabGravity="center"
           app:tabIndicator/>
    </RelativeLayout>
    

    完成!


    额外以便收听页面更改使用strings.xml

    Github 链接.

    2023-02-10 13:56 回答
  • viewPager.addOnPageChangeListener(new OnPageChangeListener() {
                @Override
                public void onPageSelected(int position) {
    
                    switch (position) {
        case 0:
            img_page1.setImageResource(R.drawable.dot_selected);
            img_page2.setImageResource(R.drawable.dot);
            img_page3.setImageResource(R.drawable.dot);
            img_page4.setImageResource(R.drawable.dot);
            break;
    
        case 1:
            img_page1.setImageResource(R.drawable.dot);
            img_page2.setImageResource(R.drawable.dot_selected);
            img_page3.setImageResource(R.drawable.dot);
            img_page4.setImageResource(R.drawable.dot);
            break;
    
        case 2:
            img_page1.setImageResource(R.drawable.dot);
            img_page2.setImageResource(R.drawable.dot);
            img_page3.setImageResource(R.drawable.dot_selected);
            img_page4.setImageResource(R.drawable.dot);
            break;
    
        case 3:
            img_page1.setImageResource(R.drawable.dot);
            img_page2.setImageResource(R.drawable.dot);
            img_page3.setImageResource(R.drawable.dot);
            img_page4.setImageResource(R.drawable.dot_selected);
            break;
    
        default:
            break;
        }
    
    
                }
    
                @Override
                public void onPageScrolled(int arg0, float arg1, int arg2) {
    
                }
    
                @Override
                public void onPageScrollStateChanged(int arg0) {
    
                }
            });
    

    2023-02-10 13:58 回答
  • 我想为上述问题发布一个更简单的解决方案,并且只需更改一个变量值即可动态更改指标数字dotCounts=x.

    1)在drawable文件夹中为名为"item_selected"的页面选择指示器创建一个xml文件.

    <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="oval" android:useLevel="true"
        android:dither="true">
        <size android: android:/>
        <solid android:color="@color/image_item_selected_for_dots"/>
    </shape>
    

    2)为名为"item_unselected"的未选择指示符再创建一个xml文件

    <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="oval" android:useLevel="true"
        android:dither="true">
    
        <size android: android:/>
    
        <solid android:color="@color/image_item_unselected_for_dots"/>
    </shape>
    

    3)现在添加将此部分代码添加到要viewPager在Layout XML文件中显示以下指示符的位置.

     <RelativeLayout
            android:id="@+id/viewPagerIndicator"
            android:layout_
            android:layout_below="@+id/banner_pager"
            android:layout_
            android:gravity="center">
    
            <LinearLayout
                android:id="@+id/viewPagerCountDots"
                android:layout_
                android:layout_
                android:layout_centerHorizontal="true"
                android:gravity="center"
                android:orientation="horizontal" />
            </RelativeLayout>
    

    4)在您的布局膨胀或与上述xml文件相关的活动文件文件的顶部添加此功能

    private int dotsCount=5;    //No of tabs or images
    private ImageView[] dots;
    LinearLayout linearLayout;
    
    private void drawPageSelectionIndicators(int mPosition){
        if(linearLayout!=null) {
            linearLayout.removeAllViews();
        }
        linearLayout=(LinearLayout)findViewById(R.id.viewPagerCountDots);
        dots = new ImageView[dotsCount];
        for (int i = 0; i < dotsCount; i++) {
            dots[i] = new ImageView(context);
            if(i==mPosition)
                dots[i].setImageDrawable(getResources().getDrawable(R.drawable.item_selected));
            else
                dots[i].setImageDrawable(getResources().getDrawable(R.drawable.item_unselected));
    
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
                    LinearLayout.LayoutParams.WRAP_CONTENT,
                    LinearLayout.LayoutParams.WRAP_CONTENT
            );
    
            params.setMargins(4, 0, 4, 0);
            linearLayout.addView(dots[i], params);
        }
    }
    

    5)最后在onCreate方法中添加以下代码以引用布局并处理页面选择的位置

    drawPageSelectionIndicators(0);
    mPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        }
    
        @Override
        public void onPageSelected(int position) {
            drawPageSelectionIndicators(position);
        }
    
        @Override
        public void onPageScrollStateChanged(int state) {
        }
    });
    

    2023-02-10 13:58 回答
  • ViewPagerIndicator 自2012年以来没有更新,并得到了一些从未修复的错误.

    我终于找到了一个替代这个光库,显示了漂亮的点viewpager,这里是链接:

    https://github.com/ongakuer/CircleIndicator

    易于实施!

    2023-02-10 13:58 回答
  • 我创建了一个库来满足ViewPager中页面指示器的需求.我的库包含一个名为DotIndicator的视图.要使用我的库,请添加compile 'com.matthew-tamlin:sliding-intro-screen:3.2.0'到gradle构建文件.

    可以通过添加以下内容将视图添加到您的布局中:

        <com.matthewtamlin.sliding_intro_screen_library.indicators.DotIndicator
                android:layout_
                android:layout_
                app:numberOfDots=YOUR_INT_HERE
                app:selectedDotIndex=YOUR_INT_HERE/>
    

    上面的代码完美地复制了Google Launcher主屏幕上的点的功能,但是如果您想进一步自定义它,则可以添加以下属性:

    app:unselectedDotDiameterapp:selectedDotDiameter设置点的直径

    app:unselectedDotColorapp:selectedDotColor设置点的颜色

    app:spacingBetweenDots 改变点之间的距离

    app:dotTransitionDuration 设置动画从小到大(和后面)动画的时间

    此外,可以使用以下命令以编程方式创建视图:

    DotIndicator indicator = new DotIndicator(context);
    

    存在修改属性的方法,类似于属性.要更新指示器以显示所选的其他页面,只需indicator.setSelectedItem(int, true)从内部调用方法ViewPager.OnPageChangeListener.onPageSelected(int).

    这是一个使用它的例子:

    在此输入图像描述

    如果您有兴趣,该库实际上是为了制作如上面的gif所示的介绍屏幕.

    Github源代码来自:https://github.com/MatthewTamlin/SlidingIntroScreen

    2023-02-10 13:58 回答
  • 你可以试试Jake Wharton的图书馆 - https://github.com/JakeWharton/Android-ViewPagerIndicator

    2023-02-10 13:58 回答
  • 我手工解决方案:

    在布局中:

    <LinearLayout
            android:orientation="horizontal"
            android:layout_
            android:layout_
            android:id="@+id/dots"
            />
    

    并在活动中

    private final static int NUM_PAGES = 5;
    private ViewPager mViewPager;
    private List<ImageView> dots;
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        // ...
        addDots();
    }
    
    public void addDots() {
        dots = new ArrayList<>();
        LinearLayout dotsLayout = (LinearLayout)findViewById(R.id.dots);
    
        for(int i = 0; i < NUM_PAGES; i++) {
            ImageView dot = new ImageView(this);
            dot.setImageDrawable(getResources().getDrawable(R.drawable.pager_dot_not_selected));
    
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
                    LinearLayout.LayoutParams.WRAP_CONTENT,
                    LinearLayout.LayoutParams.WRAP_CONTENT
            );
            dotsLayout.addView(dot, params);
    
            dots.add(dot);
        }
    
        mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            }
    
            @Override
            public void onPageSelected(int position) {
                selectDot(position);
            }
    
            @Override
            public void onPageScrollStateChanged(int state) {
            }
        });
    }
    
    public void selectDot(int idx) {
        Resources res = getResources();
        for(int i = 0; i < NUM_PAGES; i++) {
            int drawableId = (i==idx)?(R.drawable.pager_dot_selected):(R.drawable.pager_dot_not_selected);
            Drawable drawable = res.getDrawable(drawableId);
            dots.get(i).setImageDrawable(drawable);
        }
    }
    

    2023-02-10 13:58 回答
  • 以下是我提出的解决方案.

    由于我们只需要在视图寻呼机中显示一些图像,因此避免了碎片的繁琐使用.

    实现了视图页面指示器(底部点没有任何额外的库或插件)

    在触摸视图页面指示符(点)时,页面导航也正在发生.

    请不要忘记在资源中添加自己的图像.

    随意评论并改进它.

    A)以下是我的activity_main.xml

    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_
        android:layout_
        android:paddingBottom="@dimen/activity_vertical_margin"
        android:paddingLeft="@dimen/activity_horizontal_margin"
        android:paddingRight="@dimen/activity_horizontal_margin"
        android:paddingTop="@dimen/activity_vertical_margin"
        tools:context="schneider.carouseladventure.MainActivity">
    
        <android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android"
            android:id="@+id/viewpager"
            android:layout_
            android:layout_ />
    
        <RelativeLayout
            android:id="@+id/viewPagerIndicator"
            android:layout_
            android:layout_
            android:layout_alignParentBottom="true"
            android:layout_marginTop="5dp"
            android:gravity="center">
    
            <LinearLayout
                android:id="@+id/viewPagerCountDots"
                android:layout_
                android:layout_
                android:layout_centerHorizontal="true"
                android:gravity="center"
                android:orientation="horizontal" />
    
        </RelativeLayout>
    
    
    </RelativeLayout>
    

    B)pager_item.xml

    <?xml version="1.0" encoding="utf-8"?>
    
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="vertical" android:layout_
        android:layout_>
    
        <ImageView
            android:layout_
            android:layout_
            android:id="@+id/imageView" />
    </LinearLayout>
    

    C)MainActivity.java

    import android.support.v4.view.ViewPager;
    import android.support.v7.app.AppCompatActivity;
    import android.os.Bundle;
    import android.util.Log;
    import android.view.LayoutInflater;
    import android.view.MotionEvent;
    import android.view.View;
    import android.widget.ImageButton;
    import android.widget.ImageView;
    import android.widget.LinearLayout;
    
    public class MainActivity extends AppCompatActivity implements ViewPager.OnPageChangeListener, View.OnClickListener {
    
        int[] mResources = {R.drawable.nature1, R.drawable.nature2, R.drawable.nature3, R.drawable.nature4,
                R.drawable.nature5, R.drawable.nature6
        };
    
        ViewPager mViewPager;
        private CustomPagerAdapter mAdapter;
        private LinearLayout pager_indicator;
        private int dotsCount;
        private ImageView[] dots;
    
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
    
            mViewPager = (ViewPager) findViewById(R.id.viewpager);
            pager_indicator = (LinearLayout) findViewById(R.id.viewPagerCountDots);
            mAdapter = new CustomPagerAdapter(this, mResources);
            mViewPager.setAdapter(mAdapter);
            mViewPager.setCurrentItem(0);
            mViewPager.setOnPageChangeListener(this);
    
            setPageViewIndicator();
    
        }
    
        private void setPageViewIndicator() {
    
            Log.d("###setPageViewIndicator", " : called");
            dotsCount = mAdapter.getCount();
            dots = new ImageView[dotsCount];
    
            for (int i = 0; i < dotsCount; i++) {
                dots[i] = new ImageView(this);
                dots[i].setImageDrawable(getResources().getDrawable(R.drawable.nonselecteditem_dot));
    
                LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
                        LinearLayout.LayoutParams.WRAP_CONTENT,
                        LinearLayout.LayoutParams.WRAP_CONTENT
                );
    
                params.setMargins(4, 0, 4, 0);
    
                final int presentPosition = i;
                dots[presentPosition].setOnTouchListener(new View.OnTouchListener() {
    
                    @Override
                    public boolean onTouch(View v, MotionEvent event) {
                        mViewPager.setCurrentItem(presentPosition);
                        return true;
                    }
    
                });
    
    
                pager_indicator.addView(dots[i], params);
            }
    
            dots[0].setImageDrawable(getResources().getDrawable(R.drawable.selecteditem_dot));
        }
    
        @Override
        public void onClick(View v) {
    
        }
    
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
    
        }
    
        @Override
        public void onPageSelected(int position) {
    
            Log.d("###onPageSelected, pos ", String.valueOf(position));
            for (int i = 0; i < dotsCount; i++) {
                dots[i].setImageDrawable(getResources().getDrawable(R.drawable.nonselecteditem_dot));
            }
    
            dots[position].setImageDrawable(getResources().getDrawable(R.drawable.selecteditem_dot));
    
            if (position + 1 == dotsCount) {
    
            } else {
    
            }
        }
    
        @Override
        public void onPageScrollStateChanged(int state) {
    
        }
    }
    

    D)CustomPagerAdapter.java

     import android.content.Context;
        import android.support.v4.view.PagerAdapter;
        import android.view.LayoutInflater;
        import android.view.View;
        import android.view.ViewGroup;
        import android.widget.ImageView;
        import android.widget.LinearLayout;
    
        public class CustomPagerAdapter extends PagerAdapter {
            private Context mContext;
            LayoutInflater mLayoutInflater;
            private int[] mResources;
    
            public CustomPagerAdapter(Context context, int[] resources) {
                mContext = context;
                mLayoutInflater = (LayoutInflater) mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
                mResources = resources;
            }
    
            @Override
            public Object instantiateItem(ViewGroup container, int position) {
    
                View itemView = mLayoutInflater.inflate(R.layout.pager_item,container,false);
                ImageView imageView = (ImageView) itemView.findViewById(R.id.imageView);
                imageView.setImageResource(mResources[position]);
               /* LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(950, 950);
                imageView.setLayoutParams(layoutParams);*/
                container.addView(itemView);
                return itemView;
            }
    
            @Override
            public void destroyItem(ViewGroup collection, int position, Object view) {
                collection.removeView((View) view);
            }
    
            @Override
            public int getCount() {
                return mResources.length;
            }
    
            @Override
            public boolean isViewFromObject(View view, Object object) {
                return view == object;
            }
        }
    

    E)selecteditem_dot.xml

    <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="oval" android:useLevel="true"
        android:dither="true">
    
        <size android: android:/>
    
        <solid android:color="#7e7e7e"/>
    </shape>
    

    F)nonselecteditem_dot.xml

     <?xml version="1.0" encoding="utf-8"?>
        <shape xmlns:android="http://schemas.android.com/apk/res/android"
            android:shape="oval" android:useLevel="true"
            android:dither="true">        
            <size android: android:/>        
            <solid android:color="#d3d3d3"/>
        </shape>
    

    第一张图片

    在此输入图像描述

    2023-02-10 14:01 回答
撰写答案
今天,你开发时遇到什么问题呢?
立即提问
热门标签
PHP1.CN | 中国最专业的PHP中文社区 | PNG素材下载 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有