android中fragment实现底部标签页的切换

最新推荐文章于 2025-01-18 12:17:15 发布

原创最新推荐文章于 2025-01-18 12:17:15 发布 · 3.3k 阅读

0 ·

CC 4.0 BY-SA版权

android 技术笔记专栏收录该内容

13 篇文章

订阅专栏

在android中，要实现如同微信界面底部那种标签式的界面，通过fragment就可以。，首先，如微信底部有4个标签页，则需要四个独立的layout文件，而在activity_main的xml中则需要添加fragment控件，对应的数量和标签页的数量一致，在此处为4个。而在每个fragment的名称即为对应创建的标签页的类。具体的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"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.demotest2.MainActivity" >

    <fragment
           android:id="@+id/fragmenthome"
           android:name="com.example.demotest2.fragmentHome"
           android:layout_width="match_parent"
           android:layout_height="match_parent"
           android:layout_alignLeft="@+id/mainRadioGroup" />

    <fragment
        android:id="@+id/fragmentmy"
        android:name="com.example.demotest2.fragmentMy"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/mainRadioGroup"
        android:layout_alignLeft="@+id/mainRadioGroup"
        android:layout_marginBottom="46dp" />
    
     <fragment
        android:id="@+id/fragmentdiscover"
        android:name="com.example.demotest2.fragmentDiscovery"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentLeft="true"
        android:layout_below="@+id/fragmenthome"
        android:layout_marginTop="26dp" />

    <fragment
        android:id="@+id/fragmentshop"
        android:name="com.example.demotest2.fragmentShop"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignLeft="@+id/fragmentdiscover"
        android:layout_centerVertical="true" />
    <RadioGroup
        android:id="@+id/mainRadioGroup"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:orientation="horizontal" >

        <RadioButton
            android:id="@+id/radioButtonHome"
            style="@style/tab_bottom_button"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:checked="true"
            android:drawableTop="@drawable/tab_bottom_item1"
            android:text="@string/tab_title_0" />

        <RadioButton
            android:id="@+id/radioButtonShop"
            style="@style/tab_bottom_button"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:checked="false"
            android:drawableTop="@drawable/tab_bottom_item2"
            android:text="@string/tab_title_1" />

        <RadioButton
            android:id="@+id/radioButtonDiscover"
            style="@style/tab_bottom_button"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:checked="false"
            android:drawableTop="@drawable/tab_bottom_item3"
            android:text="@string/tab_title_2" />

        <RadioButton
            android:id="@+id/radioButtonMy"
            style="@style/tab_bottom_button"
            android:layout_width="74dp"
            android:layout_height="match_parent"
            android:layout_weight="0.03"
            android:checked="false"
            android:drawableTop="@drawable/tab_bottom_item4"
            android:text="@string/tab_title_3" />
    </RadioGroup>

   

</RelativeLayout>

在上述代码中，我们还添加了radiobutton按钮，通过和radiogroup结合，实现对标签页切换的响应。通过在代码中添加对应的响应，即可实现切换。

在代码中，需要添加各个标签页xml对应的类。而这些标签类均继承自fragment，举其中的一个标签页实现的类为例，代码如下：

package com.example.demotest2;

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

import android.widget.Toast;
import android.R.integer;
import android.R.raw;
import android.app.AlertDialog;
import android.content.Context;
import android.os.Bundle;
import android.os.Trace;
import android.support.v4.app.Fragment;
import android.support.v4.view.ViewPager;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Adapter;
import android.widget.LinearLayout.LayoutParams;
import android.widget.GridView;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
import android.widget.Toast;

import com.example.demotest2.VocationBean;
import com.example.demotest2.R;

public class fragmentHome extends Fragment{
	// 变量区
	private ViewPager viewPager;
	private ImageView imageView;
	private List<View> viewLists = new ArrayList<View>();	// 视图队列，添加到adapter中
	private ViewPageAdapter adapter;
	private TextView textView1;
	private TextView textView2;
	private TextView textView3;
	private int  currentItem;
	
	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		return inflater.inflate(R.layout.fragmenthome, container,false);
	}
	@Override
	public void onActivityCreated(Bundle savedInstanceState) {
		super.onActivityCreated(savedInstanceState);
		// 实例化资源
		viewPager = (ViewPager)getView().findViewById(R.id.view_pager);	// 实例化空间
		textView1 = (TextView)getView().findViewById(R.id.textView1);
		textView2 = (TextView)getView().findViewById(R.id.textView2);
		textView3 = (TextView)getView().findViewById(R.id.textView3);
		viewLists.add(getLayoutInflater(savedInstanceState).inflate(R.layout.test1, null));
		viewLists.add(getLayoutInflater(savedInstanceState).inflate(R.layout.test2, null));
		viewLists.add(getLayoutInflater(savedInstanceState).inflate(R.layout.test3, null));
		adapter	  = new ViewPageAdapter(viewLists);
		viewPager.setAdapter(adapter);		// 设置数据适配器来源
		viewPager.setCurrentItem(0);
		// 设置滑动监听函数
		viewPager.setOnPageChangeListener(new OnPageChangeListener() {
			
			@Override
			public void onPageSelected(int arg0) {
				// TODO Auto-generated method stub
				switch (arg0) {
				case 0:
					break;
				case 1:

					break;
				case 2:
					break;
				default:
					break;
				}
				currentItem = arg0;
				// 添加光标滑动效果
				
			}
			
			@Override
			public void onPageScrolled(int arg0, float arg1, int arg2) {
				
			}
			
			@Override
			public void onPageScrollStateChanged(int arg0) {
				// TODO Auto-generated method stub
				
			}
		});
	}
}
//class MyPagerOnLister implements OnPageChangeListener{
//	public void onPageScrollStateChanged(int arg0) {
//		// TODO Auto-generated method stub
//		
//	}
//
//	public void onPageScrolled(int arg0, float arg1, int arg2) {
//		// TODO Auto-generated method stub
//		
//	}
//
//	public void onPageSelected(int position) {
//		((View)listDots.get(position)).setBackgroundResource(R.drawable.dot_focused);
//		((View)listDots.get(oldPosition)).setBackgroundResource(R.drawable.dot_normal);
//		oldPosition = position;
//	}
//}
//  自定义扩展的视图适配器
 class ViewPageAdapter extends PagerAdapter{
	public List<View> m_viewLists;
	LayoutInflater  mInflater;
   public ViewPageAdapter(List<View> lists) {
	   m_viewLists = lists;
	}
	@Override
	public int getCount() {
		// TODO Auto-generated method stub
		return m_viewLists.size();
	}
	@Override
	public boolean isViewFromObject(View arg0, Object arg1) {
		return arg0 == arg1;
	}
	@Override
	public void destroyItem(View container, int position, Object object) {
		((ViewPager) container).removeView(m_viewLists.get(position));  
	}
	@Override
	public Object instantiateItem(View container, int position) {
		 ((ViewPager) container).addView(m_viewLists.get(position), 0);         
	       return m_viewLists.get(position);
	}
}

而在MainActivity类中，则需要进行的操作为添加fragment到fragment的管理类中，该部分代码如下所示：

fragmentLish = new Fragment[4];
		fragmentManager = getSupportFragmentManager();
		fragmentLish[0] = fragmentManager.findFragmentById(R.id.fragmenthome);
		fragmentLish[1] = fragmentManager.findFragmentById(R.id.fragmentshop);
		fragmentLish[2] = fragmentManager.findFragmentById(R.id.fragmentdiscover);
		fragmentLish[3] = fragmentManager.findFragmentById(R.id.fragmentmy);
		fragTransaction = fragmentManager.beginTransaction()
				.hide(fragmentLish[0]).hide(fragmentLish[1]).hide(fragmentLish[2]).hide(fragmentLish[3]);
		fragTransaction.show(fragmentLish[0]).commit();	// 默认为第一个标签页

在完成了fragment的添加，便是对底部的四个按钮进行按钮响应，如下方代码所示：

               buttonList = (RadioGroup)findViewById(R.id.mainRadioGroup);
		radioButtonHome = (RadioButton)findViewById(R.id.radioButtonHome);
		radioButtonDiscover = (RadioButton)findViewById(R.id.radioButtonDiscover);
		radioButtonShop = (RadioButton)findViewById(R.id.radioButtonShop);
		radioButtonMy  = (RadioButton)findViewById(R.id.radioButtonMy);
		buttonList.setOnCheckedChangeListener(new OnCheckedChangeListener() {		
			@Override
			public void onCheckedChanged(RadioGroup group, int checkedId) {
				// TODO Auto-generated method stub
				fragTransaction = fragmentManager.beginTransaction().hide(fragmentLish[0])
						.hide(fragmentLish[1]).hide(fragmentLish[2]).hide(fragmentLish[3]);
				switch (checkedId) {
				case R.id.radioButtonHome:
					fragTransaction.show(fragmentLish[0]).commit();
					break;
				case R.id.radioButtonShop:
					fragTransaction.show(fragmentLish[1]).commit();
					break;
				case R.id.radioButtonDiscover:
					fragTransaction.show(fragmentLish[2]).commit();
					break;
				case R.id.radioButtonMy:
					fragTransaction.show(fragmentLish[3]).commit();
					break;
				default:
					break;
				}
			}
		});

这样便完成了底部标签页的添加和实现。