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
menu鍵菜單製作 http://blog.csdn.net/juyangjia/article/details/9612287

 

一、前言

       我們經常使用的程式，如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出來了。