碼上歡樂
相關內容    簡體    繁體

Android之RadioGroup+ViewPager制作的底部導航欄

本文轉載自   查看原文   2017-08-07 22:30   2232    android

在日常開發中我們常常會用到類似微信或者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中開始布局渲染。

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;
        }
    }

}

從上面的代碼中可以看出，這種實現方式非常的簡潔，可控性也非常好。之前看過的別人的實現方式都比較繁瑣。所以推薦大家使用這種方式。當然，每個人都有不同看法，不同的實現方式，適合自己的才是最好的。

 

效果圖：

       

在日常開發中我們常常會用到類似微信或者QQ的底部導航。實現這樣的效果有多種，今天就為大家介紹一種實現簡單，可控性好的底部導航的實現方法。

首先創建activity_main.xml布局文件，里面主要由ViewPager和RadioGroup構成。ViewPager用來存放Fragment，RadioGroup布局底部導航。

 

[html]  view plain  copy
 
 print ?
  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.     <android.support.v4.view.ViewPager  
  8.         android:id="@+id/packpage_vPager"  
  9.         android:layout_width="match_parent"  
  10.         android:layout_height="0dp"  
  11.         android:layout_gravity="center"  
  12.         android:layout_weight="1.0" />  
  13.   
  14.     <View  
  15.         android:layout_width="match_parent"  
  16.         android:layout_height="1dp"  
  17.         android:background="@color/orange_line" />  
  18.   
  19.     <RadioGroup  
  20.         android:id="@+id/main_navi_radiogroup"  
  21.         style="@style/main_navi_radiogroup">  
  22.   
  23.         <RadioButton  
  24.             android:id="@+id/main_navi_msg_records"  
  25.             style="@style/main_navi_radiobutton"  
  26.             android:drawableTop="@drawable/menu_item_msg_records"  
  27.             android:text="@string/message"/>  
  28.   
  29.         <RadioButton  
  30.             android:id="@+id/main_navi_contact"  
  31.             style="@style/main_navi_radiobutton"  
  32.             android:drawableTop="@drawable/menu_item_contacts"  
  33.             android:text="@string/call" />  
  34.   
  35.     </RadioGroup>  
  36.   
  37. </LinearLayout>  

 

 

接着再創建兩個fragment布局文件

fragment_message.xml

 

[html]  view plain  copy
 
 print ?
  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.     <TextView   
  8.        android:layout_width="match_parent"  
  9.        android:layout_height="match_parent"  
  10.        android:layout_gravity="center"  
  11.        android:gravity="center"  
  12.        android:textSize="20sp"  
  13.        android:text="@string/message"/>  
  14.   
  15. </LinearLayout>  


fragment_call.xml

 

 

[html]  view plain  copy
 
 print ?
  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.     <TextView  
  8.         android:layout_width="match_parent"  
  9.         android:layout_height="match_parent"  
  10.         android:layout_gravity="center"  
  11.         android:gravity="center"  
  12.         android:text="@string/call"  
  13.         android:textSize="20sp" />  
  14.   
  15. </LinearLayout>  


兩個fragment布局文件創建完成后，再創建兩個Fragment類，MessageFragment和CallFragment，均繼承android.support.v4.app.Fragment;

 

MessageFragment.java

 

[java]  view plain  copy
 
 print ?
  1. package com.syz.bottommenu;  
  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. /** 
  11.  * @author syz 
  12.  * @date 2016-4-14 
  13.  */  
  14. public class MessageFragment extends Fragment {  
  15.   
  16.     private View mView;  
  17.     @Override  
  18.     public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {  
  19.         if(mView == null){  
  20.             mView = inflater.inflate(R.layout.fragment_message, container, false);  
  21.         }  
  22.         return mView;  
  23.     }  
  24.       
  25.     @Override  
  26.     public void onDestroyView() {  
  27.         super.onDestroyView();  
  28.         ((ViewGroup) mView.getParent()).removeView(mView);  
  29.     }  
  30. }  

 

 

CallFragment.Java

 

[java]  view plain  copy
 
 print ?
  1. package com.syz.bottommenu;  
  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. /** 
  11.  * @author syz 
  12.  * @date 2016-4-14 
  13.  */  
  14. public class CallFragment extends Fragment {  
  15.   
  16.     private View mView;  
  17.   
  18.     @Override  
  19.     public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {  
  20.         if (mView == null) {  
  21.             mView = inflater.inflate(R.layout.fragment_call, container, false);  
  22.         }  
  23.         return mView;  
  24.     }  
  25.   
  26.     @Override  
  27.     public void onDestroyView() {  
  28.         super.onDestroyView();  
  29.         ((ViewGroup) mView.getParent()).removeView(mView);  
  30.     }  
  31. }  

 

 

最后我們在MainActivity中開始布局渲染。

MainActivity.java

 

[java]  view plain  copy
 
 print ?
  1. package com.syz.bottommenu;  
  2.   
  3. import java.util.ArrayList;  
  4. import java.util.List;  
  5.   
  6. import android.os.Bundle;  
  7. import android.support.v4.app.Fragment;  
  8. import android.support.v4.app.FragmentActivity;  
  9. import android.support.v4.app.FragmentPagerAdapter;  
  10. import android.support.v4.view.ViewPager;  
  11. import android.support.v4.view.ViewPager.OnPageChangeListener;  
  12. import android.view.View;  
  13. import android.view.View.OnClickListener;  
  14. import android.view.ViewGroup;  
  15. import android.widget.RadioGroup;  
  16.   
  17. public class MainActivity extends FragmentActivity implements OnPageChangeListener, OnClickListener {  
  18.   
  19.     private ViewPager pager;  
  20.     private List<Fragment> fragments;  
  21.     private RadioGroup radioGroup;  
  22.   
  23.     @Override  
  24.     protected void onCreate(Bundle savedInstanceState) {  
  25.         super.onCreate(savedInstanceState);  
  26.         setContentView(R.layout.activity_main);  
  27.         initView();  
  28.     }  
  29.   
  30.     private void initView() {  
  31.         pager = (ViewPager) findViewById(R.id.packpage_vPager);  
  32.         radioGroup = (RadioGroup) findViewById(R.id.main_navi_radiogroup);  
  33.         findViewById(R.id.main_navi_msg_records).setOnClickListener(this);  
  34.         findViewById(R.id.main_navi_contact).setOnClickListener(this);  
  35.         fragments = new ArrayList<Fragment>();  
  36.         fragments.add(new MessageFragment());  
  37.         fragments.add(new CallFragment());  
  38.   
  39.         pager.setAdapter(new FragmentPagerAdapter(this.getSupportFragmentManager()) {  
  40.   
  41.             @Override  
  42.             public int getCount() {  
  43.                 return fragments.size();  
  44.             }  
  45.   
  46.             @Override  
  47.             public Fragment getItem(int arg0) {  
  48.                 return fragments.get(arg0);  
  49.             }  
  50.         });  
  51.         // 添加頁面切換事件的監聽器  
  52.         pager.setOnPageChangeListener(this);  
  53.         radioGroup.check(R.id.main_navi_msg_records);  
  54.     }  
  55.   
  56.     @Override  
  57.     public void finish() {  
  58.         ViewGroup view = (ViewGroup) getWindow().getDecorView();  
  59.         view.removeAllViews();  
  60.         super.finish();  
  61.     }  
  62.   
  63.     /** 
  64.      * 這個方法在手指操作屏幕的時候發生變化。有三個值：0（END）,1(PRESS) , 2(UP) 。 
  65.      * 當用手指滑動翻頁時，手指按下去的時候會觸發這個方法，state值為1，手指抬起時，  
  66.      * 如果發生了滑動（即使很小），這個值會變為2，然后最后變為0 
  67.      * 。總共執行這個方法三次。一種特殊情況是手指按下去以后一點滑動也沒有發生， 
  68.      * 這個時候只會調用這個方法兩次，state值分別是1,0 。 
  69.      * 當setCurrentItem翻頁時，會執行這個方法兩次，state值分別為2 , 0 。 
  70.      */  
  71.     @Override  
  72.     public void onPageScrollStateChanged(int state) {  
  73.   
  74.     }  
  75.   
  76.     /** 
  77.      * 這個方法會在屏幕滾動過程中不斷被調用。 有三個參數，第一個position，這個參數要特別注意一下。 
  78.      * 當用手指滑動時，如果手指按在頁面上不動，position和當前頁面index是一致的； 
  79.      * 如果手指向左拖動（相應頁面向右翻動），這時候position大部分時間和當前頁面是一致的， 
  80.      * 只有翻頁成功的情況下最后一次調用才會變為目標頁面；如果手指向右拖動（相應頁面向左翻動）， 
  81.      * 這時候position大部分時間和目標頁面是一致的，只有翻頁不成功的情況下最后一次調用才會變為原頁面。 
  82.      * 當直接設置setCurrentItem翻頁時，如果是相鄰的情況（比如現在是第二個頁面，跳到第一或者第三個頁面）， 
  83.      * 如果頁面向右翻動，大部分時間是和當前頁面是一致的，只有最后才變成目標頁面； 
  84.      * 如果向左翻動，position和目標頁面是一致的。這和用手指拖動頁面翻動是基本一致的。如果不是相鄰的情況， 
  85.      * 比如我從第一個頁面跳到第三個頁面，position先是0，然后逐步變成1，然后逐步變成2； 
  86.      * 我從第三個頁面跳到第一個頁面，position先是1，然后逐步變成0，並沒有出現為2的情況。 
  87.      * positionOffset是當前頁面滑動比例，如果頁面向右翻動，這個值不斷變大，最后在趨近1的情況后突變為0 
  88.      * 。如果頁面向左翻動，這個值不斷變小， 
  89.      * 最后變為0。positionOffsetPixels是當前頁面滑動像素，變化情況和positionOffset一致 
  90.      */  
  91.     @Override  
  92.     public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {  
  93.   
  94.     }  
  95.   
  96.     /** 
  97.      * 這個方法有一個參數position，代表哪個頁面被選中。當用手指滑動翻頁的時候，如果翻動成功了（滑動的距離夠長）， 
  98.      * 手指抬起來就會立即執行這個方法，position就是當前滑動到的頁面。如果直接setCurrentItem翻頁， 
  99.      * 那position就和setCurrentItem的參數一致，這種情況在onPageScrolled執行方法前就會立即執行。 
  100.      */  
  101.     @Override  
  102.     public void onPageSelected(int position) {  
  103.         switch (position) {  
  104.         case 0:  
  105.             radioGroup.check(R.id.main_navi_msg_records);  
  106.             break;  
  107.         case 1:  
  108.             radioGroup.check(R.id.main_navi_contact);  
  109.             break;  
  110.   
  111.         default:  
  112.             break;  
  113.         }  
  114.   
  115.     }  
  116.   
  117.     @Override  
  118.     public void onClick(View v) {  
  119.         switch (v.getId()) {  
  120.         case R.id.main_navi_contact:  
  121.             pager.setCurrentItem(1,true);  
  122.             break;  
  123.         case R.id.main_navi_msg_records:  
  124.             pager.setCurrentItem(0,true);  
  125.             break;  
  126.   
  127.         default:  
  128.             break;  
  129.         }  
  130.     }  
  131.   
  132. }  


從上面的代碼中可以看出，這種實現方式非常的簡潔，可控性也非常好。之前看過的別人的實現方式都比較繁瑣。所以推薦大家使用這種方式。當然，每個人都有不同看法，不同的實現方式，適合自己的才是最好的。

 

效果圖：

       



最后附上源碼下載地址：http://download.csdn.net/detail/loveyaozu/9490650


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 Android底部導航欄創建——ViewPager + RadioGroup Android底部導航欄——FrameLayout + RadioGroup Android_ViewPager+Fragment實現頁面滑動和底部導航欄 Android底部導航欄(可滑動)----TabLayout+viewPager TabLayout+ViewPager制作簡單導航欄 Android UI設計框架[1]: ViewPager+Fragment實現底部圖標文字的導航欄(IconTabPageIndicator) Android——Fragment實例精講——底部導航欄+ViewPager滑動切換頁面 android底部導航欄小結 android底部導航欄實現 ViewPager + Fragment 實現主界面底部導航欄
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM