android中的ViewPager+Fragment+RadioGroup导航样式的实现

最新推荐文章于 2023-03-28 14:57:04 发布
最新推荐文章于 2023-03-28 14:57:04 发布
阅读量1.4k 收藏 1
点赞数
分类专栏： Android 文章标签： android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011581891/article/details/44084575
版权

在项目开发中，我们常见的主页面大多数是用ViewPager左右切换滑动，配合每一页中用fragment填充，加上用户可点击的RadioButton这三种作为主体框架，最近我将这种实现方式整理出来（当然是属于简单实现的那种，没有加入动画和渐变等各种滑动效果），下面是效果图：
这里写图片描述

这里写图片描述

以下是项目结构图，结构很简单，由一个主activity加上若干个fragment组成的，fragment的数量可以根据需求来定

这里写图片描述

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

    <LinearLayout
        android:id="@+id/linearLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical" >

        <RadioGroup
            android:id="@+id/radioGroup"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal" >

            <RadioButton
                android:id="@+id/radioButton1"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:button="@null"
                android:gravity="center_horizontal"
                android:text="选项一" 
                android:textColor="#f00"/>

            <RadioButton
                android:id="@+id/radioButton2"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:button="@null"
                android:gravity="center_horizontal"
                android:text="选项二" />

            <RadioButton
                android:id="@+id/radioButton3"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:button="@null"
                android:gravity="center_horizontal"
                android:text="选项三" />

            <RadioButton
                android:id="@+id/radioButton4"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:button="@null"
                android:gravity="center_horizontal"
                android:text="选项四" />
        </RadioGroup>
    </LinearLayout>

    <LinearLayout
        android:id="@+id/linearLayout_indicator"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/linearLayout"
        android:layout_marginTop="5dp"
        android:orientation="horizontal" >

        <TextView
            android:id="@+id/indicator1"
            android:layout_width="0dp"
            android:layout_height="2dp"
            android:layout_weight="1" 
            android:background="#f00"/>

        <TextView
            android:id="@+id/indicator2"
            android:layout_width="0dp"
            android:layout_height="2dp"
            android:layout_weight="1" 
            android:background="#f00"
            android:visibility="invisible"/>

        <TextView
            android:id="@+id/indicator3"
            android:layout_width="0dp"
            android:layout_height="2dp"
            android:layout_weight="1" 
            android:background="#f00"
            android:visibility="invisible"/>

        <TextView
            android:id="@+id/indicator4"
            android:layout_width="0dp"
            android:layout_height="2dp"
            android:layout_weight="1" 
            android:background="#f00"
            android:visibility="invisible"/>
    </LinearLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/linearLayout_indicator" />

</RelativeLayout>

其中一个fragment的布局 fragment1.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:gravity="center_horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="ViewPager第一个页面"/>

</LinearLayout>

当然，还需要在value里面定义颜色的xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="red">#f00</color>
    <color name="black">#000</color>
</resources>

MainActivity.java代码

package com.vac.demo01;

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.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;
import android.widget.RadioGroup;
import android.widget.RadioGroup.OnCheckedChangeListener;
import android.widget.TextView;

public class MainActivity extends FragmentActivity {

    private ViewPager viewPager;
    private MyPagerAdapter mAdapter;//ViewPager的fragment适配器
    private FragmentManager fm;//此处使用v4包中的FragmentManager
    private RadioGroup radioGroup;
    private TextView indicator1,indicator2,indicator3,indicator4;//按钮选型下的指示器
    private RadioButton radioButton1,radioButton2,radioButton3,radioButton4;//选项按钮
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        initView();//初始化控件

        fm = getSupportFragmentManager();//如果使用v4包中的fm,那么activity必须是FragmentActivity的子类
        mAdapter = new MyPagerAdapter(fm);
        viewPager.setAdapter(mAdapter);

        /**
         * RadioGroup组件的监听方法
         */
        radioGroup.setOnCheckedChangeListener(new OnCheckedChangeListener() {

            @Override
            public void onCheckedChanged(RadioGroup group, int checkedId) {
                //让所有的指示线都不可见，所有的按钮字体颜色均为黑色
                initState();

                switch (checkedId) {
                case R.id.radioButton1://选中按钮“选项一”
                    viewPager.setCurrentItem(0);//设置ViewPager当前所处的页数
                    indicator1.setVisibility(View.VISIBLE);//让选项一的指示线可见
                    radioButton1.setTextColor(getResources().getColor(R.color.red));//让选项一的按钮字体颜色变成红色
                    break;
                case R.id.radioButton2://选中按钮“选项二”
                    viewPager.setCurrentItem(1);
                    indicator2.setVisibility(View.VISIBLE);//让选项二的指示线可见
                    radioButton2.setTextColor(getResources().getColor(R.color.red));//让选项二的按钮字体颜色变成红色
                    break;
                case R.id.radioButton3://选中按钮“选项三”
                    viewPager.setCurrentItem(2);
                    indicator3.setVisibility(View.VISIBLE);//让选项三的指示线可见
                    radioButton3.setTextColor(getResources().getColor(R.color.red));//让选项三的按钮字体颜色变成红色
                    break;
                case R.id.radioButton4://选中按钮“选项四”
                    viewPager.setCurrentItem(3);
                    indicator4.setVisibility(View.VISIBLE);//让选项四的指示线可见
                    radioButton4.setTextColor(getResources().getColor(R.color.red));//让选项四的按钮字体颜色变成红色
                    break;

                default:
                    break;
                }
            }
        });

        /**
         * ViewPager的滑动监听事件
         */
        viewPager.setOnPageChangeListener(new OnPageChangeListener() {

            @Override
            public void onPageSelected(int arg0) {
                //让所有的指示线都不可见，所有的按钮字体颜色均为黑色
                initState();

                switch (arg0) {
                case 0://表示当前处于ViewPager的第一页
                    indicator1.setVisibility(View.VISIBLE);//让选项一的指示线可见
                    radioButton1.setTextColor(getResources().getColor(R.color.red));//让选项一的按钮字体颜色变成红色
                    break;
                case 1://表示当前处于ViewPager的第二页
                    indicator2.setVisibility(View.VISIBLE);//让选项二的指示线可见
                    radioButton2.setTextColor(getResources().getColor(R.color.red));//让选项二的按钮字体颜色变成红色
                    break;
                case 2://表示当前处于ViewPager的第三页
                    indicator3.setVisibility(View.VISIBLE);//让选项三的指示线可见
                    radioButton3.setTextColor(getResources().getColor(R.color.red));//让选项三的按钮字体颜色变成红色
                    break;
                case 3://表示当前处于ViewPager的第四页
                    indicator4.setVisibility(View.VISIBLE);//让选项四的指示线可见
                    radioButton4.setTextColor(getResources().getColor(R.color.red));//让选项四的按钮字体颜色变成红色
                    break;
                default:
                    break;
                }
            }

            @Override
            public void onPageScrolled(int arg0, float arg1, int arg2) {

            }

            @Override
            public void onPageScrollStateChanged(int arg0) {

            }
        });
    }

    /**
     * 初始化选项按钮字体颜色和指示线的可见
     */
    private void initState() {
        indicator1.setVisibility(View.INVISIBLE);
        indicator2.setVisibility(View.INVISIBLE);
        indicator3.setVisibility(View.INVISIBLE);
        indicator4.setVisibility(View.INVISIBLE);
        radioButton1.setTextColor(getResources().getColor(R.color.black));
        radioButton2.setTextColor(getResources().getColor(R.color.black));
        radioButton3.setTextColor(getResources().getColor(R.color.black));
        radioButton4.setTextColor(getResources().getColor(R.color.black));
    }
    /**
     * 初始化控件
     */
    private void initView() {
        viewPager = (ViewPager) findViewById(R.id.viewPager);
        radioGroup = (RadioGroup) findViewById(R.id.radioGroup);
        indicator1 = (TextView) findViewById(R.id.indicator1);
        indicator2 = (TextView) findViewById(R.id.indicator2);
        indicator3 = (TextView) findViewById(R.id.indicator3);
        indicator4 = (TextView) findViewById(R.id.indicator4);

        radioButton1 = (RadioButton) findViewById(R.id.radioButton1);
        radioButton2 = (RadioButton) findViewById(R.id.radioButton2);
        radioButton3 = (RadioButton) findViewById(R.id.radioButton3);
        radioButton4 = (RadioButton) findViewById(R.id.radioButton4);
    }

    /**
     * 内部类，定义ViewPager的适配器，继承自FragmentPagerAdapter，专为适配Fragment
     * @author vac
     *
     */
    private class MyPagerAdapter extends FragmentPagerAdapter{
        List<Fragment> mList = new ArrayList<Fragment>();//fragment集合
        public MyPagerAdapter(FragmentManager fm) {
            super(fm);

            mList.add(new MyFragment1());//将fragment1放入集合中
            mList.add(new MyFragment2());
            mList.add(new MyFragment3());
            mList.add(new MyFragment4());
        }

        @Override
        public Fragment getItem(int position) {
            return mList.get(position);//取集合中位置为position的fragment返回
        }

        @Override
        public int getCount() {
            return mList.size();//集合的大小
        }

    }

}

然后就大功告成了！！当然这个框架是非常简单的，原理也很简单，有兴趣的人可以研究下指示线的动态发生变化~~·

源码下载：点击下载demo

yufengvac
关注
专栏目录
【Android】ViewPager + RadioGroup + Fragment 实现底部导航栏和页面切换
weixin_52137816的博客
07-21 1134
ViewPager + RadioGroup + Fragment 实现底部导航栏和页面切换
ViewPager+Fragment+RadioGroup
04-11
此TabActivity是使用ViewPager+Fragment+RadioGroup实现TabHost选项卡，很少占用内存，不像TabHost会占用很多内存，有时候还会出现内存溢出，本人经历过此情况，因此写了此方法实现选项卡功能。
viewpager+fragment+RadioGroup
最新发布
TSBBjc
03-28 294
简单实现该方法可以删除，这里是实现通过activityA 跳转到另一个acitivityB里面指定第几个fragment。随便用两个图片 在res ->drawble下面创建button_select.xml文件。用于选中不选择底部按钮图片切换。
Android ViewPager+Fragment+RadioGroup
FlyPig_Vip的博客
01-03 545
  1.MainActivity.XML &lt;?xml version="1.0" encoding="utf-8"?&gt; &lt;RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-aut...
Viewpager+Fragment+RadioGroup 快速打造应用的布局
Janpan_的博客
05-11 682
刚入坑安卓两个月，想记录自己的学习历程，不喜欢勿喷 -_-预览一,主界面布局（viewpager+radioGroup），状态栏放在fragment中处理viewpager&lt;android.support.v4.view.ViewPager android:id="@+id/activity_viewpager" android:layout_width="match_par...
简单快速实现导航条（Viewpager+Fragment+Radiogroup）
下次时的博客
01-13 538
每个应用几乎都逃不开导航条，导航条的制作方法有很多 1、TabActivity+TabHost（已经过期） 2、Fragment + RadioGroup 【必要时首选】 3、Fragment + ViewPager + RadioGroup自定义固定导航条 【推荐使用】 4、Fragment + ViewPager 带滑动导航条 【推荐使用】 5、Frag
ViewPager+Fragment+RadioGroup导航
03-05
在`ViewPager+Fragment+RadioGroup`的导航样式中，通常会用`RadioGroup`来显示当前`ViewPager`中所选页面的指示器。例如，当用户在`ViewPager`中滑动到第二个页面时，对应的`RadioButton`会被选中。这可以通过监听`...
使用ViewPager+Fragment+RadioGroup实现类似微信主界面
12-14
使用ViewPager+Fragment+RadioGroup实现类似微信主界面
Android ViewPager+RadioGroup+Fragment超高仿微信底部滑动菜单AndroidStudio源码
02-05
Android ViewPager+RadioGroup+Fragment超高仿微信底部滑动菜单AndroidStudio源码 Blog:http://blog.csdn.net/shenyuanqing/article/details/46670761
用Viewpager+Fragment+RadioGroup实现APP的引导页面
蜗牛的小梦想
08-03 1219
当用户从应用程序市场下载App后，第一次安装的时候总要给用户做音带提示，主要是判断是不是第一次下载就可以了 大致的思路如下： 一、在引导页面的Activity中放置viepager和radiogroup控件 GuideActivity的布局文件 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android
ViewPager+radiogroup+fragment完美结合
09-23
ViewPager+radiogroup+fragment完美结合，框架已经搭好，分分钟开发自己的APP！使用中发现什么不足之处，欢迎留言指正！
ViewPager+Fragment+RadioGroup 老方法
qq_40089806的博客
10-23 723
activity_main.xml页面布局： RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" andro
Android 底部导航栏（四、ViewPager+RadioGroup+Fragment）简单易懂
Android 领域开发程序员，希望通过写博客的方式不断的总结提升自己，大家共同进步哦！
11-07 2855
底部导航栏在Android应用中随处可见，今天使用ViewPager+RadioGroup+Fragment这三个控件来实现此功能。前面写了有三种实现方式，有兴趣可以去看看，Android 底部导航栏（一、BottomNavigationView+Menu+Fragment）_&岁月不待人&的博客-CSDN博客_android 底部导航栏Android 底部导航栏（二、自定义View+Fragment）_&岁月不待人&的博客-CSDN博客。
ViewPager+Fragment+radioGroup联动效果
qq_43567217的博客
11-03 285
public class MainActivity extends FragmentActivity { ViewPager viewPager; RadioGroup radioGroup; ArrayList&lt;Fragment&gt; list; @Override protected void onCreate(Bundle savedInstanceState) { sup...
viewpager+fragment+radiogroup的懒加载
qq_40204114的博客
04-21 186
radiogroup public class MainActivity extends AppCompatActivity { private ViewPager viewPager; private List<Fragment> list; private RadioGroup radioGroup; private FragMentA fragMentA; private FragMentB fragMentB; private Frag
android 底部导航栏 ViewPager+RadioGroup+Fragment
lucasmaluping的专栏
06-26 573
public class ShouyeFragment extends Fragment{ private View view; //注意，实现的方法是onCreateView，和onDestroyView。View @Override public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup cont
Viewpager+radiogroup+fragment
aimang4979的博客
10-20 153
fragment1.xml 其他一样 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" an...
fragment、viewpager、radiogroup的配合使用
sinat_35201610的博客
07-03 460
fragment viewpager radiogroup
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值