Android(安卓)UI基础——ViewPager+Fragment
16lz
2022-04-26
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; } }} 效果如下：
更多相关文章
- Android截图功能实现
- Android应用层源码阅读笔记--Application
- Android(安卓)webview加载html页面根据点击确定选中的控件
- Android双向侧边滑动实现
- Android(安卓)Jetpack系列之Lifecycle组件（一篇文章掌握Lifecycle
- Android全埋点方案调研
- android 多分布率解决
- Android(安卓)横向布局中间填满
- 按着步骤来，学习Android(安卓)NDK入门很简单