Android之RadioGroup+ViewPager製作的底部導航欄
阿新 • • 發佈：2019-01-11
在日常開發中我們常常會用到類似微信或者QQ的底部導航。實現這樣的效果有多種，今天就為大家介紹一種實現簡單，可控性好的底部導航的實現方法。
首先建立activity_main.xml佈局檔案，裡面主要由ViewPager和RadioGroup構成。ViewPager用來存放Fragment，RadioGroup佈局底部導航。
<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" > <android.support.v4.view.ViewPager android:id="@+id/packpage_vPager" android:layout_width="match_parent" android:layout_height="0dp" android:layout_gravity="center" android:layout_weight="1.0" /> <View android:layout_width="match_parent" android:layout_height="1dp" android:background="@color/orange_line" /> <RadioGroup android:id="@+id/main_navi_radiogroup" style="@style/main_navi_radiogroup"> <RadioButton android:id="@+id/main_navi_msg_records" style="@style/main_navi_radiobutton" android:drawableTop="@drawable/menu_item_msg_records" android:text="@string/message"/> <RadioButton android:id="@+id/main_navi_contact" style="@style/main_navi_radiobutton" android:drawableTop="@drawable/menu_item_contacts" android:text="@string/call" /> </RadioGroup> </LinearLayout>
接著再建立兩個fragment佈局檔案
fragment_message.xml
<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" > <TextView android:layout_width="match_parent" android:layout_height="match_parent" android:layout_gravity="center" android:gravity="center" android:textSize="20sp" android:text="@string/message"/> </LinearLayout>
fragment_call.xml
<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" > <TextView android:layout_width="match_parent" android:layout_height="match_parent" android:layout_gravity="center" android:gravity="center" android:text="@string/call" android:textSize="20sp" /> </LinearLayout>
兩個fragment佈局檔案建立完成後，再建立兩個Fragment類，MessageFragment和CallFragment，均繼承android.support.v4.app.Fragment; MessageFragment.java
package com.syz.bottommenu;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
/**
* @author syz
* @date 2016-4-14
*/
public class MessageFragment extends Fragment {
private View mView;
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
if(mView == null){
mView = inflater.inflate(R.layout.fragment_message, container, false);
}
return mView;
}
@Override
public void onDestroyView() {
super.onDestroyView();
((ViewGroup) mView.getParent()).removeView(mView);
}
}
CallFragment.java
package com.syz.bottommenu;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
/**
* @author syz
* @date 2016-4-14
*/
public class CallFragment extends Fragment {
private View mView;
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
if (mView == null) {
mView = inflater.inflate(R.layout.fragment_call, container, false);
}
return mView;
}
@Override
public void onDestroyView() {
super.onDestroyView();
((ViewGroup) mView.getParent()).removeView(mView);
}
}
MainActivity.java
package com.syz.bottommenu;
import java.util.ArrayList;
import java.util.List;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.widget.RadioGroup;
public class MainActivity extends FragmentActivity implements OnPageChangeListener, OnClickListener {
private ViewPager pager;
private List<Fragment> fragments;
private RadioGroup radioGroup;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
}
private void initView() {
pager = (ViewPager) findViewById(R.id.packpage_vPager);
radioGroup = (RadioGroup) findViewById(R.id.main_navi_radiogroup);
findViewById(R.id.main_navi_msg_records).setOnClickListener(this);
findViewById(R.id.main_navi_contact).setOnClickListener(this);
fragments = new ArrayList<Fragment>();
fragments.add(new MessageFragment());
fragments.add(new CallFragment());
pager.setAdapter(new FragmentPagerAdapter(this.getSupportFragmentManager()) {
@Override
public int getCount() {
return fragments.size();
}
@Override
public Fragment getItem(int arg0) {
return fragments.get(arg0);
}
});
// 新增頁面切換事件的監聽器
pager.setOnPageChangeListener(this);
radioGroup.check(R.id.main_navi_msg_records);
}
@Override
public void finish() {
ViewGroup view = (ViewGroup) getWindow().getDecorView();
view.removeAllViews();
super.finish();
}
/**
* 這個方法在手指操作螢幕的時候發生變化。有三個值：0（END）,1(PRESS) , 2(UP) 。
* 當用手指滑動翻頁時，手指按下去的時候會觸發這個方法，state值為1，手指擡起時，
* 如果發生了滑動（即使很小），這個值會變為2，然後最後變為0
* 。總共執行這個方法三次。一種特殊情況是手指按下去以後一點滑動也沒有發生，
* 這個時候只會呼叫這個方法兩次，state值分別是1,0 。
* 當setCurrentItem翻頁時，會執行這個方法兩次，state值分別為2 , 0 。
*/
@Override
public void onPageScrollStateChanged(int state) {
}
/**
* 這個方法會在螢幕滾動過程中不斷被呼叫。 有三個引數，第一個position，這個引數要特別注意一下。
* 當用手指滑動時，如果手指按在頁面上不動，position和當前頁面index是一致的；
* 如果手指向左拖動（相應頁面向右翻動），這時候position大部分時間和當前頁面是一致的，
* 只有翻頁成功的情況下最後一次呼叫才會變為目標頁面；如果手指向右拖動（相應頁面向左翻動），
* 這時候position大部分時間和目標頁面是一致的，只有翻頁不成功的情況下最後一次呼叫才會變為原頁面。
* 當直接設定setCurrentItem翻頁時，如果是相鄰的情況（比如現在是第二個頁面，跳到第一或者第三個頁面），
* 如果頁面向右翻動，大部分時間是和當前頁面是一致的，只有最後才變成目標頁面；
* 如果向左翻動，position和目標頁面是一致的。這和用手指拖動頁面翻動是基本一致的。如果不是相鄰的情況，
* 比如我從第一個頁面跳到第三個頁面，position先是0，然後逐步變成1，然後逐步變成2；
* 我從第三個頁面跳到第一個頁面，position先是1，然後逐步變成0，並沒有出現為2的情況。
* positionOffset是當前頁面滑動比例，如果頁面向右翻動，這個值不斷變大，最後在趨近1的情況後突變為0
* 。如果頁面向左翻動，這個值不斷變小，
* 最後變為0。positionOffsetPixels是當前頁面滑動畫素，變化情況和positionOffset一致
*/
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
/**
* 這個方法有一個引數position，代表哪個頁面被選中。當用手指滑動翻頁的時候，如果翻動成功了（滑動的距離夠長），
* 手指擡起來就會立即執行這個方法，position就是當前滑動到的頁面。如果直接setCurrentItem翻頁，
* 那position就和setCurrentItem的引數一致，這種情況在onPageScrolled執行方法前就會立即執行。
*/
@Override
public void onPageSelected(int position) {
switch (position) {
case 0:
radioGroup.check(R.id.main_navi_msg_records);
break;
case 1:
radioGroup.check(R.id.main_navi_contact);
break;
default:
break;
}
}
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.main_navi_contact:
pager.setCurrentItem(1,true);
break;
case R.id.main_navi_msg_records:
pager.setCurrentItem(0,true);
break;
default:
break;
}
}
}
從上面的程式碼中可以看出，這種實現方式非常的簡潔，可控性也非常好。之前看過的別人的實現方式都比較繁瑣。所以推薦大家使用這種方式。當然，每個人都有不同看法，不同的實現方式，適合自己的才是最好的。
效果圖：
