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

最新推荐文章于 2021-05-25 18:25:00 发布

Android53_csdn

最新推荐文章于 2021-05-25 18:25:00 发布

阅读量1.9k

点赞数 4

文章标签： android 导航 viewpager radio button

本文链接：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;
		}
	}

}

试一试效果吧