Android自定义控件—-RadioGroup实现APP首页底部Tab的切换

最新推荐文章于 2024-04-29 06:52:17 发布
最新推荐文章于 2024-04-29 06:52:17 发布
阅读量802 收藏 1
点赞数
分类专栏： android 文章标签： android 框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zuoer8676/article/details/47357627
版权

实现APP首页底部Tab的切换已经见过四五种方式了，先来看运行的效果图吧：

今天我们就用RadioGroup的方法来实现以下。

【开发环境】

物理机版本：win 7旗舰版（64位）

IDE版本：Android Studio 1.2 preview

工程文件结构：（本文最后有源码）

70d49874-8327-4690-9882-eec70703bfbe

  • HomeActivity.java:整个首页的界面
  • 四个Fragment.java:对应的四个Fragment界面
  • drawable文件夹中是对应tab和文字切换的状态
  • 剩下的xml文件就是对应的Activity和Fragment的布局文件了。

一、布局文件：

（1）activity_home.xml:HomeActivity的布局文件

<RelativeLayout 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"
 
     tools:context=".MainActivity">
 
     <!--tab上方的显示区域-->
     <FrameLayout
         android:id="@+id/mHomeContent"
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         android:layout_above="@+id/mHomeRadioGroup">
 
         </FrameLayout>
 
     <!--底下的四个tab-->
     <RadioGroup
         android:id="@+id/mHomeRadioGroup"
         android:layout_width="match_parent"
         android:layout_height="56dp"
         android:orientation="horizontal"
         android:layout_alignParentBottom="true"
         android:background="@color/tab_bg"  >
 
         <RadioButton
             android:id="@+id/mHomeHomeRb"
             android:layout_width="0dp"
             android:layout_height="wrap_content"
             android:layout_weight="1"
             android:button="@null"
             android:gravity="center"
             android:text="@string/home_home"
             android:textColor="@drawable/selector_tab_text_color"
             android:background="@color/tab_bg"
             android:drawableTop="@drawable/selector_tab_home"
            />
 
         <RadioButton
             android:id="@+id/mHomeFindRb"
             android:layout_width="0dp"
             android:layout_height="wrap_content"
             android:layout_weight="1"
             android:button="@null"
             android:gravity="center"
             android:text="@string/home_find"
             android:textColor="@drawable/selector_tab_text_color"
             android:background="@color/tab_bg"
             android:drawableTop="@drawable/selector_tab_find"
             />
 
         <RadioButton
             android:id="@+id/mHomeSearchRb"
             android:layout_width="0dp"
             android:layout_height="wrap_content"
             android:layout_weight="1"
             android:button="@null"
             android:gravity="center"
             android:text="@string/home_search"
             android:textColor="@drawable/selector_tab_text_color"
             android:background="@color/tab_bg"
             android:drawableTop="@drawable/selector_tab_search"
            />
 
         <RadioButton
             android:id="@+id/mHomeProfileRb"
             android:layout_width="0dp"
             android:layout_height="wrap_content"
             android:layout_weight="1"
             android:button="@null"
             android:gravity="center"
             android:text="@string/home_profile"
             android:textColor="@drawable/selector_tab_text_color"
             android:background="@color/tab_bg"
             android:drawableTop="@drawable/selector_tab_profile"
             android:checked="true"
            />
     </RadioGroup>
 </RelativeLayout>

代码有点多，无非就是一个FrameLayout对应的是tab上方的显示区域，然后四个RadioButton凑成一组单选按钮放在RadioGroup当中。

13行：能够保证FrameLayout占据除开Tab之后的剩下的全部空间。

76行：android:checked=”true”这个很重要，稍后在java代码中讲。

RadioButton的属性有点多，我们选取就选取第一个RadioButton进行讲解，上面的第一个RadioButton的属性摘抄如下：

<RadioButton
             android:id="@+id/mHomeHomeRb"
             android:layout_width="0dp"
             android:layout_height="wrap_content"
             android:layout_weight="1"
             android:button="@null"
             android:gravity="center"
             android:text="@string/home_home"
             android:textColor="@drawable/selector_tab_text_color"
             android:background="@color/tab_bg"
             android:drawableTop="@drawable/selector_tab_home"
            />

上方代码的解释如下：

05行：weight为1，并且width为0dp，是保证四个tab能均分宽度。

06行：去掉RadioButton的样式，也就是去掉那个小图标，然后radiobutton就只剩下文字了。

07行：让里面的内容居中

08行：显示的文字

10行：设置这个tab的背景色和整个radioGroup的背景色一样，不过，也可以删掉（删掉之后，在我的小米手机手机上的排版会有问题）

10行：在这个tab的上面添加对应的icon图标（很重要，就是有了这个属性，每个tab的图标才会不一样哦）。

（2）fragment_home.xml:fragment的布局文件

<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"
 
     tools:context=".MainActivity">
 
     <TextView
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:text="HomeFragment"
         android:textSize="20sp"/>
 
 </LinearLayout>

其他三个fragment的布局文件都一样，代码就不贴出来了，本文最后有源码下载。

（3）selector_tab_home.xml：tab被选中时对应icon的状态

<?xml version="1.0" encoding="utf-8"?>
 <selector xmlns:android="http://schemas.android.com/apk/res/android">
 
     <item android:drawable="@mipmap/tab_home_selected" android:state_pressed="false" android:state_selected="true" />
     <item android:drawable="@mipmap/tab_home_selected" android:state_checked="true" android:state_pressed="false" />
     <item android:drawable="@mipmap/tab_home_nomal" />
 
 
 </selector>

06行是默认的状态。

其他三个tab的状态都差不多，代码就不贴出来了，本文最后有源码下载。

（4）selector_tab_text_color.xml：tab中的文字被选中时的状态

<?xml version="1.0" encoding="utf-8"?>
 <selector xmlns:android="http://schemas.android.com/apk/res/android">
 
 <item android:color="@color/white" android:state_pressed="false" android:state_selected="true" />
 <item android:color="@color/white" android:state_checked="true" android:state_pressed="false" />
 <item android:color="@color/black" />
 
 
 </selector>

06行：默认的文字颜色是黑色，被切换时是白色。

二、Java代码：

（1）HomeActivity.java:

package com.smyhvae.radiogrouptabdemo;
 
 import android.os.Bundle;
 import android.support.v4.app.Fragment;
 import android.support.v4.app.FragmentActivity;
 import android.support.v4.app.FragmentStatePagerAdapter;
 import android.view.Window;
 import android.widget.FrameLayout;
 import android.widget.RadioButton;
 import android.widget.RadioGroup;
 
 import com.smyhvae.radiogrouptabdemo.fragment.FindFagment;
 import com.smyhvae.radiogrouptabdemo.fragment.HomeFagment;
 import com.smyhvae.radiogrouptabdemo.fragment.ProfileFagment;
 import com.smyhvae.radiogrouptabdemo.fragment.SearchFagment;
 
 
 /**
  * Created by smyhvae on 2015/4/28.
  *
  */
 
 public class HomeActivity extends FragmentActivity {
     private FrameLayout mHomeContent;
     private RadioGroup mHomeRadioGroup;
     private RadioButton mHomeHomeRb;
     private RadioButton mHomeFindRb;
     private RadioButton mHomeSearchRb;
     private RadioButton mHomeProfileRb;
 
     static final int NUM_ITEMS = 4;//一共四个fragment
 
     @Override
     protected void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
         requestWindowFeature(Window.FEATURE_NO_TITLE);
         setContentView(R.layout.activity_home);
         initView();
         initData();
     }
 
     protected void initView() {
         mHomeContent = (FrameLayout) findViewById(R.id.mHomeContent); //tab上方的区域
         mHomeRadioGroup = (RadioGroup) findViewById(R.id.mHomeRadioGroup);  //底部的四个tab
         mHomeHomeRb = (RadioButton) findViewById(R.id.mHomeHomeRb);
         mHomeFindRb = (RadioButton) findViewById(R.id.mHomeFindRb);
         mHomeSearchRb = (RadioButton) findViewById(R.id.mHomeSearchRb);
         mHomeProfileRb = (RadioButton) findViewById(R.id.mHomeProfileRb);
 
         //监听事件：为底部的RadioGroup绑定状态改变的监听事件
         mHomeRadioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
             @Override
             public void onCheckedChanged(RadioGroup group, int checkedId) {
                 int index = 0;
                 switch (checkedId) {
                     case R.id.mHomeHomeRb:
                         index = 0;
                         break;
                     case R.id.mHomeFindRb:
                         index = 1;
                         break;
                     case R.id.mHomeSearchRb:
                         index = 2;
                         break;
                     case R.id.mHomeProfileRb:
                         index = 3;
                         break;
                 }
                 //通过fragments这个adapter还有index来替换帧布局中的内容
                 Fragment fragment = (Fragment) fragments.instantiateItem(mHomeContent, index);
                 //一开始将帧布局中 的内容设置为第一个
                 fragments.setPrimaryItem(mHomeContent, 0, fragment);
                 fragments.finishUpdate(mHomeContent);
 
             }
         });
     }
 
 
     //第一次启动时，我们让mHomeHomeRb这个radiobutton处于选中状态。
     // 当然了，在这之前，先要在布局文件中设置其他的某一个radiobutton（只要不是mHomeHomeRb就行）
     // 的属性为android:checked="true"，才会出发下面的这个check方法切换到mHomeHomeRb
     @Override
     protected void onStart() {
         super.onStart();
 86         mHomeRadioGroup.check(R.id.mHomeHomeRb);
 87     }
 
     //用adapter来管理四个Fragment界面的变化。注意，我这里用的Fragment都是v4包里面的
     FragmentStatePagerAdapter fragments = new FragmentStatePagerAdapter(getSupportFragmentManager()) {
 
         @Override
         public int getCount() {
             return NUM_ITEMS;//一共有四个Fragment
         }
 
         //进行Fragment的初始化
         @Override
         public Fragment getItem(int i) {
             Fragment fragment = null;
             switch (i) {
                 case 0://首页
                     fragment = new HomeFagment();
                     break;
                 case 1://发现
                     fragment = new FindFagment();
                     break;
 
                 case 2://搜索
                     fragment = new SearchFagment();
                     break;
 
                 case 3://我的
                     fragment = new ProfileFagment();
                     break;
                 default:
                     new HomeFagment();
                     break;
             }
 
             return fragment;
         }
     };
 
     protected void initData() {
 
     }
 
 }

代码注释已经很详细了。

尤其要注意的是第80行的注释，为了让app第一次启动时，默认就让第一个tab处于选中状态，我们现在activity_home.xml（76行）中让剩下的随便哪个radioButton的属性为checked，然后再重写上方java代码中的onStart方法（86行）。

（2）HomeFragment.java:

package com.smyhvae.radiogrouptabdemo.fragment;
 
 import android.os.Bundle;
 import android.support.v4.app.Fragment;
 import android.view.LayoutInflater;
 import android.view.View;
 import android.view.ViewGroup;
 
 import com.smyhvae.radiogrouptabdemo.R;
 
 
 /**
  * Created by smyh on 2015/4/28.
  */
 public class HomeFagment extends Fragment {
     @Override
     public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
         View view = LayoutInflater.from(getActivity()).inflate(R.layout.fragment_home, null);
         return view;
     }
 
     //重写setMenuVisibility方法，不然会出现叠层的现象
     @Override
     public void setMenuVisibility(boolean menuVisibile) {
         super.setMenuVisibility(menuVisibile);
         if (this.getView() != null) {
             this.getView().setVisibility(menuVisibile ? View.VISIBLE : View.GONE);
         }
     }
 
 }

剩下三个Fragment的java代码是一样的，就不贴出来了，详见本文最后的源码。

翔特
关注
专栏目录
android自定义控件之底部自动切换Tab布局
cdy的博客 公众号：Android开发吹牛皮
03-21 2124
今天为大家分享一下，我自定义的底部切换tab布局。先看效果图吧。点击底部控件，自动变色，自动切换不同的布局。    一、首先要定义一个底部的item，layout_bottom_item.xml。也就是上图中的单个点击项目。并且居中显示。   <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
Android--RadioGroup和Tablayout两种实现底部导航的方式详解
HuoHao_Blogs的博客
05-23 4286
自从Android3.0引入Fargment之后，在Activity中使用底部导航进行Fragment的切换已经越来越普遍,或者可以说已经成为了移动应用的标配，而本篇文章我总结了项目中常用的四种实现导航的方式，包含底部和顶部的双导航界面的实现，实现的结果类似下图所示：     一、使用RadioGroup+Fragment实现底部导航，使用TabLayout+Fragment实现顶部导航
Android自定义控件----RadioGroup实现APP首页底部Tab的切换
weixin_33834075的博客
04-28 197
​【声明】  欢迎转载，但请保留文章原始出处→_→  生命壹号：http://www.cnblogs.com/smyhvae/ 文章来源：http://www.cnblogs.com/smyhvae/p/4463931.html   【正文】 实现APP首页底部Tab的切换已经见过四五种方式了，先来看运行的效果图吧： 今天我们就用RadioGroup的方法来实现以下。   【...
Android FragmentTabHost实现底部tab切换
lovoo的博客
06-23 719
一、概述：1、实现如下图的底部Tab效果，点击tab颜色变化 2、示例图： 二、实现：1、创建布局<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="
android 底部tab切换,【BottomBar】Android炫酷的底部切换效果V2.0
weixin_39945792的博客
05-26 276
如果本文帮助到你，本人不胜荣幸，如果浪费了你的时间，本人深感抱歉。希望用最简单的大白话来帮助那些像我一样的人。如果有什么错误，请一定指出，以免误导大家、也误导我。本文来自：http://www.jianshu.com/users/320f9e8f7fc9/latest_articles感谢您的关注。注意：此库最低支持版本是 api 11显示效果图：滚动隐藏底部画面在平板上显示会是这个效果特别炫酷，...
RadioGroup实现APP首页底部Tab的切换
04-28
本篇文章将详细介绍如何利用`RadioGroup`组件来实现APP首页底部Tab的切换功能。 `RadioGroup`是Android SDK提供的一种控件，它允许我们在一组单选按钮（RadioButton）中进行互斥的选择。在底部Tab切换场景中，我们...
Android中TabLayout+ViewPager 简单实现app底部Tab导航栏
01-05
在谷歌发布Android Design Support Library之前，app底部tab布局的实现方法就有很多种，其中有RadioGroup+FrameLayout、TabHost+Fragment、FragmentPagerAdapter+ViewPager等方法，虽然这些方法虽然能达到同样的效果...
Android-底部导航栏(底部Tab)最佳实践，用过的都说香
2301_76348206的博客
03-31 778
除了上面的几种方式之外，还有一种方式来实现底部导航栏，那就是我们通过自定义View来实现，自定义View的好处是我们可以按照我们想要的高度定制，缺点是：比起这些现有的控件还是有点麻烦。下面就通过自定义一个CustomTabView 为例子，来实现一个底部导航栏。CustomTabView 代码下：//保存TabView// 保存Tabinit();init();
android 主页底部菜单tab切换标签
蓝骑的博客
09-20 4597
使用RadioGroup+FrameLayout，自定义FragmentTabAdapter完成app首页切换标签功能。app闪退自动重启后Fragment会重叠在一起的解决方案。
Android主流APP底部Tab效果制作
09-01
类似微信底部tab切换效果类似微信底部tab切换效果类似微信底部tab切换效果类似微信底部tab切换效果类似微信底部tab切换效果类似微信底部tab切换效果类似微信底部tab切换效果类似微信底部tab切换效果类似微信底部tab切换效果类似微信底部tab切换效果类似微信底部tab切换效果类似微信底部tab切换效果类似微信底部tab切换效果类似微信底部tab切换效果类似微信底部tab切换效果类似微信底部tab切换效果类似微信底部tab切换效果类似微信底部tab切换效果
Android 自定义底部TAB
11-23
Android 自定义底部TAB Android 自定义底部TAB Android 自定义底部TAB
自己整理的所有的底部导航栏Tab切换方法
07-03
自己整理的所有的底部导航栏Tab切换方法
APP-Tabs:多种多样的App主界面Tab实现方法
06-13
APP-Tabs 多种多样的App主界面Tab实现方法 TAB第一种实现方式：ViewPager+RadioGroup TAB第二种实现方式：Fragment+RadioGroup TAB第三种实现方式：FragmentPagerAdapter+ViewPager TAB第四种实现方式：ViewPagerIndicator+ViewPager
Android : 巧用RadioGroup作为Tab切换的按钮
arieshao的开发总结
05-13 807
主流Tab切换式布局,设置RadioButton 的Style变换Tab切换按钮　 　　 文字颜色 tab_selector.xml <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_checked="true" android:color="#C7513D"
RadioGroup以及RadioButton自定义样式的使用
梦空间
06-21 8683
转载自：RadioGroup以及RadioButton自定义样式的使用 RadioButton从字面上就可以很清楚的知道它是单选按钮，它与RadioGroup配套时候。通常我们在开发中需要自定义RadioButton的样式，比如新浪的Tab页，性别选择等都需要自定义一些漂亮的样式。 1、我们如何定制呢？       首先我们先把RadioButton默认的单选按钮去掉。      只
android底部菜单切换,如何快速实现Android底部导航栏
weixin_31544603的博客
05-26 1277
前言介绍主流的安卓APP，首页经常会采用底部导航栏切换的效果。针对这种情况，封装成TabView工具类，方便大家使用。正文一、界面分析上图的效果，我们可以判断出界面是由viewpager+fragment+底部Tab实现。二、开始撸码只贴出了核心代码，具体请查看我的GitHub,记得点颗哦!1. 实现底部的Tab,自定义TabContainerView 继承 RelativeLayout，这是我们...
Android底部tab实现
RungBy的博客
04-25 493
1.tabHost组件2自己编写，运用ViewPager参考https://blog.csdn.net/u014486880/article/details/45950429
Android-底部导航栏(底部Tab)最佳实践，用过的都说香！(1)
最新发布
2401_84538278的博客
04-29 1004
除了上面的几种方式之外，还有一种方式来实现底部导航栏，那就是我们通过自定义View来实现，自定义View的好处是我们可以按照我们想要的高度定制，缺点是：比起这些现有的控件还是有点麻烦。下面就通过自定义一个CustomTabView 为例子，来实现一个底部导航栏。CustomTabView 代码下：//保存TabView// 保存Tabinit();init();init();init();/**添加Tab。
android 标签动态切换效果图,使用radiogroup实现 tab标签切换，类似网页切换效果...
weixin_34108829的博客
05-26 316
首先我们 先看下效果图： 下面来看下实现方式：xml代码片段android:id="@+id/rg_ml"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_margin="5dp"android:orientation="horizontal" >android:id=...
Android自定义控件实现：RadioButton与RadioGroup组合
总结一下，自定义控件的实现是Android开发中的一个重要技巧，它允许开发者根据项目需求定制控件的功能和外观，提高应用的用户体验。通过学习和实践自定义控件，开发者不仅可以解决现有控件的局限性，还能提升自己的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值