使用ViewPager實現一頁顯示多個ImageView的滑動切換檢視

阿新 • • 發佈：2019-02-14

普遍的ViewPager都是實現像輪播圖一樣的功能，最近在做一個自定義專案，需要實現ViewPager的一頁內容裡面承載多個ImageView，其實他的實現方法沒什麼變化，只是我這個小白想要做個記錄，任性一把。

難得這次錄了個效果圖，先放上來吧

接著上程式碼，先看佈局檔案

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:gravity="center"
    android:orientation="vertical"
    android:background="#8290AF"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="demo.yang.com.pageradapter.MainActivity">

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:background="#ffffff"
        android:layout_width="match_parent"
        android:layout_height="200dp">
    </android.support.v4.view.ViewPager>

    <LinearLayout
        android:id="@+id/viewpager_point"
        android:orientation="horizontal"
        android:layout_gravity="bottom"
        android:gravity="center_horizontal"
        android:paddingBottom="15dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    </LinearLayout>

</LinearLayout>

其中的LinearLayout是用來放置那個小圓點的

pager1.xml

<?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">

    <LinearLayout
        android:paddingTop="5dp"
        android:paddingBottom="5dp"
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <LinearLayout
            android:id="@+id/linear_shentie"
            android:orientation="vertical"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:gravity="center"
            android:layout_height="wrap_content">
            <ImageView

                android:src="@drawable/photo"
                android:layout_width="60dp"
                android:layout_height="60dp" />
            <TextView
                android:layout_gravity="center"
                android:text="小白"
                android:layout_marginTop="5dp"
                android:textColor="#000000"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
        </LinearLayout>
        <LinearLayout
            android:orientation="vertical"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:gravity="center"
            android:layout_height="wrap_content">
            <ImageView
                android:src="@drawable/photo"
                android:layout_width="60dp"
                android:layout_height="60dp" />
            <TextView
                android:layout_gravity="center"
                android:text="小白"
                android:layout_marginTop="5dp"
                android:textColor="#000000"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
        </LinearLayout>
        <LinearLayout
            android:orientation="vertical"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:gravity="center"
            android:layout_height="wrap_content">
            <ImageView
                android:src="@drawable/photo"
                android:layout_width="60dp"
                android:layout_height="60dp" />
            <TextView
                android:layout_gravity="center"
                android:text="小白"
                android:layout_marginTop="5dp"
                android:textColor="#000000"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
        </LinearLayout>
        <LinearLayout
            android:orientation="vertical"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:gravity="center"
            android:layout_height="wrap_content">
            <ImageView
                android:src="@drawable/photo"
                android:layout_width="60dp"
                android:layout_height="60dp" />
            <TextView
                android:layout_gravity="center"
                android:text="小白"
                android:layout_marginTop="5dp"
                android:textColor="#000000"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
        </LinearLayout>
        <LinearLayout
            android:orientation="vertical"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:gravity="center"
            android:layout_height="wrap_content">
            <ImageView
                android:src="@drawable/photo"
                android:layout_width="60dp"
                android:layout_height="60dp" />
            <TextView
                android:layout_gravity="center"
                android:text="小白"
                android:layout_marginTop="5dp"
                android:textColor="#000000"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
        </LinearLayout>
    </LinearLayout>

    <LinearLayout
        android:paddingTop="5dp"
        android:paddingBottom="5dp"
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <LinearLayout
            android:orientation="vertical"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:gravity="center"
            android:layout_height="wrap_content">
            <ImageView
                android:src="@drawable/photo"
                android:layout_width="60dp"
                android:layout_height="60dp" />
            <TextView
                android:layout_gravity="center"
                android:text="小白"
                android:layout_marginTop="5dp"
                android:textColor="#000000"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
        </LinearLayout>
        <LinearLayout
            android:orientation="vertical"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:gravity="center"
            android:layout_height="wrap_content">
            <ImageView
                android:src="@drawable/photo"
                android:layout_width="60dp"
                android:layout_height="60dp" />
            <TextView
                android:layout_gravity="center"
                android:text="小白"
                android:layout_marginTop="5dp"
                android:textColor="#000000"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
        </LinearLayout>
        <LinearLayout
            android:orientation="vertical"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:gravity="center"
            android:layout_height="wrap_content">
            <ImageView
                android:src="@drawable/photo"
                android:layout_width="60dp"
                android:layout_height="60dp" />
            <TextView
                android:layout_gravity="center"
                android:text="小白"
                android:layout_marginTop="5dp"
                android:textColor="#000000"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
        </LinearLayout>
        <LinearLayout
            android:orientation="vertical"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:gravity="center"
            android:layout_height="wrap_content">
            <ImageView
                android:src="@drawable/photo"
                android:layout_width="60dp"
                android:layout_height="60dp" />
            <TextView
                android:layout_gravity="center"
                android:text="小白"
                android:layout_marginTop="5dp"
                android:textColor="#000000"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
        </LinearLayout>
        <LinearLayout
            android:orientation="vertical"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:gravity="center"
            android:layout_height="wrap_content">
            <ImageView
                android:src="@drawable/photo"
                android:layout_width="60dp"
                android:layout_height="60dp" />
            <TextView
                android:layout_gravity="center"
                android:text="小白"
                android:layout_marginTop="5dp"
                android:textColor="#000000"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
        </LinearLayout>
    </LinearLayout>



</LinearLayout>

我是直接複製貼上重複新增的，所以程式碼有點冗雜，這裡就是通過LinearLayout的佈局對應的放置ImageView和TextView。另外還有4個pager2、pager3、pager4、pager5，程式碼內容是一樣的，這裡就不放上去了。

最後當然是主程式碼了

import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.EditText;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
import android.widget.Toast;

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

public class MainActivity extends AppCompatActivity {

    private ViewPager viewPager;
    private MyPagerAdapter myPagerAdapter;
    private TextView mPageNum;
    private EditText mEditText;
    private Button mButton;
    private ImageView imageView;//小圓點的檢視
    private ImageView[] imagePoints;//viewpager的小圓點
    private LinearLayout mViewPoints;//包裹小圓點的linearlayout

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();//初始化
    }

    private void initView(){
        viewPager = (ViewPager) findViewById(R.id.viewpager);
        mViewPoints = (LinearLayout)findViewById(R.id.viewpager_point);
        List<View> list = new ArrayList<>();
        LayoutInflater layoutInflater = getLayoutInflater();
        View view1 = layoutInflater.inflate(R.layout.page1,null);//新增檢視
        View view2 = layoutInflater.inflate(R.layout.page2,null);
        View view3 = layoutInflater.inflate(R.layout.page3,null);
        View view4 = layoutInflater.inflate(R.layout.page4,null);
        View view5 = layoutInflater.inflate(R.layout.page5,null);
        view1.findViewById(R.id.linear_shentie).setOnClickListener(new View.OnClickListener() {//第一頁第一個ImageView的點選事件
            @Override
            public void onClick(View view) {
                Toast.makeText(MainActivity.this,"點選",Toast.LENGTH_SHORT).show();
            }
        });
        list.add(view1);
        list.add(view2);
        list.add(view3);
        list.add(view4);
        list.add(view5);
        imagePoints = new ImageView[list.size()];
        for (int i = 0;i<list.size();i++){//載入小圓點，預設第一頁被選中
            imageView = new ImageView(MainActivity.this);
            LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(20,20);//設定寬高
            layoutParams.setMargins(5,0,5,0);//設定margin
            imageView.setLayoutParams(layoutParams);
            imagePoints[i] = imageView;
            if (i == 0){
                imagePoints[i].setBackgroundResource(R.drawable.point_select);
            }else{
                imagePoints[i].setBackgroundResource(R.drawable.point_noselect);
            }
            mViewPoints.addView(imagePoints[i]);
        }
        myPagerAdapter = new MyPagerAdapter(list);
        viewPager.setAdapter(myPagerAdapter);
        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {//當頁面改變時，實時更新小圓點
                for (int i = 0;i<imagePoints.length;i++){
                    imagePoints[position].setBackgroundResource(R.drawable.point_select);
                    if (i != position){
                        imagePoints[i].setBackgroundResource(R.drawable.point_noselect);
                    }
                }
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
        viewPager.setOffscreenPageLimit(1);
        myPagerAdapter.notifyDataSetChanged();
    }

    private class MyPagerAdapter extends PagerAdapter{//ViewPager的介面卡

        private List<View> list;

        public MyPagerAdapter(List<View> list) {
            this.list = list;
        }

        @Override
        public int getCount() {
            return list.size();
        }

        @Override
        public int getItemPosition(Object object) {
            return super.getItemPosition(object);
        }

        @Override
        public boolean isViewFromObject(View view, Object object) {
            return view == object;
        }

        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            View view = list.get(position);
            container.addView(view);
            return view;
        }

        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView(list.get(position));
        }
    }

}

這段程式碼我直接在上面附上了很多註釋，這裡就不在解釋了，寫到這裡，我們的功能就已經實現了，如果大家有更簡單的程式碼，歡迎指教

使用ViewPager實現一頁顯示多個ImageView的滑動切換檢視

使用ViewPager實現一頁顯示多個ImageView的滑動切換檢視

viewpager一屏顯示多個view 並且可以預覽下一個view

Android高階圖片滾動控制元件，編寫3D版的圖片輪播器一屏顯示多個圖片

ASP.NET 實現多頁面合並一頁顯示

Android 使用ViewPager實現類似gallery畫廊的效果(畫廊效果之ViewPager顯示多個圖片)

【轉】Android 使用ViewPager實現類似gallery畫廊的效果(畫廊效果之ViewPager顯示多個圖片)

VIewPager顯示多個Item

【轉】ViewPager 一屏顯示多個子頁面

viewpager一屏展示多個檢視

fragment中巢狀viewpager，vierpager中有多個fragment，不顯示 ...

Android開發實現上一頁,下一頁顯示內容

ViewPager系列之ViewPager一屏顯示多個子頁面

Matlab作圖後，使用data cursor實現顯示多個點的資料值

fragment中巢狀viewpager，vierpager中有多個fragment，不顯示而且滑動卡頓

echarts實現一個頁面同時顯示多個不同形狀的圖表/動態往圖表中存放資料

ios-day18-09(使用CAKeyframeAnimation實現對UIView在多個位置之間平移、沿著某一條路徑平移)

python基礎一 ------如何獲取多個字典相同的鍵

一張表多個字段是另一張表的主鍵，關聯查詢語句

Python 字典中一鍵對應多個值

文字溢出時，實現在末尾顯示三個點省略效果

使用ViewPager實現一頁顯示多個ImageView的滑動切換檢視

相關推薦