zoukankan      html  css  js  c++  java
  • ViewPager多页面滑动效果

         Android的左右滑动在实际编程经常用到,比如查看多张图片,左右切换tab页。

         自Android3.0之后的SDK中提供了android-support-v4包用以实现版本兼容,让老版本系统下的应用通过加入jar包实现扩展,其中有一个可以实现左右滑动的类ViewPager。

    一、建立工程,如图

    二、activity_main.xml中代码

    <RelativeLayout 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.support.v4.view.ViewPager
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:id="@+id/viewpager"
             android:layout_gravity="center"
             >
             <android.support.v4.view.PagerTitleStrip
                 android:layout_width="wrap_content"
                  android:layout_height="wrap_content"
                  android:id="@+id/pagertitle"
                 android:layout_gravity="top"
                 >
                 
             </android.support.v4.view.PagerTitleStrip>
             
         </android.support.v4.view.ViewPager>
    
    </RelativeLayout>
    View Code

    三、tabX.xml中代码
     tab1.xml

    <?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" >
    
        <ProgressBar
            android:id="@+id/progressBar1"
            style="?android:attr/progressBarStyleLarge"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    
    </LinearLayout>
    View Code

     tab2.xml

    <?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" >
    
        <SeekBar
            android:id="@+id/seekBar1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    
    </LinearLayout>
    View Code

     tab3.xml

    <?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" >
    
        <ProgressBar
            android:id="@+id/progressBar1"
            style="?android:attr/progressBarStyleHorizontal"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    
    </LinearLayout>
    View Code

    四、MainActivity.java中代码

    package com.study.viewpager;
    
    import java.util.ArrayList;
    import java.util.List;
    
    import android.os.Bundle;
    import android.app.Activity;
    import android.support.v4.view.PagerAdapter;
    import android.support.v4.view.PagerTitleStrip;
    import android.support.v4.view.ViewPager;
    import android.view.LayoutInflater;
    import android.view.Menu;
    import android.view.View;
    import android.view.ViewGroup;
    
    public class MainActivity extends Activity {
    
        private ViewPager viewPager;
        private PagerTitleStrip pagerTitleStrip;//表示滑动的每一页的标题
        private List<View> list; //表示装载滑动的布局
        private List<String> titleList; //表示滑动的每一页的标题
        
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            
            viewPager = (ViewPager)this.findViewById(R.id.viewpager);
            pagerTitleStrip = (PagerTitleStrip)this.findViewById(R.id.pagertitle);
            //动态加载布局
            View view1 = LayoutInflater.from(MainActivity.this).inflate(R.layout.tab1, null);
            View view2 = LayoutInflater.from(MainActivity.this).inflate(R.layout.tab2, null);
            View view3 = LayoutInflater.from(MainActivity.this).inflate(R.layout.tab3, null);
            list = new ArrayList<View>();
            list.add(view1);
            list.add(view2);
            list.add(view3);
            titleList = new ArrayList<String>();
            titleList.add("title1");
            titleList.add("title2");
            titleList.add("title3");
            viewPager.setAdapter(new MyAdapter());
            
        }
    
        class MyAdapter extends PagerAdapter{
    
            @Override
            public int getCount() {
                //布局的个数
                return list.size();
            }
            
            @Override
            public void destroyItem(ViewGroup container, int position, Object object) {
                // TODO Auto-generated method stub
                //super.destroyItem(container, position, object);
                ((ViewPager)container).removeView(list.get(position));
            }
            
            @Override
            public CharSequence getPageTitle(int position) {
                // TODO Auto-generated method stub
                return titleList.get(position);
                
            }
            
            @Override
            public Object instantiateItem(ViewGroup container, int position) {
                ((ViewPager)container).addView(list.get(position));
                return list.get(position);
            }
    
            @Override
            public boolean isViewFromObject(View arg0, Object arg1) {
                
                return arg0 == arg1;
            }
            
        }
    
        @Override
        public boolean onCreateOptionsMenu(Menu menu) {
            // Inflate the menu; this adds items to the action bar if it is present.
            getMenuInflater().inflate(R.menu.main, menu);
            return true;
        }
        
    }
    View Code

    五、效果图

  • 相关阅读:
    序列化限流排序
    linux常用命令
    Django路径问题
    asp.net 后台 修改 javascript 变量
    支持 IE8 IE11 和 FF, Chrome 浏览器的圆角
    Asp.net Response.Redirect with post data
    gridview 字段没有绑定由于column visible= false
    聪明的小技巧
    GridView
    各种集合
  • 原文地址:https://www.cnblogs.com/kingshow123/p/viewpager.html
Copyright © 2011-2022 走看看