用Android Studio实现ViewPager加Fragment

为了将之前做安卓项目的一些有用的东西记录下来，本人开通了博客，这是第一篇。大家都知道，微信的主界面是采用ViewPager结合Fragment实现的，这样实现的好处我就不多说了，而ViewPager和Fragment的有关知识在网上很多，大家可以自行去查找。本篇的主要内容就是用Android Studio实现这个功能。

首先，我们自定义一个CustomViewPager类，它继承于ViewPager，这是为了方便我们在代码中多次利用。我在这个类中限制了划屏切换页卡的功能，只是个人觉得划来划去比较眼花。下面是这个类的代码：

public class CustomViewPager extends ViewPager { private boolean enabled; public CustomViewPager(Context context, AttributeSet attrs) { super(context, attrs); this.enabled = false; } //触摸没有反应就可以了 @Override public boolean onTouchEvent(MotionEvent event) { if (this.enabled) { return super.onTouchEvent(event); } return false; } @Override public boolean onInterceptTouchEvent(MotionEvent event) { if (this.enabled) { return super.onInterceptTouchEvent(event); } return false; } public void setPagingEnabled(boolean enabled) { this.enabled = enabled; } }

然后，为了实现四个tab，写一个TabBarCellView来装载一个子按钮的内容，具体的类和布局代码如下：

public class TabBarCellView extends RelativeLayout{ private ImageView imageView; private TextView textView; //右上角标 private Button newsButton; private boolean isSelected; //角标数字 private int newsNum = 0; private int unSelectedResId = 0; private int selectedResId = 0; public TabBarCellView(Context context, AttributeSet attrs) { super(context, attrs); LayoutInflater.from(context).inflate(R.layout.view_tab_bar_cell, this, true); imageView = (ImageView)findViewById(R.id.tab_bar_imageView); textView = (TextView)findViewById(R.id.tab_bar_textView); newsButton = (Button)findViewById(R.id.tab_bar_newsButton); } /** * 设置控件为选中状态 */ public void setSelected(){ isSelected = true; //选中后操作 //this.setBackgroundResource(R.color.tab_bar_bg_selected); this.textView.setTextColor(Color.rgb(0, 153, 255)); if (selectedResId!=0) { this.imageView.setImageResource(selectedResId); } } /** * 取消控件的选中状态 */ public void disSelected(){ isSelected = false; //取消选中后的操作 //this.setBackgroundResource(R.color.tab_bar_bg_normal); this.textView.setTextColor(Color.rgb(147, 151, 157)); if (unSelectedResId!=0) { this.imageView.setImageResource(unSelectedResId); } } /** * 获取控件的选中状态 */ public boolean isSelected() { return isSelected; } /** * 设置标题文本内容 * @param text */ public void setText(String text){ textView.setText(text); } /** * 设置角标数字 * @param newsNum */ public void setNewsNum(int newsNum){ if (newsNum>=100) { //大于99显示99 this.newsNum = 99; }else{ this.newsNum = newsNum; } if (this.newsNum>0) { //设置角标可见 newsButton.setVisibility(View.INVISIBLE); //设置角标数字 newsButton.setText(""+this.newsNum); }else{ clearNews(); } } /** * 清空角标 */ public void clearNews(){ this.newsNum = 0; newsButton.setVisibility(View.INVISIBLE); } /** * 获取角标数字 * @return */ public int getNewsNum() { return newsNum; } /** * 通过resId设置图标 * @param resId */ public void setImageViewResource(int unSelectedResId, int selectedResId){ if (unSelectedResId!=0) { imageView.setImageResource(unSelectedResId); } this.unSelectedResId = unSelectedResId; this.selectedResId = selectedResId; } }

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="2dp" >

    <ImageView
        android:id="@+id/tab_bar_imageView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/tab_bar_textView"
        android:layout_marginBottom="0dp"
        android:layout_marginTop="3dp"
        android:contentDescription="@string/app_name"
        android:scaleType="fitCenter"
        android:src="@mipmap/ic_launcher" />

    <TextView
        android:id="@+id/tab_bar_textView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="0dp"
        android:gravity="center"
        android:text="@string/test"
        android:textColor="#FFFFFF"
        android:textSize="18sp" />

    <Button
        android:id="@+id/tab_bar_newsButton"
        android:layout_width="15dp"
        android:layout_height="15dp"
        android:layout_alignParentRight="true"
        android:layout_margin="3dp"
        android:textColor="#FFFFFF"
        android:textSize="15sp"
        android:visibility="gone" />

</RelativeLayout>

接着写一个TabBarView来装载这四个TabBarCellView，这个类以及它的布局代码如下：

public class TabBarView extends LinearLayout{ private TabBarCellView[] tabBarCellViews; /** * 默认选中的单元序号 */ private int defaultSelectedIndex = 0; private OnTabBarSelectedListener onTabBarSelectedListener; public TabBarView(Context context, AttributeSet attrs) { super(context, attrs); LayoutInflater.from(context).inflate(R.layout.view_tab_bar, this, true); tabBarCellViews = new TabBarCellView[4]; tabBarCellViews[0] = (TabBarCellView)findViewById(R.id.tabBarCellView0); tabBarCellViews[1] = (TabBarCellView)findViewById(R.id.tabBarCellView1); tabBarCellViews[2] = (TabBarCellView)findViewById(R.id.tabBarCellView2); tabBarCellViews[3] = (TabBarCellView)findViewById(R.id.tabBarCellView3); //设置cell监听 for (int i = 0; i < tabBarCellViews.length; i++) { final int j = i; tabBarCellViews[i].setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { if (onTabBarSelectedListener!=null) { onTabBarSelectedListener.onCellSelected(j); } } }); } setSelected(defaultSelectedIndex); } public void setTabBarCellData(int index, int resIdNormal, int resIdSelected, String title){ if (index<4 index="">=0) { tabBarCellViews[index].setImageViewResource(resIdNormal, resIdSelected); tabBarCellViews[index].setText(title); } } /** * 设置第index个单元被选中 * @param index [0,4) */ public void setSelected(int index){ if (index>=0&&index<4) { for (int i = 0; i < tabBarCellViews.length; i++) { if (index!=i) { tabBarCellViews[i].disSelected(); } } tabBarCellViews[index].setSelected(); } } /** * 设置默认选中的单元 * @param defaultSelectedIndex 单元序号 */ public void setDefaultSelectedIndex(int defaultSelectedIndex) { this.defaultSelectedIndex = defaultSelectedIndex; } /** * 设置tabBar事件监听 * @param onTabBarSelectedListener */ public void setOnTabBarSelectedListener(OnTabBarSelectedListener onTabBarSelectedListener) { this.onTabBarSelectedListener = onTabBarSelectedListener; } public interface OnTabBarSelectedListener{ /** * 当某个单元被选中 * @param index */ public void onCellSelected(int index); } } </4>

<?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="48dp"
    android:orientation="horizontal"
    android:background="#fff"
    >

    <com.module.views.TabBarCellView
        android:id="@+id/tabBarCellView0"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1" />
    <com.module.views.TabBarCellView
        android:id="@+id/tabBarCellView1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1" />
    <com.module.views.TabBarCellView
        android:id="@+id/tabBarCellView2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1" />
    <com.module.views.TabBarCellView
        android:id="@+id/tabBarCellView3"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1" />
</LinearLayout>

做好前面的准备工作之后，我们开始写装载四个Fragment的MainActivity了，具体的代码以及它的布局如下：

public class MainActivity extends FragmentActivity { private CustomViewPager viewPager; private TabBarView tabBarView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); this.requestWindowFeature(Window.FEATURE_NO_TITLE);// 去除标题栏 setContentView(R.layout.activity_main); viewPager = (CustomViewPager) findViewById(R.id.main_viewpager); tabBarView = (TabBarView)findViewById(R.id.home_tabBarView); tabBarView.setTabBarCellData(0, R.mipmap.normal, R.mipmap.pressed, "页卡1"); tabBarView.setTabBarCellData(1, R.mipmap.normal, R.mipmap.pressed, "页卡2"); tabBarView.setTabBarCellData(2, R.mipmap.normal, R.mipmap.pressed, "页卡3"); tabBarView.setTabBarCellData(3, R.mipmap.normal, R.mipmap.pressed, "页卡4"); tabBarView.setSelected(0); FragmentAdapter adapter = new FragmentAdapter(getSupportFragmentManager()); viewPager.setAdapter(adapter); viewPager.setOffscreenPageLimit(4); select(0); tabBarView.setOnTabBarSelectedListener(new TabBarView.OnTabBarSelectedListener() { @Override public void onCellSelected(int index) { select(index); } }); } /*** * 选中后的处理 */ public void select(int index) { viewPager.setCurrentItem(index); tabBarView.setSelected(index); } public class FragmentAdapter extends FragmentPagerAdapter { public final static int TAB_COUNT = 4; public FragmentAdapter(FragmentManager fm) { super(fm); } @Override public Fragment getItem(int id) { switch (id) { case 0: Fragment0 f0 = new Fragment0(); return f0; case 1: Fragment1 f1 = new Fragment1(); return f1; case 2: Fragment2 f2 = new Fragment2(); return f2; case 3: Fragment3 f3 = new Fragment3(); return f3; } return null; } @Override public int getCount() { return TAB_COUNT; } } }

<?xml version="1.0" encoding="utf-8"?>
<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:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">

    <com.module.views.CustomViewPager
        android:id="@+id/main_viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/main_line" >
    </com.module.views.CustomViewPager>

    <View
        android:id="@+id/main_line"
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:layout_above="@+id/home_tabBarView"
        android:background="#333333" />

    <com.module.views.TabBarView
        android:id="@+id/home_tabBarView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true" />

</RelativeLayout>

在MainActivity中我们自定义了一个适配器，即FragmentAdapter，这样方面我们添加一些自己想要的功能。

完成上述步骤之后，就是写这四个Fragment的内容了，其实Fragment以及它的布局和Activity的大同小异，这里就不赘述，因此这四个页卡的内容就留给有需要的人自己去填充了。以上就是本篇博客的全部内容，希望能帮到大家。谢谢！