Android Fragment —Tab 導航欄的實現

時間  2019-12-01
標籤 android fragment tab 導航 實現 欄目 Android 简体版
原文   原文鏈接

        微信、QQ、微博底部等都有 Tab 標籤選項，點擊不一樣的標籤能夠切換的不一樣的界面。java

步驟

1）描述主界面佈局

activity_main.xml 代碼以下:android

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:background="@drawable/header_bg" >

        
        <RelativeLayout
            android:id="@+id/left_layout"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1" >
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:orientation="vertical" >
                <ImageView
                    android:id="@+id/left_image"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_horizontal"
                    android:src="@drawable/left_ico" />   
            </LinearLayout>
        </RelativeLayout>
      
        <RelativeLayout
            android:id="@+id/library_layout"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1" >
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:orientation="vertical" >
                <ImageView
                    android:id="@+id/library_image"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_horizontal"
                    android:src="@drawable/library_ico" />

            </LinearLayout>
        </RelativeLayout>
        
        <RelativeLayout
            android:id="@+id/local_layout"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1" >

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:orientation="vertical" >

                <ImageView
                    android:id="@+id/local_image"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_horizontal"
                    android:src="@drawable/local_ico" />

            </LinearLayout>
        </RelativeLayout>


        <RelativeLayout
            android:id="@+id/news_layout"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1" >

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:orientation="vertical" >

                <ImageView
                    android:id="@+id/news_image"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_horizontal"
                    android:src="@drawable/news_ico" />


            </LinearLayout>
        </RelativeLayout>
        
        <RelativeLayout
            android:id="@+id/search_layout"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1" >

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:orientation="vertical" >

                <ImageView
                    android:id="@+id/search_image"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_horizontal"
                    android:src="@drawable/search_ico" />
            </LinearLayout>
        </RelativeLayout>
    </LinearLayout>
    
    <FrameLayout
        android:id="@+id/content"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" >
    </FrameLayout>

</LinearLayout>

說明：代碼可能看着有點長，先看下佈局以後的 outline 和 可視化編輯區效果：（仿「網易雲音樂界面」）微信

        

  • 主體分爲 LinearLayout 和 FrameLayout(id=connect)，分別放置 Tab 標籤按鈕和對應內容
  • LinearLayout 中分 5 個部分（左側菜單欄left、樂庫library、本地音樂local、動態news）
  • （本次實例主要實現中間 3 個 Tab導航便可）

2）設置每一個 Fragment 的佈局

library_layout.xml 代碼以下：ide

<?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:orientation="vertical" 
    android:background="@drawable/library_bg">
</LinearLayout>

說明：放置了一張背景圖片 library_bg.png，其餘兩個佈局類似佈局

local_layout.xml 與 news_layout.xml 代碼以下：this

<?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:orientation="vertical" 
    android:background="@drawable/local_bg">
</LinearLayout>
<?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:orientation="vertical"
    android:background="@drawable/news_bg" >
</LinearLayout>

3）建立對應佈局的 Fragment 類（繼承於 Fragment）

LibraryFragment.java 代碼以下：spa

public class LibraryFragment extends Fragment{
	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		View libraryLayout =inflater.inflate(R.layout.library_layout, container,false);
		return libraryLayout;
	}
	
}

說明：新建類繼承於 Fragment，其餘兩個類類似.net

LocalFragmet.java 與 NewsFragment.java 代碼以下：code

public class LocalFragment extends Fragment{
	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		View localLayout =inflater.inflate(R.layout.local_layout, container,false);
		return localLayout;
	}
	
}
public class NewsFragment extends Fragment{
	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		View newsLayout =inflater.inflate(R.layout.news_layout, container,false);
		return newsLayout;
	}
	
}

4）在 MainActivity.java 中添加響應代碼

MainActivity.java 代碼以下：xml

public class MainActivity extends Activity implements OnClickListener{	
	/*
     * 用於展現的Fragment 
     */  
    private LibraryFragment libraryFragment;
    private LocalFragment localFragment; 
    private NewsFragment newsFragment; 
    
    
    /* 
     * 界面佈局 
     */  
    private View libraryLayout;
    private View localLayout; 
    private View newsLayout; 

    /* 
     * 在Tab佈局上顯示圖標的控件 
     */  
    private ImageView libraryImage;
    private ImageView localImage;
    private ImageView newsImage;
    
    /*
     * 用於對Fragment進行管理 
     */  
    private FragmentManager fragmentManager;  
  
    @Override  
    protected void onCreate(Bundle savedInstanceState) {  
        super.onCreate(savedInstanceState);  
        requestWindowFeature(Window.FEATURE_NO_TITLE);  
        setContentView(R.layout.activity_main);  
        // 初始化佈局元素（方法實如今下面的代碼）  
        initViews();  
        fragmentManager = getFragmentManager();  
        // 第一次啓動時選中第0個tab（方法實如今下面的代碼） 
        setTabSelection(0);  
    }  

    /*
     * 在這裏獲取到每一個須要用到的控件的實例，並給它們設置好必要的點擊事件。 
     */  
    private void initViews() {  
        libraryLayout = findViewById(R.id.library_layout);  
        localLayout = findViewById(R.id.local_layout);  
        newsLayout = findViewById(R.id.news_layout);  
         
        libraryImage = (ImageView) findViewById(R.id.library_image);  
        localImage = (ImageView) findViewById(R.id.local_image);  
        newsImage = (ImageView) findViewById(R.id.news_image);  
 
        libraryLayout.setOnClickListener(this);  
        localLayout.setOnClickListener(this);  
        newsLayout.setOnClickListener(this);  
 
    }  

    /*
     * 點擊事件的響應代碼 
     */ 
    @Override  
    public void onClick(View v) {  
        switch (v.getId()) {  
        case R.id.library_layout:  
            // 當點擊了第0個tab時，選中第1個tab  
            setTabSelection(0);  
            break;  
        case R.id.local_layout:  
            // 當點擊了第1個tab時，選中第2個tab  
            setTabSelection(1);  
            break;  
        case R.id.news_layout:  
            // 當點擊了第2個tab時，選中第3個tab  
            setTabSelection(2);   
            break;  
        default:  
            break;  
        }  
    }  
  
    /** 
     * 根據傳入的index參數來設置選中的tab頁。 
     *  
     * @param index：每一個tab頁對應的下標。0表示樂庫，1表示本地，2表示動態 
     * 
     *
     */  
    private void setTabSelection(int index) {  
        // 每次選中以前先清楚掉上次的選中狀態  
        clearSelection();  
        // 開啓一個Fragment事務  
        FragmentTransaction transaction = fragmentManager.beginTransaction();  
        // 先隱藏掉全部的Fragment，以防止有多個Fragment顯示在界面上的狀況  
        hideFragments(transaction);  
        switch (index) {  
        case 0:  
            // 當點擊了樂庫tab時，改變控件的圖片顏色  
            libraryImage.setImageResource(R.drawable.library_selected);  
           // libraryTitle.setTextColor(Color.RED);  
            if (libraryFragment == null) {  
                // 若是LibraryFragment爲空，則建立一個並添加到界面上  
                libraryFragment = new LibraryFragment();  
                transaction.add(R.id.content, libraryFragment);  
            } else {  
                // 若是LibraryFragment不爲空，則直接將它顯示出來  
                transaction.show(libraryFragment);  
            }  
            break;  
        case 1:  
            // 當點擊了本地tab時，改變控件的圖片顏色  
            localImage.setImageResource(R.drawable.local_selected);  
           // localTitle.setTextColor(Color.RED);  
            if (localFragment == null) {  
                // 若是LocalFragment爲空，則建立一個並添加到界面上  
                localFragment = new LocalFragment();  
                transaction.add(R.id.content, localFragment);  
            } else {  
                // 若是LocalFragment不爲空，則直接將它顯示出來  
                transaction.show(localFragment);  
            }  
            break;  
        case 2:  
            // 當點擊了動態tab時，改變控件的圖片顏色  
            newsImage.setImageResource(R.drawable.news_selected);  
           // newsTitle.setTextColor(Color.RED);  
            if (newsFragment == null) {  
                // 若是NewsFragment爲空，則建立一個並添加到界面上  
                newsFragment = new NewsFragment();  
                transaction.add(R.id.content, newsFragment);  
            } else {  
                // 若是NewsFragment不爲空，則直接將它顯示出來  
                transaction.show(newsFragment);  
            }  
            break;  }
     
        transaction.commit();  
    }  
  
    /** 
     * 清除掉全部的選中狀態。 
     */  
    private void clearSelection() {  
        libraryImage.setImageResource(R.drawable.library_ico);  

        localImage.setImageResource(R.drawable.local_ico);  

        newsImage.setImageResource(R.drawable.news_ico);  


    }  
  
    /** 
     * 將全部的Fragment都置爲隱藏狀態。 
     *  
     * @param transaction :用於對Fragment執行操做的事務 
     */  
      private void hideFragments(FragmentTransaction transaction) {  
        if (libraryFragment != null) {  
            transaction.hide(libraryFragment);  
        }  
        if (localFragment != null) {  
            transaction.hide(localFragment);  
        }  
        if (newsFragment != null) {  
            transaction.hide(newsFragment);  
        }    
}  


}

代碼有點長，可是註釋很詳細，簡單整理一下

  • initView()：獲取控件的實例併爲其註冊點擊事件監聽器
  • onClick(View v)：點擊事件的響應代碼
  • setTabSelection(int index)：根據 index 肯定被選中的 Tad
  • clearSelection()：清除 Tab 被選中的狀態
  • hideFragment()：將對應的 Fragment 設置爲隱藏狀態

說明：監聽到點擊事件，就響應 onClick() 中相應的代碼，即把對應 Tab 狀態改變：「未選中」→「選中」，同時顯示對應的 Fragment 至 id 爲 connect 的 FrameLayout 佈局上；但在此以前須要清除以前的選中狀態以及隱藏以前顯示的 Fragment 。

示例程序

（仿 網易雲音樂）點擊中間三個圖標，切換到各自界面；

 

附：目錄結構

 

方法參考： Android Fragment應用實戰，使用碎片向ActivityGroup說再見

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程