Question

我正在为我的应用程序构建一个介绍滑块，底部有一个viewpager和点指示器，有两个用于登录和登录的按钮，首先我有一个点数错误;每次刷卡时它们都会成倍增加，然后当我滑动时点不会移动。

activity_main.xml：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:custom="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_intro"
android:layout_width="match_parent"
android:layout_height="match_parent">

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

<LinearLayout
    android:id="@+id/layoutDots"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_centerHorizontal="true"
    android:layout_marginBottom="80dp"
    android:orientation="horizontal"></LinearLayout>

<Button
    android:id="@+id/btn_login"
    android:layout_width="200dp"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_alignParentEnd="true"
    android:layout_alignParentRight="true"
    android:layout_toEndOf="@+id/btn_join"
    android:layout_toRightOf="@+id/btn_join"
    android:background="#C1403D"
    android:onClick="btnLoginClick"
    android:text="Se connecter"
    android:textColor="@android:color/white" />

<Button
    android:id="@+id/btn_join"
    android:layout_width="193dp"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_alignParentLeft="true"
    android:background="#303952"
    android:onClick="btnJoinClick"
    android:text="S'enregistrer"
    android:textColor="@android:color/white" />

</RelativeLayout>

slide_layout.xml：

简单的幻灯片代码：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/bg_screen">

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:gravity="center_horizontal"
    android:orientation="vertical">

    <TextView
        android:id="@+id/slide_heading"
        android:text="header"
        android:textAlignment="center"
        android:layout_gravity="center_horizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@android:color/white"
        android:textSize="@dimen/slide_title"
        android:textStyle="bold" />

    <TextView
        android:text="Description"
        android:id="@+id/slide_description"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:paddingLeft="@dimen/desc_padding"
        android:paddingRight="@dimen/desc_padding"
        android:textAlignment="center"
        android:textColor="@android:color/white"
        android:textSize="17dp" />

</LinearLayout>
</RelativeLayout>

SlidesAdapter.java ：

public class SlidesAdapter extends PagerAdapter {

    Context context;

    public SlidesAdapter(Context context) {
        this.context = context;
    }

    public SlidesAdapter() {
    }

    public String [] slide_headings= {
            "Connectez-vous",
            "Gérez vos tâches rapidement",
            "Suivez vos progrés facilement",
            "Accéder aux services de votre université"
    };

    public String [] slide_descriptions = {
            "à \"app name\"",
            "Organisez votre travail et vos études et controlez les\n" +
                    "grâce à un agenda facile à utiliser",
            "Enregistrer les notes de matières et suivez vos progrés",
            "Découvrez les clubs, bibliothéques et les services de votre université"
    };

    @Override
    public int getCount() {
        return slide_headings.length;
    }

    @Override
    public boolean isViewFromObject(View view, Object obj) {
        return view == obj;
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        LayoutInflater layoutInflater = (LayoutInflater) context.getSystemService(context.LAYOUT_INFLATER_SERVICE);

        View view = layoutInflater.inflate(R.layout.slide_layout, container, false);

        TextView slideHeading = (TextView) view.findViewById(R.id.slide_heading);
        TextView slideDescription = (TextView) view.findViewById(R.id.slide_description);

        slideHeading.setText(slide_headings[position]);
        slideDescription.setText(slide_descriptions[position]);

        ViewPager vp = (ViewPager) container;
        container.addView(view,0);

        return view;
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        ViewPager vp = (ViewPager) container;
        View view = (View) object;
        vp.removeView(view);
    }
}

MainActivity.java：

public class MainActivity extends Activity {

    private ViewPager viewPager;
    private SlidesAdapter slidesAdapter;
    private LinearLayout dotsLayout;
    private TextView[] dots;
    private int[] layouts;
    private Button btnLogin, btnJoin;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        viewPager =  findViewById(R.id.view_pager);
        dotsLayout = findViewById(R.id.layoutDots);
        btnLogin = findViewById(R.id.btn_login);
        btnJoin = findViewById(R.id.btn_join);

        slidesAdapter = new SlidesAdapter(this);
        viewPager.setAdapter(slidesAdapter);

        addBottomDots(0);

        viewPager.addOnPageChangeListener(viewListener);

    }

    private void addBottomDots(int position) {

        dots = new TextView[4];

        for (int i = 0; i < dots.length; i++) {
            dots[i] = new TextView(this);
            dots[i].setText(Html.fromHtml("&#8226;"));
            dots[i].setTextSize(35);
            dots[i].setTextColor(getResources().getColor(R.color.dot_inactive));
            dotsLayout.addView(dots[i]);
        }

        if(dots.length>0){
          dots[position].setTextColor(getResources().getColor(R.color.dot_active));
        }
    }

    ViewPager.OnPageChangeListener viewListener = new ViewPager.OnPageChangeListener() {
        @Override
        public void onPageScrolled(int i, float v, int i1) {

        }

        @Override
        public void onPageSelected(int position) {

        }

        @Override
        public void onPageScrollStateChanged(int state) {
        }
    };

}

Answer 1

一种方法是使用圆形寻呼机指示器而不是手动添加点。

在你的gradle中添加：

implementation 'fr.avianey.com.viewpagerindicator:library:2.4.1@aar'

activity_main.xml ：

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

    <com.viewpagerindicator.CirclePageIndicator
        android:id="@+id/circle_page_indicator"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="@dimen/_8sdp"
        android:layout_above="@+id/btn_login"
        app:radius="4dp"/>

然后在 MainActivity.java

中

slidesAdapter = new SlidesAdapter(this);
viewPager.setAdapter(slidesAdapter);
mPageIndicator = (CirclePageIndicator) findViewById(R.id.circle_page_indicator);
mPageIndicator.setViewPager(mVwPager);

Answer 2

从onPageSelected（）

调用此方法

 private void activateDot(int position) {
        for (int i = 0; i < dots.length; i++) {
            if(position == i) {
                dots[i].setTextColor(getResources().getColor(R.color.dot_active));
            }else {
                dots[i].setTextColor(getResources().getColor(R.color.dot_inactive));
            }
        }
    }

Answer 3

https://github.com/tizisdeepan/dots

在您的应用模块gradle文件中

dependencies {
    implementation 'com.github.tizisdeepan:dots:1.0.1'
}

在项目级别的gradle文件中

allprojects {
    repositories {
        maven { url 'https://jitpack.io' }
    }
}

在您的layout.xml中使用DotsIndicator

<com.make.dots.dotsindicator.DotsIndicator
    android:id="@+id/dotsIndicator"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="12dp"
    android:background="@drawable/dots_background"
    android:padding="6dp"
    app:dot_drawable="@drawable/ic_dot_darkgrey"
    app:dot_drawable_unselected="@drawable/ic_dot_lightgrey"
    app:dot_height="8dp"
    app:dot_margin="6dp"
    app:dot_width="8dp" />

在Java / Kotlin代码中将View Pager与点指示器链接起来

dotsIndicator.setViewPager(imageViewPager)
imageViewPager.adapter?.registerDataSetObserver(dotsIndicator.dataSetObserver)

文档

XML

dot_drawable：用于指示当前选定页面的Drawable dot_drawable_unselected：用于指示未选择页面的Drawable dot_height：点指示器的高度，以dp为单位 dot_width：点指示符的宽度，以dp为单位 dot_margin：点之间的边距 科特林/ Java

//这会将DotsIndicator附加到ViewPager

DotsIndicator.setViewPager(ViewPager)

Voila！现在，您已经为View Pager实现了一个简单的Dots指示器！

Android ViewPager的点指示器没有移动

3 个答案: