viewpager圖片滑動 Android ViewPager圖片滑動－IT工程師數位筆記本

文章出處

Android ViewPager圖片滑動首先展示效果圖Android ViewPager圖片滑動代碼演示步驟1.實例化ViewPager
2.通過LayoutInflater加載布局，返回View結果
3.把生成的每一個View對象添加到List集合中
4.實例化適配器，傳遞View集合
5.在適配器中繼承自PagerAdapter，實現內部的四個方法
getCount(); 返回視圖的數量
isViewFromObject(); 是否通過對象加載視圖 View==object
instantiateltem(); 加載當前頁面
(通過container.addView();添加視圖)
返回個給用戶
destroyItem(); 銷毀滑出的視圖
(通過container.removerView();銷毀視圖)6.實例化每個ImageView
7.點擊每個ImageView時，切換不同的頁面
(viewPager.setCurrentltem(下標))8.當頁面切換后，還要把當前的導航欄變為綠色
設置文本顏色的setImageResource(R.drawable.radio_true);
9.當你每次點擊之前的時候，添加一個方法，清除方法，
（清理之前的所有導航欄的狀態，置為灰色）
10.實現滑動監聽需要addOnPagerChangeListener
11.在onPagerSelected方法中，根據position頁面的下標判斷分別設置對應的底部導航欄狀態一.新建一個項目名為ViewPagerDemo，并引入ViewPagerViewPager是google SDk中自帶的一個附加包的一個類，可以用來實現屏幕間的切換1.在主布局文件activity_main.xml中引入android.support.v4.view.ViewPager包，添加一個線性布局在線性布局中添加ImageView用于顯示滑動小點

xml version="1.0" encoding="utf-8"?><FrameLayout    xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical"    tools:context="com.example.cxy.viewpagerdemo.MainActivity">    <android.support.v4.view.ViewPager        android:id="@+id/viewPager"        android:layout_width="match_parent"        android:layout_height="match_parent">    android.support.v4.view.ViewPager>    <LinearLayout        android:layout_gravity="bottom"        android:gravity="center"        android:layout_marginBottom="20dp"        android:layout_width="match_parent"        android:layout_height="wrap_content">        <ImageView            android:id="@+id/imageView1"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:src="@drawable/radio_true"            android:layout_gravity="bottom"/>        <ImageView            android:id="@+id/imageView2"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:src="@drawable/radio_false"            android:layout_gravity="bottom"/>        <ImageView            android:id="@+id/imageView3"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:src="@drawable/radio_false"            android:layout_gravity="bottom"/>        <ImageView            android:id="@+id/imageView4"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:src="@drawable/radio_false"            android:layout_gravity="bottom"/>        <ImageView            android:id="@+id/imageView5"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:src="@drawable/radio_false"            android:layout_gravity="bottom"/>        <ImageView            android:id="@+id/imageView6"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:src="@drawable/radio_false"            android:layout_gravity="bottom"/>    LinearLayout>FrameLayout>

2.ViewPager的加載需要一個適配器pagerAdapter的子類當繼承pagerAdapter生成兩個方法，剩下兩個方法需要自己補充

package com.example.cxy.viewpagerdemo.adapter;import android.support.v4.view.PagerAdapter;import android.view.View;import android.view.ViewGroup;import java.util.List;/** * date:2017/3/7 * Created:陳簫陽(admin) */public class MyViewPagerAdapter extends PagerAdapter {    private List mList;    public MyViewPagerAdapter(List list) {        mList = list;    }    //返回視圖數量    @Override    public int getCount() {        return mList.size();    }    //是否通過對象加載視圖    @Override    public boolean isViewFromObject(View view, Object object) {        return view == object;    }    //加載當前頁面    @Override    public Object instantiateItem(ViewGroup container, int position) {        container.addView(mList.get(position));        return mList.get(position);    }    //銷毀滑出視圖    @Override    public void destroyItem(ViewGroup container, int position, Object object) {        container.removeView(mList.get(position));    }}

3.新建一個fragment包并新建類OneFragment，通過LayoutInflater加載布局，返回View結果，并在布局文件中添加Imageview用于顯示滑動所顯示的圖片，共六個用于顯示六張圖片，這里只寫一個OneFeagment類

package com.example.cxy.viewpagerdemo.fragment;import android.os.Bundle;import android.support.annotation.Nullable;import android.support.v4.app.Fragment;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import com.example.cxy.viewpagerdemo.R;/** * date:2017/3/7 * Created:陳簫陽(admin) */public class OneFragment extends Fragment{    @Nullable    @Override    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {        View view = inflater.inflate(R.layout.fragmentone, null);        return view;    }}

fragmentone.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">    <ImageView        android:layout_width="match_parent"        android:layout_height="match_parent"        android:background="@drawable/view1"/>LinearLayout>

4.編寫主類

package com.example.cxy.viewpagerdemo;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.widget.ImageView;import com.example.cxy.viewpagerdemo.adapter.MyViewPagerAdapter;import java.util.ArrayList;import java.util.List;public class MainActivity extends AppCompatActivity implements View.OnClickListener, ViewPager.OnPageChangeListener {    private ViewPager mViewPager;    private List mList;    private ImageView mImageView1, mImageView2, mImageView3, mImageView4, mImageView5, mImageView6;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        //初始化所有控件        initView();    }    private void initView() {        //實例化ViewPager        mViewPager = (ViewPager) findViewById(R.id.viewPager);        //實例化ImageView        mImageView1 = (ImageView) findViewById(R.id.imageView1);        mImageView2 = (ImageView) findViewById(R.id.imageView2);        mImageView3 = (ImageView) findViewById(R.id.imageView3);        mImageView4 = (ImageView) findViewById(R.id.imageView4);        mImageView5 = (ImageView) findViewById(R.id.imageView5);        mImageView6 = (ImageView) findViewById(R.id.imageView6);        //給ImageView添加監聽點擊事件        mImageView1.setOnClickListener(this);        mImageView2.setOnClickListener(this);        mImageView3.setOnClickListener(this);        mImageView4.setOnClickListener(this);        mImageView5.setOnClickListener(this);        mImageView6.setOnClickListener(this);        //實例化Lise數組        mList = new ArrayList<>();        View view1 = LayoutInflater.from(this).inflate(R.layout.fragmentone, null);        View view2 = LayoutInflater.from(this).inflate(R.layout.fragmenttwo, null);        View view3 = LayoutInflater.from(this).inflate(R.layout.fragmentthree, null);        View view4 = LayoutInflater.from(this).inflate(R.layout.fragmentfour, null);        View view5 = LayoutInflater.from(this).inflate(R.layout.fragmentfive, null);        View view6 = LayoutInflater.from(this).inflate(R.layout.fragmentsix, null);        //把生成的每一個View對象添加到List集合中        mList.add(view1);        mList.add(view2);        mList.add(view3);        mList.add(view4);        mList.add(view5);        mList.add(view6);        //實例化適配器        MyViewPagerAdapter adapter = new MyViewPagerAdapter(mList);        //給ViewPager添加適配器        mViewPager.setAdapter(adapter);        //給ViewPager添加監聽        mViewPager.addOnPageChangeListener(this);    }    @Override    public void onClick(View v) {        //清理所有導航欄的狀態        clearState();        switch (v.getId()) {            case R.id.imageView1:                //給ViewPager設置當前布局                mViewPager.setCurrentItem(0);                //給ImageView設置文本顏色                mImageView1.setImageResource(R.drawable.radio_true);                break;            case R.id.imageView2:                mViewPager.setCurrentItem(1);                mImageView2.setImageResource(R.drawable.radio_true);                break;            case R.id.imageView3:                mViewPager.setCurrentItem(2);                mImageView3.setImageResource(R.drawable.radio_true);                break;            case R.id.imageView4:                mViewPager.setCurrentItem(3);                mImageView4.setImageResource(R.drawable.radio_true);                break;            case R.id.imageView5:                mViewPager.setCurrentItem(4);                mImageView5.setImageResource(R.drawable.radio_true);                break;            case R.id.imageView6:                mViewPager.setCurrentItem(5);                mImageView6.setImageResource(R.drawable.radio_true);                break;        }    }    //將底部導航欄小點初始化    private void clearState() {        mImageView1.setImageResource(R.drawable.radio_false);        mImageView2.setImageResource(R.drawable.radio_false);        mImageView3.setImageResource(R.drawable.radio_false);        mImageView4.setImageResource(R.drawable.radio_false);        mImageView5.setImageResource(R.drawable.radio_false);        mImageView6.setImageResource(R.drawable.radio_false);    }    //滑動過程中的動作    @Override    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {    }    //選擇某個頁面松手后會被調用    @Override    public void onPageSelected(int position) {        //清理所有導航欄的狀態        clearState();        //使用Switch拿到下標定義當滑動到相應位置小點顯示顏色        switch (position) {            case 0:                mImageView1.setImageResource(R.drawable.radio_true);                break;            case 1:                mImageView2.setImageResource(R.drawable.radio_true);                break;            case 2:                mImageView3.setImageResource(R.drawable.radio_true);                break;            case 3:                mImageView4.setImageResource(R.drawable.radio_true);                break;            case 4:                mImageView5.setImageResource(R.drawable.radio_true);                break;            case 5:                mImageView6.setImageResource(R.drawable.radio_true);                break;        }    }    //手指放上去，松開，拖動都會被調用    @Override    public void onPageScrollStateChanged(int state) {    }}