Android实战简易教程-第三十四枪（基于ViewPager和FragmentPagerAdapter实现滑动通用Tab）

里面实现了类似微信Tab的页面，但是这种实现方法有个问题，就是以后所有的代码逻辑都必须在MainActivity中实现，这样就造成MainActivity文件非常臃肿，不利于代码管理。

下面我们基于ViewPager和FragmentPagerAdapter实现滑动通用Tab。

布局文件基本和上篇文章一致。

1.top.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="45dp"
    android:background="#ffffff"
    android:gravity="center"
    android:orientation="vertical" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="寻 领"
        android:textColor="#000000"
        android:textSize="20sp"
        android:textStyle="bold" />

</LinearLayout>

2.bottom.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="55dp"
    android:background="#ffffff"
    android:orientation="horizontal" >

    <LinearLayout
        android:id="@+id/id_tab_lost"
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical" >

        <ImageButton
            android:id="@+id/id_tab_lost_img"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#00000000"
            android:clickable="false"
            android:src="@drawable/lost" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="寻物"
            android:textColor="#000000" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/id_tab_found"
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical" >

        <ImageButton
            android:id="@+id/id_tab_found_img"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#00000000"
            android:clickable="false"
            android:src="@drawable/found" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="认领"
            android:textColor="#000000" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/id_tab_publish"
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical" >

        <ImageButton
            android:id="@+id/id_tab_publish_img"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#00000000"
            android:clickable="false"
            android:src="@drawable/tab_address_normal" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="发布"
            android:textColor="#000000" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/id_tab_settings"
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical" >

        <ImageButton
            android:id="@+id/id_tab_settings_img"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#00000000"
            android:clickable="false"
            android:src="@drawable/tab_settings_normal" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="设置"
            android:textColor="#000000" />
    </LinearLayout>

</LinearLayout>

3.main.xml:

<LinearLayout 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:orientation="vertical" >

    <include layout="@layout/top" />

    <android.support.v4.view.ViewPager
        android:id="@+id/id_viewpager"
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="1" >
    </android.support.v4.view.ViewPager>

    <include layout="@layout/bottom" />

</LinearLayout>

4.tab01.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:orientation="vertical" >

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:gravity="center"
        android:text="This is Lost Tab"
        android:textSize="30sp"
        android:textStyle="bold" />

</LinearLayout>

tab02.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:orientation="vertical" >

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:gravity="center"
        android:text="This is Found Tab"
        android:textSize="30sp"
        android:textStyle="bold" />

</LinearLayout>

tab03.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:orientation="vertical" >

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:gravity="center"
        android:text="This is Publish Tab"
        android:textSize="30sp"
        android:textStyle="bold" />

</LinearLayout>

tab04.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:orientation="vertical" >

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:gravity="center"
        android:text="This is Settings Tab"
        android:textSize="30sp"
        android:textStyle="bold" />

</LinearLayout>

5.MainActivity.java:

package com.lostandfound.activity;

import java.util.ArrayList;
import java.util.List;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
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.view.View.OnClickListener;
import android.view.Window;
import android.widget.ImageButton;
import android.widget.LinearLayout;

public class MainActivity extends FragmentActivity implements OnClickListener
{
    private ViewPager mViewPager;
    private FragmentPagerAdapter mAdapter;
    private List<Fragment> mFragments;

    private LinearLayout mTabLost;
    private LinearLayout mTabFound;
    private LinearLayout mTabPublish;
    private LinearLayout mTabSettings;

    private ImageButton mImgLost;
    private ImageButton mImgFound;
    private ImageButton mImgPublish;
    private ImageButton mImgSettings;

    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_main);

        initView();
        initEvent();

        setSelect(1);
    }

    private void initEvent()
    {
        mTabLost.setOnClickListener(this);
        mTabFound.setOnClickListener(this);
        mTabPublish.setOnClickListener(this);
        mTabSettings.setOnClickListener(this);
    }

    private void initView()
    {
        mViewPager = (ViewPager) findViewById(R.id.id_viewpager);

        mTabLost = (LinearLayout) findViewById(R.id.id_tab_lost);
        mTabFound = (LinearLayout) findViewById(R.id.id_tab_found);
        mTabPublish = (LinearLayout) findViewById(R.id.id_tab_publish);
        mTabSettings = (LinearLayout) findViewById(R.id.id_tab_settings);

        mImgLost = (ImageButton) findViewById(R.id.id_tab_lost_img);
        mImgFound = (ImageButton) findViewById(R.id.id_tab_found_img);
        mImgPublish = (ImageButton) findViewById(R.id.id_tab_publish_img);
        mImgSettings = (ImageButton) findViewById(R.id.id_tab_settings_img);

        mFragments = new ArrayList<Fragment>();
        Fragment mTab01 = new LostFragment();
        Fragment mTab02 = new FoundFragment();
        Fragment mTab03 = new PublishFragment();
        Fragment mTab04 = new SettingFragment();
        mFragments.add(mTab01);
        mFragments.add(mTab02);
        mFragments.add(mTab03);
        mFragments.add(mTab04);

        mAdapter = new FragmentPagerAdapter(getSupportFragmentManager())
        {

            @Override
            public int getCount()
            {
                return mFragments.size();
            }

            @Override
            public Fragment getItem(int arg0)
            {
                return mFragments.get(arg0);
            }
        };
        mViewPager.setAdapter(mAdapter);

        mViewPager.setOnPageChangeListener(new OnPageChangeListener()
        {

            @Override
            public void onPageSelected(int arg0)
            {
                int currentItem = mViewPager.getCurrentItem();
                setTab(currentItem);
            }

            @Override
            public void onPageScrolled(int arg0, float arg1, int arg2)
            {
                // TODO Auto-generated method stub

            }

            @Override
            public void onPageScrollStateChanged(int arg0)
            {
                // TODO Auto-generated method stub

            }
        });
    }

    @Override
    public void onClick(View v)
    {
        switch (v.getId())
        {
        case R.id.id_tab_lost:
            setSelect(0);
            break;
        case R.id.id_tab_found:
            setSelect(1);
            break;
        case R.id.id_tab_publish:
            setSelect(2);
            break;
        case R.id.id_tab_settings:
            setSelect(3);
            break;

        default:
            break;
        }
    }

    private void setSelect(int i)
    {
        setTab(i);
        mViewPager.setCurrentItem(i);
    }

    private void setTab(int i)
    {
        resetImgs();
        // 设置图片为亮色
        // 切换内容区域
        switch (i)
        {
        case 0:
            mImgLost.setImageResource(R.drawable.lost);
            break;
        case 1:
            mImgFound.setImageResource(R.drawable.found);
            break;
        case 2:
            mImgPublish.setImageResource(R.drawable.tab_address_pressed);
            break;
        case 3:
            mImgSettings.setImageResource(R.drawable.tab_settings_pressed);
            break;
        }
    }

    /**
     * 切换图片至暗色
     */
    private void resetImgs()
    {
        mImgLost.setImageResource(R.drawable.lost);
        mImgFound.setImageResource(R.drawable.found);
        mImgPublish.setImageResource(R.drawable.tab_address_normal);
        mImgSettings.setImageResource(R.drawable.tab_settings_normal);
    }

}

6.四个Fragment

LostFragment.java:

package com.lostandfound.activity;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class LostFragment extends Fragment
{
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState)
    {
        return inflater.inflate(R.layout.tab01, container, false);
    }
}

FoundFragment.java:

package com.lostandfound.activity;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class FoundFragment extends Fragment
{
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState)
    {
        return inflater.inflate(R.layout.tab02, container, false);
    }
}

PublishFragment.java:

package com.lostandfound.activity;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class PublishFragment extends Fragment
{
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState)
    {
        return inflater.inflate(R.layout.tab03, container, false);
    }
}

SettingFragment.java:

package com.lostandfound.activity;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class SettingFragment extends Fragment
{
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState)
    {
        return inflater.inflate(R.layout.tab04, container, false);
    }
}

最后运行实例：

可以实现ViewPager似的滑动翻页，同时还可以分开编码。

喜欢的朋友关注我！多谢您的支持！

时间： 2024-10-12 17:42:53

Android实战简易教程-第三十四枪（基于ViewPager和FragmentPagerAdapter实现滑动通用Tab）的相关文章

Android实战简易教程-第三十九枪（第三方短信验证平台Mob和验证码自动填入功能结合实例）

用户注册或者找回密码时一般会用到短信验证功能,这里我们使用第三方的短信平台进行验证实例. 我们用到第三方短信验证平台是Mob,地址为:http://mob.com/ 一.注册用户.获取SDK 大家可以自行注册,得到APPKEY和APPSECRET,然后下载SDK,包的导入方式如截图: 二.主要代码 SMSSendForRegisterActivity.java:(获取验证码页) package com.qiandaobao.activity; import java.util.regex.Mat

Android实战简易教程-第五十四枪（通过实现OnScrollListener接口实现下拉刷新功能）

上一篇文章Android实战简易教程-第五十三枪(通过实现OnScrollListener接口实现上拉加载更多功能)讲述了如何实现上拉加载更多的功能,本篇,我们在上一篇的基础上实现下拉刷新功能.主要通过对滚动状态和手势监听实现这一功能,下面我们看一下代码: 1.header.xml: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://sch

Android实战简易教程-第三十枪（实例解析Application的用法）

一.Application类 Application和Activity,Service一样是Android框架的一个系统组件,当Android程序启动时系统会创建一个Application对象,用来存储系统的一些信息. Android系统自动会为每个程序运行时创建一个Application类的对象且只创建一个,所以Application可以说是单例(singleton)模式的一个类. 通常我们是不需要指定一个Application的,系统会自动帮我们创建,如果需要创建自己的Application

Android实战简易教程-第三十二枪（自定义View登录注册界面EditText-实现一键清空）

自定义View实现登录注册页面的EditText一键清空功能,效果如下: 输入框输入文字后自动出现一键清空键,输入框文字为空时,一键清空键隐藏,下面我们看一下如何通过自定义View实现这一效果. 看一下DeletableEditText.java: package com.example.testview; import android.content.Context; import android.graphics.drawable.Drawable; import android.text.

Android实战简易教程-第三十六枪（监听短信）

一般用户喜欢用手机号作为用户名注册APP账号,这时一般都是通过手机验证码的方式进行验证,下面我们就研究一个非常实用的方法,通过监听短信-实现短信验证码的自动填入,提高用户体验. 首先我们看一下如何监听手机短信. 一.获取短信全部内容 1.新建一个SMSBroadcastReceiver: <code class="hljs java has-numbering"><span class="hljs-keyword">package</s

Android实战简易教程-第三十五枪（将二维码扫描和生成Demo引入项目实例）

网上有很多关于二维码扫码和二维码生成的Demo,你可能不想透彻的了解它是如何实现的,但是你必须要知道如何引入到你的项目之中,我们研究一下如何将这些Demo引入到自己的项目之中. 我也写了一个Demo,看一下它的目录结构. 这些打红色箭头的部分都是必须要复制到你的项目之中的.引入到你的项目之后会有一些报错,你可以根据错误提示进行修改. strings里面有一个字段要加入到你的项目之中 colors.xml中有一些你也要复制过去,还好他们都会报错提醒你. 下面我们看一下Demo的代码: 1.Main

Android实战简易教程-第六十四枪（Android APP 引导页实现-第一次应用进入时加载）

APP引导页是每个优质APP必备的元素,下面我们研究一下如何只在第一次进入应用时进行加载引导页的方法. 1.判断是否第一次进入应用的方法: package com.yayun.guide; import android.app.Activity; import android.content.Context; import android.content.Intent; import android.content.SharedPreferences; import android.os.Bun

Android实战简易教程-第三十六枪（监听短信-实现短信验证码自动填入）

一般用户喜欢用手机号作为用户名注册APP账号,这时一般都是通过手机验证码的方式进行验证,下面我们就研究一个非常实用的方法,通过监听短信-实现短信验证码的自动填入,提高用户体验. 首先我们看一下如何监听手机短信. 一.获取短信全部内容 1.新建一个SMSBroadcastReceiver: package com.example.messagecut; import java.text.SimpleDateFormat; import java.util.Date; import android.

Android实战简易教程-第三十一枪（基于加速度传感器的摇一摇功能实例）

下面我们来看一下微信摇一摇功能的模拟实现,我们是基于手机加速度传感器实现该功能,实现方法比较简单. MainActivity.java: MainActivity.java: package com.location.activity; import android.app.Activity; import android.content.Context; import android.hardware.Sensor; import android.hardware.SensorEvent; i