FragmentPagerAdapter+ViewPager实现Tab

程序员文章站 2024-02-05 20:31:46

...

转载请注明出处amoscxy的博客：https://mp.csdn.net/mdeditor/80158316

FragmentPagerAdapter+ViewPager实现Tab

转载请注明出处amoscxy的博客：https://mp.csdn.net/mdeditor/80158316

FragmentPagerAdapter+ViewPager实现Tab

1.1 效果

FragmentPagerAdapter+ViewPager实现Tab

1.2 目录

FragmentPagerAdapter+ViewPager实现Tab

1.3 素材

bottom_bar9.png
- tab_address_normal.png
- tab_address_pressed.png
- tab_bg2.png
tab_find_frd_normal.png
tab_find_frd_pressed.png
tab_settings_normal.png
tab_settings_pressed.png
tab_weixin_normal.png
tab_weixin_pressed.png
title_bar9.png

1.4 顶部提示栏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="@drawable/title_bar9"
    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="#ffffff"
        android:textSize="20sp"
        android:textStyle="bold" />

</LinearLayout>

视图：

1.5 底部标签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="@drawable/bottom_bar9"
    android:orientation="horizontal" >

    <LinearLayout
        android:id="@+id/id_tab_weixin"
        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_weixin_img"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#00000000"
            android:clickable="false"
            android:src="@drawable/tab_weixin_pressed" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="微信"
            android:textColor="#ffffff" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/id_tab_frd"
        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_frd_img"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#00000000"
            android:clickable="false"
            android:src="@drawable/tab_find_frd_normal" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="朋友"
            android:textColor="#ffffff" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/id_tab_address"
        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_address_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="#ffffff" />
    </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="#ffffff" />
    </LinearLayout>

</LinearLayout>

视图：

1.6 activity_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="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"/>

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

</LinearLayout>

视图：

1.7 四个切换界面

1.7.1 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 Weixin Tab"
        android:textSize="30sp"
        android:textStyle="bold" />

</LinearLayout>

图示：

1.7.2 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 Frd Tab"
        android:textSize="30sp"
        android:textStyle="bold" />

</LinearLayout>

图示：

1.7.3 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 Address Tab"
        android:textSize="30sp"
        android:textStyle="bold" />

</LinearLayout>

图示：

1.7.4 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>

图示：

1.8 四个自定义Fragment

1.8.1 WeixinFragment

public class WeixinFragment extends Fragment {


    public WeixinFragment() {
        // Required empty public constructor
    }


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

}

1.8.2 FrdFragment

public class FrdFragment extends Fragment {


    public FrdFragment() {
        // Required empty public constructor
    }


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

}

1.8.3 AddressFragment

public class AddressFragment extends Fragment {


    public AddressFragment() {
        // Required empty public constructor
    }


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

}

1.8.4 SettingFragment

public class SettingFragment extends Fragment {


    public SettingFragment() {
        // Required empty public constructor
    }


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

}

1.9 MainActivity

package com.example.cxy.testtap;

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.view.View;
import android.view.View.OnClickListener;
import android.view.Window;
import android.widget.ImageButton;
import android.widget.LinearLayout;

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

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

    private LinearLayout mTabWeixin;
    private LinearLayout mTabFrd;
    private LinearLayout mTabAddress;
    private LinearLayout mTabSetting;

    private ImageButton mWeixinImg;
    private ImageButton mFrdImg;
    private ImageButton mAddressImg;
    private ImageButton mSettingImg;

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

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

    private void setTab(int i) {
        resetImg();
        switch(i){
            case 0:
                mWeixinImg.setImageResource(R.drawable.tab_weixin_pressed);
                break;
            case 1:
                mFrdImg.setImageResource(R.drawable.tab_find_frd_pressed);
                break;
            case 2:
                mAddressImg.setImageResource(R.drawable.tab_address_pressed);
                break;
            case 3:
                mSettingImg.setImageResource(R.drawable.tab_settings_pressed);
                break;
            default:
                break;
        }
    }

    private void initEvents()
    {
        mTabWeixin.setOnClickListener(this);
        mTabFrd.setOnClickListener(this);
        mTabAddress.setOnClickListener(this);
        mTabSetting.setOnClickListener(this);
    }

    private void initView()
    {
        mViewPager = findViewById(R.id.id_viewpager);
        // tabs
        mTabWeixin = findViewById(R.id.id_tab_weixin);
        mTabFrd = findViewById(R.id.id_tab_frd);
        mTabAddress = findViewById(R.id.id_tab_address);
        mTabSetting = findViewById(R.id.id_tab_settings);
        // ImageButton
        mWeixinImg = findViewById(R.id.id_tab_weixin_img);
        mFrdImg = findViewById(R.id.id_tab_frd_img);
        mAddressImg = findViewById(R.id.id_tab_address_img);
        mSettingImg = findViewById(R.id.id_tab_settings_img);

        mFragments = new ArrayList<Fragment>();
        Fragment mTab1 = new WeixinFragment();
        Fragment mTab2 = new FrdFragment();
        Fragment mTab3 = new AddressFragment();
        Fragment mTab4 = new SettingFragment();
        mFragments.add(mTab1);
        mFragments.add(mTab2);
        mFragments.add(mTab3);
        mFragments.add(mTab4);
        mAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) {
            @Override
            public Fragment getItem(int position) {
                return mFragments.get(position);
            }

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

        mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                int currentItem = mViewPager.getCurrentItem();
                setTab(currentItem);
            }

            @Override
            public void onPageSelected(int position) {

            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
    }

    /**
     * 底部四个ImageButton都置为normal
     */
    private void resetImg()
    {
        mWeixinImg.setImageResource(R.drawable.tab_weixin_normal);
        mFrdImg.setImageResource(R.drawable.tab_find_frd_normal);
        mAddressImg.setImageResource(R.drawable.tab_address_normal);
        mSettingImg.setImageResource(R.drawable.tab_settings_normal);
    }

    @Override
    public void onClick(View v) {
        resetImg();
        switch (v.getId()){
            case R.id.id_tab_weixin:
                setSelect(0);
                break;
            case R.id.id_tab_frd:
                setSelect(1);
                break;
            case R.id.id_tab_address:
                setSelect(2);
                break;
            case R.id.id_tab_settings:
                setSelect(3);
                break;
            default:
                break;
        }
    }
}

源码分析

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;

为了保持兼容性全部时候v4下的Fragment

private ViewPager mViewPager;
private FragmentPagerAdapter mAdapter;
private List<Fragment> mFragments;

private LinearLayout mTabWeixin;
private LinearLayout mTabFrd;
private LinearLayout mTabAddress;
private LinearLayout mTabSetting;

private ImageButton mWeixinImg;
private ImageButton mFrdImg;
private ImageButton mAddressImg;
private ImageButton mSettingImg;

private ViewPager mViewPager;
mViewPager是ViewPager

private FragmentPagerAdapter mAdapter;
使用FragmentPagerAdapter

private List mFragments;
用于存放4个自定义Fragment

private LinearLayout mTabWeixin;
private LinearLayout mTabFrd;
private LinearLayout mTabAddress;
private LinearLayout mTabSetting;
底部四个tabs是LinearLayout控件

private ImageButton mWeixinImg;
private ImageButton mFrdImg;
private ImageButton mAddressImg;
private ImageButton mSettingImg;
底部四个tabs中的四个ImageButton

mViewPager = findViewById(R.id.id_viewpager);
// tabs
mTabWeixin = findViewById(R.id.id_tab_weixin);
mTabFrd = findViewById(R.id.id_tab_frd);
mTabAddress = findViewById(R.id.id_tab_address);
mTabSetting = findViewById(R.id.id_tab_settings);
// ImageButton
mWeixinImg = findViewById(R.id.id_tab_weixin_img);
mFrdImg = findViewById(R.id.id_tab_frd_img);
mAddressImg = findViewById(R.id.id_tab_address_img);
mSettingImg = findViewById(R.id.id_tab_settings_img);

mFragments = new ArrayList<Fragment>();
Fragment mTab1 = new WeixinFragment();
Fragment mTab2 = new FrdFragment();
Fragment mTab3 = new AddressFragment();
Fragment mTab4 = new SettingFragment();
mFragments.add(mTab1);
mFragments.add(mTab2);
mFragments.add(mTab3);
mFragments.add(mTab4);
mAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) {
    @Override
    public Fragment getItem(int position) {
        return mFragments.get(position);
    }

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

是ViewPager的一般步骤，可以参考
https://blog.csdn.net/amoscxy/article/details/80153088

mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        int currentItem = mViewPager.getCurrentItem();
        setTab(currentItem);
    }

    @Override
    public void onPageSelected(int position) {

    }

    @Override
    public void onPageScrollStateChanged(int state) {

    }
});

作用是随着ViewPager的滑动，底部tabs也跟随变动

private void setTab(int i) {
    resetImg();
    switch(i){
        case 0:
            mWeixinImg.setImageResource(R.drawable.tab_weixin_pressed);
            break;
        case 1:
            mFrdImg.setImageResource(R.drawable.tab_find_frd_pressed);
            break;
        case 2:
            mAddressImg.setImageResource(R.drawable.tab_address_pressed);
            break;
        case 3:
            mSettingImg.setImageResource(R.drawable.tab_settings_pressed);
            break;
        default:
            break;
    }
}

根据位置i，设置对应的ImageButton设置为pressed

private void resetImg()
{
    mWeixinImg.setImageResource(R.drawable.tab_weixin_normal);
    mFrdImg.setImageResource(R.drawable.tab_find_frd_normal);
    mAddressImg.setImageResource(R.drawable.tab_address_normal);
    mSettingImg.setImageResource(R.drawable.tab_settings_normal);
}

底部四个ImageButton都置为normal

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

根据点击的底部四个tabs，设置点击的ImageButton为pressed，设置展示的对应ViewPager

1.10 FragmentPagerAdapter+ViewPager组合的好处

使用Fragment的好处是，可以通过各自的Fragment来控制自己的布局和逻辑，不会是代码都冗余在activity里面，activity只作为一个调度器，来显示和隐藏对应的Fragment，这样便于后期的维护和复用
如果想让显示界面可以左右滑动最好使用FragmentPagerAdapter+ViewPager组合

转载请注明出处amoscxy的博客：https://mp.csdn.net/mdeditor/80158316

相关标签： Android常用控件 FragmentPagerAdapter+ViewPager

上一篇： Android常用控件之 - ViewPager

下一篇：文件编码解码小工具

FragmentPagerAdapter+ViewPager实现Tab

FragmentPagerAdapter+ViewPager实现Tab

1.1 效果

1.2 目录

1.3 素材

1.4 顶部提示栏top.xml

1.5 底部标签bottom.xml

1.6 activity_main.xml

1.7 四个切换界面

1.7.1 tab01.xml

1.7.2 tab02.xml

1.7.3 tab03.xml

1.7.4 tab04.xml

1.8 四个自定义Fragment

1.8.1 WeixinFragment

1.8.2 FrdFragment

1.8.3 AddressFragment

1.8.4 SettingFragment

1.9 MainActivity

1.10 FragmentPagerAdapter+ViewPager组合的好处

用PHP写的基于Memcache的Queue实现代码_PHP

FragmentPagerAdapter+ViewPager实现Tab

这种类型的网站用户权限控制，如何实现？

ThinkPHP实现多数据库连接的解决方法_PHP教程

jQuery实现碰到边缘反弹的动画效果

C# 10分钟入门基于WebOffice实现在线编辑文档，实时保存到服务器（所有office，兼容WPS）

js实现动态改变radio状态的方法

Winform中实现设置ZedGraph的GraphPane的大小匹配ZedGraphControl

Dao设计模式简单实现

小白专场-树的同构-python语言实现