it-swarm.com.ru

Как создать Android View Pager с точечным индикатором?

Вероятно, у многих из вас (как и у меня) есть проблема с созданием ViewPager с нижними точками, например:  enter image description here

Как вы создаете такой Android ViewPager?

116
RediOne1

Все, что нам нужно, это: ViewPager , TabLayout и 2 Drawables для выбранных точек и точек по умолчанию.

Во-первых, мы должны добавить TabLayout к нашему макету экрана и связать его с ViewPager. Мы можем сделать это двумя способами:


Вложенный TabLayout в ViewPager

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

    <Android.support.design.widget.TabLayout
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"/>
</Android.support.v4.view.ViewPager>

В этом случае TabLayout будет автоматически соединен с ViewPager, но TabLayout будет рядом с ViewPager, а не над ним.


Отдельная TabLayout

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

<Android.support.design.widget.TabLayout
    Android:id="@+id/tab_layout"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"/>

В этом случае мы можем поместить TabLayout где угодно, но мы должны соединить TabLayout с 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.xml, default_dot.xml и tab_selector.xml.


selected_dot.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>

default_dot.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="@Android:color/darker_gray"/>
        </shape>    
    </item>
</layer-list>

tab_selector.xml

<?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>

Теперь нам нужно добавить только 3 строки кода в TabLayout в нашем XML-макете.

app:tabBackground="@drawable/tab_selector"
app:tabGravity="center"
app:tabIndicatorHeight="0dp"
249
RediOne1

Сначала создайте макет, в котором укажите один LinerLayout для точек, который отображается поверх вашего View Pager

<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. Не выбрано Drawable

<?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. Выбранный Drawable

<?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();
    }
22
Ishant Garg

Вы можете проверить мою библиотеку для обработки вашего запроса: 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);
8
Tommy Buonomo

Ваш xml

  <RelativeLayout
                Android:id="@+id/rl_speed"
                Android:layout_width="match_parent"
                Android:layout_height="wrap_content"
                Android:layout_above="@+id/ll_dashboard_buttons"
                Android:layout_below="@+id/ib_menu">

                <com.smart.gps.speedometer.app.utils.SmartViewPager
                    Android:id="@+id/view_pager"
                    Android:layout_width="match_parent"
                    Android:layout_height="match_parent" 
                   app:layout_behavior="@string/appbar_scrolling_view_behavior">
                   </com.smart.gps.speedometer.app.utils.SmartViewPager>

                   <Android.support.design.widget.TabLayout
                    Android:id="@+id/sliding_tabs"
                    Android:layout_alignParentBottom="true"
                    Android:layout_width="match_parent"
                    Android:layout_height="wrap_content"
                    app:tabBackground="@drawable/tab_selector"
                    app:tabIndicatorHeight="0dp"
                    app:tabGravity="center"
                    />

создать Drawable. щелкните правой кнопкой мыши на drawable -> new -> Drawable file resourcename the file

tab_selector.xml

<item Android:drawable="@drawable/selected_tab"
    Android:state_selected="true"/>

<item Android:drawable="@drawable/unselected_tab"/>

Теперь есть еще два XML-файла. создайте еще два XML-файла с уважаемым именем. это индикатор селектора и невыбранный индикатор

selected_tab.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="4dp"
            Android:useLevel="false">
            <solid Android:color="@color/highspeed"/>
        </shape>
    </item>
</layer-list>

unselected_tab.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="2dp"
            Android:useLevel="false">
            <solid Android:color="@Android:color/darker_gray"/>
        </shape>
    </item>
</layer-list>
0
Null Pointer Exception

Поместите ViewFlipper и viewFlipper_linear_dot_lay (Linearlayout) на одну и ту же базовую линию и следуйте приведенному ниже

viewFlipper_linear_dot_lay= (LinearLayout) findViewById(R.id.dots_lay);
setupDotsOnViewPager(images_viewFlipper);
    for (int i = 0; i < images_viewFlipper.size(); i++) {
    //Add Images to ViewFlipper 
    }



private void setupDotsOnViewPager(ArrayList images_viewFlipper) {
                    images_linear = new ImageView[images_viewFlipper.size()];
                    for (int i = 0; i < images_linear.length; i++) {
                        images_linear[i] = new ImageView(this);
                        LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
                        params.setMargins(5, 0, 5, 0);
                        params.gravity = Gravity.BOTTOM | Gravity.CENTER;
                        images_linear[i].setLayoutParams(params);
                        images_linear[i].setImageResource(R.drawable.unselected);
                        viewFlipper_linear_dot_lay.addView(images_linear[i]);
                        viewFlipper_linear_dot_lay.bringToFront();
                    }
                }

И OnRight & OnLeft получает размещенный ниже код 

for (int i = 0; i < images_linear.length; i++) {
 images_linear[i].setImageResource(R.drawable.unselected);
 }
images_linear[viewFlipper.getDisplayedChild()].setImageResource(R.drawable.selected);
0
VV W