Viewpager+Fragment实现左右滑动切换页面

最新推荐文章于 2025-05-16 22:13:03 发布

原创最新推荐文章于 2025-05-16 22:13:03 发布 · 8.2k 阅读

26 ·

CC 4.0 BY-SA版权

Android 专栏收录该内容

112 篇文章

订阅专栏

本文介绍了一个使用ViewPager和Fragment实现的底部导航栏案例，包括布局设计、Fragment切换、RadioButton选中状态变化等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.Fragment用的是v4包，首先添加v4依赖

2.布局

activity_main.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">

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

    <RadioGroup
        android:id="@+id/rg"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:weightSum="3"
        android:background="#fafafa">
        <RadioButton
            android:id="@+id/rb_home"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:button="@null"
            android:drawableTop="@drawable/tebbar_mains_wechat"
            android:gravity="center"
            android:text="漫画"
            android:textColor="@color/selector_tv_fen" />
        <RadioButton
            android:id="@+id/rb_bar"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:button="@null"
            android:drawableTop="@drawable/tebbar_mains_find"
            android:gravity="center"
            android:text="聊天"
            android:textColor="@color/selector_tv_fen" />
        <RadioButton
            android:id="@+id/rb_me"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:button="@null"
            android:drawableTop="@drawable/tebbar_mains_my"
            android:gravity="center"
            android:text="我"
            android:textColor="@color/selector_tv_fen" />
    </RadioGroup>

</LinearLayout>

3个Fragment布局

frag_main_home.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"
    android:gravity="center">

   <TextView
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="漫画"
       android:textSize="20dp"/>

</LinearLayout>

fragment_chat.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center">

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="聊天"
        android:textSize="20dp"/>

</LinearLayout>

frag_main_me.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"
    android:gravity="center">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="我"
        android:textSize="20dp"/>

</LinearLayout>

3.Activity

package com.cwj.viewpagerandfragment.activity;

import android.os.Bundle;
import android.support.annotation.LayoutRes;
import android.support.annotation.Nullable;
import android.support.v4.app.FragmentActivity;

public abstract class BaseActivity extends FragmentActivity {
    protected BaseActivity act;
    protected final String TAG=getClass().getSimpleName();
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        act=this;
        setContentView(getLayoutID());
        initView();
        initData();
        initListener();
    }
    @LayoutRes
    protected abstract int getLayoutID();
    protected abstract void initListener();
    protected abstract void initView();
    protected abstract void initData();

    @SuppressWarnings("unchecked")
    protected <E> E f(int id){
        return (E)findViewById(id);
    }
}

package com.cwj.viewpagerandfragment.activity;

import android.support.annotation.IdRes;
import android.support.v4.app.Fragment;
import android.support.v4.view.ViewPager;
import android.widget.RadioGroup;

import com.cwj.viewpagerandfragment.R;
import com.cwj.viewpagerandfragment.adapter.PagerMainAdapter;
import com.cwj.viewpagerandfragment.fragment.MainBarFragment;
import com.cwj.viewpagerandfragment.fragment.MainHomeFragment;
import com.cwj.viewpagerandfragment.fragment.MainMeFragment;

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

public class MainActivity extends BaseActivity {
    private ViewPager vp;
    private RadioGroup rg;
    private int[] rbs = {R.id.rb_home, R.id.rb_bar, R.id.rb_me};
    private List<Fragment> mFragments;

    //简化后的方法
    @Override
    protected int getLayoutID() {
        return R.layout.activity_main;
    }

    @Override
    protected void initView() {
        vp = f(R.id.vp);
        rg = f(R.id.rg);
    }
    @Override
    protected void initData() {

        mFragments=new ArrayList<>();
        MainHomeFragment one=new MainHomeFragment();
        MainBarFragment two=new MainBarFragment();
        MainMeFragment three=new MainMeFragment();
        mFragments.add(one);
        mFragments.add(two);
        mFragments.add(three);

        // 设置填充器
        vp.setAdapter(new PagerMainAdapter(getSupportFragmentManager(),mFragments));
        // 设置缓存页面数
        vp.setOffscreenPageLimit(2);

    }

    @Override
    protected void initListener() {
        //radioGroup的点击事件
        rg.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup group, @IdRes int checkedId) {
                for (int i = 0; i < rbs.length; i++) {
                    if (rbs[i] != checkedId) continue;
                    //加载滑动
                    vp.setCurrentItem(i);
                }

            }
        });
        //ViewPager的点击事件 vp-rg互相监听：vp
        vp.addOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {
            @Override
            public void onPageSelected(int position) {
                rg.check(rbs[position]);
            }
        });
        //设置一个默认页
        rg.check(rbs[0]);
    }
}

4.adapter

package com.cwj.viewpagerandfragment.adapter;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

import java.util.List;

public class PagerMainAdapter extends FragmentPagerAdapter {
    private final List<Fragment> frags;

    public PagerMainAdapter(FragmentManager fm, List<Fragment> frags) {
        super(fm);
        this.frags = frags;
    }

    @Override
    public Fragment getItem(int position) {
        return frags.get(position);
    }

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

5.Fragment

package com.cwj.viewpagerandfragment.fragment;

import android.content.Intent;
import android.net.Uri;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.GridView;
import android.widget.SimpleAdapter;

import com.cwj.viewpagerandfragment.R;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

public class MainHomeFragment extends Fragment {

    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.frag_main_home, container, false);
        return view;
    }
}

package com.cwj.viewpagerandfragment.fragment;

import android.content.Intent;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.EditText;
import android.widget.RadioButton;
import android.widget.Toast;

import com.cwj.viewpagerandfragment.R;

public class MainBarFragment extends Fragment{

    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_chat, container, false);
        return view;
    }

}

package com.cwj.viewpagerandfragment.fragment;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import com.cwj.viewpagerandfragment.R;

public class MainMeFragment extends Fragment {

    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.frag_main_me, container, false);
        return view;
    }

}

6.滑动字体变色资源文件（点击之前是灰色，点击之后是蓝色）

selector_tv_fen.xml

<?xml version="1.0" encoding="UTF-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/color_blue_1e78f3" android:state_checked="true" />
    <item android:color="@color/color_gray_555" />
</selector>

7.滑动图片的切换资源文件（六张图，滑动前和滑动后的各三张）

tebbar_mains_find.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/icon_find" android:state_checked="true" />
    <item android:drawable="@drawable/icon_find_un" android:state_checked="false" />
</selector>

tebbar_mains_my.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/icon_my" android:state_checked="true" />
    <item android:drawable="@drawable/icon_my_un" android:state_checked="false" />
</selector>

tebbar_mains_wechat.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/icon_wechat" android:state_checked="true" />
    <item android:drawable="@drawable/icon_wechat_un" android:state_checked="false" />
</selector>

设置完之后运行就是这个效果。