Android開發 漂亮底部Tab 標籤 選項卡製作教程
阿新 • • 發佈：2018-10-31
開發環境搭建 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出來了。