由Fragment搭建起来的动态UI

最新推荐文章于 2025-10-01 06:36:48 发布

原创最新推荐文章于 2025-10-01 06:36:48 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Fragment+viewpager切换 #切换滑动页面 #Fragment #viewpager

View 专栏收录该内容

56 篇文章

订阅专栏

本文通过ViewPager和FragmentPageAdapter实现滑动切换页面的效果。解释了ViewPager作为页面切换组件的工作原理，包括其缓存机制，并详细介绍了PagerAdapter的相关重写方法。同时，展示了项目的工程目录结构和部分关键代码，最后提供了实现效果的预览。

本节引言：

本节我们将会实现ViewPager来实现滑动切换页面的效果！

大部分朋友都知道这个ViewPager是什么东西吧，如果
不知道没关系，下面我们简单的来介绍一个这个控件！

1.ViewPager简单介绍

1）是怎么样的一个控件？

答：一个页面切换的组件，我们可以往里面填充多个View，然后我们可以通过触摸屏幕左右滑动
切换不同的View，和前面学习的ListView一样，我们需要一个Adapter(适配器)，将要显示的View和
我们的ViewPager进行绑定，而ViewPager有他自己特定的Adapter——PagerAdapter！另外，Google
官方是建议我们使用Fragment来填充ViewPager的,这样可以更加方便的生成每个Page以及管理
每个Page的生命周期!当然它给我们提供了两个不同的Adapter，他们分别是：
FragmentPageAdapter和FragmentStatePagerAdapter！
而我们本节用到的则是前者：FragmentPageAdapter！
另外要说一点的是ViewPager的缓存机制：
ViewPager会缓存当前页，前一页，以及后一页，比如有1，2，3，4这四个页面：
当我们处于第一页：缓存1，2
——> 处于第二页：缓存 1，2，3
——> 处于第三页：缓存2，3，4
——> 处于第四页缓存3，4这样！

2）使用PagerAdapter要重写相关方法：

getCount( ):获得viewpager中有多少个view
destroyItem( ):移除一个给定位置的页面。适配器有责任从容器中删除这个视图。这是为了确保
在finishUpdate(viewGroup)返回时视图能够被移除。
instantiateItem( ):①将给定位置的view添加到ViewGroup(容器)中,创建并显示出来
②返回一个代表新增页面的Object(key),通常都是直接返回view本身就可以了,
当然你也可以自定义自己的key,但是key和每个view要一一对应的关系
isViewFromObject( ):判断instantiateItem(ViewGroup, int)函数所返回来的Key与一个页面视图是否是
代表的同一个视图(即它俩是否是对应的，对应的表示同一个View),通常我们直接写
return view == object；就可以了,至于为什么要这样讲起来比较复杂,后面有机会进行了解吧
貌似是ViewPager中有个存储view状态信息的ArrayList,根据View取出对应信息的吧!

PS:不一定要重写所有方法~

2.实现效果图以及工程目录结构：

先来看下我们要实现的效果吧

接下来看下我们的项目结构：

3.代码实现：

activity_mian.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"
    tools:context=".MainActivity" >

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/fengexian" >
    </android.support.v4.view.ViewPager>

    <View
        android:id="@+id/fengexian"
        android:layout_width="match_parent"
        android:layout_height="2px"
        android:layout_above="@+id/Homerg02"
        android:background="#BDBDBD" />

    <RadioGroup
        android:id="@+id/Homerg02"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_alignParentBottom="true"
        android:orientation="horizontal" 
        >

        <RadioButton
            android:id="@+id/RadioButton1"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:button="@null"
            android:checked="true"
            android:drawableTop="@drawable/selector_1"
            android:gravity="center"
            android:onClick="doClick"
            android:paddingTop="2dp"
            android:text="微信"
            android:textColor="#6B6B6B"
            android:textSize="11sp" />

        <RadioButton
            android:id="@+id/RadioButton2"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:button="@null"
            android:checked="false"
            android:drawableTop="@drawable/selector_2"
            android:gravity="center"
            android:onClick="doClick"
            android:paddingTop="2dp"
            android:text="通讯录"
            android:textColor="#6B6B6B"
            android:textSize="11sp" />

        <RadioButton
            android:id="@+id/RadioButton3"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:button="@null"
            android:checked="false"
            android:drawableTop="@drawable/selector_3"
            android:gravity="center"
            android:onClick="doClick"
            android:paddingTop="2dp"
            android:text="发现"
            android:textColor="#6B6B6B"
            android:textSize="11sp" />

        <RadioButton
            android:id="@+id/RadioButton4"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@null"
            android:button="@null"
            android:checked="false"
            android:drawableTop="@drawable/selector_4"
            android:gravity="center"
            android:onClick="doClick"
            android:paddingTop="2dp"
            android:text="我"
            android:textColor="#6B6B6B"
            android:textSize="11sp" />
    </RadioGroup>

</RelativeLayout>

fg_content.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:background="#00C5CD"
    android:orientation="vertical" >
    
<TextView
        android:id="@+id/txt_content1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="一"
        android:textSize="80sp" />
    
</LinearLayout>

其余三个布局异曲同工！

MyFragment1.java:

<div style="text-align: left;"><span style="white-space: nowrap; font-family: 'microsoft yahei';">package com.example.demo_fragmentviewpager;</span></div>
import android.os.Bundle;
<div style="text-align: left;"><span style="white-space: nowrap; font-family: 'microsoft yahei';">import android.view.LayoutInflater;</span></div>import android.support.v4.app.Fragment;
import android.view.View;
<div style="text-align: left;"><span style="font-family: 'microsoft yahei'; white-space: nowrap; text-align: left;">         View view = inflater.inflate(R.layout.fg_content1, container, false);</span></div>import android.view.ViewGroup;

<div style="text-align: left;"></div>public class fragment1 extends Fragment{
<div style="text-align: left;"><span style="white-space: nowrap; font-family: 'microsoft yahei';">     @Override</span></div>	 public fragment1() {
	    }
<div style="text-align: left;"><span style="white-space: nowrap; font-family: 'microsoft yahei';">     public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {</span></div>	        return view;
	    }
<div style="text-align: left;"><span style="white-space: nowrap; font-family: 'microsoft yahei';">}</span></div>

其他三个照葫芦画瓢，换点东西就好！

MainActivity的编写：

package com.example.demo_fragmentviewpager;

import java.util.ArrayList;

import android.app.ActionBar;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.View;
import android.widget.RadioButton;

public class MainActivity extends FragmentActivity {
	
	private ActionBar actionBar;
	private ViewPager viewPager;
	private ArrayList<Fragment> fragments;
	private MyPagerAdapter adapter;
	private RadioButton rB1;
	private RadioButton rB2;
	private RadioButton rB3;
	private RadioButton rB4;
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		
		setViews();
		setListeners();
		
		actionBar=getActionBar();
		actionBar.setDisplayShowHomeEnabled(false);//是否显示主页图片
		actionBar.setHomeButtonEnabled(true);//激活主页按钮
		actionBar.setDisplayHomeAsUpEnabled(true);// 给左上角图标的左边加上一个返回的图标 
		
		fragments=new ArrayList<Fragment>();
		fragments.add(new fragment1());
		fragments.add(new fragment2());
		fragments.add(new fragment3());
		fragments.add(new fragment4());
		
		adapter=new MyPagerAdapter(getSupportFragmentManager());
		viewPager.setAdapter(adapter);
		
	}
	class MyPagerAdapter extends FragmentPagerAdapter{
		
		public MyPagerAdapter(FragmentManager fm) {
			super(fm);
		}
		public Fragment getItem(int arg0) {
			return fragments.get(arg0);
		}
		public int getCount() {
			return fragments.size();
		}
	}
	
	//通过监听viewpager滑动改变Checked的属性
	private void setListeners() {
		viewPager.setOnPageChangeListener(new OnPageChangeListener() {
			public void onPageSelected(int position) {
				switch (position) {
				case 0:
					rB1.setChecked(true);
					break;
				case 1:
					rB2.setChecked(true);
					break;
				case 2:
					rB3.setChecked(true);
					break;
				case 3:
					rB4.setChecked(true);
					break;
				}
			}
			public void onPageScrolled(int arg0, float arg1, int arg2) {
				
			}
			public void onPageScrollStateChanged(int arg0) {
				
			}
		});
	}

	private void setViews() {
		viewPager=(ViewPager)findViewById(R.id.viewPager);
		rB1=(RadioButton)findViewById(R.id.RadioButton1);
		rB2=(RadioButton)findViewById(R.id.RadioButton2);
		rB3=(RadioButton)findViewById(R.id.RadioButton3);
		rB4=(RadioButton)findViewById(R.id.RadioButton4);
	}

	//监听RadioButton的点击
	public void doClick(View view){
		switch (view.getId()) {
		case R.id.RadioButton1:
			viewPager.setCurrentItem(0);
			break;
		case R.id.RadioButton2:
			viewPager.setCurrentItem(1);
			break;
		case R.id.RadioButton3:
			viewPager.setCurrentItem(2);
			break;
		case R.id.RadioButton4:
			viewPager.setCurrentItem(3);
			break;
		}
	}
}

逻辑很简单，自己看~

PS：嘿嘿，上面我把导包部分的代码也贴出来了，就是害怕你们导错包，然后出现一些莫名其妙的错误！
因为ViewPager是v4包下面的，所以Fragment，FragmentManager，FragmentTransaction都是需要使用
V4包下的哦！另外获取FragmentManager的方法不是直接用getFragmentManager()而是使用
getSupportFragmentManager(）哦！

以下是本人的原创微信公众号，欢迎一起交流学习！