Android导航中Fragment里实现ViewPager滑动和RadioButton单击事件

最新推荐文章于 2022-12-04 19:45:54 发布
最新推荐文章于 2022-12-04 19:45:54 发布
阅读量1.9k 收藏 8
点赞数 4
文章标签： android 导航 viewpager radio button
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Android53_CSDN/article/details/52260056
版权

一、首先写好XML导航页布局，没有布局，怎么看效果，俗话说的好：有图有真相！

1、导航页布局，代码中RadioButton中有2自定义选择器，点击换图和点击文字变色

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/activity_main_ll"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >

    <LinearLayout
        android:id="@+id/main_llayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/activity_v"
        android:layout_alignParentTop="true"
        android:orientation="vertical" >
    </LinearLayout>
    <View android:id="@+id/activity_main_v"
    android:layout_above="@+id/activity_main_rg"
    android:layout_width="match_parent"
    android:layout_height="1dp"
    android:background="#c8c7cc"/>

    <RadioGroup
        android:id="@+id/activity_main_rg"
        android:layout_width="match_parent"
        android:layout_height="75dp"
        android:layout_alignParentBottom="true"
        android:orientation="horizontal" >

        <RadioButton
            android:id="@+id/activity_main_eat_rbtn"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_gravity="center"
            android:layout_weight="1"
            android:button="@null"
            android:drawableTop="@drawable/bg_main_radiogroup_eatcolor"
            android:gravity="center"
            android:text="吃"
            android:textColor="@drawable/bg_eat_radiogroup_textcolor"
            android:textSize="15sp" />

        <RadioButton
            android:id="@+id/activity_main_food_rbtn"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_gravity="center"
            android:layout_weight="1"
            android:button="@null"
            android:drawableTop="@drawable/bg_main_radiogroup_foodcolor"
            android:gravity="center"
            android:text="食物"
            android:textColor="@drawable/bg_eat_radiogroup_textcolor"
            android:textSize="15sp" />

        <RadioButton
            android:id="@+id/activity_main_shop_rbtn"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_gravity="center"
            android:layout_weight="1"
            android:button="@null"
            android:drawableTop="@drawable/bg_main_radiogroup_shopcolor"
            android:gravity="center"
            android:text="商店"
            android:textColor="@drawable/bg_eat_radiogroup_textcolor"
            android:textSize="15sp" />

        <RadioButton
            android:id="@+id/activity_main_my_rbtn"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_gravity="center"
            android:layout_weight="1"
            android:button="@null"
            android:drawableTop="@drawable/bg_main_radiogroup_mycolor"
            android:gravity="center"
            android:text="我的"
            android:textColor="@drawable/bg_eat_radiogroup_textcolor"
            android:textSize="15sp" />
    </RadioGroup>
    

</RelativeLayout>


2、再来写导航中第一个Fragment---吃 

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    android:id="@+id/eat_rlayout"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >

    <RelativeLayout
        android:id="@+id/fragment_eat_rl1"
        android:layout_width="match_parent"
        android:layout_height="75dp" >

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_marginLeft="25dp"
            android:src="@drawable/ic_home_search" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:gravity="center"
            android:text="各种美味"
            android:textColor="#ff5a5f"
            android:textSize="30sp" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:layout_marginRight="25dp"
            android:src="@drawable/ic_home_camera" />
    </RelativeLayout>

    <View
        android:id="@+id/fragment_eat_v1"
        android:layout_below="@+id/fragment_eat_rl1"
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="#c8c7cc" />

    <RadioGroup
        android:id="@+id/fragment_eat_rg"
        android:layout_below="@+id/fragment_eat_v1"
        android:layout_width="match_parent"
        android:layout_height="64dp"
        android:orientation="horizontal" >

        <RadioButton
            android:id="@+id/fragment_eat_home_page_rbtn"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:button="@null"
            android:checked="true"
            android:gravity="center"
            android:text="首页"
            android:textColor="@drawable/bg_eat_radiogroup_textcolor"
            android:textSize="20sp" />

        <RadioButton
            android:id="@+id/fragment_eat_appraisal_rbtn"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:button="@null"
            android:gravity="center"
            android:text="评价"
            android:textColor="@drawable/bg_eat_radiogroup_textcolor"
            android:textSize="20sp" />

        <RadioButton
            android:id="@+id/fragment_eat_knowledge_rbtn"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:button="@null"
            android:gravity="center"
            android:text="知识"
            android:textColor="@drawable/bg_eat_radiogroup_textcolor"
            android:textSize="20sp" />

        <RadioButton
            android:id="@+id/fragment_eat_cate_rbtn"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:button="@null"
            android:gravity="center"
            android:text="美味"
            android:textColor="@drawable/bg_eat_radiogroup_textcolor"
            android:textSize="20sp" />
    </RadioGroup>

    <View
        android:id="@+id/fragment_eat_v2"
        android:layout_below="@+id/fragment_eat_rg"
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="#c8c7cc" />
    <android.support.v4.view.ViewPager
        android:layout_below="@+id/fragment_eat_v2"
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
         >
    </android.support.v4.view.ViewPager>

</RelativeLayout>
3、XML布局最后一步，ViewPager中的4个碎片布局

（1）

<?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="match_parent"
        android:layout_height="wrap_content"
        android:text="首页"/>

</LinearLayout>
（2） 

<?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="match_parent"
        android:layout_height="wrap_content"
        android:text="评价"/>

</LinearLayout>
（3） 

<?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="match_parent"
        android:layout_height="wrap_content"
        android:text="知识"/>

</LinearLayout>
（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="match_parent"
    android:orientation="vertical" >
    <TextView 
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="美味"/>

</LinearLayout>


二、写了这么多，烦了么，重点才刚刚开始，src文件中的逻辑

1、绑定ViewPager中的4个碎片布局，建议新建一个Fragment包，其他真心不想多说，自己看着办吧。。。。。。

2、绑定导航中第一个Fragment---吃，里面的逻辑需要说说，直接上代码吧！（自己导包，有V4的导V4）

public class EatFragment extends Fragment {
	private ViewPager vp;
	private List<Fragment> list;
	private EatPagerAadapter adapter;
	private RadioGroup rg;
	private RadioButton rb1, rb2, rb3, rb4;
	private Context context;
	Fragment honePage, appraisal, knowledge, cate;

	@Override
	public void onAttach(Activity activity) {
		super.onAttach(activity);
		context = activity;
	}

	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		View view = inflater.inflate(R.layout.fragment_eat, null);

		initView(view);

		list = new ArrayList<Fragment>();
		list.add(new EatHomePageFragment());
		list.add(new EatAppraisalFragment());
		list.add(new EatKnowledgeFragment());
		list.add(new EatCateFragment());

		adapter = new EatPagerAadapter(getChildFragmentManager(), list,
				getActivity());
		vp.setAdapter(adapter);

		addListener();

		return view;
	}
	private void addListener() {

		vp.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {

			@Override
			public void onPageSelected(int arg0) {
				Log.e("onPageSelected", "----" + arg0);
				switch (arg0) {
				case 0:
					rb1.setChecked(true);
					break;
				case 1:
					rb2.setChecked(true);
					break;
				case 2:
					rb3.setChecked(true);
					break;
				case 3:
					rb4.setChecked(true);
					break;
				}
			}
			@Override
			public void onPageScrolled(int arg0, float arg1, int arg2) {
			}
			@Override
			public void onPageScrollStateChanged(int arg0) {
			}
		});
		rb1.setOnClickListener(new View.OnClickListener() {
			@Override
			public void onClick(View arg0) {
				vp.setCurrentItem(0);
			}
		});
		rb2.setOnClickListener(new View.OnClickListener() {
			@Override
			public void onClick(View arg0) {
				vp.setCurrentItem(1);
			}
		});
		rb3.setOnClickListener(new View.OnClickListener() {
			@Override
			public void onClick(View arg0) {
				vp.setCurrentItem(2);
			}
		});
		rb4.setOnClickListener(new View.OnClickListener() {
			@Override
			public void onClick(View arg0) {
				vp.setCurrentItem(3);
			}
		});
	}
	private void initView(View view) {
		vp = (ViewPager) view.findViewById(R.id.pager);
		rg = (RadioGroup) view.findViewById(R.id.fragment_eat_rg);
		rb1 = (RadioButton) view.findViewById(R.id.fragment_eat_home_page_rbtn);
		rb2 = (RadioButton) view.findViewById(R.id.fragment_eat_appraisal_rbtn);
		rb3 = (RadioButton) view.findViewById(R.id.fragment_eat_knowledge_rbtn);
		rb4 = (RadioButton) view.findViewById(R.id.fragment_eat_cate_rbtn);
	}
}

3、是不是还有报错，适配器写了么？（建议新建个“adapter“包）包还是自己导，有V4的导V4 

public class EatPagerAadapter extends FragmentPagerAdapter{
	private Context context;
	private List<Fragment> list;

	public EatPagerAadapter(FragmentManager fm) {
		super(fm);
	}
	public EatPagerAadapter(FragmentManager fm,List<Fragment> list,Context context){
		super(fm);
		this.list=list;
		this.context=context;
	}
	@Override
	public Fragment getItem(int arg0) {
		return list==null?null:list.get(arg0);
	}
	@Override
	public int getCount() {
		return list==null?0:list.size();}
}


4、所有准备工作就绪，最后在导航页主类中加个单击事件就OK了 

public class MainActivity extends FragmentActivity implements OnClickListener{
	private RadioButton mEatBtn,mFoodBtn,mShopBtn,mMyBtn;//后面三个按钮只做声明、初始化和绑定监听，单击事件参考第一个按钮
	Fragment eat,food,shop,my;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		initView();
		addListener();
		eat=new EatFragment();
		getSupportFragmentManager().beginTransaction().replace(R.id.main_llayout,eat).commit();
		mEatBtn.setChecked(true);
	}
	@Override
	protected void onResume() {
		super.onResume();
		
	}

	private void addListener() {
		mEatBtn.setOnClickListener(this);
		mFoodBtn.setOnClickListener(this);
		mShopBtn.setOnClickListener(this);
		mMyBtn.setOnClickListener(this);
	}

	private void initView() {
		mEatBtn=(RadioButton) findViewById(R.id.activity_main_eat_rbtn);
		mFoodBtn=(RadioButton) findViewById(R.id.activity_main_food_rbtn);
		mShopBtn=(RadioButton) findViewById(R.id.activity_main_shop_rbtn);
		mMyBtn=(RadioButton) findViewById(R.id.activity_main_my_rbtn);
	}

	@Override
	public void onClick(View v) {
		switch (v.getId()) {
		case R.id.activity_main_eat_rbtn:
			eat=new EatFragment();
			getSupportFragmentManager().beginTransaction().replace(R.id.main_llayout,eat).commit();
			break;
		case R.id.activity_main_food_rbtn:
			break;
		case R.id.activity_main_shop_rbtn:
			break;
		case R.id.activity_main_my_rbtn:
			break;
		}
	}

}


试一试效果吧









Android53_csdn
关注
  • 4
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
android中ViewPager结合Fragment进行无限滑动
01-05
实现ViewPager结合Fragment实现无限循环切换，这里也是在适配器里面进行的，当然使用滑动监听也能够实现 import android.support.v4.app.Fragment; import android.support.v4.app.FragmentManager; import android...
Fragment嵌套ViewPager加上RadioButton实现微信页面滑动点击效果
变态战斗渣的专栏
02-06 1621
最近研究了一下各大app的页面，很多都是采用了点击加滑动来切换页面的操作逻辑，其实实现这种功能有很多方法，最常见的就是Fragment里嵌套ViewPager，然后在底部加上一组RadioButton，这样就能实现点击和滑动都可以切换页面了。package com.example.mikasa_viewpager; import android.os.Bundle; import android
Fragment+RadioButton实现点击切换页面效果
weixin_30653097的博客
09-04 148
首先我们需要在主布局文件中 放一个 容器，方便让fragment加入进去,我们创建了四个Fragment，并用RedioButton实现了导航栏 MainActivity.java 1 package com.example.administrator.fragmentdemo; 2 3 import android.app.Activity; 4 ...
Android Radiobutton自定义背景、文字颜色、点击效果
qq_57492804的博客
12-04 2287
Android Radiobutton自定义背景、文字颜色、点击效果
安卓开发-设置RadioButton的点击效果
defukwanmcth26174的博客
12-11 238
在安卓开发中用到底部菜单栏 需要用到RadioButton这个组件 实际应用的过程中，需要对按钮进行点击，为了让用户知道是否点击可这个按钮，可以设置点击后 ，该按钮的颜色或者背景发生变化。 layout中这部分的代码为: 1 <RadioButton 2 android:id="@+id/radio_button0" 3...
Android使用TabLayou+fragment+viewpager实现滑动切换页面效果
08-30
主要介绍了Android使用TabLayou+fragment+viewpager实现滑动切换页面效果,需要的朋友可以参考下
Android中ViewPager实现滑动指示条及与Fragment的配合
09-02
主要介绍了Android中ViewPager实现滑动指示条及与Fragment的配合,使用Fragment实现ViewPager的滑动是一种比较推荐的做法,需要的朋友可以参考下
安卓：ViewPager+Fragment+RadioButton实现底部菜单栏滑动切换
01-03
和ListView，GridView一样，我们也需要一个Adapter> (适配器)将我们的View和ViewPager进行绑定，而ViewPager则有一个特定的Adapter——> PagerAdapter！另外，Google官方是建议我们使用Fragment来填充ViewPager的，...
Android App中使用ViewPager+Fragment实现滑动切换效果
09-02
主要介绍了Android App中使用ViewPager+Fragment实现滑动切换效果的方法,借助Fragment可以使Activity的内部管理逻辑更加清晰,需要的朋友可以参考下
框架（ViewPager+RadioButton+Fragment）
12-21
Android Studio中ViewPager+RadioButton+Fragment常用的布局框架，拿来稍微修改一下不用再搭项目框架。
RadioButton和ViewPager实现页面滑动效果
02-14
RadioButton和ViewPager实现页面滑动效果
防止RadioButton在RecyclerView中滑动出现错乱
01-14
防止RecyclerView滑动出现数据错乱，适用于item中包含RadioButton和EditText的情况
android radiobutton 点击效果,Android RadioButton 的点击效果
weixin_35112750的博客
05-26 433
效果图控件android:divider="@drawable/wosim_rg_divider"android:showDividers="middle"android:background="@drawable/wosim_rg_bg"android:id="@+id/wosim_traffic_enjoy_package_rg"android:layout_width="match_pare...
android 横向点击滚动条,android关于自定义radiobutton做成的横向单选滑动条，答案...
weixin_33751984的博客
05-25 293
当前位置:我的异常网» Android»android关于自定义radiobutton做成的横向单选滑动条android关于自定义radiobutton做成的横向单选滑动条，答案www.myexceptions.net网友分享于：2014-06-22浏览：29次android关于自定义radiobutton做成的横向单选滑动条，在线等答案话不多说，直接贴上代码！问题是现在运行的时候显示...
Android 项目常用滑动页卡模式ViewPager+RadioButton(二)
shenggaofei的博客
06-08 596
一.自定义实现： Android 项目常用滑动页卡模式ViewPager+TabLayout(一) Android 项目常用滑动页卡模式ViewPager+RadioButton(二) Android 项目常用滑动页卡模式ViewPager+MagicIndicator(三) 效果图： 直接看代码实现： 1.MainActivity public cl...
利用Radiogroup Radiobutton 实现滑动效果菜单
congjianfei的专栏
03-27 3465
第一次在满世界大侠的地方撰写博客，所以不免紧张，怕自己写出让人消掉大牙的文章。本着学习的态度，最后我还是决定把自己的学习感想记录下来。 首先我要感谢一个哥们，大部分的内容都是他的杰作，我只是稍作修改，我看到的地方时http://www.myexception.cn/mobile/418248.html，大家可以看看原创的代码。 效果图： 这里是“1111”，“2222”，“3333”
ViewPager+RadioGroup+RadioButton实现滑动切换页面与点击按钮切换页面
ykx_1448488568的博客
09-13 1668
一:效果图: 二:代码: 首先  根据我们有几个页面就设置几个Fragment, 主函数: public class MainActivity extends AppCompatActivity { private ViewPager viewpager; private RadioButton one; private RadioButton two; ...
RadioButton和ViewPager实现页面切换效果
wangwo1991的博客
02-14 2774
BaseFragmentActivity中包含几个Fragment滑动切换页面这种效果是很常见的效果，实现的方式也有很多，TabHost可以实现其效果，不过TabHost的实现方式相比于其他的方法有点复杂，所以TabHost 基本放弃掉了，在这里用的是RadioButton和ViewPager的方式来实现的，android.support.v4.view.ViewPager本来就有滑动切换的效果，
android中viewpager+fragment,ViewPager和Fragment一篇就够了
最新发布
05-27
好的，我会为您讲解关于Android中ViewPager和Fragment的使用。 ViewPager和Fragment是Android中非常常用的组件，他们可以一起使用来实现滑动页面效果。ViewPager是一个可以左右滑动切换页面的布局容器，而Fragment作为ViewPager的子页面，可以在ViewPager中进行动态添加和移除。 下面我们将分别介绍ViewPager和Fragment的使用。 ## ViewPager的使用 ### 1.布局文件 在布局文件中，我们需要使用ViewPager作为容器，将需要滑动切换的页面放入其中。如下所示： ``` <androidx.viewpager.widget.ViewPager android:id="@+id/viewPager" android:layout_width="match_parent" android:layout_height="match_parent"/> ``` ### 2.创建Adapter 我们需要创建一个Adapter继承自PagerAdapter，并重写以下方法： ``` public class MyPagerAdapter extends PagerAdapter { private List<Fragment> mFragments; public MyPagerAdapter(List<Fragment> fragments) { mFragments = fragments; } @Override public int getCount() { return mFragments.size(); } @Override public boolean isViewFromObject(@NonNull View view, @NonNull Object object) { return view == object; } @NonNull @Override public Object instantiateItem(@NonNull ViewGroup container, int position) { Fragment fragment = mFragments.get(position); container.addView(fragment.getView()); return fragment.getView(); } @Override public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) { container.removeView((View) object); } } ``` ### 3.设置Adapter 在Activity或Fragment中，我们需要创建ViewPager的实例，并设置Adapter。如下所示： ``` ViewPager viewPager = findViewById(R.id.viewPager); List<Fragment> fragments = new ArrayList<>(); fragments.add(new Fragment1()); fragments.add(new Fragment2()); fragments.add(new Fragment3()); MyPagerAdapter adapter = new MyPagerAdapter(fragments); viewPager.setAdapter(adapter); ``` 这样，我们就完成了ViewPager的使用。 ## Fragment的使用 ### 1.创建Fragment 我们需要创建一个继承自Fragment的类，并重写以下方法： ``` public class Fragment1 extends Fragment { @Nullable @Override public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { View view = inflater.inflate(R.layout.fragment1, container, false); return view; } } ``` ### 2.布局文件 我们需要在Fragment中添加布局文件，如下所示： ``` <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:text="Fragment1" android:layout_width="match_parent" android:layout_height="match_parent" /> </LinearLayout> ``` 这样，我们就完成了Fragment的使用。 ## ViewPager和Fragment的结合使用 通过以上介绍，我们已经知道了如何使用ViewPager和Fragment了。现在我们需要将它们结合起来使用。 ### 1.创建Fragment 我们需要创建多个Fragment作为ViewPager的子页面。 ### 2.创建Adapter 我们需要创建一个PagerAdapter，将Fragment添加到ViewPager中。如上所示，我们已经创建了一个MyPagerAdapter。 ### 3.设置Adapter 在Activity或Fragment中，我们需要创建ViewPager的实例，并设置Adapter。如上所示，我们已经使用ViewPager的setAdapter方法设置了MyPagerAdapter。 这样，我们就完成了ViewPager和Fragment的结合使用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值