ViewPager多页面滑动效果
2014-04-06 21:59 kingshow 阅读(347) 评论(0) 编辑 收藏 举报
Android的左右滑动在实际编程经常用到,比如查看多张图片,左右切换tab页。
自Android3.0之后的SDK中提供了android-support-v4包用以实现版本兼容,让老版本系统下的应用通过加入jar包实现扩展,其中有一个可以实现左右滑动的类ViewPager。
一、建立工程,如图
二、activity_main.xml中代码
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<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>
三、tabX.xml中代码
tab1.xml
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<?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>
tab2.xml
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<?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>
tab3.xml
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<?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>
四、MainActivity.java中代码
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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; } }
五、效果图