Ich möchte meinem ViewPager wie folgt drei untere Punkte hinzufügen.
Ich benutze FragmentActivity und unterstütze die Bibliothek ViewPager.
So viel Code braucht man nicht.
Sie können all diese Dinge tun, ohne so viel zu programmieren, indem Sie nur viewpager
mit 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 Benutzeroberflächenelemente 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 Ordner drawable 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>
Done ! Extra um Seitenänderungen anzuhören, benutze addOnPageChangeListener(listener);
Github link .
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) {
}
});
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);
}
}
Ich habe eine Bibliothek erstellt, um der Notwendigkeit einer Seitenanzeige in einem ViewPager Rechnung zu tragen. 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'
Zu Ihrer Gradle Build-Datei hinzu.
Die Ansicht kann zu Ihrem Layout hinzugefügt werden, indem Sie Folgendes hinzufügen:
<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 gibt die Funktionalität der Punkte auf dem Google Launcher-Startbildschirm perfekt wieder. Wenn Sie ihn jedoch weiter anpassen möchten, können die folgenden Attribute hinzugefügt werden:
app:unselectedDotDiameter
Und app:selectedDotDiameter
, Um die Durchmesser der Punkte einzustellenapp:unselectedDotColor
Und app:selectedDotColor
, Um die Farben der Punkte festzulegenapp: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) festzulegen.Darüber hinaus kann die Ansicht programmgesteuert erstellt werden mit:
DotIndicator indicator = new DotIndicator(context);
Es gibt Methoden zum Ändern der Eigenschaften, ähnlich wie bei 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 ViewPager.OnPageChangeListener.onPageSelected(int)
auf.
Hier ist ein Beispiel dafür:
Wenn Sie interessiert sind, wurde die Bibliothek tatsächlich so konzipiert, dass sie Intro-Bildschirme wie die im obigen GIF gezeigte erstellt.
Github-Quelle hier verfügbar: https://github.com/MatthewTamlin/SlidingIntroScreen
ViewPagerIndicator
wurde seit 2012 nicht mehr aktualisiert und hat einige Fehler, die nie behoben wurden.
Mit dieser Lichtbibliothek, die schöne Punkte für viewpager
anzeigt, habe ich endlich eine Alternative gefunden. 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, indem nur ein Variablenwert dotCounts=x
Geändert wird.
1) Erstellen Sie eine XML-Datei mit dem Namen "item_selected" im Ordner "drawable" für den Indikator "page 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 unterhalb von 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 zu Ihrer Aktivitätsdatei hinzu, in der Ihr Layout aufgeblasen ist oder die obige XML-Datei in Beziehung steht
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 abschließend in Ihrer onCreate-Methode den folgenden Code hinzu, um auf Ihr Layout zu verweisen und seitenausgewählte Positionen zu bearbeiten
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 Jake Whartons Bibliothek testen - https://github.com/JakeWharton/Android-ViewPagerIndicator
Das Folgende ist meine vorgeschlagene Lösung.
A) Folgendes ist 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) Hauptaktivität.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) Nichtausgewähltes Element_Punkt.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 ein viewPager
mit Miniaturansichten als Indikatoren erstellen möchte, kann die Verwendung dieser Bibliothek eine Option sein: ThumbIndicator für viewPager, das auch mit Bildverknüpfungen funktioniert als Ressourcen.
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>