Android RadioGroup+ViewPager+ActionBar實現仿微信6.0介面(底部滑動選單欄+導航欄)
阿新 • • 發佈：2019-02-18
轉載請註明原文地址：http://blog.csdn.net/anyfive/article/details/41296341
本文主要使用RadioGroup+ViewPager來實現滑動介面，使用ActionBar來實現頂部選單欄。先上圖（使用GifCam錄製）。
Ps：美工是永遠的痛，圖片是從微信反編譯出來的資源裡面拿過來用的，不知道為什麼用上去就變得這麼醜...
專案結構：
java檔案：
xml檔案：
我們來看一下底部選單欄的實現。
之前看到網上的實現大部分都是採用TabHost來做的，但是TabActivity在API 13已經被丟棄了，用是可以用，不過編譯器會提示你TabActivity 已經過時了，建議你採用FragmentActivity。FragmenActivity是一個很有用的類，無論你要使用FragmentTabHost，還是ViewPager，或者兩者結合，都需要繼承這個類。
而在這裡，我使用的是更加簡潔的ViewPager+RadioGroup組合。先看xml佈局檔案：
activity_main.xml將ViewPager的layout_height屬性設定為0dp，layout_weight屬性設定為1.0，用於填充導航欄下選單欄上的區域，也就是需要滑動的區域。<?xml version="1.0" encoding="utf-8"?> <LinearLayout android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent" xmlns:android="http://schemas.android.com/apk/res/android"> <android.support.v4.view.ViewPager android:id="@+id/main_ViewPager" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1.0" /> <RadioGroup android:id="@+id/main_tab_RadioGroup" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="bottom" android:background="@color/main_tab_bg" android:gravity="center_vertical" android:orientation="horizontal" > <RadioButton android:id="@+id/radio_chats" style="@style/main_tab" android:drawableTop="@drawable/icon_chat" android:text="微信" android:checked="true" /> <RadioButton android:id="@+id/radio_contacts" style="@style/main_tab" android:drawableTop="@drawable/icon_contacts" android:text="通訊錄" /> <RadioButton android:id="@+id/radio_discover" style="@style/main_tab" android:drawableTop="@drawable/icon_discover" android:text="發現" /> <RadioButton android:id="@+id/radio_me" style="@style/main_tab" android:drawableTop="@drawable/icon_me" android:text="我" /> </RadioGroup> </LinearLayout>
需要注意的是：RadioButton的style資原始檔用於定義其外觀屬性，如字型顏色、字型大小、背景顏色等，其中android:button必須設定成@null型別，從而去掉單選框。
此外，RadioButton載入的drawable資源為xml檔案，其中定義了按鈕按下和沒按下的顯示圖片。其中一個xml檔案為：
icon_chats.xml
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android" > <item android:state_checked="false" android:drawable="@drawable/chats"/> <item android:state_checked="true" android:drawable="@drawable/chats_light"/> </selector>
至此，xml檔案完成。現在我們來看一下java檔案。
MainActivity.java
public class MainActivity extends FragmentActivity implements OnCheckedChangeListener
{
//ViewPager控制元件
private ViewPager main_viewPager ;
//RadioGroup控制元件
private RadioGroup main_tab_RadioGroup ;
//RadioButton控制元件
private RadioButton radio_chats , radio_contacts , radio_discover , radio_me ;
//型別為Fragment的動態陣列
private ArrayList<Fragment> fragmentList ;
@Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//介面初始函式，用來獲取定義的各控制元件對應的ID
InitView();
//ViewPager初始化函式
InitViewPager();
}
public void InitView()
{
main_tab_RadioGroup = (RadioGroup) findViewById(R.id.main_tab_RadioGroup) ;
radio_chats = (RadioButton) findViewById(R.id.radio_chats) ;
radio_contacts = (RadioButton) findViewById(R.id.radio_contacts) ;
radio_discover = (RadioButton) findViewById(R.id.radio_discover) ;
radio_me = (RadioButton) findViewById(R.id.radio_me) ;
main_tab_RadioGroup.setOnCheckedChangeListener(this);
}
public void InitViewPager()
{
main_viewPager = (ViewPager) findViewById(R.id.main_ViewPager);
fragmentList = new ArrayList<Fragment>() ;
Fragment chatsFragment = new ChatsFragment() ;
Fragment contactsFragment = new ContactsFragment();
Fragment discoverFragment = new DiscoverFragment();
Fragment meFragment = new MeFragment();
//將各Fragment加入陣列中
fragmentList.add(chatsFragment);
fragmentList.add(contactsFragment);
fragmentList.add(discoverFragment);
fragmentList.add(meFragment);
//設定ViewPager的設配器
main_viewPager.setAdapter(new MyAdapter(getSupportFragmentManager() , fragmentList));
//當前為第一個頁面
main_viewPager.setCurrentItem(0);
//ViewPager的頁面改變監聽器
main_viewPager.setOnPageChangeListener(new MyListner());
}
public class MyAdapter extends FragmentPagerAdapter
{
ArrayList<Fragment> list ;
public MyAdapter(FragmentManager fm , ArrayList<Fragment> list)
{
super(fm);
this.list = list ;
}
@Override
public Fragment getItem(int arg0) {
return list.get(arg0);
}
@Override
public int getCount() {
return list.size();
}
}
public class MyListner implements OnPageChangeListener
{
@Override
public void onPageScrollStateChanged(int arg0) {
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}
@Override
public void onPageSelected(int arg0) {
//獲取當前頁面用於改變對應RadioButton的狀態
int current = main_viewPager.getCurrentItem() ;
switch(current)
{
case 0:
main_tab_RadioGroup.check(R.id.radio_chats);
break;
case 1:
main_tab_RadioGroup.check(R.id.radio_contacts);
break;
case 2:
main_tab_RadioGroup.check(R.id.radio_discover);
break;
case 3:
main_tab_RadioGroup.check(R.id.radio_me);
break;
}
}
}
@Override
public void onCheckedChanged(RadioGroup radioGroup, int CheckedId)
{
//獲取當前被選中的RadioButton的ID，用於改變ViewPager的當前頁
int current=0;
switch(CheckedId)
{
case R.id.radio_chats:
current = 0 ;
break ;
case R.id.radio_contacts:
current = 1 ;
break;
case R.id.radio_discover:
current = 2 ;
break;
case R.id.radio_me:
current = 3 ;
break ;
}
if(main_viewPager.getCurrentItem() != current)
{
main_viewPager.setCurrentItem(current);
}
}
}MainActivity檔案中主要是定義ViewPager的介面卡和事件監聽器，RadioGroup的事件監聽器。
加上各Fragment的佈局檔案和java檔案，滑動切換選單欄就完成了。
如圖：
現在選單欄有了，我們給他加個導航欄。導航欄我們用到的是ActionBar，它是在3.0之後的版本加入的。
首先，我們先編寫資源目錄下memu資料夾下的main.xml檔案。程式碼如下：
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
tools:context="com.example.mywinxintest.MainActivity" >
<item
android:id="@+id/action_search"
android:actionViewClass="android.widget.SearchView"
android:icon="@drawable/action_search"
android:showAsAction="always|collapseActionView"
android:title="Search"
/>
<item
android:id="@+id/action_plus"
android:actionProviderClass="com.example.actionbar.PlusActionProvider"
android:icon="@drawable/action_more"
android:showAsAction="always"
android:title="@null"
/>
</menu>在這裡我們用到一個類叫做PlusActionProvider，該類是自定義的一個繼承ActionProvider的類，它可以將一個Action按鈕替換成一個自定義佈局。
我們來看一下這個類。
PlusActionProvider.java
public class PlusActionProvider extends ActionProvider
{
private Context context ;
//構造方法
public PlusActionProvider(Context context) {
super(context);
this.context = context ;
}
@Override
public View onCreateActionView() {
return null;
}
@Override
public void onPrepareSubMenu(SubMenu submenu)
{
submenu.clear();
//增加子選單並設定點選事件監聽器
submenu.add("發起群聊").setIcon(R.drawable.action_group_chat).setOnMenuItemClickListener(new OnMenuItemClickListener() {
@Override
public boolean onMenuItemClick(MenuItem arg0) {
Toast.makeText(context, "您點選了“發起群聊”選項", 5000).show();
return true;
}
});
submenu.add("新增朋友").setIcon(R.drawable.action_add_contacts).setOnMenuItemClickListener(new OnMenuItemClickListener() {
@Override
public boolean onMenuItemClick(MenuItem arg0) {
Toast.makeText(context, "您點選了“新增朋友”選項", 5000).show();
return true;
}
});
submenu.add("掃一掃").setIcon(R.drawable.action_scan_qr_code).setOnMenuItemClickListener(new OnMenuItemClickListener() {
@Override
public boolean onMenuItemClick(MenuItem arg0) {
Toast.makeText(context, "您點選了“掃一掃”選項", 5000).show();
return true;
}
});
submenu.add("意見反饋").setIcon(R.drawable.action_feedback).setOnMenuItemClickListener(new OnMenuItemClickListener() {
@Override
public boolean onMenuItemClick(MenuItem arg0) {
Toast.makeText(context, "您點選了“意見反饋”選項", 5000).show();
return true;
}
});
}
@Override
public boolean hasSubMenu()
{
return true;
}
}至此，我們的介面完成了。效果圖便是文章開頭的GIF圖片。
其實大家可以發現，我們的導航欄與微信6.0的導航欄還是有所不同的，比如我們的導航欄左邊有圖示，微信的沒有；點選搜尋按鈕後的介面也不同。
滑動切換選單欄時，我們沒有微信的淡入淡出效果。
對於這些實現，博主也沒有找到辦法。希望大家知道的可以告訴博主。
雖然沒有和微信完全一樣，但是相信在一些簡單的開發中使用起來也是綽綽有餘了。
原始碼下載地址：http://download.csdn.net/detail/anyfive/8179143