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实例的框架图: 其 ...

随机推荐

URAL 2027 2028 两个有趣的题
这两个题,讲的是有一种奇怪的语言,代码是一种二维的矩阵. 前一个题,是根据所给的要求,写一个简单的解释器. 后一个题,是用那种语言写一个简单的小程序. 挺有意思的,所以在这里纪念一下.顺便那个语言的原 ...
C语言回调
来源:https://www.cnblogs.com/jiangzhaowei/p/9129105.html 1. 什么是回调函数? 回调函数,光听名字就比普通函数要高大上一些,那到底什么是回调函数呢 ...
TOJ 3517 The longest athletic track
3517. The longest athletic track Time Limit: 1.0 Seconds Memory Limit: 65536KTotal Runs: 880 A ...
solr环境搭建&基本使用
分步指南 solr服务与tomcat整合 solr使用配置步骤 solr使用推荐分词工具相关的文章一．Solr服务与tomcat整合 1.solr相关版本下载路径:http://archive. ...
Hive-jdbc获取sessionId
在HiveStatement中有一个sessHandle: public class HiveStatement implements java.sql.Statement { ... private ...
实验了一下对于struct引用的成员的改动
今天写代码的时候,不确定struct用引用传递给函数的时候,他的成员在函数里面改变的时候,是否能影响到外面. 实验了一下 #include <stdio.h> #include <s ...
spring boot启动STS 运行报错 java.lang.NoClassDefFoundError: ch/qos/logback/classic/LoggerContext
spring boot启动STS 运行报错 java.lang.NoClassDefFoundError: ch/qos/logback/classic/LoggerContext 学习了: http ...
Hadoop2.6.0配置參数查看小工具
前言使用Hadoop进行离线分析或者数据挖掘的project师,常常会须要对Hadoop集群或者mapreduce作业进行性能调优. 或许你知道通过浏览器訪问http://master:18088/ ...
ACM：动态规划，01背包问题
题目: 有n件物品和一个容量为C的背包.(每种物品均仅仅有一件)第i件物品的体积是v[i],重量是w[i].选一些物品装到这个背包中,使得背包内物品在整体积不超过C的前提下重量尽量大. 解法:两种思路 ...
Web端本地存储
1.需求背景:当用户在页面上添加一行一行的数据时,突然发现网络断掉了,页面上编辑的数据没法保存进数据库,所以需要一个本地端的临时保存功能,以便在网络通畅后重新加载出来! 2.解决方案: 结合网上搜刮, ...

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

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

随机推荐

热门专题