fragment+viewpager+radioButton设计滑动导航界面

最近学习到了viewpager的使用，利用fragment+viewpager+radioButton组合进行了一个导航菜单加界面的开发，再次分享一下，自己也算是复习一下。

首先新建一个工程，我现在的这个sdk的版本，新建工程默认创建一个activity，使用的是fragment实现，用着不太习惯，我一般会修改为原来的模式，一个activity，加载一个layout作为主界面，然后删掉多余的代码，运行一下，主界面出来了：

然后我们在界面布局文件中区调textview,，放一个viewpager的组件，铺满全屏幕：

    <android.support.v4.view.ViewPager
        android:id="@+id/mViewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

新建三个布局文件，很简单的就行，分别有一个按钮，作为我们viewpager里面的界面元素，这里就不列出来了。

接下来新建三个fragment的类，继承自v4的Fragment，并重写其onCreateView方法，初始化将每个Fragment的界面，下面列出其中一个代码片段：

package com.example.fragmentviewpager;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class FragmentOne extends Fragment {

	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		View view = inflater.inflate(R.layout.fragment_page1, container,false);
		return view;
	}
}

接下来就要在activity中去初始化viewpager啦，先实例化viewpager对象，拿到我们的控件，并初始化Fragment数组，

private ViewPager viewPager;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		viewPager = (ViewPager)findViewById(R.id.mViewPager);
		Fragment fragmentOne = new FragmentOne();
  
                Fragment fragmentTwo = new FragmentTwo();
  
                Fragment fragmentThree = new FragmentThree();
  
                fragments = new Fragment[]{fragmentOne,fragmentTwo,fragmentThree};
	}

然后我们就要给它设置适配器，还没有，我们创建一个适配器类，继承自FragmentPagerAdapter，然后重写父类的抽象法方法，重写构造方法，构造数据源，可以直接写在activity中，作为内部类：

class MyViewPagerAdapter extends FragmentPagerAdapter{

		public MyViewPagerAdapter(FragmentManager fm) {
			super(fm);
		}

		@Override
		public Fragment getItem(int index) {
			return fragments[index];
		}

		@Override
		public int getCount() {
			return fragments.length;
		}
		
	}

接下来在onCreate方法中初始化我们的adapter，给viewpager设置上：

		MyViewPagerAdapter adapter = new MyViewPagerAdapter(getSupportFragmentManager());
		viewPager.setAdapter(adapter);

运行一下，我们的viewpager+fragment就出现啦！fragment的好处就是可以与activity进行分离，传统的方式需要在activity中加载所有视图并初始化各种操作，造成activity代码杂乱。

接下来我们就要开始添加标题，上下都可以，我把它放在上面，标题栏放几个textView，设置其点击事件，并高亮当前选中页就可以，我采用radiobutton的方式，来进行切换。

我们现在viewpager组件上面添加一个radiogroup，里面我们通过动态的方式创建radioButton，这样添加一页的布局文件不需要修改：

     <RadioGroup
          android:id="@+id/radioGroup"
          android:layout_width="match_parent"
          android:layout_height="38dip"
          android:layout_alignParentTop="true"
          android:background="#000000"
          android:orientation="horizontal" />

然后我们新建一个radiobutton的布局文件nav_radiogroup_item.xml，设置一下radiobutton的样式，

<?xml version="1.0" encoding="utf-8"?>
<RadioButton xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="0dip"
    android:layout_height="fill_parent"
    android:background="@drawable/rb_fouce_bg"
    android:button="@null"
    android:checked="false"
    android:gravity="center"
    android:text=""
    android:textColor="@drawable/rb_blue_bg"
    android:textSize="14.0dip" />

可以看到radiobutton的样式中，背景和文字显示都使用了drawable的方式，使用了两个selector，处理单击以及选中时背景和文字的交替变化，两个selector文件如下：

rb_blue_bg.xml处理文字颜色

<?xml version="1.0" encoding="UTF-8"?>
<selector
  xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true" android:color="#5AB0EB" />
    <item android:state_checked="false" android:color="#ffffff"/>
</selector>

rb_fouce_bg.xml处理背景颜色

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:state_pressed="true" android:drawable="@color/blue"/>
    <item android:drawable="@color/translate"></item>
</selector>

在背景颜色处理是用到了color资源，在我们的colors.xml中定义需要的颜色：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="blue">#99FFFF</color>
    <color name="translate">#000000</color>
    <color name="black">#000000</color>
    <color name="white">#ffffff</color>
    <color name="green">#ff0000</color>
    <color name="red">#00ffff</color>
</resources>

接下来处理标题资源文件，我们卸载arrays.xml里面，方便配置：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string-array name="titles">
        <item >页面1</item>
        <item >页面2</item>
        <item >页面3</item>
    </string-array>
</resources>

资源文件处理完毕，现在开始代码处理，在activity中初始化radiogroup以及我们的标题数组：

		radioGroup = (RadioGroup)findViewById(R.id.radioGroup);
		titles = getResources().getStringArray(R.array.titles);

接下来动态创建radiobutton添加到radiogroup中去，需要计算一下每个按钮的宽度：

		//计算每个标题的宽度
		Display display = getWindowManager().getDefaultDisplay();
		DisplayMetrics dm = new DisplayMetrics();
		display.getMetrics(dm);
		titleWidth = dm.widthPixels / titles.length;
		//动态添加radiobutton
		RadioButton rb = null;
		radioGroup.removeAllViews();
		LayoutInflater inflater = LayoutInflater.from(this);
		for (int i = 0; i < titles.length; i++) {
			//从布局中读取单选按钮布局
			 rb = (RadioButton)inflater.inflate(R.layout.nav_radiogroup_item, null);
			 //设置显示文字
			 rb.setText(titles[i]);
			 //设置id。不能丢，区分用
			 rb.setId(i);
			 rb.setLayoutParams(new LayoutParams(titleWidth,LayoutParams.MATCH_PARENT));
			 if (i == 0) {
				 rb.setChecked(true);
			 }
			 radioGroup.addView(rb);
		}

运行一下，我们的标题出来了：

但是和viewpager还不同步，下面开始写单选按钮时间和viewpager的选择事件：

//单选按钮事件
		radioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
			
			@Override
			public void onCheckedChanged(RadioGroup group, int checkedId) {
				//选中时viewpager联动
				viewPager.setCurrentItem(checkedId);
			}
		});
		//viewpager选中事件
		viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
			
			@Override
			public void onPageSelected(int index) {
				//选中时模拟单选按钮的单击事件
				((RadioButton)radioGroup.getChildAt(index)).performClick();
			}
			
			@Override
			public void onPageScrolled(int arg0, float arg1, int arg2) {
				
			}
			
			@Override
			public void onPageScrollStateChanged(int arg0) {
				
			}
		});

<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">
     <RadioGroup
          android:id="@+id/radioGroup"
          android:layout_width="match_parent"
          android:layout_height="38dip"
          android:layout_alignParentTop="true"
          android:background="#000000"
          android:orientation="horizontal" />
     <ImageView 
	    android:id="@+id/splitImage"
	    android:layout_below="@id/radioGroup"
	    android:layout_width="5dip"
	    android:layout_height="5dip"
	    android:background="#5AB0EB"
	    android:scaleType="matrix"/>
    <android.support.v4.view.ViewPager
        android:layout_below="@id/splitImage"
        android:id="@+id/mViewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</RelativeLayout>

splitImage = (ImageView)findViewById(R.id.splitImage);
		LayoutParams layoutParams = splitImage.getLayoutParams();
		layoutParams.width = titleWidth;

修改单选按钮单击事件，增加imageView的动画效果：

//单选按钮事件
		radioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
			
			@Override
			public void onCheckedChanged(RadioGroup group, int checkedId) {
				//选中时viewpager联动
				viewPager.setCurrentItem(checkedId);
				View radioButton = group.getChildAt(checkedId);
				//创建位移动画,从当前位置移动到新位置
				Animation animation = new TranslateAnimation(splitImageLeft, radioButton.getLeft(), 0f, 0f);
				animation.setDuration(300);
				animation.setFillAfter(true);
				splitImage.startAnimation(animation);
				//记录当前位置
				splitImageLeft = radioButton.getLeft();
			}
		});

运行效果，差不多了：

fragment+viewpager+radioButton设计滑动导航界面

猜你喜欢