快捷導(dǎo)航

使用ViewPager2實現(xiàn)簡易輪播圖效果

更新時間：2022年09月05日 15:50:37 作者：Mondarzy

這篇文章主要為大家詳細介紹了使用ViewPager2實現(xiàn)簡易輪播圖效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了使用ViewPager2實現(xiàn)輪播圖效果的具體代碼，供大家參考，具體內(nèi)容如下

0.實現(xiàn)效果

1.添加依賴

dependencies {
? ? ...
? ? implementation 'androidx.viewpager2:viewpager2:1.0.0'
}

2.設(shè)計布局

使用CardView實現(xiàn)圓角的效果，并在父布局的右下角放一個線性布局，用來動態(tài)添加指示點。

<?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.實現(xiàn)Adapter

ViewPager2是使用RecyclerView實現(xiàn)的，適配器的寫法與使用RecyclerView類似。
要實現(xiàn)"無限"輪播，需要在getItemCount()方法中返回一個較大的值，這里返回的是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() {
? ? ? ? //實現(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.繪制指示點

繪制一個白色的點和一個藍色的點用于指示。

<?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.實現(xiàn)

public class MainActivity extends AppCompatActivity {

? ? private ViewPager2 viewPager2;
? ? private int lastPosition; ? ? ? ? ? ? ? ? ? ? ? ? ? //記錄輪播圖最后所在的位置
? ? private List<Integer> colors = new ArrayList<>(); ? //輪播圖的顏色
? ? private LinearLayout indicatorContainer; ? ? ? ? ? ?//填充指示點的容器
? ? 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();
? ? ? ? //初始化指示點
? ? ? ? initIndicatorDots();
?? ??? ?
?? ??? ?//添加適配器
? ? ? ? ViewPagerAdapter viewPagerAdapter = new ViewPagerAdapter(colors);
? ? ? ? viewPager2.setAdapter(viewPagerAdapter);
? ? ? ? //設(shè)置輪播圖初始位置在500,以保證可以手動前翻
? ? ? ? viewPager2.setCurrentItem(500);
? ? ? ? //最后所在的位置設(shè)置為500
? ? ? ? lastPosition = 500;
?? ?
?? ??? ?//注冊輪播圖的滾動事件監(jiān)聽器
? ? ? ? viewPager2.registerOnPageChangeCallback(new ViewPager2.OnPageChangeCallback() {

? ? ? ? ? ? @Override
? ? ? ? ? ? public void onPageSelected(int position) {
? ? ? ? ? ? ? ? super.onPageSelected(position);
? ? ? ? ? ? ? ? //輪播時，改變指示點
? ? ? ? ? ? ? ? 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);
? ? }

? ? /**
? ? ?* 初始化指示點
? ? ?*/
? ? 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);
? ? ? ? ? ? //為指示點添加間距
? ? ? ? ? ? LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT,LinearLayout.LayoutParams.WRAP_CONTENT);
? ? ? ? ? ? layoutParams.setMarginEnd(4);
? ? ? ? ? ? imageView.setLayoutParams(layoutParams);
? ? ? ? ? ? //將指示點添加進容器
? ? ? ? ? ? indicatorContainer.addView(imageView);
? ? ? ? }
? ? }

? ? /* 當應(yīng)用被喚醒時，讓輪播圖開始輪播 */
? ? @Override
? ? protected void onResume() {
? ? ? ? super.onResume();
? ? ? ? mHandler.postDelayed(runnable,5000);
? ? }

? ? /* 當應(yīng)用被暫停時，讓輪播圖停止輪播 */
? ? @Override
? ? protected void onPause() {
? ? ? ? super.onPause();
? ? ? ? mHandler.removeCallbacks(runnable);
? ? }? ? private final Runnable runnable = new Runnable() {
? ? ? ? @Override
? ? ? ? public void run() {
? ? ? ? ? ? //獲得輪播圖當前的位置
? ? ? ? ? ? int currentPosition = viewPager2.getCurrentItem();
? ? ? ? ? ? currentPosition++;
? ? ? ? ? ? viewPager2.setCurrentItem(currentPosition,true);
? ? ? ? ? ? mHandler.postDelayed(runnable,5000);
? ? ? ? }
? ? };

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: