Android底部選項卡之Fragment
阿新 • • 發佈：2019-01-26
歡迎初學者可以進行學習借鑑，此篇文章主要介紹android底部選項卡用法，希望能夠幫助到大家；
1，xml介面，分為新建四個，根據自己專案來，我就建立一個，其它的都一樣的，如：fragment1.xml， fragment2.xml,fragment3.xml,fragment4.xml;
2,mainactivity.java主程式，也一樣建立四個；
嗯，大概意思都明白了，那麼接著就來實際操作吧，首先建立一個xml，我就建一個，其它的就更改TextView的內容可以了，沒啥難度的。
<?xml version="1.0" encoding="utf-8"?> 然後，此時的介面都建立完畢，然後就是firefrangment.java，和上面xml對應，需要幾個就建立多少個；
package com.example.rnd.jsonobjcet;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
/**
* Created by dm on 16-3-29.
* 第一個頁面
*/ Fragment介面程式都建立好了，那麼就差當前的主程式mainactivity.xml，這個是最關鍵的，裡面包涵圖片，文字，標題等。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/colorAccent"
android:orientation="vertical">
1. 頂部標題欄
<!--<include-->
<!--android:id="@+id/show_main_title"-->
<!--layout="@layout/title_activity" />-->
<!--2. 存放四個Fragment-->
<FrameLayout
android:id="@+id/content"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="@color/whitesmoke">
</FrameLayout>
<!--3. 底部的四個選項選單-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#FFFFFF">
<!--四個部分都一樣：ImageView + TextView-->
<RelativeLayout
android:id="@+id/first_layout"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginTop="8sp"
android:orientation="vertical">
<ImageView
android:id="@+id/first_image"
android:layout_width="20sp"
android:layout_height="20sp"
android:layout_gravity="center_horizontal"
android:src="@android:drawable/ic_menu_compass" />
<TextView
android:id="@+id/first_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:textSize="10sp"
android:text="@string/Dash_xx"
android:textColor="#7597B3" />
</LinearLayout>
</RelativeLayout>
<RelativeLayout
android:id="@+id/second_layout"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginTop="8sp"
android:orientation="vertical">
<ImageView
android:id="@+id/second_image"
android:layout_width="20sp"
android:layout_height="20sp"
android:layout_gravity="center_horizontal"
android:src="@android:drawable/ic_menu_agenda" />
<TextView
android:id="@+id/second_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="10sp"
android:layout_gravity="center_horizontal"
android:text="@string/Dash_rl"
android:textColor="#7597B3" />
</LinearLayout>
</RelativeLayout>
<RelativeLayout
android:id="@+id/third_layout"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8sp"
android:layout_centerVertical="true"
android:orientation="vertical">
<ImageView
android:id="@+id/third_image"
android:layout_width="20sp"
android:layout_height="20sp"
android:layout_gravity="center_horizontal"
android:src="@android:drawable/ic_menu_edit" />
<TextView
android:id="@+id/third_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="10sp"
android:layout_gravity="center_horizontal"
android:text="ddd"
android:textColor="#7597B3" />
</LinearLayout>
</RelativeLayout>
<RelativeLayout
android:id="@+id/fourth_layout"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8sp"
android:layout_centerVertical="true"
android:orientation="vertical">
<ImageView
android:id="@+id/fourth_image"
android:layout_width="20sp"
android:layout_height="20sp"
android:layout_gravity="center_horizontal"
android:src="@android:drawable/ic_menu_myplaces" />
<TextView
android:id="@+id/fourth_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="10sp"
android:layout_gravity="center_horizontal"
android:text="ccccccc"
android:textColor="#7597B3" />
</LinearLayout>
</RelativeLayout>
</LinearLayout>
</LinearLayout>此時最後一步了，mainactivity.java程式，複製貼上上去可以運行了，哈哈哈，就這麼簡單的幾個步驟，相信不是很難吧，記住FragmentActivity要匯入v4的包；
package com.example.rnd.jsonobjcet;
import android.content.Intent;
import android.os.Bundle;
import android.support.v4.app.FragmentActivity; // 注意這裡我們匯入的V4的包，不要導成app的包了
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.view.View;
import android.widget.FrameLayout;
import android.widget.ImageView;
import android.widget.RelativeLayout;
import android.widget.TextView;
/**
* 主頁面內容
* Created by dm on 16-1-19.
*/
public class MainActivity extends FragmentActivity implements View.OnClickListener {
// 初始化頂部欄顯示
private ImageView titleLeftImv;
private TextView titleTv;
// 定義4個Fragment物件
private FirstFragment fg1;
private SecondFragment fg2;
private ThirdFragment fg3;
private FourthFragment fg4;
// 幀佈局物件，用來存放Fragment物件
private FrameLayout frameLayout;
// 定義每個選項中的相關控制元件
private RelativeLayout firstLayout;
private RelativeLayout secondLayout;
private RelativeLayout thirdLayout;
private RelativeLayout fourthLayout;
private ImageView firstImage;
private ImageView secondImage;
private ImageView thirdImage;
private ImageView fourthImage;
private TextView firstText;
private TextView secondText;
private TextView thirdText;
private TextView fourthText;
// 定義幾個顏色
private int whirt = 0xFFFFFFFF;
private int gray = 0xFF7597B3;
private int dark = 0xff000000;
// 定義FragmentManager物件管理器
private FragmentManager fragmentManager;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
fragmentManager = getSupportFragmentManager();
initView(); // 初始化介面控制元件
setChioceItem(0); // 初始化頁面載入時顯示第一個選項卡
}
/**
* 初始化頁面
*/
private void initView() {
// 初始化底部導航欄的控制元件
firstImage = (ImageView) findViewById(R.id.first_image);
secondImage = (ImageView) findViewById(R.id.second_image);
thirdImage = (ImageView) findViewById(R.id.third_image);
fourthImage = (ImageView) findViewById(R.id.fourth_image);
firstText = (TextView) findViewById(R.id.first_text);
secondText = (TextView) findViewById(R.id.second_text);
thirdText = (TextView) findViewById(R.id.third_text);
fourthText = (TextView) findViewById(R.id.fourth_text);
firstLayout = (RelativeLayout) findViewById(R.id.first_layout);
secondLayout = (RelativeLayout) findViewById(R.id.second_layout);
thirdLayout = (RelativeLayout) findViewById(R.id.third_layout);
fourthLayout = (RelativeLayout) findViewById(R.id.fourth_layout);
firstLayout.setOnClickListener(MainActivity.this);
secondLayout.setOnClickListener(MainActivity.this);
thirdLayout.setOnClickListener(MainActivity.this);
fourthLayout.setOnClickListener(MainActivity.this);
}
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.first_layout:
setChioceItem(0);
break;
case R.id.second_layout:
setChioceItem(1);
break;
case R.id.third_layout:
setChioceItem(2);
break;
case R.id.fourth_layout:
setChioceItem(3);
break;
default:
break;
}
}
/**
* 設定點選選項卡的事件處理
*
* @param index 選項卡的標號：0, 1, 2, 3
*/
private void setChioceItem(int index) {
FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
clearChioce(); // 清空, 重置選項, 隱藏所有Fragment
hideFragments(fragmentTransaction);
switch (index) {
case 0:
// firstImage.setImageResource(R.drawable.XXXX); 需要的話自行修改
firstText.setTextColor(dark);
firstLayout.setBackgroundColor(gray);
// 如果fg1為空，則建立一個並新增到介面上
if (fg1 == null) {
fg1 = new FirstFragment();
fragmentTransaction.add(R.id.content, fg1);
} else {
// 如果不為空，則直接將它顯示出來
fragmentTransaction.show(fg1);
}
break;
case 1:
// secondImage.setImageResource(R.drawable.XXXX);
secondText.setTextColor(dark);
secondLayout.setBackgroundColor(gray);
if (fg2 == null) {
fg2 = new SecondFragment();
fragmentTransaction.add(R.id.content, fg2);
} else {
fragmentTransaction.show(fg2);
}
break;
case 2:
// thirdImage.setImageResource(R.drawable.XXXX);
thirdText.setTextColor(dark);
thirdLayout.setBackgroundColor(gray);
if (fg3 == null) {
fg3 = new ThirdFragment();
fragmentTransaction.add(R.id.content, fg3);
} else {
fragmentTransaction.show(fg3);
}
break;
case 3:
// fourthImage.setImageResource(R.drawable.XXXX);
fourthText.setTextColor(dark);
fourthLayout.setBackgroundColor(gray);
if (fg4 == null) {
fg4 = new FourthFragment();
fragmentTransaction.add(R.id.content, fg4);
} else {
fragmentTransaction.show(fg4);
}
break;
}
fragmentTransaction.commit(); // 提交
}
/**
* 當選中其中一個選項卡時，其他選項卡重置為預設
*/
private void clearChioce() {
// firstImage.setImageResource(R.drawable.XXX);
firstText.setTextColor(gray);
firstLayout.setBackgroundColor(whirt);
// secondImage.setImageResource(R.drawable.XXX);
secondText.setTextColor(gray);
secondLayout.setBackgroundColor(whirt);
// thirdImage.setImageResource(R.drawable.XXX);
thirdText.setTextColor(gray);
thirdLayout.setBackgroundColor(whirt);
// fourthImage.setImageResource(R.drawable.XXX);
fourthText.setTextColor(gray);
fourthLayout.setBackgroundColor(whirt);
}
/**
* 隱藏Fragment
*
* @param fragmentTransaction
*/
private void hideFragments(FragmentTransaction fragmentTransaction) {
if (fg1 != null) {
fragmentTransaction.hide(fg1);
}
if (fg2 != null) {
fragmentTransaction.hide(fg2);
}
if (fg3 != null) {
fragmentTransaction.hide(fg3);
}
if (fg4 != null) {
fragmentTransaction.hide(fg4);
}
}
}執行的如何？是不是功能很炫酷呢，相信這將對初學者來說還是值得去學習掌握的技能，深刻的去領悟理解，多做就明白啦，好了，不吹牛了，還要繼續做專案，謝謝各位的閱讀，有什麼問題可以向部落格說。