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

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

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

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

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

      

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

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

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

После файла ресурсов xml вам нужно будет создать папку с возможностью переноса .
tab_indicator_selected.xml

      

tab_indicator_default.xml

          

tab_selector.xml

       

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

Применение

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

 compile 'com.chabbal:slidingdotsplash:1.0.2' 

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

  

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

  @drawable/img1 @drawable/img2 @drawable/img3 @drawable/img4  

Готово!



Экстра для прослушивания изменений страницы используется
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) { } }); 

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

В макете:

  

И в деятельности

 private final static int NUM_PAGES = 5; private ViewPager mViewPager; private List 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' в файл сборки gradleиента.

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

   

Вышеупомянутый код отлично воспроизводит функциональные возможности точек на рабочем экране 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) .

Вот пример использования:

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

Если вам интересно, библиотека была на самом деле предназначена для создания встроенных экранов, как показано в приведенном выше графическом редакторе.

Источник Github доступен здесь: https://github.com/MatthewTamlin/SlidingIntroScreen

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

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

https://github.com/ongakuer/CircleIndicator

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

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

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

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

      

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

      

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

     

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

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

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

A) Следующим является my activity_main.xml

        

B) pager_item.xml

     

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

      

F) nonselecteditem_dot.xml

       

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

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

Вот как я это сделал, несколько похожи на решения выше. Просто убедитесь, что вы вызываете метод loadDots () после загрузки всех изображений .

  private int dotsCount; private TextView dotsTextView[]; private void setupAdapter() { adapter = new SomeAdapter(getContext(), images); viewPager.setAdapter(adapter); viewPager.setCurrentItem(0); viewPager.addOnPageChangeListener(viewPagerPageChangeListener); } private final ViewPager.OnPageChangeListener viewPagerPageChangeListener = new ViewPager.OnPageChangeListener() { @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {} @Override public void onPageSelected(int position) { for (int i = 0; i < dotsCount; i++) dotsTextView[i].setTextColor(Color.GRAY); dotsTextView[position].setTextColor(Color.WHITE); } @Override public void onPageScrollStateChanged(int state) {} }; protected void loadDots() { dotsCount = adapter.getCount(); dotsTextView = new TextView[dotsCount]; for (int i = 0; i < dotsCount; i++) { dotsTextView[i] = new TextView(getContext()); dotsTextView[i].setText(R.string.dot); dotsTextView[i].setTextSize(45); dotsTextView[i].setTypeface(null, Typeface.BOLD); dotsTextView[i].setTextColor(android.graphics.Color.GRAY); mDotsLayout.addView(dotsTextView[i]); } dotsTextView[0].setTextColor(Color.WHITE); } XML       
  • Эффект JavaFX на фоне
  • Как я могу получить высоту и ширину панели навигации Android программно?
  • Есть ли представление для ввода целых чисел в Android?
  • Как установить выходной stream в TextArea
  • Чтение из текстового поля в другом приложении
  • Предоставление имени JMenuItem его ActionListener
  • Как сделать canvas с Swing?
  • Обновление пользовательского интерфейса из streamа
  • paintComponent () vs paint () и JPanel vs Canvas в графическом интерфейсе типа кисти
  • Несколько streamов пользовательского интерфейса - Winforms
  • Как настроить панель выполнения на Android
  • Interesting Posts

    Рекомендации по использованию интерфейса Java. Неужели получатели и сеттеры в интерфейсе плохо?

    Полученный доступ к шаблону classа к элементам-членам базового classа

    Что такое динамическое программирование?

    Как легко центрировать индикатор прогресса в ProgressDialog (когда заголовок / текст не передавался)

    Остановить Microsoft Word 2010 от сглаживания скриншотов?

    Как отключить доступ в Интернет ночью на маршрутизаторе?

    Как заблокировать файл с помощью java (если возможно)

    Eclipse CDT: Symbol ‘cout’ не может быть разрешен

    Невозможно импортировать javax.imageio.ImageIO в приложение для Android

    Почему везде JQuery имеют знаки доллара?

    Как испускать и выполнять байт-код Java во время выполнения?

    Windows говорит, что Dvorak является раскладкой клавиатуры по умолчанию, но все новые окна используют QWERTY

    Как разработать мягкую клавиатуру для Android?

    Сохранение и чтение растровых изображений / изображений из внутренней памяти в Android

    Windows 7 на предприятии. Как насчет изображения с учетной записью?

    Давайте будем гением компьютера.