Android仿微信主界面的實(shí)現(xiàn)方法
本文實(shí)例為大家分享了Android模仿微信主界面展示的具體代碼,供大家參考,具體內(nèi)容如下
先看一下效果圖
實(shí)現(xiàn)的原理:
ViewPager+FragmentPagerAdapter
主界面可分為三部分:
- top標(biāo)題欄就是一個(gè)TextView
- 中間的ViewPager作為顯示的容器,填充Fragment
- bottom是一個(gè)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的布局,為了方便管理將它們的共性抽取出來一個(gè)style
tab有兩種狀態(tài),選中和非選中,因此將其背景做成一個(gè)選擇器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(); } } }
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Android 獲取應(yīng)用簽名的實(shí)現(xiàn)
- Android仿QQ、微信聊天界面長(zhǎng)按提示框效果
- Android仿微信主界面設(shè)計(jì)
- Android App仿微信界面切換時(shí)Tab圖標(biāo)變色效果的制作方法
- Android仿支付寶微信支付密碼界面彈窗封裝dialog
- Android仿微信語音聊天界面設(shè)計(jì)
- Android 使用Fragment模仿微信界面的實(shí)例代碼
- android仿微信聊天界面 語音錄制功能
- Android高仿微信5.2.1主界面及消息提醒
- Android用ActionBar高仿微信主界面的實(shí)例代碼
相關(guān)文章
android實(shí)現(xiàn)倒計(jì)時(shí)動(dòng)態(tài)圈
這篇文章主要為大家詳細(xì)介紹了android實(shí)現(xiàn)倒計(jì)時(shí)動(dòng)態(tài)圈,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-01-01Android 實(shí)例開發(fā)一個(gè)學(xué)生管理系統(tǒng)流程詳解
讀萬卷書不如行萬里路,只學(xué)書上的理論是遠(yuǎn)遠(yuǎn)不夠的,只有在實(shí)戰(zhàn)中才能獲得能力的提升,本篇文章手把手帶你用Java實(shí)現(xiàn)一個(gè)學(xué)生管理系統(tǒng),大家可以在過程中查缺補(bǔ)漏,提升水平2021-11-11Android開發(fā)之電話撥號(hào)器實(shí)例詳解
這篇文章主要介紹了Android開發(fā)之電話撥號(hào)器,結(jié)合實(shí)例形式詳細(xì)分析了Android電話撥號(hào)器的實(shí)現(xiàn)步驟與具體代碼,并附帶了一個(gè)Android開放電話撥號(hào)器的學(xué)習(xí)筆記,需要的朋友可以參考下2015-12-12Android實(shí)現(xiàn)IM多人員組合的群組頭像
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)IM多人員組合的群組頭像,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-10-10Android實(shí)現(xiàn)可以展開的TextView
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)可以展開的TextView,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-11-11android 自定義TabActivity的實(shí)例方法
系統(tǒng)自帶的TabActivity的效果不甚理想。開發(fā)中對(duì)TabActivity自定義可能有兩種:第一種:改變TAB行的位置,如放到頁面下方。第二種:對(duì)TabHost圖片的自定義2013-11-11A07_TimePicker & DatePicker & AnalogClock & Digi
本文將帶領(lǐng)大家一起學(xué)習(xí)時(shí)間日期和時(shí)鐘的設(shè)置。A07_TimePicker & DatePicker & AnalogClock & DigitalClock 的設(shè)置,感興趣的朋友可以參考下哈2013-06-06