Android之RadioGroup+ViewPager制作的底部导航栏

在日常开发中我们常常会用到类似微信或者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 :

            radioGroup.check(R.id.main_navi_msg_records);

            break;

        case :

            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(,true);

            break;

        case R.id.main_navi_msg_records:

            pager.setCurrentItem(,true);

            break;

        default:

            break;

        }

    }

}

从上面的代码中可以看出，这种实现方式非常的简洁，可控性也非常好。之前看过的别人的实现方式都比较繁琐。所以推荐大家使用这种方式。当然，每个人都有不同看法，不同的实现方式，适合自己的才是最好的。

效果图：

在日常开发中我们常常会用到类似微信或者QQ的底部导航。实现这样的效果有多种，今天就为大家介绍一种实现简单，可控性好的底部导航的实现方法。

首先创建activity_main.xml布局文件，里面主要由ViewPager和RadioGroup构成。ViewPager用来存放Fragment，RadioGroup布局底部导航。

[html] view plain copy

print ?

<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

[html] view plain copy

print ?

<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

[html] view plain copy

print ?

<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

[java] view plain copy

print ?

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

[java] view plain copy

print ?

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

[java] view plain copy

print ?

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

效果图：

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

Android之RadioGroup+ViewPager制作的底部导航栏的更多相关文章

Android (争取做到)最全的底部导航栏实现方法
本文(争取做到)Android 最全的底部导航栏实现方法. 现在写了4个主要方法. 还有一些个人感觉不完全切题的方法也会简单介绍一下. 方法一. ViewPager + List<View> ...
使用BottomNavigationView+ViewPager+Fragment的底部导航栏
2019独角兽企业重金招聘Python工程师标准>>> 使用BottomNavigationView做底部工具栏,使用ViewPager做页面切换,使用Fragment完成每个页面的 ...
Android学习总结——输入法将BottomNavigationBar(底部导航栏)顶上去的问题
在应用清单中给当前<Activity>设置: android:windowSoftInputMode="adjustPan" 关于android:windowSoftI ...
Android底部导航栏创建——ViewPager + RadioGroup
原创文章,引用请注明出处:http://www.cnblogs.com/baipengzhan/p/6270201.html Android底部导航栏有多种实现方式,本文详解其中的ViewPager ...
Android底部导航栏——FrameLayout + RadioGroup
原创文章,转载请注明出处http://www.cnblogs.com/baipengzhan/p/6285881.html Android底部导航栏有多种实现方式,本文详细介绍FrameLayout ...
[Android]--RadioGroup+RadioButton实现底部导航栏
RadioGroup+RadioButton组合方式打造简单实用的底部导航栏代码块: <?xml version="1.0" encoding="utf-8&qu ...
Android底部导航栏(可滑动)----TabLayout+viewPager
[TabLayout] ①TabLayout是选项卡,在屏幕空间有限的情况下,对不同的空间进行分组.属于android support design,更多的用于新闻上,如果放在底部也可做底部导航栏 ② ...
android底部导航栏实现
第一种用radiobutton实现 https://wizardforcel.gitbooks.io/w3school-android/content/75.html 布局文件,使用radiogrou ...
Android应用底部导航栏(选项卡)实例
现在很多android的应用都采用底部导航栏的功能,这样可以使得用户在使用过程中随意切换不同的页面,现在我采用TabHost组件来自定义一个底部的导航栏的功能. 我们先看下该demo实例的框架图: 其 ...

随机推荐

紫书例题11-9 UVa 1658 （拆点+最小费用流）
这道题要求每个节点只能经过一次,也就是结点容量为1, 要拆点, 拆成两个点, 中间连一条弧容量为1, 费用为0. 因为拆成两个点, 所以要经过原图中的这个节点就要经过拆成的这两个点, 又因为这两个点的 ...
MySql5.7免安装版配置过程（ubuntu16.04)
MySql5.7免安装版配置过程(ubuntu16.04) 原创 2017年02月07日 16:58:24 标签: 1001 编辑删除一.安装环境: 操作系统:ubuntu16.04 数据库:my ...
python批量下载色影无忌和蜂鸟的图片爬虫小应用
有些冗余信息.由于之前測试正則表達式.所以没有把它们给移走.只是不影响使用. # -*- coding:utf-8 -*- import re,urllib,sys,os,time def getAl ...
iOS代码添加视图约束
项目要做这样一个效果的启动页. 考虑到版本号是会不断变更的,因此采用动画效果启动页,让版本号动态加载iOS启动页动画效果 - 简书考虑到屏幕适配问题,因此采用代码对视图添加约束.在添加约束的过程中遇 ...
9-第一个app项目
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=&quo ...
海量的超赞 Linux 软件（转载）
海量的超赞 Linux 软件作者: VoLuong 译者: LCTT Mo | 2016-08-24 16:01 评论: 27 收藏: 38 这个仓库收集了对任何用户/开发者都超赞的 Linux ...
mongodb 主从
mongodb 主从因为条件限制我们把主从放在一台服务器上面相关参数在启动从的时候可以增加以下参数 --autoresync 当发现从服务器的数据不是最新时,开始从主服务器请求同步数据 --sl ...
SSD-实现
一.制作voc数据集 1.数据集文件夹新建一个文件夹,用来存放整个数据集,或者和voc2007一样的名字:VOC2007 然后像voc2007一样,在文件夹里面新建如下文件夹: 2.将训练图片放到J ...
「POJ3237」Tree(树链剖分）
题意给棵n个点的树.边有边权然后有三种操作 1.CHANGE i v 将编号为i的边权变为v 2.NEGATE a b 将a到b的所有边权变为相反数. 3.QUERY a b 查询a b路径的最大边 ...
CF817F MEX Queries(线段树上二分）
题意维护一个01串,一开始全部都是0 3种操作 1.把一个区间都变为1 2.把一个区间都变为0 3.把一个区间的所有数字翻转过来每次操作完成之后询问区间最小的0的位置 l,r<=10^18 ...

Android之RadioGroup+ViewPager制作的底部导航栏

Android之RadioGroup+ViewPager制作的底部导航栏的更多相关文章

随机推荐

热门专题