ViewPager+FragmentPagerAdapter+RadioGroup实现顶部菜单栏（一）

最新推荐文章于 2019-12-04 17:18:54 发布

小小劲

最新推荐文章于 2019-12-04 17:18:54 发布

阅读量1k

点赞数 9

分类专栏： AndroidUI介面

本文链接：https://blog.csdn.net/liguojin1230/article/details/46446943

版权

AndroidUI介面专栏收录该内容

20 篇文章 0 订阅

订阅专栏

放弃谁都可以，千万不要放弃自己！

本讲内容：ViewPager+FragmentPagerAdapter+RadioGroup实现顶部菜单栏

示例一：

下面是res/layout/top1.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="45dp"
    android:background="@color/darkcyan"
    android:gravity="center"
    android:orientation="vertical" >

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="微信"
        android:textSize="20sp" />

</LinearLayout>

下面是res/layout/top2.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="wrap_content"
    android:orientation="vertical" >

    <RadioGroup
        android:id="@+id/id_radioGroup"
        android:layout_width="match_parent"
        android:layout_height="45dp"
        android:background="@color/ivory"
        android:orientation="horizontal"
        android:gravity="center"
        android:padding="5dp" >

        <RadioButton
            android:id="@+id/id_tab1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1.0"
            android:button="@null"
            android:checked="true"
            android:gravity="center"
            android:text="微信"
            android:textColor="@drawable/selector_tab_text_color" />

        <RadioButton
            android:id="@+id/id_tab2"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1.0"
            android:button="@null"
            android:gravity="center"
            android:text="通信录"
            android:textColor="@drawable/selector_tab_text_color" />

        <RadioButton
            android:id="@+id/id_tab3"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1.0"
            android:button="@null"
            android:gravity="center"
            android:text="朋友"
            android:textColor="@drawable/selector_tab_text_color" />
    </RadioGroup>
    
    <ImageView 
        android:id="@+id/id_tab_line"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:background="@drawable/tabline"/>

</LinearLayout>

下面是res/layout/activity_main.xml 布局文件：

<LinearLayout 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:orientation="vertical" >

    <include layout="@layout/top1" />

    <include layout="@layout/top2" />

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

</LinearLayout>

下面是res/drawable/selector_tab_text_color文件

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

下面是res/layout/tab01.xml 布局文件：(tab02、tab03类似就不贴了)

<?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="match_parent"
        android:gravity="center"
        android:text="第一个Tab"
        android:textSize="30sp" />

</LinearLayout>

下面是Tab01Fragment.java文件：（其它二个类似，就不贴了）

public class Tab01Fragment extends Fragment {
	public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {
		View view=inflater.inflate(R.layout.tab01, container, false);
		return view;
	}
}

下面是TabAdapter.java文件：

/**
 * 功能：主页引导栏的三个Fragment页面设置适配器
 */
public class TabAdapter extends FragmentPagerAdapter {
	private List<Fragment> mFragments;

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

	public Fragment getItem(int position) {
		return mFragments.get(position);
	}

	public int getCount() {
		return mFragments.size();
	}
}

下面是MainActivity.java主界面文件：

public class MainActivity extends FragmentActivity {
	private RadioGroup mRadioGroup;
	private RadioButton mRadio01;
	private RadioButton mRadio02;
	private RadioButton mRadio03;

	private ImageView mTabLine;// 指导线
	private int screenWidth;// 屏幕的宽度

	private ViewPager mViewPager;
	private TabAdapter mAdapter;
	private List<Fragment> mFragments = new ArrayList<Fragment>();

	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		requestWindowFeature(Window.FEATURE_NO_TITLE);
		setContentView(R.layout.activity_main);
		initViews();
		initEvent();
	}

	private void initViews() {
		mRadioGroup = (RadioGroup) findViewById(R.id.id_radioGroup);
		mRadio01 = (RadioButton) findViewById(R.id.id_tab1);
		mRadio02 = (RadioButton) findViewById(R.id.id_tab2);
		mRadio03 = (RadioButton) findViewById(R.id.id_tab3);
		
		mTabLine = (ImageView) findViewById(R.id.id_tab_line);
		//获取屏幕的宽度  
		DisplayMetrics outMetrics=new DisplayMetrics();
		getWindow().getWindowManager().getDefaultDisplay().getMetrics(outMetrics);
		screenWidth=outMetrics.widthPixels;
		
		//设置mTabLine宽度//获取控件的(注意：一定要用父控件的LayoutParams写LinearLayout.LayoutParams)
		LinearLayout.LayoutParams lp=(LayoutParams) mTabLine.getLayoutParams();//获取控件的布局参数对象
		lp.width=screenWidth/3;
		mTabLine.setLayoutParams(lp); //设置该控件的layoutParams参数
		
		mFragments.add(new Tab01Fragment());
		mFragments.add(new Tab02Fragment());
		mFragments.add(new Tab03Fragment());
		
		mViewPager=(ViewPager) findViewById(R.id.id_viewpager);
		mAdapter=new TabAdapter(getSupportFragmentManager(), mFragments);
		mViewPager.setAdapter(mAdapter);
	}

	private void initEvent() {
		mRadioGroup.setOnCheckedChangeListener(new OnCheckedChangeListener() {
			public void onCheckedChanged(RadioGroup group, int checkedId) {
				switch (checkedId) {
				case R.id.id_tab1:
					mViewPager.setCurrentItem(0);// 选择某一页
					break;
				case R.id.id_tab2:
					mViewPager.setCurrentItem(1);
					break;
				case R.id.id_tab3:
					mViewPager.setCurrentItem(2);
					break;
				}
			}
		});
		
		mViewPager.setOnPageChangeListener(new TabOnPageChangeListener());  
	}

	/**
	 * 页卡滑动改变事件  
	 */
	public class TabOnPageChangeListener implements OnPageChangeListener {

		/**
		 * 当滑动状态改变时调用  
		 * state=0的时候表示什么都没做，就是停在那
		 * state=1的时候表示正在滑动 
		 * state==2的时候表示滑动完毕了
		 */
		public void onPageScrollStateChanged(int state) {

		}

		/**
		 * 当前页面被滑动时调用   
		 * position:当前页面
		 * positionOffset:当前页面偏移的百分比
		 * positionOffsetPixels:当前页面偏移的像素位置  
		 */
		public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
			LinearLayout.LayoutParams lp=(LayoutParams) mTabLine.getLayoutParams();
			 //获取组件距离左侧组件的距离  
			lp.leftMargin=(int) ((positionOffset+position)*screenWidth/3);
			mTabLine.setLayoutParams(lp);  
		}

		//当新的页面被选中时调用  
		public void onPageSelected(int position) {
			switch (position) {
			case 0:
				mRadio01.setChecked(true);    
				break;
			case 1:
				mRadio02.setChecked(true);    
				break;
			case 2:
				mRadio03.setChecked(true);    
				break;
			}
		}
	}
}

Take your time and enjoy it 要原码的、路过的、学习过的请留个言，顶个呗～～