Android ViewPager с нижними точками

Я хочу добавить 3 нижних точки в свой ViewPager, вот так.

3 нижних точки3 нижних точки3 нижних точки

Я использую FragmentActivity и поддержку библиотеки ViewPager.

Solutions Collecting From Web of "Android ViewPager с нижними точками"

Не нужно много кода. Вы можете делать все это без кодирования, используя только viewpager с tablayout . Следующей будет процедура:
Ваш основной макет:

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

Подключите элементы пользовательского интерфейса в действие или фрагмент следующим образом:
Код Java:

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

Это то, что вам хорошо.

После файла ресурсов xml вам нужно будет создать папку с возможностью переноса .
tab_indicator_selected.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/colorAccent"/> </shape> </item> </layer-list> 

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

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> 

Чувствовать себя ленивым, как я? Ну, весь приведенный выше код преобразуется в библиотеку!

Применение

Добавьте в свою граду следующее:

 compile 'com.chabbal:slidingdotsplash:1.0.2' 

Добавьте следующие действия в макет вашей деятельности или фрагмента.

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

Создайте целочисленный массив в strings.xml например

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

Готово!



Экстра для прослушивания изменений страницы используется
addOnPageChangeListener (слушатель);

Ссылка Github.

 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) { } }); 

Мое решение для ручной работы:

В макете:

 <LinearLayout android:orientation="horizontal" android:layout_width="wrap_content" android:layout_height="wrap_content" 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); } } 

Я создал библиотеку, чтобы удовлетворить потребность в индикаторе страницы в ViewPager. Моя библиотека содержит View под названием DotIndicator. Чтобы использовать мою библиотеку, добавьте compile 'com.matthew-tamlin:sliding-intro-screen:3.2.0' в ваш файл построения градиента.

Вид можно добавить в макет, добавив следующее:

  <com.matthewtamlin.sliding_intro_screen_library.indicators.DotIndicator android:layout_width="wrap_content" android:layout_height="wrap_content" app:numberOfDots=YOUR_INT_HERE app:selectedDotIndex=YOUR_INT_HERE/> 

Вышеприведенный код отлично воспроизводит функциональные возможности точек на рабочем экране Google Launcher, однако, если вы хотите дополнительно настроить его, можно добавить следующие атрибуты:

  • app:unselectedDotDiameter и app:selectedDotDiameter для установки диаметров точек
  • app:unselectedDotColor и app: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

Вы можете попробовать библиотеку Джейка Уортона – https://github.com/JakeWharton/Android-ViewPagerIndicator

Я подумал о том, чтобы опубликовать более простое решение для вышеупомянутой проблемы, и номера индикаторов могут динамически меняться, только изменяя одно значение переменной dotCounts=x что я сделал, как это.

1) Создайте xml-файл в папке с возможностью выбора для выбранного индикатора страницы с именем «item_selected».

 <?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:height="8dp" android:width="8dp"/> <solid android:color="@color/image_item_selected_for_dots"/> </shape> 

2) Создайте еще один XML-файл для невыбранного индикатора с именем «item_unselected»

 <?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:height="8dp" android:width="8dp"/> <solid android:color="@color/image_item_unselected_for_dots"/> </shape> 

3) Теперь добавьте эту часть кода в том месте, где вы хотите отображать индикаторы для ex ниже viewPager в вашем XML-файле Layout.

  <RelativeLayout android:id="@+id/viewPagerIndicator" android:layout_width="match_parent" android:layout_below="@+id/banner_pager" android:layout_height="wrap_content" android:gravity="center"> <LinearLayout android:id="@+id/viewPagerCountDots" android:layout_width="match_parent" android:layout_height="match_parent" 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) { } }); 

ViewPagerIndicator не обновляется с 2012 года и получил несколько ошибок, которые никогда не были исправлены.

Я, наконец, нашел альтернативу этой световой библиотеке, которая отображает красивые точки для viewpager , вот ссылка:

https://github.com/ongakuer/CircleIndicator

Простота в использовании!

Следующее – мое предлагаемое решение.

  • Поскольку нам нужно показывать только некоторые изображения в пейджерах представления, чтобы избежать громоздкого использования фрагментов.
    • Реализованы индикаторы страницы просмотра (нижние точки без дополнительной библиотеки или плагина)
    • При нажатии на индикаторы страницы просмотра (точки) также происходит переключение на страницу.
    • Пожалуйста, не забывайте добавлять свои собственные изображения в ресурсы.
    • Не стесняйтесь комментировать и улучшать его.

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_width="match_parent" android:layout_height="match_parent" 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_width="wrap_content" android:layout_height="wrap_content" /> <RelativeLayout android:id="@+id/viewPagerIndicator" android:layout_width="match_parent" android:layout_height="55dp" android:layout_alignParentBottom="true" android:layout_marginTop="5dp" android:gravity="center"> <LinearLayout android:id="@+id/viewPagerCountDots" android:layout_width="match_parent" android:layout_height="match_parent" 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_width="match_parent" android:layout_height="match_parent"> <ImageView android:layout_width="match_parent" android:layout_height="match_parent" 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:height="12dip" android:width="12dip"/> <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:height="12dip" android:width="12dip"/> <solid android:color="#d3d3d3"/> </shape> 

Первое изображение

Введите описание изображения здесь