您的位置:首页 > 移动开发 > 微信开发

仿照微信的界面,即ViewPager+Fragment的结合使用

2015-11-08 20:34 218 查看
主布局文件:

android:drawableTop="@drawable/weixin_bg"用的是状态选择器,所以要写4个状态选择器,图片的


<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"
tools:context=".MainActivity" >

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

<RadioGroup
android:id="@+id/rg"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="horizontal" >

<!-- android:button="@null"    表示去掉RadioButton中的圈圈 -->

<RadioButton
android:id="@+id/rb_weixin"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:button="@null"
android:drawableTop="@drawable/weixin_bg"
android:gravity="center_vertical"
android:text="微信"
android:textSize="16sp" />

<RadioButton
android:id="@+id/rb_contact"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:button="@null"
android:drawableTop="@drawable/contact_bg"
android:gravity="center_vertical"
android:text="通讯"
android:textSize="16sp" />

<RadioButton
android:id="@+id/rb_found"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:button="@null"
android:drawableTop="@drawable/found_bg"
android:gravity="center_vertical"
android:text="发现"
android:textSize="16sp" />

<RadioButton
android:id="@+id/rb_me"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:button="@null"
android:drawableTop="@drawable/me_bg"
android:gravity="center_vertical"
android:text="我"
android:textSize="16sp" />
</RadioGroup>

</RelativeLayout>


MainActivity代码:

public class MainActivity extends FragmentActivity implements OnCheckedChangeListener, OnPageChangeListener {
private static final int WEIXIN = 0;
private static final int CONTACT = 1;
private static final int FOUND= 2;
private static final int ME= 3;
private ViewPager vp;
/**RadioGroup*/
private RadioGroup rg;
//四个RadioButton
private RadioButton rb_weixin;
private RadioButton rb_contact;
private RadioButton rb_found;
private RadioButton rb_me;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
vp = (ViewPager) findViewById(R.id.vp);
rg = (RadioGroup) findViewById(R.id.rg);
rg.setOnCheckedChangeListener(this);
vp.setAdapter(new MainAdapter(getSupportFragmentManager()));

vp.setOnPageChangeListener(this);

rb_weixin = (RadioButton) findViewById(R.id.rb_weixin);
rb_contact = (RadioButton) findViewById(R.id.rb_contact);
rb_found = (RadioButton) findViewById(R.id.rb_found);
rb_me = (RadioButton) findViewById(R.id.rb_me);

//一进入程序就让微信RadioButton显示为被点击状态
rb_weixin.setChecked(true);

}
class MainAdapter extends FragmentPagerAdapter{
List<Fragment> list=new ArrayList<Fragment>();
private WeixinFragment weixinFragment;
private ContactFragment contactFragment;
private FoundFragment foundFragment;
private MeFragment meFragment;

public MainAdapter(FragmentManager fm) {
super(fm);
weixinFragment = new WeixinFragment();
contactFragment = new ContactFragment();
foundFragment = new FoundFragment();
meFragment = new MeFragment();
list.add(weixinFragment);
list.add(contactFragment);
list.add(foundFragment);
list.add(meFragment);

}

@Override
public Fragment getItem(int position) {
Fragment fragment = list.get(position);
return fragment;
}

@Override
public int getCount() {
return list.size();
}

}
//RadioButton被点击时
@Override
public void onCheckedChanged(RadioGroup group, int checkedId) {
switch (checkedId) {
case R.id.rb_weixin:
vp.setCurrentItem(WEIXIN);
break;
case R.id.rb_contact:
vp.setCurrentItem(CONTACT);
break;
case R.id.rb_found:
vp.setCurrentItem(FOUND);
break;
case R.id.rb_me:
vp.setCurrentItem(ME);
break;

default:
break;
}
}

//ViewPager滑动状态改变时
@Override
public void onPageScrollStateChanged(int arg0) {
System.out.println("onPageScrollStateChanged");
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
System.out.println("onPageScrolled");
}
//当ViewPager滑动停止时
@Override
public void onPageSelected(int position) {
System.out.println("onPageSelected");

switch (position) {
case WEIXIN:
rb_weixin.setChecked(true);
break;
case CONTACT:
rb_contact.setChecked(true);
break;
case FOUND:
rb_found.setChecked(true);
break;
case ME:
rb_me.setChecked(true);
break;

default:
break;
}
}
}


这是其中一个Fragment,其它三个一模一样:

public class WeixinFragment extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View view = View.inflate(getActivity(), R.layout.fragment_home, null);
return view;
}
}


这样就完成了,这是结果图:




不知道为什么,底部几张图片不能完整地显示,文字也不能居中显示,有没有高手指点一二?
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: