使用ViewPager2實(shí)現(xiàn)簡(jiǎn)易輪播圖效果
本文實(shí)例為大家分享了使用ViewPager2實(shí)現(xiàn)輪播圖效果的具體代碼,供大家參考,具體內(nèi)容如下
0.實(shí)現(xiàn)效果
1.添加依賴
dependencies { ? ? ... ? ? implementation 'androidx.viewpager2:viewpager2:1.0.0' }
2.設(shè)計(jì)布局
使用CardView實(shí)現(xiàn)圓角的效果,并在父布局的右下角放一個(gè)線性布局,用來動(dòng)態(tài)添加指示點(diǎn)。
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" ? ? android:layout_width="match_parent" ? ? android:layout_height="match_parent" ? ? xmlns:app="http://schemas.android.com/apk/res-auto" ? ? android:padding="10dp"> ? ? <RelativeLayout ? ? ? ? android:layout_width="match_parent" ? ? ? ? android:layout_height="200dp"> ? ? ? ? <androidx.cardview.widget.CardView ? ? ? ? ? ? android:layout_width="match_parent" ? ? ? ? ? ? android:layout_height="match_parent" ? ? ? ? ? ? app:cardCornerRadius="10dp" ? ? ? ? ? ? app:cardElevation="0dp"> ? ? ? ? ? ? <androidx.viewpager2.widget.ViewPager2 ? ? ? ? ? ? ? ? android:id="@+id/viewpager2" ? ? ? ? ? ? ? ? android:layout_width="match_parent" ? ? ? ? ? ? ? ? android:layout_height="match_parent" /> ? ? ? ? </androidx.cardview.widget.CardView> ? ? ? ? <LinearLayout ? ? ? ? ? ? android:id="@+id/container_indicator" ? ? ? ? ? ? android:layout_width="wrap_content" ? ? ? ? ? ? android:layout_height="wrap_content" ? ? ? ? ? ? android:orientation="horizontal" ? ? ? ? ? ? android:layout_alignParentEnd="true" ? ? ? ? ? ? android:layout_alignParentBottom="true" ? ? ? ? ? ? android:layout_marginEnd="5dp" ? ? ? ? ? ? android:layout_marginBottom="5dp"/> ? ? ?</RelativeLayout> </RelativeLayout>
3.實(shí)現(xiàn)Adapter
ViewPager2是使用RecyclerView實(shí)現(xiàn)的,適配器的寫法與使用RecyclerView類似。
要實(shí)現(xiàn)"無限"輪播,需要在getItemCount()方法中返回一個(gè)較大的值,這里返回的是Integer.MAX_VALUE.
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout ? ? android:id="@+id/container" ? ? xmlns:android="http://schemas.android.com/apk/res/android" ? ? android:layout_width="match_parent" ? ? android:layout_height="match_parent"> ? ? <TextView ? ? ? ? android:id="@+id/tv_title" ? ? ? ? android:layout_width="wrap_content" ? ? ? ? android:layout_height="wrap_content" ? ? ? ? android:layout_centerInParent="true" ? ? ? ? android:textSize="20sp"/> </RelativeLayout>
public class ViewPagerAdapter extends RecyclerView.Adapter<ViewPagerAdapter.ViewHolder> { ? ? private List<Integer> colors; ? ? ViewPagerAdapter(List<Integer> colors){ ? ? ? ? this.colors = colors; ? ? } ? ? @NonNull ? ? @Override ? ? public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) { ? ? ? ? return new ViewHolder(LayoutInflater.from(parent.getContext()).inflate(R.layout.item,parent,false)); ? ? } ? ? @Override ? ? public void onBindViewHolder(@NonNull ViewHolder holder, int position) { ? ? ? ? int i = position % 4; ? ? ? ? holder.titleTv.setText("item " + i); ? ? ? ? holder.container.setBackgroundColor(colors.get(i)); ? ? } ? ? @Override ? ? public int getItemCount() { ? ? ? ? //實(shí)現(xiàn)無限輪播 ? ? ? ? return Integer.MAX_VALUE; ? ? } ? ? class ViewHolder extends RecyclerView.ViewHolder{ ? ? ? ? RelativeLayout container; ? ? ? ? TextView titleTv; ? ? ? ? public ViewHolder(@NonNull View itemView) { ? ? ? ? ? ? super(itemView); ? ? ? ? ? ? container = itemView.findViewById(R.id.container); ? ? ? ? ? ? titleTv = itemView.findViewById(R.id.tv_title); ? ? ? ? } ? ? } }
4.繪制指示點(diǎn)
繪制一個(gè)白色的點(diǎn)和一個(gè)藍(lán)色的點(diǎn)用于指示。
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"> ? ? <size ? ? ? ? android:width="8dp" ? ? ? ? android:height="8dp"/> ? ? <corners ? ? ? ? android:radius="8dp"/> ? ? <solid ? ? ? ? android:color="#ffffff"/> </shape>
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"> ? ? <size ? ? ? ? android:width="8dp" ? ? ? ? android:height="8dp"/> ? ? <corners ? ? ? ? android:radius="8dp"/> ? ? <solid ? ? ? ? android:color="#00ccff"/> </shape>
5.實(shí)現(xiàn)
public class MainActivity extends AppCompatActivity { ? ? private ViewPager2 viewPager2; ? ? private int lastPosition; ? ? ? ? ? ? ? ? ? ? ? ? ? //記錄輪播圖最后所在的位置 ? ? private List<Integer> colors = new ArrayList<>(); ? //輪播圖的顏色 ? ? private LinearLayout indicatorContainer; ? ? ? ? ? ?//填充指示點(diǎn)的容器 ? ? private Handler mHandler = new Handler(); ? ? @Override ? ? protected void onCreate(Bundle savedInstanceState) { ? ? ? ? super.onCreate(savedInstanceState); ? ? ? ? setContentView(R.layout.activity_main); ? ? ? ? //初始化組件 ? ? ? ? viewPager2 = findViewById(R.id.viewpager2); ? ? ? ? indicatorContainer = findViewById(R.id.container_indicator); ? ? ? ? initColors(); ? ? ? ? //初始化指示點(diǎn) ? ? ? ? initIndicatorDots(); ?? ??? ? ?? ??? ?//添加適配器 ? ? ? ? ViewPagerAdapter viewPagerAdapter = new ViewPagerAdapter(colors); ? ? ? ? viewPager2.setAdapter(viewPagerAdapter); ? ? ? ? //設(shè)置輪播圖初始位置在500,以保證可以手動(dòng)前翻 ? ? ? ? viewPager2.setCurrentItem(500); ? ? ? ? //最后所在的位置設(shè)置為500 ? ? ? ? lastPosition = 500; ?? ? ?? ??? ?//注冊(cè)輪播圖的滾動(dòng)事件監(jiān)聽器 ? ? ? ? viewPager2.registerOnPageChangeCallback(new ViewPager2.OnPageChangeCallback() { ? ? ? ? ? ? @Override ? ? ? ? ? ? public void onPageSelected(int position) { ? ? ? ? ? ? ? ? super.onPageSelected(position); ? ? ? ? ? ? ? ? //輪播時(shí),改變指示點(diǎn) ? ? ? ? ? ? ? ? int current = position % 4; ? ? ? ? ? ? ? ? int last = lastPosition % 4; ? ? ? ? ? ? ? ? indicatorContainer.getChildAt(current).setBackgroundResource(R.drawable.shape_dot_selected); ? ? ? ? ? ? ? ? indicatorContainer.getChildAt(last).setBackgroundResource(R.drawable.shape_dot); ? ? ? ? ? ? ? ? lastPosition = position; ? ? ? ? ? ? } ? ? ? ? }); ? ? } ? ? private void initColors(){ ? ? ? ? colors.add(Color.BLUE); ? ? ? ? colors.add(Color.YELLOW); ? ? ? ? colors.add(Color.GREEN); ? ? ? ? colors.add(Color.RED); ? ? } ? ? /** ? ? ?* 初始化指示點(diǎn) ? ? ?*/ ? ? private void initIndicatorDots(){ ? ? ? ? for(int i = 0; i < colors.size(); i++){ ? ? ? ? ? ? ImageView imageView = new ImageView(this); ? ? ? ? ? ? if (i == 0) imageView.setBackgroundResource(R.drawable.shape_dot_selected); ? ? ? ? ? ? else imageView.setBackgroundResource(R.drawable.shape_dot); ? ? ? ? ? ? //為指示點(diǎn)添加間距 ? ? ? ? ? ? LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT,LinearLayout.LayoutParams.WRAP_CONTENT); ? ? ? ? ? ? layoutParams.setMarginEnd(4); ? ? ? ? ? ? imageView.setLayoutParams(layoutParams); ? ? ? ? ? ? //將指示點(diǎn)添加進(jìn)容器 ? ? ? ? ? ? indicatorContainer.addView(imageView); ? ? ? ? } ? ? } ? ? /* 當(dāng)應(yīng)用被喚醒時(shí),讓輪播圖開始輪播 */ ? ? @Override ? ? protected void onResume() { ? ? ? ? super.onResume(); ? ? ? ? mHandler.postDelayed(runnable,5000); ? ? } ? ? /* 當(dāng)應(yīng)用被暫停時(shí),讓輪播圖停止輪播 */ ? ? @Override ? ? protected void onPause() { ? ? ? ? super.onPause(); ? ? ? ? mHandler.removeCallbacks(runnable); ? ? }? ? private final Runnable runnable = new Runnable() { ? ? ? ? @Override ? ? ? ? public void run() { ? ? ? ? ? ? //獲得輪播圖當(dāng)前的位置 ? ? ? ? ? ? int currentPosition = viewPager2.getCurrentItem(); ? ? ? ? ? ? currentPosition++; ? ? ? ? ? ? viewPager2.setCurrentItem(currentPosition,true); ? ? ? ? ? ? mHandler.postDelayed(runnable,5000); ? ? ? ? } ? ? };
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- android?ViewPager實(shí)現(xiàn)一個(gè)無限輪播圖
- viewpager實(shí)現(xiàn)自動(dòng)循環(huán)輪播圖
- Android Viewpager實(shí)現(xiàn)無限循環(huán)輪播圖
- Android使用viewpager實(shí)現(xiàn)自動(dòng)無限輪播圖
- ViewPager打造輪播圖Banner/引導(dǎo)頁(yè)Guide
- Android 使用ViewPager實(shí)現(xiàn)輪播圖效果
- 淺談Viewpager和輪播圖的沖突解決方法
- Android ViewPager實(shí)現(xiàn)輪播圖效果
- Android實(shí)現(xiàn)基于ViewPager的無限循環(huán)自動(dòng)播放帶指示器的輪播圖CarouselFigureView控件
- Android中用RxJava和ViewPager實(shí)現(xiàn)輪播圖
相關(guān)文章
Android自定義收音機(jī)搜臺(tái)控件RadioRulerView
這篇文章主要為大家詳細(xì)介紹了Android自定義收音機(jī)搜臺(tái)控件RadioRulerView的相關(guān)代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-04-04andoid打包短信發(fā)送到gmail郵箱實(shí)現(xiàn)代碼
andriod短信整合備份發(fā)送到gmail郵箱,需要在andoid手機(jī)配置好gmail郵箱,下面是具體的實(shí)現(xiàn)代碼,感興趣的朋友可以參考下哈2013-06-06詳解 Kotlin Reference Basic Types, String, Array and Imports
這篇文章主要介紹了詳解 Kotlin Reference Basic Types, String, Array and Imports的相關(guān)資料,需要的朋友可以參考下2017-06-06Android獲取當(dāng)前運(yùn)行的類名或者方法
這篇文章主要介紹了Android獲取當(dāng)前運(yùn)行的類名或者方法,涉及Android操作類與方法的技巧,需要的朋友可以參考下2015-05-05分享安裝Android Studio3.6的經(jīng)驗(yàn)教訓(xùn)
這篇文章主要介紹了Android Studio3.6的安裝錯(cuò)誤問題及解決方法,非常值得大家參考,現(xiàn)把整個(gè)過程分享到腳本之家平臺(tái),需要的朋友參考下吧2020-02-02