Android UI基础——ViewPager+Fragment
ViewPager
ViewPager是一个允许用户左右滑动翻页显示数据的控件，想要在界面显示数据就需要使用PagerAdapter去加载数据了，这边的数据先设置为几张图片，让其滑动显示，具体代码如下：
布局中的代码（ViewPager是Android的支持包supportv4包中的控件，必须写全称
）：
"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:background="#000"
tools:context="com.example.change.myviewpaper.MainActivity">
.support.v4.view.ViewPager
android:id="@+id/main_view_pager"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
.support.v4.view.ViewPager>
设置适配器，将页面适配到ViewPager，使用PagerAdapter必须实现四个方法：
①instantiateItem(ViewGroup, int)：添加一个页面到ViewPager指定位置
②destroyItem(ViewGroup, int, Object)：销毁指定位置页面
③getCount()：得到页面数量
④isViewFromObject(View, Object)：判断页面是否来自一个对象，这里返回view==object
public class MyAdapter extends PagerAdapter{
private Context mContext;
private List list;
public MyAdapter(Context mContext, List list) {
this.mContext = mContext;
this.list = list;
}
@Override
public int getCount() {
return list.size();
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView(list.get(position));
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
container.addView(list.get(position));
return list.get(position);
}
} 在类中实现的代码：
public class MainActivity extends AppCompatActivity {
private List list;
private ViewPager mViewPager;
private int[] image = {R.mipmap.view,R.mipmap.view_1,R.mipmap.view_2,R.mipmap.view_3};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mViewPager = (ViewPager) findViewById(R.id.main_view_pager);
list = new ArrayList<>();
for (int i = 0; i < image.length; i++) {
ImageView imageView = new ImageView(this);
imageView.setImageResource(image[i]);
list.add(imageView);
}
//添加适配器
MyAdapter adapter = new MyAdapter(this,list);
mViewPager.setAdapter(adapter);
}
} 效果图如下：
Fragment
ViewPager经常会和Fragment一起使用，这样会更方便的让我们去操作要滑动的界面。
Fragment是Android 3.0引入新的API，Fragment代表了Activity的子模块，必须“嵌入”Activity中使用，因此，虽然Fragment有自己的生命周期，但也受Activity的生命周期控制，想要在Activity中使用Fragment，可调用FragmentManager的add(),remove(),replace()方法动态的添加，删除或者替换Fragment。
接下来的例子实现的是既可以通过滑动到下一个页面，也可以使用Button跳转到下一个页面。具体代码如下：
布局中的代码（运用FrameLayout布局就可以看出Fragment的切换其实是覆盖）：
<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:background="#000"
tools:context="com.example.myfragmentviewpager.MainActivity">
<FrameLayout
android:id="@+id/layout_frame"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@+id/line_layout">
<android.support.v4.view.ViewPager
android:id="@+id/fragment_view_pager"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
android.support.v4.view.ViewPager>
FrameLayout>
<LinearLayout
android:id="@+id/line_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:weightSum="3">
<Button
android:id="@+id/first_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="First"
android:layout_weight="1"
android:background="@drawable/change_button_color"/>
<Button
android:id="@+id/sec_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Second"
android:layout_weight="1"
android:background="@drawable/change_button_color"/>
<Button
android:id="@+id/third_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Third"
android:layout_weight="1"
android:background="@drawable/change_button_color"/>
LinearLayout>
RelativeLayout>本例中要展示三个页面，所以写了三个Fragment，这里只写出其中一个的代码，因为只是简单地展示，所以在Fragment中只放置了ImageView，想要显示其他数据可以自行添加，代码如下：
public class FragmentFirst extends Fragment{
private ImageView imageView;
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_1,null);//此处布局中只放置了一个ImageView，布局代码不再展示
imageView = (ImageView) view.findViewById(R.id.first_image);
imageView.setImageResource(R.mipmap.view_1);
return view;
}
}设置适配器，这里不再是继承PagerAdapter，而是继承FragmentPagerAdapter，然后重写两个方法getItem()和getCount()以及一个构造方法，参数是FragmentManager和自己添加的一个List集合。代码如下：
public class MyFragmentAdapter extends FragmentPagerAdapter{
private Listlist;//泛型设置为Fragment
public MyFragmentAdapter(FragmentManager fm,List list) {
super(fm);
this.list = list;
}
@Override
public Fragment getItem(int position) {
return list.get(position);
}
@Override
public int getCount() {
return list.size();
}
} 最后在类中实现ViewPager的滑动，添加适配器，Button的点击事件等，代码如下：
public class MainActivity extends AppCompatActivity implements View.OnClickListener {
private Button mButton1,mButton2,mButton3;
private List list;
private ViewPager mViewPager;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mViewPager = (ViewPager) findViewById(R.id.fragment_view_pager);
//ViewPager的滑动监听器，这边主要作用是实现滑动和Button的点击同步
mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
//滑动时的页面选择
switch (position){
//滑动到第一个页面时，让第一个Button处于点击状态，不能再进行点击
case 0:
mButton1.setEnabled(false);
mButton2.setEnabled(true);
mButton3.setEnabled(true);
break;
case 1:
mButton1.setEnabled(true);
mButton2.setEnabled(false);
mButton3.setEnabled(true);
break;
case 2:
mButton1.setEnabled(true);
mButton2.setEnabled(true);
mButton3.setEnabled(false);
break;
}
}
@Override
public void onPageSelected(int position) {}
@Override
public void onPageScrollStateChanged(int state) {}
});
list = new ArrayList<>();
list.add(new FragmentFirst());
list.add(new FragmentSec());
list.add(new FragmentThird());
//添加适配器
MyFragmentAdapter adapter = new MyFragmentAdapter(getSupportFragmentManager(),list);
mViewPager.setAdapter(adapter);
mButton1 = (Button) findViewById(R.id.first_button);
mButton2 = (Button) findViewById(R.id.sec_button);
mButton3 = (Button) findViewById(R.id.third_button);
mButton1.setOnClickListener(this);
mButton2.setOnClickListener(this);
mButton3.setOnClickListener(this);
}
@Override
public void onClick(View v) {
FragmentTransaction transaction;
switch (v.getId()){
case R.id.first_button:
//当第一个Button点击时，ViewPager分配第一个页面给第一个Button
mViewPager.setCurrentItem(0);
mButton1.setEnabled(false);
mButton2.setEnabled(true);
mButton3.setEnabled(true);
break;
case R.id.sec_button:
mViewPager.setCurrentItem(1);
mButton1.setEnabled(true);
mButton2.setEnabled(false);
mButton3.setEnabled(true);
break;
case R.id.third_button:
mViewPager.setCurrentItem(2);
mButton1.setEnabled(true);
mButton2.setEnabled(true);
mButton3.setEnabled(false);
break;
}
}
} 效果如下：