1. 程式人生 > 其它 >viewPaper實現頁面滑動效果

viewPaper實現頁面滑動效果

首先在app-src-main-res-layout下建立3個Layout Resource File檔案


第一個介面程式碼
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">

<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="layout1"
android:textSize="30sp"
android:background="#ff00ff"/>
</androidx.constraintlayout.widget.ConstraintLayout>

第二個介面程式碼
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">

<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="layout2"
android:textSize="30sp"
android:background="#ff99ff"/>
</androidx.constraintlayout.widget.ConstraintLayout>
第三個介面程式碼
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">

<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="layout3"
android:textSize="30sp"
android:background="#ff7"/>
</androidx.constraintlayout.widget.ConstraintLayout>

activity_main.xml程式碼如下
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

<androidx.viewpager.widget.ViewPager
//建立ViewPaper

android:layout_width="match_parent"
    android:layout_height="match_parent"
android:id="@+id/vp"/>
</androidx.constraintlayout.widget.ConstraintLayout>

MainActivity.java程式碼如下
package com.example.viewpager;

import androidx.appcompat.app.AppCompatActivity;
import androidx.viewpager.widget.ViewPager;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.TextView;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

LayoutInflater from = getLayoutInflater().from(this);
View v1 = from.inflate(R.layout.layout1, null);
View v2 = from.inflate(R.layout.layout2, null);
View v3 = from.inflate(R.layout.layout3, null);

List<View> viewList = new ArrayList<>();
viewList.add(v1);
viewList.add(v2);
viewList.add(v3);

ViewPager viewPager = findViewById(R.id.vp);
//獲取ViewPaper
//建立一個MyAdapter.java填充ViewPaper的佈局

  
MyAdapter myAdapter = new MyAdapter(viewList);
viewPager.setAdapter(myAdapter);


}
}

MyAdapter.java程式碼如下
package com.example.viewpager;

import android.view.View;
import android.view.ViewGroup;

import androidx.annotation.NonNull;
import androidx.viewpager.widget.PagerAdapter;

import java.util.List;

public class MyAdapter extends PagerAdapter {//這裡繼承PagerAdapter並實現裡面的方法,如果繼承後報錯可以按ALT+ENTER然後回車

private List<View> viewList;

public MyAdapter(List<View> viewList) {
this.viewList = viewList;
}

@Override
public int getCount() {//獲得ViewPaper中有多少個view
return viewList.size();
}

@Override
public boolean isViewFromObject(@NonNull View view, @NonNull Object object) {//判斷當前的物件和page是否對應
        return view==object;
}

@NonNull
@Override
public Object instantiateItem(@NonNull ViewGroup container, int position) {//一個Page在切換完成後會呼叫該方法去載入下一個即將展示的Page
container.addView(viewList.get(position),0);
return viewList.get(position);
}

@Override
public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {//移除一個給定位置的頁面
container.removeView(viewList.get(position));
}
}
最後附上專案結構圖,僅供參考。