Android开发 漂亮底部Tab 标签 选项卡制作教程

最新推荐文章于 2025-02-25 10:15:41 发布
最新推荐文章于 2025-02-25 10:15:41 发布
阅读量5.9k 收藏 9
点赞数
分类专栏： Android开发 文章标签： Android底部tab制作 安卓底部选项卡制作 底部菜单制作
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/juyangjia/article/details/9616299
版权

 

开发环境搭建   http://blog.youkuaiyun.com/juyangjia/article/details/9471561
HelloWorld http://blog.youkuaiyun.com/juyangjia/article/details/9491781
欢迎动画制作 http://blog.youkuaiyun.com/juyangjia/article/details/9494961
菜单制作 http://blog.youkuaiyun.com/juyangjia/article/details/9612287
底部tab制作 http://blog.youkuaiyun.com/juyangjia/article/details/9616299
顶部tab制作 http://blog.youkuaiyun.com/juyangjia/article/details/9628915
intellij idea12 打包项目为jar http://blog.youkuaiyun.com/juyangjia/article/details/9379373

....各位对不起，因为工作时间的原因，这个原本计划的系列教程中断了，希望后面有时间了之后能够接着写下去


 

一、前言

       我们经常使用的程序，如qq、微博、微信、百思不得姐等等都会在程序下方有一个tab切换页面，这样的一个功能不仅是方便，更是一种习惯，我做了一个，效果没有那么好，但是也还能看。

 

二、制作步骤

老规矩，先上效果图：

 

1. now, let's begin~the step 1：prepare the images，准备好需要的图片，本示例程序使用图片大小：44X44（加上图片边缘空白部分是：60X50）（没有？本博文后面将 附上源码下载地址，内含图片）

最后得到10个png文件：

 

2. the step 2：复制图片到项目drawable中：

一共11图片，那个tab_background.9.png是tab的背景图片。

 

3. 建立5个selector文件（xml），何为selector？你就把他理解为一个引用了多个图片的xml文件，这些图片正好是按钮按下的图片和按钮显示的图片：

     drawable右击新建：

       5个xml文件的名称如下：

5个文件的内容如下：

 gift：

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_focused="true" android:state_enabled="true" android:state_pressed="false" android:drawable="@drawable/tab_icon_gift" />
    <item android:state_enabled="true" android:state_pressed="true" android:drawable="@drawable/tab_icon_gift" />
    <item android:state_enabled="true" android:state_checked="true" android:drawable="@drawable/tab_icon_gift_select" />
    <item android:drawable="@drawable/tab_icon_gift" />
</selector>

mail：

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_focused="true" android:state_enabled="true" android:state_pressed="false" android:drawable="@drawable/tab_icon_mail" />
    <item android:state_enabled="true" android:state_pressed="true" android:drawable="@drawable/tab_icon_mail" />
    <item android:state_enabled="true" android:state_checked="true" android:drawable="@drawable/tab_icon_mail_select" />
    <item android:drawable="@drawable/tab_icon_mail" />
</selector>

msg：

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_focused="true" android:state_enabled="true" android:state_pressed="false" android:drawable="@drawable/tab_icon_msg" />
    <item android:state_enabled="true" android:state_pressed="true" android:drawable="@drawable/tab_icon_msg" />
    <item android:state_enabled="true" android:state_checked="true" android:drawable="@drawable/tab_icon_msg_select" />
    <item android:drawable="@drawable/tab_icon_msg" />
</selector>

search:

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_focused="true" android:state_enabled="true" android:state_pressed="false" android:drawable="@drawable/tab_icon_search" />
    <item android:state_enabled="true" android:state_pressed="true" android:drawable="@drawable/tab_icon_search" />
    <item android:state_enabled="true" android:state_checked="true" android:drawable="@drawable/tab_icon_search_select" />
    <item android:drawable="@drawable/tab_icon_search" />
</selector>

set:

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_focused="true" android:state_enabled="true" android:state_pressed="false" android:drawable="@drawable/tab_icon_set" />
    <item android:state_enabled="true" android:state_pressed="true" android:drawable="@drawable/tab_icon_set" />
    <item android:state_enabled="true" android:state_checked="true" android:drawable="@drawable/tab_icon_set_select" />
    <item android:drawable="@drawable/tab_icon_set" />
</selector>


4. 建立一个xml的样式文件，这个样式文件用来描述Button长什么样子，在values右击-new-values resouce file：


取名字为style, ok后会自动生成style.xml文件在values下，内容如下：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="main_tab_bottom">
        <!-- <item name="android:textSize">@dimen/bottom_tab_font_size</item> -->
        <item name="android:textColor">#ffffffff</item>
        <item name="android:ellipsize">marquee</item>
        <item name="android:gravity">center_horizontal</item>
        <!-- <item name="android:paddingTop">@dimen/bottom_tab_padding_up</item> -->
        <item name="android:layout_width">fill_parent</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:button">@null</item><!--将原来系统的RadioButton图标给隐藏起来-->
        <item name="android:singleLine">true</item>
        <!--  <item name="android:drawablePadding">@dimen/bottom_tab_padding_drawable</item> -->
        <item name="android:layout_weight">1.2</item>
    </style>
</resources>

 

5.  现在开始在主页面的xml(本示例程序中为layout2.xml ) 布局文件里添加tab显示的位置:

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:id="@+id/main_lineer">
    <ScrollView
            android:id="@+id/containerBody"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:measureAllChildren="true">
    </ScrollView>
    <LinearLayout
            android:id="@+id/tab"
            android:orientation="horizontal"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:gravity="center_vertical|center_horizontal"
            android:background="@drawable/tab_background">
        <LinearLayout
                android:orientation="horizontal"
                android:layout_width="wrap_content"
                android:layout_height="fill_parent"
               >
            <RadioGroup android:gravity="center_vertical"
                        android:orientation="horizontal" android:id="@+id/main_radio"
                        android:layout_width="fill_parent" android:layout_height="50dip"
                        android:layout_gravity="bottom" >
                <RadioButton android:id="@+id/radio_button0"
                             android:layout_marginTop="1.0dip" android:text=""
                             android:drawableTop="@null" style="@style/main_tab_bottom"
                             android:background="@drawable/tab_icon_gift_layout"/>
                <RadioButton android:id="@+id/radio_button1"
                             android:layout_marginTop="1.0dip" android:text=""
                             android:drawableTop="@null" style="@style/main_tab_bottom"
                             android:background="@drawable/tab_icon_mail_layout" />
                <RadioButton android:id="@+id/radio_button2"
                             android:layout_marginTop="1.0dip" android:text=""
                             android:drawableTop="@null" style="@style/main_tab_bottom"
                             android:background="@drawable/tab_icon_msg_layout" />
                <RadioButton android:id="@+id/radio_button3"
                             android:layout_marginTop="1.0dip" android:text=""
                             android:drawableTop="@null" style="@style/main_tab_bottom"
                             android:background="@drawable/tab_icon_search_layout" />
                <RadioButton android:id="@+id/radio_button4"
                             android:layout_marginTop="1.0dip" android:text=""
                             android:drawableTop="@null" style="@style/main_tab_bottom"
                             android:background="@drawable/tab_icon_set_layout" />
            </RadioGroup>
        </LinearLayout>
    </LinearLayout>

</LinearLayout>

 

如果你仔细的话就会看到， 上面布局代码里有2个linearLayout嵌套，为什么要这么做？

切换到视图模式，可以看到，这是2.7屏幕下显示



这是4.0屏幕

这是5.4屏幕

为了保证屏幕大小不让图片拉伸，内部的linearLayout控件会始终居中，这样不会变形，当然，通常情况下，我们的手机屏幕5寸以上就不多了。

 

6. 在res下layout文件夹右击，新建5个布局xml文件

分别取名为View_1.xml、View_2.xml、View_3.xml、View_4.xml、View_5.xml

每个布局文件中随便你放什么，但是不要放完全一模一样的东西，否则切换看不出效果。

 

7. 在src下新建5个Activity类，分别取名View1Activity、View2Activity、View3Activity、View4Activity、View5Activity（图是后来补截，所以可以看到activity类都已建立好，不用管）

给这5个activity类oncreate方法中添加代码：setContentView(R.layout.view_n);   //这个n在每个类中填写对应的xml布局文件1、2、3、4、5

 

8. the last step，编写主界面的代码如下，只看oncreate()、tabchange（）、initRadios（）3个方法即可 ：

package com.example.AndroidHelloWorld;

import android.app.ActivityGroup;
import android.app.AlertDialog;
import android.content.DialogInterface;
import android.content.Intent;
import android.os.Bundle;
import android.view.*;
import android.widget.*;

/**
 * Created with IntelliJ IDEA.
 * User: Administrator
 * Date: 13-7-26
 * Time: 下午12:28
 * To change this template use File | Settings | File Templates.
 */
public class MainActivity extends ActivityGroup {
    private ScrollView container = null;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.layout2);

        LinearLayout layout = (LinearLayout) findViewById(R.id.main_lineer);//得到主页面的最外层布局控件
        layout.setBackgroundResource(R.drawable.main_bg);//设置背景图片，这里可以先判断当前是否为横屏，如果横屏则显示hpic
        initRadios();//初始化单选按钮
        container = (ScrollView) findViewById(R.id.containerBody);//得到用来显示不同Activity的容器
        View v = findViewById(R.id.tab);//得到下方tab
        v.getBackground().setAlpha(180);//设置其背景透明度
        ((RadioButton)findViewById(R.id.radio_button0)).setChecked(true);//初始化启动程序选中第一个
    }

    //给radiogroup的选项发生变化事件添加响应事件
    private void initRadios() {
        ((RadioButton) findViewById(R.id.radio_button0))
                .setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
                    @Override
                    public void onCheckedChanged(CompoundButton compoundButton, boolean b) {
                        tabChange(compoundButton, b);
                    }
                });
        ((RadioButton) findViewById(R.id.radio_button1))
                .setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
                    @Override
                    public void onCheckedChanged(CompoundButton compoundButton, boolean b) {
                        tabChange(compoundButton,b);
                    }
                });
        ((RadioButton) findViewById(R.id.radio_button2))
                .setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
                    @Override
                    public void onCheckedChanged(CompoundButton compoundButton, boolean b) {
                        tabChange(compoundButton,b);
                    }
                });
        ((RadioButton) findViewById(R.id.radio_button3))
                .setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
                    @Override
                    public void onCheckedChanged(CompoundButton compoundButton, boolean b) {
                        tabChange(compoundButton,b);
                    }
                });
        ((RadioButton) findViewById(R.id.radio_button4))
                .setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
                    @Override
                    public void onCheckedChanged(CompoundButton compoundButton, boolean b) {
                        tabChange(compoundButton, b);
                    }
                });
    }

    //单选按钮change后执行
    public void tabChange(CompoundButton buttonView, boolean isChecked) {
        if(isChecked){//是否为选中
            container.removeAllViews();//清空容器内容，必须
            Intent intent =null;//Intent是一个Activity到达另一个Activity的引路者，它描述了起点（当前Activity）和终点（目标Activity）
            //以下switch为判断选中的是哪个
            switch (buttonView.getId()) {
                case R.id.radio_button0:
                    intent = new Intent(MainActivity.this, View1Activity.class);
                    break;
                case R.id.radio_button1:
                    intent = new Intent(MainActivity.this, View2Activity.class);
                    break;
                case R.id.radio_button2:
                    intent = new Intent(MainActivity.this, View3Activity.class);
                    break;
                case R.id.radio_button3:
                    intent = new Intent(MainActivity.this, View4Activity.class);
                    break;
                case R.id.radio_button4:
                    intent = new Intent(MainActivity.this, View5Activity.class);
                    break;
            }
            /*
            * Intent的标志之一（目前我知道有4个），理解这个东西需要一点栈的知识，感兴趣的朋友去百度一下，不过建议先使用
            * */
            intent.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);
            /*
            * 代码解释：
            * getLocalActivityManager()得到一个LocalActivityManager，此方法来自父类ActivityGroup，
            * 通过LocalActivityManager通过startActivity(String id, Intent intent),可以与指定的Actiivty绑定，
            * 并且返回一个Window。LocalActivityManager可以同时管理多个Activity
            * */
            Window subActivity = getLocalActivityManager().startActivity(
                                    "subActivity", intent);
            //将intent传递给指定页面， 你可以理解为跳转到该页面
            container.addView(subActivity.getDecorView());
        }
    }

/*
*  从此处开始，以下代码为前面我菜单制作教程的代码，本章内容中没有用到，可以不用理会
*
* */
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        super.onCreateOptionsMenu(menu);
        MenuInflater menuInflater = getMenuInflater();
        menuInflater.inflate(R.menu.home_timeline_menu, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        String title = item.getTitle().toString();
        if (title.equals("退出")) {
            AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this);
            builder.setIcon(R.drawable.menu_icons);
            builder.setTitle("你确定要离开吗？");
            builder.setPositiveButton("确定", new DialogInterface.OnClickListener() {
                public void onClick(DialogInterface dialog, int whichButton) {
                    Toast toast = Toast.makeText(getApplicationContext(),
                            "好吧，你要退出。.", Toast.LENGTH_SHORT);
                    toast.setGravity(Gravity.CENTER, 0, 0);
                    toast.show();
                    finish();
                }
            });
            builder.setNegativeButton("取消", new DialogInterface.OnClickListener() {
                public void onClick(DialogInterface dialog, int whichButton) {
                    Toast toast = Toast.makeText(getApplicationContext(),
                            "你太好了，欢迎继续使用.", Toast.LENGTH_SHORT);
                    toast.setGravity(Gravity.CENTER, 0, 0);
                    toast.show();
                }
            });
            builder.create().show();
        }
        return super.onOptionsItemSelected(item);
    }
}


 

源码：http://download.youkuaiyun.com/detail/juyangjia/5833575 

 

三、最后

        后面我还会发布其他制作教程，我希望这个系列教程完成的时候学习的人就可以制作一个自己的app出来了。

[源码]Android开发 漂亮底部Tab栏 标签 选项卡制作教程
09-28
效果查看、教程地址：http://blog.youkuaiyun.com/juyangjia/article/details/9616299
TabLayout+ViewPager+Fragment实现顶部或底部导航栏
写代码的林克
10-12 5084
以前看慕课网的教程，写过一个微信Tab选项卡切换的例子，使用的是ViewPager+Fragment来实现的，说实话，当时为了实现一些效果，还是写了蛮多的代码，但是，今天介绍的TabLayout+ViewPager+Fragment实现导航栏可以使用很少的代码实现很棒的效果。
在Android开发中解析JSON：从基础到高级技巧
最新发布
Myqijiahai的博客
02-25 707
在Android开发中，解析JSON是一个常见的需求。通过使用`org.json`库、`Gson`库、`Moshi`库或`Jackson`库，开发者可以轻松地解析和操作JSON数据。对于复杂的数据结构，可以通过嵌套解析、动态字段处理和类型安全的解析来优化性能。希望本文能帮助你在Android开发中更高效地处理JSON数据。
Android应用底部导航栏(选项卡)实例
wanghao_happy的专栏
10-10 1570
现在很多android的应用都采用底部导航栏的功能，这样可以使得用户在使用过程中随意切换不同的页面，现在我采用TabHost组件来自定义一个底部的导航栏的功能。 我们先看下该demo实例的框架图： 其中各个类的作用以及资源文件就不详细解释了，还有资源图片(在该Demo中借用了其它应用程序的资源图片)也不提供了，大家可以自行更换自己需要的资源图片。直接上各个布局文件或各个类的代码： [1]
android之TabWidget选项卡
weixin_34138377的博客
04-17 128
1 概览 l  TabWidget与TabHost。tab组件一般包括TabHost和TabWidget、FrameLayout，且TabWidget、FrameLayout属于TabHost。 l  是否继承TabActivity的问题 l  实现步骤。两种实现方式，一种是将每个Tab的布局嵌在TabHost中的FrameLayout中，每个Tab的内容布局与显示都在FrameLayout...
android tab选项卡的使用
diaoxiao8834的博客
10-28 361
项目做完了，写写博客，在项目中遇到的一些问题，或者是自己觉得很不错的东西。这一篇主要是想和大家分享一下我在项目中封装的一个东西，就是tab选项卡。先看看效果图： 我在网上看了很多有关选项卡的demo，可是发现都不太符合我的需求，万恶的产品经理想做的效果是选项卡中的文字有多长，文字下方的线就显示多长，无奈之下，自己写了。由于项目中很多地方都有用这个东东，所以我就封装了这一个，先看看...
Android将TAB选项卡放在屏幕底部
weixin_30404405的博客
09-21 130
要放置底端，那么Android自带的例程是不可以做到的（例程参看development-ApiDemo）。先需要写一个xml的layout文档，命名为bottomtab.xml。 <?xml version="1.0" encoding="utf-8"?><LinearLayoutxmlns:android="http://schemas.android.com/apk/re...
android 底部选项卡(TabHost)
萌萌的It人 www.itmmd.com
04-16 1043
今天写Tab的时候由于TAB的跳转问题去查资料，倒反而发现更有趣的问题，就是如何将TAB放置在屏幕的底端。 xml version="1.0" encoding="utf-8"?> TabHost xmlns:android="http://schemas.android.com/apk/res/android" android:id="@android:id/tabhost"
android 开发tab,跟我学android应用开发 之 如何创建选项卡（Tab）
weixin_30621465的博客
05-27 282
在很多应用中都有选项卡，如下： 源码实现：package com.alex.app.testtab;import android.app.TabActivity;import android.os.Bundle;import android.view.LayoutInflater;import android.widget.TabHost;public class MainActivity ext...
Android开发学习笔记：浅谈Tab选项卡
weixin_33725515的博客
08-19 154
Tab选项卡是一个非常方便的组件。 一.使用Tab组件的步骤： 1.在布局文件中使用FrameLayout列出Tab组件以及Tab中的内容组件 2.Activity要继承TabActivity 3.调用TabActivity的getTabHost( )方法来获得TabHost对象 4.通过TabHost创建Tab选项 二.实现不同Tab里面的内容有两种方式： 1...
android自定义Tab选项卡控件
07-21
android自定义控件，实现选项卡功能。可通过自定义属性设置选项卡样式，且Tab的数目也可通过属性灵活设置，可设置为文本选项卡或图片选项卡，利用回调监听响应各Tab的点击事件，且设置方法和android原生控件设置点击监听的方法基本一致。
漂亮的JSP TAB选项卡
10-15
很好用，很漂亮，我想你们一定会喜欢的吧，多多顶起哦
TabHostBottom(底部选项卡)，底部菜单
10-10
一款相当不错的Android底部菜单，样式美化，本人一直在用。
CSS+JS漂亮的tab选项卡
ICode联盟
07-01 482
下载地址CSS+JS实现的漂亮的tab选项卡，带动画效果的tab切换插件。dd:
android 炫酷的选项卡,炫酷Bootstrap美化Tabs选项卡特效
weixin_39883670的博客
05-28 398
插件描述：这是一款炫酷Bootstrap美化Tabs选项卡特效。该选项卡特效基于Bootstrap原生Tab选项卡的基础上，使用CSS样式来进行美化，增加了tab标签的伸缩动画功能。使用方法在页面中引入bootstrap相关文件和fontawsome字体图标文件。HTML结构选项卡的基本HTML结构如下：SECTION-1SECTION-2SECTION-3Section1选项卡一的内容Sect...
android中的tab选项卡
Taylor_pretty的专栏
06-11 967
//第一步：extends TabActivity @SuppressWarnings("deprecation") public class MainActivity extends TabActivity{ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceS
评论 9
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值