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

开发环境搭建 http://blog.csdn.net/juyangjia/article/details/9471561
HelloWorld http://blog.csdn.net/juyangjia/article/details/9491781
欢迎动画制作 http://blog.csdn.net/juyangjia/article/details/9494961
菜单制作 http://blog.csdn.net/juyangjia/article/details/9612287
底部tab制作 http://blog.csdn.net/juyangjia/article/details/9616299
顶部tab制作 http://blog.csdn.net/juyangjia/article/details/9628915
intellij idea12 打包项目为jar http://blog.csdn.net/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.csdn.net/detail/juyangjia/5833575

三、最后

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

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

猜你喜欢

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