Android仿微信主界面的實(shí)現(xiàn)方法
本文實(shí)例為大家分享了Android模仿微信主界面展示的具體代碼,供大家參考,具體內(nèi)容如下
先看一下效果圖

實(shí)現(xiàn)的原理:
ViewPager+FragmentPagerAdapter
主界面可分為三部分:
- top標(biāo)題欄就是一個TextView
- 中間的ViewPager作為顯示的容器,填充Fragment
- bottom是一個RadioGroup
這里為了布局的優(yōu)化,將top和bottom抽取出來 ,然后用include將其導(dǎo)入主布局,如下
<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"
tools:context=".MainActivity" >
<include layout="@layout/top" />
<android.support.v4.view.ViewPager
android:id="@+id/vp_content"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" >
</android.support.v4.view.ViewPager>
<include layout="@layout/bottom" />
</LinearLayout>
bottom_tab的布局,為了方便管理將它們的共性抽取出來一個style
tab有兩種狀態(tài),選中和非選中,因此將其背景做成一個選擇器selector
<?xml version="1.0" encoding="utf-8"?>
<RadioGroup xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/rg_tab_container"
android:layout_width="match_parent"
android:layout_height="@dimen/bar_height"
android:background="@drawable/bottom_bar"
android:gravity="center"
android:orientation="horizontal" >
<RadioButton
android:id="@+id/rb_tab_weixin"
style="@style/TabStyle"
android:checked="true"
android:drawableTop="@drawable/tab_weixin_selector"
android:text="@string/tab_weixin" />
<RadioButton
android:id="@+id/rb_tab_friend"
style="@style/TabStyle"
android:drawableTop="@drawable/tab_friend_selector"
android:text="@string/tab_friend" />
<RadioButton
android:id="@+id/rb_tab_contact"
style="@style/TabStyle"
android:drawableTop="@drawable/tab_contact_selector"
android:text="@string/tab_contact" />
<RadioButton
android:id="@+id/rb_tab_setting"
style="@style/TabStyle"
android:drawableTop="@drawable/tab_setting_selector"
android:text="@string/tab_setting" />
</RadioGroup>
最后看一下作為Controller的Activity
- 先將需要的控件引入
- ViewPager內(nèi)容的填充,主要是FragmentPagerAdapter適配器
- 將Fragment的初始化,將主界面顯示的內(nèi)容分別用Fragment管理,方便代碼的管理。
- bottom_tab和ViewPager的關(guān)聯(lián),通過監(jiān)聽ViewPager頁面的改變來改變tab的選中狀態(tài),然后再通過RadioGroup的事件來改變ViewPager的頁面。
/**
* 主界面 模仿微信界面
*
* @author admin
*
*/
public class MainActivity extends FragmentActivity {
/** tab */
private RadioGroup mRadioGroup;
private RadioButton weixinRadioButton;
private RadioButton friendRadioButton;
private RadioButton contactRadioButton;
private RadioButton settingRadioButton;
/** 顯示內(nèi)容容器 */
private ViewPager mViewPager;
private List<Fragment> fragments;
private Fragment mWeiXinFragment;
private Fragment mFriendFragment;
private Fragment mContactFragment;
private Fragment mSettingFragment;
private FragmentPagerAdapter mFragmentPagerAdapter;
private final static int TAB_WEIXIN = 0;
private final static int TAB_FRIEND = 1;
private final static int TAB_CONTACT = 2;
private final static int TAB_SETTING = 3;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
initView();
initEvent();
}
private void initEvent() {
mRadioGroup.setOnCheckedChangeListener(myCheckedChangeListener);
mViewPager.setOnPageChangeListener(myOnPageChangeListener);
}
private void initView() {
mRadioGroup = (RadioGroup) findViewById(R.id.rg_tab_container);
weixinRadioButton = (RadioButton) findViewById(R.id.rb_tab_weixin);
friendRadioButton = (RadioButton) findViewById(R.id.rb_tab_friend);
contactRadioButton = (RadioButton) findViewById(R.id.rb_tab_contact);
settingRadioButton = (RadioButton) findViewById(R.id.rb_tab_setting);
mViewPager = (ViewPager) findViewById(R.id.vp_content);
fragments = new ArrayList<Fragment>();
mWeiXinFragment = new WeiXinFragment();
mFriendFragment = new FriendFragment();
mContactFragment = new ContactFragment();
mSettingFragment = new SettingFragment();
fragments.add(mWeiXinFragment);
fragments.add(mFriendFragment);
fragments.add(mContactFragment);
fragments.add(mSettingFragment);
//這里需要繼承FragmentActivity
mFragmentPagerAdapter = new FragmentAdapter(getSupportFragmentManager());
mViewPager.setAdapter(mFragmentPagerAdapter);
}
/**
* 當(dāng)頁面切換時(shí),tab也跟著切換
*/
private OnPageChangeListener myOnPageChangeListener = new OnPageChangeListener() {
@Override
public void onPageSelected(int arg0) {
switch (arg0) {
case TAB_WEIXIN:
if (!weixinRadioButton.isChecked()) {
weixinRadioButton.setChecked(true);
}
break;
case TAB_FRIEND:
friendRadioButton.setChecked(true);
break;
case TAB_CONTACT:
contactRadioButton.setChecked(true);
break;
case TAB_SETTING:
settingRadioButton.setChecked(true);
break;
}
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}
@Override
public void onPageScrollStateChanged(int arg0) {
}
};
/**
* 點(diǎn)擊tab,切換到相應(yīng)的頁面
*/
private OnCheckedChangeListener myCheckedChangeListener = new OnCheckedChangeListener() {
@Override
public void onCheckedChanged(RadioGroup group, int checkedId) {
switch (checkedId) {
case R.id.rb_tab_weixin:
mViewPager.setCurrentItem(TAB_WEIXIN);
break;
case R.id.rb_tab_friend:
mViewPager.setCurrentItem(TAB_FRIEND);
break;
case R.id.rb_tab_contact:
mViewPager.setCurrentItem(TAB_CONTACT);
break;
case R.id.rb_tab_setting:
mViewPager.setCurrentItem(TAB_SETTING);
break;
}
}
};
private class FragmentAdapter extends FragmentPagerAdapter {
public FragmentAdapter(FragmentManager fm) {
super(fm);
}
@Override
public Fragment getItem(int arg0) {
return fragments.get(arg0);
}
@Override
public int getCount() {
return fragments.size();
}
}
}
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
android實(shí)現(xiàn)倒計(jì)時(shí)動態(tài)圈
這篇文章主要為大家詳細(xì)介紹了android實(shí)現(xiàn)倒計(jì)時(shí)動態(tài)圈,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-01-01
Android 實(shí)例開發(fā)一個學(xué)生管理系統(tǒng)流程詳解
讀萬卷書不如行萬里路,只學(xué)書上的理論是遠(yuǎn)遠(yuǎn)不夠的,只有在實(shí)戰(zhàn)中才能獲得能力的提升,本篇文章手把手帶你用Java實(shí)現(xiàn)一個學(xué)生管理系統(tǒng),大家可以在過程中查缺補(bǔ)漏,提升水平2021-11-11
Android實(shí)現(xiàn)IM多人員組合的群組頭像
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)IM多人員組合的群組頭像,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-10-10
Android實(shí)現(xiàn)可以展開的TextView
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)可以展開的TextView,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-11-11
android 自定義TabActivity的實(shí)例方法
系統(tǒng)自帶的TabActivity的效果不甚理想。開發(fā)中對TabActivity自定義可能有兩種:第一種:改變TAB行的位置,如放到頁面下方。第二種:對TabHost圖片的自定義2013-11-11
A07_TimePicker & DatePicker & AnalogClock & Digi
本文將帶領(lǐng)大家一起學(xué)習(xí)時(shí)間日期和時(shí)鐘的設(shè)置。A07_TimePicker & DatePicker & AnalogClock & DigitalClock 的設(shè)置,感興趣的朋友可以參考下哈2013-06-06

