使用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)頁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-04
andoid打包短信發(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-06
Android獲取當(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

