Ich möchte meinem ViewPager 3 untere Punkte hinzufügen.
Ich verwende FragmentActivity und unterstütze die Bibliothek ViewPager.
Ich möchte meinem ViewPager 3 untere Punkte hinzufügen.
Ich verwende FragmentActivity und unterstütze die Bibliothek ViewPager.
Antworten:
So viel Code ist nicht erforderlich.
Sie können all diese Dinge tun, ohne so viel zu codieren, indem Sie nur viewpager
mit verwenden tablayout
.
Ihr Hauptlayout:
<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>
Schließen Sie die Inaktivität oder das Fragment Ihrer UI-Elemente wie folgt an:
Java Code:
mImageViewPager = (ViewPager) findViewById(R.id.pager);
TabLayout tabLayout = (TabLayout) findViewById(R.id.tabDots);
tabLayout.setupWithViewPager(mImageViewPager, true);
Das war's, du bist gut zu gehen.
Sie müssen die folgende XML-Ressourcendatei im Zeichenordner erstellen .
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>
Fühlen Sie sich so faul wie ich? Nun, der gesamte obige Code wird in eine Bibliothek konvertiert!
Verwendung
Fügen Sie Ihrem Gradle Folgendes hinzu:
implementation 'com.chabbal:slidingdotsplash:1.0.2'
Fügen Sie Ihrem Aktivitäts- oder Fragment-Layout Folgendes hinzu.
<com.chabbal.slidingdotsplash.SlidingSplashView
android:id="@+id/splash"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:imageResources="@array/img_id_arr"/>
Erstellen Sie ein ganzzahliges Array in strings.xml
z
<integer-array name="img_id_arr">
<item>@drawable/img1</item>
<item>@drawable/img2</item>
<item>@drawable/img3</item>
<item>@drawable/img4</item>
</integer-array>
Getan!
Extra um Seite Änderungen zu hören nutzen addOnPageChangeListener(listener);
Github Link .
com.google.android.material.tabs.TabLayout
in neueren Versionen verwenden
ring
. Scheint, als würde Ring auch in der Slidingdotsplash-Bibliothek anstelle von Oval verwendet.
Meine handgemachte Lösung:
Im Layout:
<LinearLayout
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/dots"
/>
Und in der Aktivität
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);
}
}
Layout
nur einen Punkt zu setzen? Verwenden Sie View
stattdessen.
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) {
}
});
setOnPageChangedListener()
veraltet !! Verwenden Sie addOnPageChangedListener()
jetzt.
Ich habe eine Bibliothek erstellt, um die Notwendigkeit einer Seitenanzeige in einem ViewPager zu beheben. Meine Bibliothek enthält eine Ansicht namens DotIndicator. Um meine Bibliothek zu verwenden, fügen Sie compile 'com.matthew-tamlin:sliding-intro-screen:3.2.0'
sie Ihrer Gradle-Build-Datei hinzu.
Die Ansicht kann Ihrem Layout hinzugefügt werden, indem Folgendes hinzugefügt wird:
<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/>
Der obige Code repliziert perfekt die Funktionalität der Punkte auf dem Google Launcher-Startbildschirm. Wenn Sie ihn jedoch weiter anpassen möchten, können die folgenden Attribute hinzugefügt werden:
app:unselectedDotDiameter
und app:selectedDotDiameter
die Durchmesser der Punkte einzustellenapp:unselectedDotColor
und app:selectedDotColor
um die Farben der Punkte einzustellenapp:spacingBetweenDots
um den Abstand zwischen den Punkten zu ändernapp:dotTransitionDuration
um die Zeit für die Animation des Wechsels von klein nach groß (und zurück) festzulegenDarüber hinaus kann die Ansicht programmgesteuert erstellt werden mit:
DotIndicator indicator = new DotIndicator(context);
Es gibt Methoden zum Ändern der Eigenschaften, ähnlich den Attributen. Um den Indikator so zu aktualisieren, dass eine andere Seite als ausgewählt angezeigt wird, rufen Sie einfach die Methode indicator.setSelectedItem(int, true)
von innen auf ViewPager.OnPageChangeListener.onPageSelected(int)
.
Hier ist ein Beispiel dafür:
Wenn Sie interessiert sind, wurde die Bibliothek tatsächlich so konzipiert, dass Intro-Bildschirme wie der im obigen GIF gezeigte erstellt werden.
Github-Quelle hier verfügbar: https://github.com/MatthewTamlin/SlidingIntroScreen
int getNumberOfItems()
und void setNumberOfItems()
. Anstatt die Ausnahme abzufangen , könnten Sie so etwas tun: gist.github.com/MatthewTamlin/761c7338d271af29526edc7859480aef .
ViewPagerIndicator
wurde seit 2012 nicht aktualisiert und hat mehrere Fehler, die nie behoben wurden.
Ich habe endlich eine Alternative mit dieser Lichtbibliothek gefunden, die schöne Punkte für die anzeigt viewpager
, hier ist der Link:
https://github.com/ongakuer/CircleIndicator
Einfach zu implementieren!
Ich dachte daran, eine einfachere Lösung für das oben genannte Problem zu veröffentlichen, und Indikatornummern können dynamisch geändert werden, dotCounts=x
indem nur ein variabler Wert geändert wird .
1) Erstellen Sie eine XML-Datei im Zeichenordner für den seitenausgewählten Indikator "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) Erstellen Sie eine weitere XML-Datei für den nicht ausgewählten Indikator "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) Fügen Sie nun diesen Teil des Codes an der Stelle hinzu, an der Sie die Indikatoren für ex unten viewPager
in Ihrer Layout-XML-Datei anzeigen möchten .
<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) Fügen Sie diese Funktion über Ihrer Aktivitätsdateidatei hinzu, in der Ihr Layout aufgeblasen ist oder auf die sich die obige XML-Datei bezieht
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) Fügen Sie schließlich in Ihrer onCreate-Methode den folgenden Code hinzu, um auf Ihr Layout zu verweisen und seitenausgewählte Positionen zu behandeln
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) {
}
});
Sie können die Bibliothek von Jake Wharton ausprobieren - https://github.com/JakeWharton/Android-ViewPagerIndicator
Das Folgende ist meine vorgeschlagene Lösung.
A) Es folgt meine 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>
Wenn jemand eine viewPager
Miniaturansicht als Indikatoren erstellen möchte , kann die Verwendung dieser Bibliothek eine Option sein:
ThumbIndicator für viewPager, der auch mit Bildlinks als Ressourcen funktioniert.
Hier ist, wie ich das gemacht habe, ähnlich wie bei den obigen Lösungen. Stellen Sie einfach sicher, dass Sie die loadDots () -Methode aufrufen , nachdem alle Bilder heruntergeladen wurden .
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
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="180dp"
android:background="#00000000"/>
<ImageView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/introImageView"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<LinearLayout
android:id="@+id/image_count"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#00000000"
android:gravity="center|bottom"
android:orientation="horizontal"/>
</FrameLayout>