大致效果是这样。上面页面和底部页面按钮一一对应。
页面滑动底部按钮变化,点击按钮页面变化
大致思路
页面用Viewpager添加类型为FragmentpagerAdapter的Adapter。
使每个分页都是继承Fragment的碎片页面
底部用RadioGroup,RadioButton。
并RadioButton添加点击事件切换Viewpager,ViewPager设置onPageChangeListener改变按钮选中状态
mainactivity.xml
<?xml version="1.0" encoding="utf-8"?>
<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:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_above="@+id/rg_bottom" />
<RadioGroup
android:id="@+id/rg_bottom"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/bg_white"
android:layout_alignParentBottom="true"
android:orientation="horizontal"
>
<!---->
<RadioButton
android:id="@+id/rb_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:checked="false"
android:button="@null"
android:drawableTop="@drawable/selectbotton_menuhome"
android:gravity="center"
android:text="页面一"
android:textSize="13sp"
/>
<RadioButton
android:id="@+id/rb_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:button="@null"
android:checked="false"
android:drawableTop="@drawable/selectbotton_menula"
android:gravity="center"
android:text="页面二"
android:textSize="13sp"
/>
<RadioButton
android:id="@+id/rb_3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:button="@null"
android:checked="false"
android:drawableTop="@drawable/selectbotton_menume"
android:gravity="center"
android:text="页面三"
android:textSize="13sp"
/>
<RadioButton
android:id="@+id/rb_4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:button="@null"
android:checked="false"
android:drawableTop="@drawable/selectbotton_menumore"
android:gravity="center"
android:text="页面四"
android:textSize="13sp"
/>
</RadioGroup>
</RelativeLayout>
xml的RadioButton的图片效果都设置了selector状态选择器的xml文件。能根据checked类型自动变化。举个栗子
selectbotton_menuhome.xml id为rb_1的RadioButton设置的图片引用属性
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!--状态选择器-->
<item
android:drawable="@mipmap/fragment_color_page"
android:state_checked="true"
/>
<item
android:drawable="@mipmap/fragment_grey_page"
android:state_checked="false"
/>
</selector>
MainActivity.java
public class MainActivity extends FragmentActivity implements View.OnClickListener{
private ViewPager viewpager;
private RadioGroup rg_bottom;
private HomeFragmentAdapter adapter;
private RadioButton rb_1,rb_2,rb_3,rb_4;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
viewpager = (ViewPager) findViewById(R.id.viewpager);
rg_bottom = (RadioGroup) findViewById(R.id.rg_bottom);
rb_1 = (RadioButton) findViewById(R.id.rb_1);
rb_2 = (RadioButton) findViewById(R.id.rb_2);
rb_3 = (RadioButton) findViewById(R.id.rb_3);
rb_4 = (RadioButton) findViewById(R.id.rb_4);
FragmentManager manager = getSupportFragmentManager();
adapter = new HomeFragmentAdapter(manager);
viewpager.setAdapter(adapter);
//吧第一个按钮设为选中
rb_1.setChecked(true);
rb_1.setOnClickListener(this);
rb_2.setOnClickListener(this);
rb_3.setOnClickListener(this);
rb_4.setOnClickListener(this);
/**
* 滑动viewpage改变RadioButton
*/
viewpager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
RadioButton radioButton= (RadioButton) rg_bottom.getChildAt(position);
radioButton.setChecked(true);
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
}
/**
* 按按钮更改显示viewpage
* @param v
*/
@Override
public void onClick(View v) {
switch (v.getId())
{
case R.id.rb_1:
viewpager.setCurrentItem(0);
break;
case R.id.rb_2:
viewpager.setCurrentItem(1);
break;
case R.id.rb_3:
viewpager.setCurrentItem(2);
break;
case R.id.rb_4:
viewpager.setCurrentItem(3);
break;
}
}
}
<pre name="code" class="java">
HomeFragmentAdapter.java
public class HomeFragmentAdapted extends FragmentPagerAdapter{
private Fragment[] fragments;
public HomeFragmentAdapted(FragmentManager fm) {
super(fm);
fragments=new Fragment[4];
fragments[0] = new PageActicity_1();
fragments[1] = new PageActicity_2();
fragments[2] = new PageActicity_3();
fragments[3] = new PageActicity_4();
}
//返回一个fragment对象页面
@Override
public Fragment getItem(int i) {
return fragments[i];
}
//页面的数量
@Override
public int getCount() {
return fragments.length;
}
}
PageActivity.java
作为分页的碎片页面被添加在FragmentPagerAdapter里 在这里作为一个activity来写需要的页面代码(引用的layout布局就不写了只设置了背景颜色)
呃 有四个页面就有4个PageActivity 举个栗子就写一个。
public class PageActicity_1 extends Fragment {
@Nullable
@Override
//得到页面布局 并且逻辑代码也能写在这里
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = View.inflate(getContext(), R.layout.activity_page1,null);
return view;
}
}