मैं इस तरह अपने ViewPager में 3 नीचे डॉट्स जोड़ना चाहता हूं।
मैं FragmentActivity का उपयोग करता हूं और लाइब्रेरी ViewPager का समर्थन करता हूं।
मैं इस तरह अपने ViewPager में 3 नीचे डॉट्स जोड़ना चाहता हूं।
मैं FragmentActivity का उपयोग करता हूं और लाइब्रेरी 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>
अपने UI तत्वों की निष्क्रियता या टुकड़े को निम्नानुसार हुक करें:
जावा कोड:
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"?>
<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>
मैं के रूप में आलसी महसूस कर रहा हूँ? खैर, उपरोक्त सभी कोड एक पुस्तकालय में परिवर्तित हो गया है!
उपयोगimplementation '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(listener);
Github लिंक का उपयोग करें ।
com.google.android.material.tabs.TabLayout
नए संस्करणों में उपयोग करना चाहते हैं
ring
। अंडाकार के बजाय स्लाइडडिंगशॉटप्लाश लाइब्रेरी में भी अंगूठी की तरह उपयोग किया जाता है।
मेरा हस्तनिर्मित समाधान:
लेआउट में:
<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);
}
}
Layout
सिर्फ डॉट लगाने के लिए भारी कंपोनेंट का उपयोग क्यों करें ? View
इसके बजाय उपयोग करें ।
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()
पदावनत !! addOnPageChangedListener()
अब उपयोग करें ।
मैंने एक ViewPager में एक पृष्ठ संकेतक की आवश्यकता को संबोधित करने के लिए एक पुस्तकालय बनाया। मेरे पुस्तकालय में 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 लॉन्चर होमस्क्रीन पर डॉट्स की कार्यक्षमता को पूरी तरह से दोहराता है, हालाँकि यदि आप इसे और कस्टमाइज़ करना चाहते हैं तो निम्नलिखित विशेषताएँ जोड़ी जा सकती हैं:
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
int getNumberOfItems()
और void setNumberOfItems()
। अपवाद को पकड़ने के बजाय, आप ऐसा कुछ कर सकते हैं जैसे gist.github.com/MatthewTamlin/761c7338d271af29526edc7859480aef ।
ViewPagerIndicator
2012 के बाद से अद्यतन नहीं किया गया है और कई कीड़े मिले जो कभी भी तय नहीं किए गए थे।
अंत में मुझे इस लाइट लाइब्रेरी के साथ एक विकल्प मिला, जो इसके लिए अच्छे डॉट्स प्रदर्शित करता है viewpager
, यहाँ लिंक है:
https://github.com/ongakuer/CircleIndicator
लागू करने के लिए आसान!
मैंने उपरोक्त समस्या के लिए एक सरल समाधान पोस्ट करने के बारे में सोचा और संकेतक संख्याओं को गतिशील रूप से केवल एक चर मान के साथ बदल दिया जा सकता है dotCounts=x
जो मैंने इस तरह से किया था।
1) "item_selected" नामक पृष्ठ चयनित संकेतक के लिए ड्रा करने योग्य फ़ोल्डर में एक 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="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) अब कोड के इस हिस्से को उस स्थान पर जोड़ें जहां आप नीचे के लिए संकेतक प्रदर्शित करना चाहते हैं viewPager
अपने लेआउट XML फ़ाइल में ।
<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) {
}
});
आप जेक व्हार्टन की लाइब्रेरी की कोशिश कर सकते हैं - https://github.com/JakeWharton/Android-ViewPagerbndator
निम्नलिखित मेरा प्रस्तावित समाधान है।
ए) के बाद मेरी गतिविधि_मैं.एक्सएमएल है
<?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>
बी) पेजर_इटेम.एक्सएमएल
<?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>
ग) 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) {
}
}
डी) 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;
}
}
ई) सेलेमिटेम_डॉट.एक्सएमएल
<?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>
एफ) नॉनसेलेडिटेम_डॉट.एक्सएमएल
<?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>
अगर कोई भी viewPager
संकेतक के रूप में थंबनेल के साथ निर्माण करना चाहता है , तो इस लाइब्रेरी का उपयोग करना एक विकल्प हो सकता है:
ThumbIndicator for viewPager जो संसाधनों के रूप में छवि लिंक के साथ भी काम करता है।
यहाँ है कि मैंने ऐसा कैसे किया, ऊपर दिए गए समाधानों के समान। बस सुनिश्चित करें कि आप सभी चित्रों के डाउनलोड होने के बाद लोडडॉट्स () विधि को कॉल करते हैं ।
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>