Radiobutton+ViewPager+Fragment实现微信类的界面(底栏+左右滑动)
1.首先是主布局
两个Fragment是顶栏和底栏,fragment的name是对应的继承了 Fragment的类名,在这些类中界面内容处理,Fragment与Activity类似。
中间是
ViewPager,
主要内容会加进ViewPager里,根据左右滑动实现显示哪一个页面。
在底栏中加上4个RadioButton,可以点击来切换内容。
主布局文件
<pre name="code" class="html"><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">
<fragment
android:name="com.zjl.friendlocationmap.BottomFragment"
android:layout_alignParentBottom="true"
android:id="@+id/bottom_fragment"
android:layout_width="fill_parent"
android:layout_height="53dp"
/>
<fragment
android:layout_alignParentTop="true"
android:id="@+id/top_fragment"
android:name="com.zjl.friendlocationmap.TopFragment"
android:layout_width="fill_parent"
android:layout_height="45dp"
/>
<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_above="@id/bottom_fragment"
android:layout_below="@id/top_fragment"
/>
</RelativeLayout >
底栏布局
<pre name="code" class="html"><?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@drawable/content_bg">
<RadioGroup
android:id="@+id/tab_menu"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal" >
<RadioButton
android:id="@+id/msgButton"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="bottom|start"
android:layout_weight="1"
android:button="@null"
android:gravity="center_horizontal|bottom"
android:paddingTop="2dp"
android:text="消息"
android:textSize="6pt"
android:drawableTop="@drawable/bottom_msg"
android:textColor="@drawable/bottom_text_color"
/>
<RadioButton
android:id="@+id/friendButton"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="bottom"
android:layout_weight="1"
android:button="@null"
android:drawableTop="@drawable/bottom_friend"
android:textColor="@drawable/bottom_text_color"
android:gravity="center_horizontal|bottom"
android:paddingTop="2dp"
android:text="通讯录"
android:textSize="6pt"
android:checked="true"
/>
<RadioButton
android:id="@+id/mapButton"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="bottom"
android:layout_weight="1"
android:button="@null"
android:drawableTop="@drawable/bottom_friend_state"
android:textColor="@drawable/bottom_text_color"
android:gravity="center_horizontal|bottom"
android:paddingTop="2dp"
android:text="发现"
android:textSize="6pt"
/>
<RadioButton
android:id="@+id/myInfo"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="bottom"
android:layout_weight="1"
android:button="@null"
android:drawableTop="@drawable/bottom_myinfo"
android:textColor="@drawable/bottom_text_color"
android:gravity="center_horizontal|bottom"
android:paddingTop="2dp"
android:text="我"
android:textSize="6pt"
/>
</RadioGroup>
<TextView
android:id="@+id/notice_count_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:background="@drawable/unread_count_bg"
android:layout_marginLeft="56dip"
android:gravity="center"
android:text="0"
android:textSize="10dip"
android:layout_marginTop="1dp"
android:textStyle="bold"
android:visibility="visible" />
</RelativeLayout>
顶栏类似,此处省略
</pre><pre name="code" class="java">2.主Activity,主Activity要继承 FragmentActivity
在这个类中首先对没个Fragment进行实例化,通过实现FragmentPagerAdapter适配器,<span style="font-family: Arial, Helvetica, sans-serif;">将</span><span style="font-family: Arial, Helvetica, sans-serif;">Fragment</span><span style="font-family: Arial, Helvetica, sans-serif;">加到ViewPager中</span>
<span style="font-family:Arial, Helvetica, sans-serif;">适配器代码:</span><pre name="code" class="java">//ViewPager适配器
public class MyViewPagerAdapter extends FragmentPagerAdapter{
private List<Fragment> mFragments;
public MyViewPagerAdapter(android.support.v4.app.FragmentManager fm) {
super(fm);
// TODO Auto-generated constructor stub
}
public MyViewPagerAdapter(android.support.v4.app.FragmentManager fm,List<Fragment> fragments) {
super(fm);
// TODO Auto-generated constructor stub
mFragments=fragments;
}
@Override
public Fragment getItem(int arg0) {
// TODO Auto-generated method stub
return mFragments.get(arg0);
}
@Override
public int getCount() {
// TODO Auto-generated method stub
return mFragments.size();
}
}
}
添加Fragment内容到Viewpager:
<pre name="code" class="java">//构造适配器
List<Fragment> fragments=new ArrayList<Fragment>();
fragments.add(new FriendFragment());
fragments.add(new MapFragment());
viewPagerAdapter = new MyViewPagerAdapter(getSupportFragmentManager(), fragments);
//设定适配器
ViewPager vp = (ViewPager)findViewById(R.id.viewPager);
vp.setAdapter(viewPagerAdapter);
上面已经实现左右滑动实现界面切换
</pre><pre name="code" class="java">
3.有时还需要在页面切换时同时改变其他项目,如切换标题栏文字,或选中当前底栏,这可以在ViewPager的OnPageChangeListener
监听事件中做处理。主要是onPageSelected事件,参数是page的NO号,就是添加的顺序,从零开始
<pre name="code" class="java">vp.setOnPageChangeListener(new OnPageChangeListener() {
@Override
public void onPageSelected(int arg0) {
switch (arg0) {
case 0://相应处理
RadioButton rb0 = (RadioButton) findViewById(R.id.friendButton);
rb0.setChecked(true);
break;
case 1:<span style="font-family: Arial, Helvetica, sans-serif;">//相应处理</span>
RadioButton rb1 = (RadioButton) findViewById(R.id.mapButton);
rb1.setChecked(true);
break;
}
}