ViewPager

来源:互联网 发布:网络悲伤情歌 编辑:程序博客网 时间:2024/06/03 18:28

应用到的知识点为

ViewPager控件
ViewPager的适配器:PagerAdapter(可新建一个class继承或者直接用)

ViewPager监听接口:OnPageChangeListener
(一般重写onPageSelected(int position) 方法,该方法为切换ViewPager时的回调。)

简单版

先创建3个Layout

activity_main

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical"    >    </LinearLayout>        <android.support.v4.view.ViewPager            android:id="@+id/viewpage"            android:layout_width="match_parent"            android:layout_height="match_parent"            android:layout_gravity="center"            android:layout_weight="1.0"            android:flipInterval="30"            android:persistentDrawingCache="animation" /></LinearLayout>

接下来的两个layout则是将要切换的两个布局文件(将通过PagerAdapter放入PagerView)

colorView

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:background="#000000"></LinearLayout>

Layout2

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:background="#ffff00"    ></LinearLayout>

接下来是MainActivity

public class MainActivity extends AppCompatActivity {    private View view1, view2;    private ViewPager viewPager;    private TextView textView1, textView2;    private PagerAdapter pagerAdapter;    private List<View> viewList = new ArrayList<>();   //创建一个ArrayList用来保存要切换的View    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        viewPager = (ViewPager) findViewById(R.id.viewpage);        LayoutInflater inflater = getLayoutInflater();        view1 = inflater.inflate(R.layout.layout, null);        view2 = inflater.inflate(R.layout.layout2, null);        viewList.add(view1);        viewList.add(view2);        //将两个布局文件放进ArrayList中        //创建一个 PagerAdapter 并将其与viewList绑定(也可以创建一个类并继承PagerAdapter)        pagerAdapter = new PagerAdapter() {            @Override            public int getCount() {                return viewList.size();            }            @Override            public boolean isViewFromObject(View view, Object object) {                return view == object;            }            //移除当前容器上的布局文件(切换为其他页面)            @Override            public void destroyItem(ViewGroup container, int position, Object object) {                container.removeView(viewList.get(position));            }            //为当前容器添加布局文件(即想要显示的布局文件)            @Override            public Object instantiateItem(ViewGroup container, int position) {                container.addView(viewList.get(position));                return viewList.get(position);            }        };        //将 pagerAdapter与 viewPager绑定        viewPager.setAdapter(pagerAdapter);    }}

以上实现了通过滑屏切换View的功能。图片大致如下:
这里写图片描述


进阶

1.应用ViewPager监听接口:OnPageChangeListener
2.用按钮控制ViewPager
3.将其中一个View设为ListView


还是创建三个Layout
main_activity

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical"    >    <LinearLayout        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_gravity="center_horizontal"        >        <TextView            android:id="@+id/textView"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:background="@drawable/offlinearrow_tab1_pressed"            android:paddingBottom="10dp"            android:paddingLeft="20dp"            android:paddingRight="20dp"            android:paddingTop="10dp"            android:text="可下载" />        <TextView            android:id="@+id/textView2"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:background="@drawable/offlinearrow_tab2_normal"            android:paddingBottom="10dp"            android:paddingLeft="20dp"            android:paddingRight="20dp"            android:paddingTop="10dp"            android:text="已下载" />    </LinearLayout>        <android.support.v4.view.ViewPager            android:id="@+id/viewpage"            android:layout_width="match_parent"            android:layout_height="match_parent"            android:layout_gravity="center"            android:layout_weight="1.0"            android:flipInterval="30"            android:persistentDrawingCache="animation" /></LinearLayout>

添加了两个TextView用于两个View切换时的标志


两个切换的View

color_view

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:background="#000000"></LinearLayout>

list_view

<?xml version="1.0" encoding="utf-8"?><ListView xmlns:android="http://schemas.android.com/apk/res/android"    android:id="@+id/download"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:background="@drawable/offline_common_bar_bg"    ></ListView>

以及ListView的Item_布局文件:
Item

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent">    <TextView        android:id="@+id/show"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        /></LinearLayout>

MyMyPageAdapter继承 PagerAdapter

public class MyPageAdapter extends PagerAdapter{    View listView,colorView;    //两个View:一个ListView,另一个则是和上文一样的纯颜色布局文件    ViewPager viewPager;    //声明一个ViewPager    public MyPageAdapter(View listView, View colorView, ViewPager viewPager) {        this.listView = listView;        this.colorView = colorView;        this.viewPager = viewPager;    }    @Override    public int getCount() {        return 2;    }    @Override    public boolean isViewFromObject(View view, Object object) {       return view == object;    }    @Override    public void destroyItem(ViewGroup container, int position, Object object) {        if (position == 0){            viewPager.removeView(listView);        }else{            viewPager.removeView(colorView);        }    }    @Override    public Object instantiateItem(ViewGroup container, int position) {        if (position ==0){            viewPager.addView(listView);            return listView;        }else {            viewPager.addView(colorView);            return colorView;        }    }    @Override    public void restoreState(Parcelable arg0, ClassLoader arg1) {    }    @Override    public Parcelable saveState() {        return null;    }    @Override    public void startUpdate(View arg0) {    }}

MainActivity

public class MainActivity extends AppCompatActivity implements View.OnClickListener,ViewPager.OnPageChangeListener{    private View colorView;    private ListView listView;    private ViewPager viewPager;    private MyPageAdapter pagerAdapter;    private TextView textView1, textView2;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        initViewAndMyPageAdapter();        /*         *初始化将要显示View,并将其通过适配器与ViewPager绑定         */        initListViewAndAdapter();        /*         *初始化ListV并为其绑定适配器及数据源         */        initTextView();        /*         *初始化TextView并为其添加点击监听事件         */    }    private void initTextView() {        textView1 = (TextView) findViewById(R.id.textView);        textView2 = (TextView) findViewById(R.id.textView2);        textView1.setOnClickListener(this);        textView2.setOnClickListener(this);    }    private void initListViewAndAdapter() {        ArrayList<String> list = new ArrayList<>();        list.add("java");        list.add("C++");        list.add("JavaScript");        ArrayAdapter<String> adapter = new ArrayAdapter<>(MainActivity.this, android.R.layout.simple_list_item_1, list);        // 给ListView设置数据适配器        listView.setAdapter(adapter);    }    private void initViewAndMyPageAdapter() {        LayoutInflater inflater = getLayoutInflater();        colorView = inflater.inflate(R.layout.color_view, null);        listView =(ListView) LayoutInflater.from(                MainActivity.this).inflate(                R.layout.list_view, null);        /*        初始化两个布局文件         */        viewPager = (ViewPager) findViewById(R.id.viewpage);        viewPager.setOnPageChangeListener(this);        pagerAdapter = new MyPageAdapter(listView,colorView,viewPager);        viewPager.setAdapter(pagerAdapter);        /*        * 初始话viewPager并为其添加监听事件;        * 初始化pagerAdapter,并将其与viewPager绑定。        */    }    @Override    public void onClick(View v) {        if (v.equals(textView1)) {            changeTextViewStatus(0);            viewPager.setCurrentItem(0);        } else if(v.equals(textView2)){            changeTextViewStatus(1);            viewPager.setCurrentItem(1);        }        pagerAdapter.notifyDataSetChanged();    }    @Override    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {}    @Override    public void onPageSelected(int position) {       changeTextViewStatus(position);    }    @Override    public void onPageScrollStateChanged(int state) {    }    /*    *根据当前Pager显示的界面,修改TextView的背景图片    */    public void changeTextViewStatus(int positionOfPager){        int paddingHorizontal = textView1.getPaddingLeft();        int paddingVertical = textView2.getPaddingTop();        switch (positionOfPager) {            case 0:                textView1                        .setBackgroundResource(R.drawable.offlinearrow_tab1_pressed);                textView2                        .setBackgroundResource(R.drawable.offlinearrow_tab2_normal);                break;            case 1:                textView1                        .setBackgroundResource(R.drawable.offlinearrow_tab1_normal);                textView2                        .setBackgroundResource(R.drawable.offlinearrow_tab2_pressed);                break;        }        /*        *让textView的内容保持原来的间距        */        textView1.setPadding(paddingHorizontal, paddingVertical,                paddingHorizontal, paddingVertical);        textView2.setPadding(paddingHorizontal, paddingVertical,                paddingHorizontal, paddingVertical);    }}

效果大致如图:
这里写图片描述

原创粉丝点击