多種方式實現底部選單欄（仿微信介面）

阿新 • • 發佈：2019-01-20

關於底部選單是什麼，我想沒必要介紹了，在市場上的APP裡太常見了，這裡提供兩種方式來實現。

記得之前寫過幾篇關於底部選單實現的方法，有興趣的朋友可以看看：

今天帶來種相對更通俗易懂的寫法，不再和過去一樣去沿用TabHost了，這次我們直接用LinearLayout佈局來實現，先來看下實現效果圖：

中間內容區域有兩種實現方式：

1、ViewPager　　--可滑動介面　　　　　　2、Fragment　　--固定介面

1、介面分析

這裡有個小技巧，把底部選單欄的每一個小的LinearLayout的寬度都設定成0dp，然後用weight權重去分配它，中間內容區域也是把高度設定成0dp，然後用weight權重去分配它。（weight預設是把介面裡空閒的位置作為劃分位置，所以這裡的寬度或者高度要注意設定成0dp）

2、具體實現(內容區域為ViewPager可滑動介面)

佈局檔案：

activity_top.xml（頂部佈局）

 1 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 2     xmlns:tools="http://schemas.android.com/tools"
 3     android:layout_width="match_parent"
 4     android:layout_height="55dp"
 5     android:background="@drawable/title_bar" 
>
 6 
 7     <TextView
 8         android:layout_width="wrap_content"
 9         android:layout_height="wrap_content"
10         android:layout_centerInParent="true"
11         android:text="微信"
12         android:textSize="20dp" 
13         android:textColor="#ffffff"/>
14 
15 </RelativeLayout 
>

View Code

activity_bottom.xml（底部佈局）

  1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2     xmlns:tools="http://schemas.android.com/tools"
  3     android:layout_width="match_parent"
  4     android:layout_height="wrap_content"
  5     android:background="@drawable/bottom_bar" >
  6 
  7     <LinearLayout
  8         android:id="@+id/ll_home"
  9         android:layout_width="0dp"
 10         android:layout_height="wrap_content"
 11         android:layout_weight="1"
 12         android:gravity="center"
 13         android:orientation="vertical" >
 14 
 15         <ImageView
 16             android:id="@+id/iv_home"
 17             android:layout_width="wrap_content"
 18             android:layout_height="wrap_content"
 19             android:src="@drawable/tab_weixin_pressed" />
 20 
 21         <TextView
 22             android:id="@+id/tv_home"
 23             android:layout_width="wrap_content"
 24             android:layout_height="wrap_content"
 25             android:layout_marginTop="3dp"
 26             android:text="首頁"
 27             android:textColor="#1B940A"
 28             android:textStyle="bold" />
 29     </LinearLayout>
 30 
 31     <LinearLayout
 32         android:id="@+id/ll_address"
 33         android:layout_width="0dp"
 34         android:layout_height="wrap_content"
 35         android:layout_weight="1"
 36         android:gravity="center"
 37         android:orientation="vertical" >
 38 
 39         <ImageView
 40             android:id="@+id/iv_address"
 41             android:layout_width="wrap_content"
 42             android:layout_height="wrap_content"
 43             android:src="@drawable/tab_address_normal" />
 44 
 45         <TextView
 46             android:id="@+id/tv_address"
 47             android:layout_width="wrap_content"
 48             android:layout_height="wrap_content"
 49             android:layout_marginTop="3dp"
 50             android:text="通訊錄"
 51             android:textColor="#ffffff"
 52             android:textStyle="bold" />
 53     </LinearLayout>
 54 
 55     <LinearLayout
 56         android:id="@+id/ll_friend"
 57         android:layout_width="0dp"
 58         android:layout_height="wrap_content"
 59         android:layout_weight="1"
 60         android:gravity="center"
 61         android:orientation="vertical" >
 62 
 63         <ImageView
 64             android:id="@+id/iv_friend"
 65             android:layout_width="wrap_content"
 66             android:layout_height="wrap_content"
 67             android:src="@drawable/tab_find_frd_normal" />
 68 
 69         <TextView
 70             android:id="@+id/tv_friend"
 71             android:layout_width="wrap_content"
 72             android:layout_height="wrap_content"
 73             android:layout_marginTop="3dp"
 74             android:text="朋友"
 75             android:textColor="#ffffff"
 76             android:textStyle="bold" />
 77     </LinearLayout>
 78 
 79     <LinearLayout
 80         android:id="@+id/ll_setting"
 81         android:layout_width="0dp"
 82         android:layout_height="wrap_content"
 83         android:layout_weight="1"
 84         android:gravity="center"
 85         android:orientation="vertical" >
 86 
 87         <ImageView
 88             android:id="@+id/iv_setting"
 89             android:layout_width="wrap_content"
 90             android:layout_height="wrap_content"
 91             android:src="@drawable/tab_settings_normal" />
 92 
 93         <TextView
 94             android:id="@+id/tv_setting"
 95             android:layout_width="wrap_content"
 96             android:layout_height="wrap_content"
 97             android:layout_marginTop="3dp"
 98             android:text="設定"
 99             android:textColor="#ffffff"
100             android:textStyle="bold" />
101     </LinearLayout>
102 
103 </LinearLayout>

View Code

activity_main.xml（主佈局，引入上下佈局）

 1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 2     xmlns:tools="http://schemas.android.com/tools"
 3     android:layout_width="match_parent"
 4     android:layout_height="match_parent"
 5     android:orientation="vertical" >
 6 
 7     <include layout="@layout/activity_top" />
 8 
 9     <android.support.v4.view.ViewPager
10         android:id="@+id/vp_content"
11         android:layout_width="match_parent"
12         android:background="#ffffff"
13         android:layout_height="0dp"
14         android:layout_weight="1" >
15     </android.support.v4.view.ViewPager>
16 
17     <include layout="@layout/activity_bottom" />
18 
19 </LinearLayout>

View Code

page_01.xml-page_04.xml(4個ViewPager的滑動介面，由於內容簡單這裡只給出其中1個)

 1 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 2     xmlns:tools="http://schemas.android.com/tools"
 3     android:layout_width="match_parent"
 4     android:layout_height="match_parent">
 5 
 6     <TextView
 7         android:layout_width="wrap_content"
 8         android:layout_height="wrap_content"
 9         android:layout_centerInParent="true"
10         android:text="我是微信首頁"
11         android:textSize="30dp" />
12 
13 </RelativeLayout>

View Code

具體實現程式碼：

ViewPager介面卡（關於ViewPager的使用方法這裡就不多說了，不清楚的朋友看我這篇文章吧《安卓開發筆記——ViewPager元件（仿微信引導介面）》）

 1 package com.rabbit.tabdemo;
 2 
 3 import java.util.List;
 4 
 5 import android.support.v4.view.PagerAdapter;
 6 import android.view.View;
 7 import android.view.ViewGroup;
 8 /**
 9  * ViewPager介面卡
10  * @author Balla_兔子
11  *
12  */
13 public class ContentAdapter extends PagerAdapter {
14 
15     private List<View> views;
16 
17     public ContentAdapter(List<View> views) {
18         this.views = views;
19     }
20 
21     @Override
22     public int getCount() {
23         return views.size();
24     }
25 
26     @Override
27     public boolean isViewFromObject(View arg0, Object arg1) {
28         return arg0 == arg1;
29     }
30 
31     @Override
32     public Object instantiateItem(ViewGroup container, int position) {
33         View view = views.get(position);
34         container.addView(view);
35         return view;
36     }
37 
38     @Override
39     public void destroyItem(ViewGroup container, int position, Object object) {
40         container.removeView(views.get(position));
41     }
42 
43 }

MainActivity（主介面程式碼）

初始化控制元件後，完成對底部選單的4個LinearLayout的點選監聽事件，在使用者觸發點選事件的時候，設定選擇狀態然後跳轉相對應的介面。為了使得滑動ViewPager也能同時觸發底部選單狀態的改變，這裡也對ViewPager設定了滑動監聽。其他的程式碼註釋很全，看註釋就可以了。

  1 package com.rabbit.tabdemo;
  2 
  3 import java.util.ArrayList;
  4 import java.util.List;
  5 
  6 import android.app.Activity;
  7 import android.os.Bundle;
  8 import android.support.v4.view.ViewPager;
  9 import android.support.v4.view.ViewPager.OnPageChangeListener;
 10 import android.view.View;
 11 import android.view.View.OnClickListener;
 12 import android.widget.ImageView;
 13 import android.widget.LinearLayout;
 14 import android.widget.TextView;
 15 
 16 public class MainActivity extends Activity implements OnClickListener,OnPageChangeListener{
 17 
 18     // 底部選單4個Linearlayout
 19     private LinearLayout ll_home;
 20     private LinearLayout ll_address;
 21     private LinearLayout ll_friend;
 22     private LinearLayout ll_setting;
 23 
 24     // 底部選單4個ImageView
 25     private ImageView iv_home;
 26     private ImageView iv_address;
 27     private ImageView iv_friend;
 28     private ImageView iv_setting;
 29 
 30     // 底部選單4個選單標題
 31     private TextView tv_home;
 32     private TextView tv_address;
 33     private TextView tv_friend;
 34     private TextView tv_setting;
 35 
 36     // 中間內容區域
 37     private ViewPager viewPager;
 38 
 39     // ViewPager介面卡ContentAdapter
 40     private ContentAdapter adapter;
 41 
 42     private List<View> views;
 43 
 44     @Override
 45     protected void onCreate(Bundle savedInstanceState) {
 46         super.onCreate(savedInstanceState);
 47         setContentView(R.layout.activity_main);
 48 
 49         // 初始化控制元件
 50         initView();
 51         // 初始化底部按鈕事件
 52         initEvent();
 53 
 54     }
 55 
 56     private void initEvent() {
 57         // 設定按鈕監聽
 58         ll_home.setOnClickListener(this);
 59         ll_address.setOnClickListener(this);
 60         ll_friend.setOnClickListener(this);
 61         ll_setting.setOnClickListener(this);
 62         
 63         //設定ViewPager滑動監聽
 64         viewPager.setOnPageChangeListener(this);
 65     }
 66 
 67     private void initView() {
 68 
 69         // 底部選單4個Linearlayout
 70         this.ll_home = (LinearLayout) findViewById(R.id.ll_home);
 71         this.ll_address = (LinearLayout) findViewById(R.id.ll_address);
 72         this.ll_friend = (LinearLayout) findViewById(R.id.ll_friend);
 73         this.ll_setting = (LinearLayout) findViewById(R.id.ll_setting);
 74 
 75         // 底部選單4個ImageView
 76         this.iv_home = (ImageView) findViewById(R.id.iv_home);
 77         this.iv_address = (ImageView) findViewById(R.id.iv_address);
 78         this.iv_friend = (ImageView) findViewById(R.id.iv_friend);
 79         this.iv_setting = (ImageView) findViewById(R.id.iv_setting);
 80 
 81         // 底部選單4個選單標題
 82         this.tv_home = (TextView) findViewById(R.id.tv_home);
 83         this.tv_address = (TextView) findViewById(R.id.tv_address);
 84         this.tv_friend = (TextView) findViewById(R.id.tv_friend);
 85         this.tv_setting = (TextView) findViewById(R.id.tv_setting);
 86 
 87         // 中間內容區域ViewPager
 88         this.viewPager = (ViewPager) findViewById(R.id.vp_content);
 89 
 90         // 介面卡
 91         View page_01 = View.inflate(MainActivity.this, R.layout.page_01, null);
 92         View page_02 = View.inflate(MainActivity.this, R.layout.page_02, null);
 93         View page_03 = View.inflate(MainActivity.this, R.layout.page_03, null);
 94         View page_04 = View.inflate(MainActivity.this, R.layout.page_04, null);
 95 
 96         views = new ArrayList<View>();
 97         views.add(page_01);
 98         views.add(page_02);
 99         views.add(page_03);
100         views.add(page_04);
101 
102         this.adapter = new ContentAdapter(views);
103         viewPager.setAdapter(adapter);
104 
105     }
106 
107     @Override
108     public void onClick(View v) {
109         // 在每次點選後將所有的底部按鈕(ImageView,TextView)顏色改為灰色，然後根據點選著色
110         restartBotton();
111         // ImageView和TetxView置為綠色，頁面隨之跳轉
112         switch (v.getId()) {
113         case R.id.ll_home:
114             iv_home.setImageResource(R.drawable.tab_weixin_pressed);
115             tv_home.setTextColor(0xff1B940A);
116             viewPager.setCurrentItem(0);
117             break;
118         case R.id.ll_address:
119             iv_address.setImageResource(R.drawable.tab_address_pressed);
120             tv_address.setTextColor(0xff1B940A);
121             viewPager.setCurrentItem(1);
122             break;
123         case R.id.ll_friend:
124             iv_friend.setImageResource(R.drawable.tab_find_frd_pressed);
125             tv_friend.setTextColor(0xff1B940A);
126             viewPager.setCurrentItem(2);
127             break;
128         case R.id.ll_setting:
129             iv_setting.setImageResource(R.drawable.tab_find_frd_pressed);
130             tv_setting.setTextColor(0xff1B940A);
131             viewPager.setCurrentItem(3);
132             break;
133 
134         default:
135             break;
136         }
137 
138     }
139 
140     private void restartBotton() {
141         // ImageView置為灰色
142         iv_home.setImageResource(R.drawable.tab_weixin_normal);
143         iv_address.setImageResource(R.drawable.tab_address_normal);
144         iv_friend.setImageResource(R.drawable.tab_find_frd_normal);
145         iv_setting.setImageResource(R.drawable.tab_settings_normal);
146         // TextView置為白色
147         tv_home.setTextColor(0xffffffff);
148         tv_address.setTextColor(0xffffffff);
149         tv_friend.setTextColor(0xffffffff);
150         tv_setting.setTextColor(0xffffffff);
151     }
152 
153     @Override
154     public void onPageScrollStateChanged(int arg0) {
155         
156     }
157 
158     @Override
159     public void onPageScrolled(int arg0, float arg1, int arg2) {
160         
161     }
162 
163     @Override
164     public void onPageSelected(int arg0) {
165         restartBotton();
166         //當前view被選擇的時候,改變底部選單圖片，文字顏色
167         switch (arg0) {
168         case 0:
169             iv_home.setImageResource(R.drawable.tab_weixin_pressed);
170             tv_home.setTextColor(0xff1B940A);
171             break;
172         case 1:
173             iv_address.setImageResource(R.drawable.tab_address_pressed);
174             tv_address.setTextColor(0xff1B940A);
175             break;
176         case 2:
177             iv_friend.setImageResource(R.drawable.tab_find_frd_pressed);
178             tv_friend.setTextColor(0xff1B940A);
179             break;
180         case 3:
181             iv_setting.setImageResource(R.drawable.tab_find_frd_pressed);
182             tv_setting.setTextColor(0xff1B940A);
183             break;
184 
185         default:
186             break;
187         }
188         
189     }
190 
191 }

3、具體實現(內容區域為Fragment固定介面)

佈局檔案：

佈局檔案基本沒變化，只是把主介面的ViewPager改成了FramLayout，其他檔案保持一致，就不貼出來了。

 1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 2     xmlns:tools="http://schemas.android.com/tools"
 3     android:layout_width="match_parent"
 4     android:layout_height="match_parent"
 5     android:orientation="vertical" >
 6 
 7     <include layout="@layout/activity_top" />
 8 
 9     <FrameLayout
10         android:id="@+id/fl_content"
11         android:layout_width="match_parent"
12         android:background="#ffffff"
13         android:layout_height="0dp"
14         android:layout_weight="1" >
15     </FrameLayout>
16 
17     <include layout="@layout/activity_bottom" />
18 
19 </LinearLayout>

View Code

具體實現程式碼：

由於這次的內容是基於Fragment的，所以需要有4個Fragment檔案，由於程式碼相同這裡只貼出一個。

Frgament(HomeFragment,AddressFragment,FriendFragment,SettingFragment)

 1 package com.rabbit.tabdemo;
 2 
 3 import android.os.Bundle;
 4 import android.support.annotation.Nullable;
 5 import android.support.v4.app.Fragment;
 6 import android.view.LayoutInflater;
 7 import android.view.View;
 8 import android.view.ViewGroup;
 9 
10 public class HomeFragment extends Fragment {
11     @Override
12     public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
13         return inflater.inflate(R.layout.page_01, container, false);
14     }
15 
16 }

View Code

MainActivity（主介面程式碼）

程式碼很簡單，一看就能明白就不多說什麼了，只提個需要注意的地方，由於便於向下相容這裡的Fragment是用V4包下的，在匯入包的時候需要注意一下。

  1 package com.rabbit.tabdemo;
  2 
  3 import android.os.Bundle;
  4 import android.support.v4.app.Fragment;
  5 import android.support.v4.app.FragmentActivity;
  6 import android.support.v4.app.FragmentManager;
  7 import android.support.v4.app.FragmentTransaction;
  8 import android.view.View;
  9 import android.view.View.OnClickListener;
 10 import android.widget.ImageView;
 11 import android.widget.LinearLayout;
 12 import android.widget.TextView;
 13 
 14 public class MainActivity extends FragmentActivity implements OnClickListener {
 15     // 底部選單4個Linearlayout
 16     private LinearLayout ll_home;
 17     private LinearLayout ll_address;
 18     private LinearLayout ll_friend;
 19     private LinearLayout ll_setting;
 20 
 21     // 底部選單4個ImageView
 22     private ImageView iv_home;
 23     private ImageView iv_address;
 24     private ImageView iv_friend;
 25     private ImageView iv_setting;
 26 
 27     // 底部選單4個選單標題
 28     private TextView tv_home;
 29     private TextView tv_address;
 30     private TextView tv_friend;
 31     private TextView tv_setting;
 32 
 33     // 4個Fragment
 34     private Fragment homeFragment;
 35     private Fragment addressFragment;
 36     private Fragment friendFragment;
 37     private Fragment settingFragment;
 38 
 39     @Override
 40     protected void onCreate(Bundle savedInstanceState) {
 41         super.onCreate(savedInstanceState);
 42         setContentView(R.layout.activity_main);
 43 
 44         // 初始化控制元件
 45         initView();
 46         // 初始化底部按鈕事件
 47         initEvent();
 48         // 初始化並設定當前Fragment
 49         initFragment(0);
 50 
 51     }
 52 
 53     private void initFragment(int index) {
 54         // 由於是引用了V4包下的Fragment，所以這裡的管理器要用getSupportFragmentManager獲取
 55         FragmentManager fragmentManager = getSupportFragmentManager();
 56         // 開啟事務
 57         FragmentTransaction transaction = fragmentManager.beginTransaction();
 58         // 隱藏所有Fragment
 59         hideFragment(transaction);
 60         switch (index) {
 61         case 0:
 62             if (homeFragment == null) {
 63                 homeFragment = new HomeFragment();
 64                 transaction.add(R.id.fl_content, homeFragment);
 65             } else {
 66                 transaction.show(homeFragment);
 67             }
 68             break;
 69         case 1:
 70             if (addressFragment == null) {
 71                 addressFragment = new AddressFragment();
 72                 transaction.add(R.id.fl_content, addressFragment);
 73             } else {
 74                 transaction.show(addressFragment);
 75             }
 76 
 77             break;
 78         case 2:
 79             if (friendFragment == null) {
 80                 friendFragment = new FriendFragment();
 81                 transaction.add(R.id.fl_content, friendFragment);
 82             } else {
 83                 transaction.show(friendFragment);
 84             }
 85 
 86             break;
 87         case 3:
 88             if (settingFragment == null) {
 89                 settingFragment = new SettingFragment();
 90                 transaction.add(R.id.fl_content, settingFragment);
 91             } else {
 92                 transaction.show(settingFragment);
 93             }
 94 
 95             break;
 96 
 97         default:
 98             break;
 99         }
100 
101         // 提交事務
102         transaction.commit();
103 
104     }
105 
106     //隱藏Fragment
107     private void hideFragment(FragmentTransaction transaction) {
108         if (homeFragment != null) {
109             transaction.hide(homeFragment);
110         }
111         if (addressFragment != null) {
112             transaction.hide(addressFragment);
113         }
114         if (friendFragment != null) {
115             transaction.hide(friendFragment);
116         }
117         if (settingFragment != null) {
118             transaction.hide(settingFragment);
119         }
120 
121     }
122 
123     private void initEvent() {
124         // 設定按鈕監聽
125         ll_home.setOnClickListener(this);
126         ll_address.setOnClickListener(this);
127         ll_friend.setOnClickListener(this);
128         ll_setting.setOnClickListener(this);
129 
130     }
131 
132     private void initView() {
133 
134         // 底部選單4個Linearlayout
135         this.ll_home = (LinearLayout) findViewById(R.id.ll_home);
136         this.ll_address = (LinearLayout) findViewById(R.id.ll_address);
137         this.ll_friend = (LinearLayout) findViewById(R.id.ll_friend);
138         this.ll_setting = (LinearLayout) findViewById(R.id.ll_setting);
139 
140         // 底部選單4個ImageView
141         this.iv_home = (ImageView) findViewById(R.id.iv_home);
142         this.iv_address = (ImageView) findViewById(R.id.iv_address);
143         this.iv_friend = (ImageView) findViewById(R.id.iv_friend);
144         this.iv_setting = (ImageView) findViewById(R.id.iv_setting);
145 
146         // 底部選單4個選單標題
147         this.tv_home = (TextView) findViewById(R.id.tv_home);
148         this.tv_address = (TextView) findViewById(R.id.tv_address);
149         this.tv_friend = (TextView) findViewById(R.id.tv_friend);
150         this.tv_setting = (TextView) findViewById(R.id.tv_setting);
151 
152     }
153 
154     @Override
155     public void onClick(View v) {
156 
157         // 在每次點選後將所有的底部按鈕(ImageView,TextView)顏色改為灰色，然後根據點選著色
158         restartBotton();
159         // ImageView和TetxView置為綠色，頁面隨之跳轉
160         switch (v.getId()) {
161         case R.id.ll_home:
162             iv_home.setImageResource(R.drawable.tab_weixin_pressed);
163             tv_home.setTextColor(0xff1B940A);
164             initFragment(0);
165             break;
166         case R.id.ll_address:
167             iv_address.setImageResource(R.drawable.tab_address_pressed);
168             tv_address.setTextColor(0xff1B940A);
169             initFragment(1);
170             break;
171         case R.id.ll_friend:
172             iv_friend.setImageResource(R.drawable.tab_find_frd_pressed);
173             tv_friend.setTextColor(0xff1B940A);
174             initFragment(2);
175             break;
176         case R.id.ll_setting:
177             iv_setting.setImageResource(R.drawable.tab_find_frd_pressed);
178             tv_setting.setTextColor(0xff1B940A);
179             initFragment(3);
180             break;
181 
182         default:
183             break;
184         }
185 
186     }
187 
188     private void restartBotton() {
189         // ImageView置為灰色
190         iv_home.setImageResource(R.drawable.tab_weixin_normal);
191         iv_address.setImageResource(R.drawable.tab_address_normal);
192         iv_friend.setImageResource(R.drawable.tab_find_frd_normal);
193         iv_setting.setImageResource(R.drawable.tab_settings_normal);
194         // TextView置為白色
195         tv_home.setTextColor(0xffffffff);
196         tv_address.setTextColor(0xffffffff);
197         tv_friend.setTextColor(0xffffffff);
198         tv_setting.setTextColor(0xffffffff);
199     }
200 
201 }

到這裡介面效果就基本實現了，就算是旋轉螢幕也能夠很好的達到適配效果，最後我們還需要做的2點，可能有些朋友已經發現了，在我們旋轉螢幕的時候，Fragment會重新呼叫onCreate方法，導致成員變數重新初始化了一次，Fragment物件也重置為空，然後就呼叫不到hide方法，從而出現了介面重複疊加的情況。

下面提供解決的方法，其實很簡單，只需要在AndroidManifest.xml裡面對應的activity裡添設定改換螢幕方向等操作時不觸發oncreate事件就可以。

1  android:configChanges="orientation|keyboardHidden|screenSize"

最後我們隱藏下標題欄，在application裡新增上：

1  android:theme="@android:style/Theme.Black.NoTitleBar.Fullscreen"

這樣就大功告成了！

總結：

基於ViewPager實現的內容：

優點：

1、介面可以滑動，美觀，流暢。

缺點：

1、當介面裡有一些需要用手勢來實現的內容會起衝突，比如我們ListView裡的側滑刪除。

2、由於採用的是ViewPager，所以頁面內容實現程式碼會嚴重依賴於MainActivity，程式碼太過冗餘，不便於後期維護。

基於Fragment實現的內容：

優點：

1、Fragment檔案單獨存在，各自頁面的內容各自去實現完成，有自己的生命週期，便於後期維護。

2、對於需要手勢操作的一些內容不會起衝突。

缺點：

1、介面不可滑動，比較死板。

作者：Balla_兔子
出處：http://www.cnblogs.com/lichenwei/
本文版權歸作者和部落格園共有,歡迎轉載,但未經作者同意必須保留此段宣告,且在文章頁面明顯位置給出原文連結。
正在看本人部落格的這位童鞋，我看你氣度不凡，談吐間隱隱有王者之氣，日後必有一番作為！旁邊有“推薦”二字，你就順手把它點了吧，相得準，我分文不收；相不準，你也好回來找我！

多種方式實現底部選單欄（仿微信介面）

多種方式實現底部選單欄（仿微信介面）

安卓開發筆記——多種方式實現底部選單欄（仿微信介面）

最簡單最快的實現底部標籤導航（仿閒魚樣式）

【Android UI設計與開發】第06期：底部選單欄（一）使用TabActivity實現底部選單欄

CSS多種方式實現底部對齊

微信小程式如何設定底部選單欄（tab欄）

安卓APP底部導航欄（有訊息圓點指示器），實現fragment切換（eclipse）

Android 仿微信介面使用RadioGroup+ViewPager實現底部按鈕切換以及滑動

Android 使用RecyclerView實現（仿微信）的聯絡人A-Z字母排序和過濾搜尋功能

Android專案導航欄之仿微信底部導航欄TabLayout+ViewPager+Fragment

Android 實現自定義安全數字鍵盤（仿微信）

Android實現二維碼掃描（仿微信，輕量Zxing）

Android中ListView實現圖文並列並且自定義分割線（完善仿微信APP）

Android模仿iOS實現側滑返回（類似微信）

Android實現首字母導航條(仿微信)

Android二維碼（仿微信，輕量Zxing）

WKWebView載入進度條（仿微信）

Android中多圖片選擇器ImagePicker庫的使用（仿微信、非常容易整合）

是男人就下100層【第一層】——高仿微信介面（7）

同一個app不同activity顯示多工（仿微信小程式切換效果）

多種方式實現底部選單欄（仿微信介面）

相關推薦