android 控件学习笔记 --------ViewPager
ViewPager
viewpager 可以使屏幕自由的左右滑动。我们可以把它看成一个容器，它可以承载两个对象View 和Fragment 。
它的控件和以往的不太一样
<strong><android.support.v4.view.ViewPager</strong>
android:id="@+id/vp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center" >
</android.support.v4.view.ViewPager>这个控件指明了它的具体位置，它在 建的工程libs文件下的android-support-v4.jar 中
配置Adapter
Pageradpter的数据源是List<view>
Fragement
Pageradpter的数据源是List<Fragement>
FragementStatePageradpter的数据源是List<Fragement>
首先 Pageradpter
一次加载三个页卡 自动移除没显示的页卡，
下面贴出完整代码 后面做下解释
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:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity" >
<android.support.v4.view.ViewPager
android:id="@+id/vp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center" >
<android.support.v4.view.PagerTabStrip
android:id="@+id/pts"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top" >
</android.support.v4.view.PagerTabStrip>
</android.support.v4.view.ViewPager>
</RelativeLayout>
MainActivity.java
import java.util.ArrayList;
import java.util.List;
import android.os.Bundle;
import android.annotation.SuppressLint;
import android.app.Activity;
import android.graphics.Color;
import android.support.v4.view.PagerTabStrip;
import android.support.v4.view.ViewPager;
import android.view.View;
public class MainActivity extends Activity {
private ViewPager viewPager;
private PagerTabStrip pagerTabStrip;
List<View> listview;
List<String> listtitle;
View view1, view3, view4, view2;
@SuppressLint("NewApi") @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
viewPager = (ViewPager) findViewById(R.id.vp);
pagerTabStrip = (PagerTabStrip) findViewById(R.id.pts);
listview = new ArrayList<View>();
view1 = View.inflate(this, R.layout.view1, null);
view2 = View.inflate(this, R.layout.view2, null);
view3 = View.inflate(this, R.layout.view3, null);
view4 = View.inflate(this, R.layout.view4, null);
listview.add(view1);
listview.add(view2);
listview.add(view3);
listview.add(view4);
listtitle = new ArrayList<String>();
listtitle.add("第一页");
listtitle.add("第二页");
listtitle.add("第三页");
listtitle.add("第四页");
pagerTabStrip.setBackgroundColor(Color.BLACK);
pagerTabStrip.setDrawFullUnderline(false);
pagerTabStrip.setTabIndicatorColor(Color.BLUE);
pagerTabStrip.setTextColor(Color.GREEN);
MyPagerAdapter myPagerAdapter = new MyPagerAdapter(listview,listtitle);
viewPager.setAdapter(myPagerAdapter);
}
}
MyPagerAdapter.java 代码
import java.util.List;
import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;
public class MyPagerAdapter extends PagerAdapter {
<span style="white-space:pre"> </span>List<View> listview;
<span style="white-space:pre"> </span>List<String> listtitle;
<span style="white-space:pre"> </span>public MyPagerAdapter(List<View> listview,List<String> listtitle) {
<span style="white-space:pre"> </span>this.listview = listview;
<span style="white-space:pre"> </span>this.listtitle=listtitle;
<span style="white-space:pre"> </span>}
<span style="white-space:pre"> </span>// 返回页卡的数量
<span style="white-space:pre"> </span>@Override
<span style="white-space:pre"> </span>public int getCount() {
<span style="white-space:pre"> </span>// TODO Auto-generated method stub
<span style="white-space:pre"> </span>return listview.size();
<span style="white-space:pre"> </span>}
<span style="white-space:pre"> </span>// 判断view是否来在对象
<span style="white-space:pre"> </span>@Override
<span style="white-space:pre"> </span>public boolean isViewFromObject(View arg0, Object arg1) {
<span style="white-space:pre"> </span>// TODO Auto-generated method stub
<span style="white-space:pre"> </span>return arg0 == arg1;
<span style="white-space:pre"> </span>}
<span style="white-space:pre"> </span>// 实例化页卡
<span style="white-space:pre"> </span>@Override
<span style="white-space:pre"> </span>public Object instantiateItem(ViewGroup container, int position) {
<span style="white-space:pre"> </span>// TODO Auto-generated method stub
<span style="white-space:pre"> </span>container.addView(listview.get(position));
<span style="white-space:pre"> </span>return listview.get(position);
<span style="white-space:pre"> </span>}
<span style="white-space:pre"> </span>// 销毁页卡
<span style="white-space:pre"> </span>@Override
<span style="white-space:pre"> </span>public void destroyItem(ViewGroup container, int position, Object object) {
<span style="white-space:pre"> </span>// TODO Auto-generated method stub
<span style="white-space:pre"> </span>container.removeView(listview.get(position));
<span style="white-space:pre"> </span>}
//获取标题
<span style="white-space:pre"> </span>@Override
<span style="white-space:pre"> </span>public CharSequence getPageTitle(int position) {
<span style="white-space:pre"> </span>// TODO Auto-generated method stub
<span style="white-space:pre"> </span>return listtitle.get(position);
<span style="white-space:pre"> </span>}
<span style="white-space:pre"> </span>
<span style="white-space:pre"> </span>
}
view1.xml view2.xml view3.xml view4.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:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity" >
<ImageView
android:src="@drawable/games_control"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</RelativeLayout>
下面简单解释下代码
<android.support.v4.view.PagerTabStrip
android:id="@+id/pts"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top" >
</android.support.v4.view.PagerTabStrip>上面该段代码是实现滑动页面的标题的 和下面代码配合使用
listtitle = new ArrayList<String>();
listtitle.add("第一页"); //设置导航的title的名称
listtitle.add("第二页");
listtitle.add("第三页");
listtitle.add("第四页");
pagerTabStrip.setBackgroundColor(Color.BLACK); //设置导航栏的背景颜色
pagerTabStrip.setDrawFullUnderline(false);//设置导航栏下面的那条线的显示与否
pagerTabStrip.setTabIndicatorColor(Color.BLUE); //设置当前页面那个标题下短线的颜色
pagerTabStrip.setTextColor(Color.GREEN);//设置标题的颜色最后的效果图如下
Fragement
Pageradpter的数据源是List<Fragement>的时候
一次把所有的页卡加载完
代码基本差不多
但是在导包的时候要选择导入 android.support.v4.app.开头的包 它具有兼容性 3.0以下版本也可以使用
MainActivity.java 代码如下 和上面不一样的是
<strong>MainActivity 继承的不是Activity 而是FragmentActivity</strong>
import java.util.ArrayList;
import java.util.List;
import android.os.Bundle;
import android.annotation.SuppressLint;
import android.graphics.Color;
import <strong>android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.PagerTabStrip;
import android.support.v4.view.ViewPager;</strong>
import android.view.View;
public class MainActivity <strong>extends FragmentActivity </strong>{
private ViewPager viewPager;
private PagerTabStrip pagerTabStrip;
List<Fragment> fragmentlist;
List<String> listtitle;
@SuppressLint("NewApi") @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
viewPager = (ViewPager) findViewById(R.id.vp);
pagerTabStrip = (PagerTabStrip) findViewById(R.id.pts);
listtitle = new ArrayList<String>();
listtitle.add("第一页");
listtitle.add("第二页");
listtitle.add("第三页");
listtitle.add("第四页");
pagerTabStrip.setBackgroundColor(Color.BLACK);
pagerTabStrip.setDrawFullUnderline(false);
pagerTabStrip.setTabIndicatorColor(Color.BLUE);
pagerTabStrip.setTextColor(Color.GREEN);
fragmentlist = new ArrayList<Fragment>();
<strong>fragmentlist.add(new Fragment1());
fragmentlist.add(new Fragment2());
fragmentlist.add(new Fragment3());
fragmentlist.add(new Fragment4());</strong>
MyFragment myFragment = new MyFragment(<strong>getSupportFragmentManager()</strong>,fragmentlist,listtitle);
viewPager.setAdapter(myFragment);
}
}
Fragment1.java 和
Fragment2.java Fragment3.java Fragment4.java代码基本一样 不一样的是导入的布局view 。其
Fragment1.java代码如下
import android.os.Bundle;
<strong>import android.support.v4.app.Fragment;</strong>
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class Fragment1 extends <strong>Fragment</strong>{
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// TODO Auto-generated method stub
View view=inflater.inflate(<strong>R.layout.view1</strong>, container, false);
return view;
}
}
MyFragment.java代码如下
import java.util.List;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
public class MyFragment extends FragmentPagerAdapter {
List<Fragment> listview; // 传递过来布局
List<String> listtitle;// 传递过来标题
public MyFragment(FragmentManager fm, List<Fragment> listview,
List<String> listtitle) {
super(fm);
// TODO Auto-generated constructor stub
this.listview = listview;
this.listtitle = listtitle;
}
@Override
public CharSequence getPageTitle(int position) {
// TODO Auto-generated method stub
return listtitle.get(position);
}
@Override
public int getCount() {
// TODO Auto-generated method stub
return listview.size();
}
@Override
public Fragment getItem(int arg0) {
// TODO Auto-generated method stub
return listview.get(arg0);
}
}
运行的效果和上面一样。
FragementStatePageradpter的数据源是List<Fragement>的时候
和FragementPageradpter 基本一样 不一样的是
<strong>MainActivity 继承的FragmentStateActivity </strong>
而且在
MyFragment.java代码中需要添加两个方法 ，但是不需要改写。它一次是加载3个页卡。自动移除 创建页卡
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
// TODO Auto-generated method stub
super.destroyItem(container, position, object);
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
// TODO Auto-generated method stub
return super.instantiateItem(container, position);
}
运行效果和上面一样。