Android實習劄記(5)---Fragment之底部導覽列的實現

標籤：android   fragment   tabhost   底部導覽列   

Android實習劄記(5)---Fragment之底部導覽列的實現

——轉載請註明出處:coder-pig

在Part 4我們回顧了一下Fragment的基本概念,在本節中我們就來學習Fragment應用的簡單例子吧!

就是使用Fragment來實現簡單的底部導覽列,先貼下:

看上去很簡單,實現起來也是很簡單的哈!那麼接著下來就看下實現的流程圖吧:

實現流程圖:

看完流程圖是不是有大概的思路了,那麼接著就開始代碼的編寫吧:

代碼實現:

①先寫布局,布局的話很簡單,一個FrameLayout用來放Fragment,底部一個大的LinearLayout

放著三個小Item,每個Item的布局如下:

<RelativeLayout              android:id="@+id/setting_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/setting_image"                      android:layout_width="wrap_content"                      android:layout_height="wrap_content"                      android:layout_gravity="center_horizontal"                      android:src="@drawable/ic_tabbar_settings_normal" />                    <TextView                      android:id="@+id/setting_text"                      android:layout_width="wrap_content"                      android:layout_height="wrap_content"                      android:layout_gravity="center_horizontal"                      android:text="設定"                      android:textColor="#7597B3" />              </LinearLayout>          </RelativeLayout>  

copy多兩個,改片,文本資源就可以了,完整布局代碼如下:

activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"      android:layout_width="match_parent"      android:layout_height="match_parent"      android:orientation="vertical" >      <FrameLayout          android:id="@+id/content"          android:layout_width="match_parent"          android:layout_height="0dp"          android:layout_weight="1" >      </FrameLayout>      <LinearLayout          android:layout_width="match_parent"          android:layout_height="60dp"          android:background="#FFFFFF" >            <RelativeLayout              android:id="@+id/course_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/course_image"                      android:layout_width="wrap_content"                      android:layout_height="wrap_content"                      android:layout_gravity="center_horizontal"                      android:src="@drawable/ic_tabbar_course_normal" />                    <TextView                      android:id="@+id/course_text"                      android:layout_width="wrap_content"                      android:layout_height="wrap_content"                      android:layout_gravity="center_horizontal"                      android:text="議程"                      android:textColor="#7597B3" />              </LinearLayout>          </RelativeLayout>                  <RelativeLayout              android:id="@+id/found_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/found_image"                      android:layout_width="wrap_content"                      android:layout_height="wrap_content"                      android:layout_gravity="center_horizontal"                      android:src="@drawable/ic_tabbar_found_normal" />                    <TextView                      android:id="@+id/found_text"                      android:layout_width="wrap_content"                      android:layout_height="wrap_content"                      android:layout_gravity="center_horizontal"                      android:text="發現"                      android:textColor="#7597B3" />              </LinearLayout>          </RelativeLayout>                          <RelativeLayout              android:id="@+id/setting_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/setting_image"                      android:layout_width="wrap_content"                      android:layout_height="wrap_content"                      android:layout_gravity="center_horizontal"                      android:src="@drawable/ic_tabbar_settings_normal" />                    <TextView                      android:id="@+id/setting_text"                      android:layout_width="wrap_content"                      android:layout_height="wrap_content"                      android:layout_gravity="center_horizontal"                      android:text="設定"                      android:textColor="#7597B3" />              </LinearLayout>          </RelativeLayout>                            </LinearLayout></LinearLayout>  

②接著就寫三個Fragment的布局,這個看你需要了,這裡就一個TextView

寫完一式三份,複製多兩個,改下顏色和文字

fg1.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:gravity="center"    android:background="#FAECD8"    android:orientation="vertical" >        <TextView         android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="議程表Fragment"    /></LinearLayout>

③接著寫三個Fragment的實作類別,同樣一式三份,改下inflate載入的Fragment即可

Fragment1.java

package com.jay.example.fragmentforhost;import android.os.Bundle;import android.support.v4.app.Fragment;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;public class Fragment1 extends Fragment {@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {View view = inflater.inflate(R.layout.fg1, container,false);return view;}}

④接著就到MainActivity的編寫了,也很簡單,自己看看吧,就不多解釋了

就定義的幾個方法,初始化選項,選中處理,以及隱藏所有Fragment的方法!

MainActivity.java

package com.jay.example.fragmentforhost;import android.os.Bundle;import android.support.v4.app.FragmentActivity;import android.support.v4.app.FragmentManager;import android.support.v4.app.FragmentTransaction;import android.view.View;import android.view.View.OnClickListener;import android.widget.FrameLayout;import android.widget.ImageView;import android.widget.RelativeLayout;import android.widget.TextView;public class MainActivity extends FragmentActivity implements OnClickListener{//定義3個Fragment的對象private Fragment1 fg1;private Fragment2 fg2;private Fragment3 fg3;//幀布局對象,就是用來存放Fragment的容器private FrameLayout flayout;//定義底部導覽列的三個布局private RelativeLayout course_layout;private RelativeLayout found_layout;private RelativeLayout settings_layout;//定義底部導覽列中的ImageView與TextViewprivate ImageView course_image;private ImageView found_image;private ImageView settings_image;private TextView course_text;private TextView settings_text;private TextView found_text;//定義要用的顏色值private int whirt = 0xFFFFFFFF;private int gray = 0xFF7597B3;private int blue =0xFF0AB2FB;//定義FragmentManager對象FragmentManager fManager;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);fManager = getSupportFragmentManager();initViews();}//完成組件的初始化public void initViews(){course_image = (ImageView) findViewById(R.id.course_image);found_image = (ImageView) findViewById(R.id.found_image);settings_image = (ImageView) findViewById(R.id.setting_image);course_text = (TextView) findViewById(R.id.course_text);found_text = (TextView) findViewById(R.id.found_text);settings_text = (TextView) findViewById(R.id.setting_text);course_layout = (RelativeLayout) findViewById(R.id.course_layout);found_layout = (RelativeLayout) findViewById(R.id.found_layout);settings_layout = (RelativeLayout) findViewById(R.id.setting_layout);course_layout.setOnClickListener(this);found_layout.setOnClickListener(this); settings_layout.setOnClickListener(this);}//重寫onClick事件@Overridepublic void onClick(View view) {switch (view.getId()) {case R.id.course_layout:setChioceItem(0);break;    case R.id.found_layout:    setChioceItem(1);    break;    case R.id.setting_layout:    setChioceItem(2);    break;    default:break;}}//定義一個選中一個item後的處理public void setChioceItem(int index){//重設選項+隱藏所有FragmentFragmentTransaction transaction = fManager.beginTransaction();  clearChioce();hideFragments(transaction);switch (index) {case 0:course_image.setImageResource(R.drawable.ic_tabbar_course_pressed);  course_text.setTextColor(blue);course_layout.setBackgroundResource(R.drawable.ic_tabbar_bg_click);            if (fg1 == null) {                  // 如果fg1為空白，則建立一個並添加到介面上                  fg1 = new Fragment1();                  transaction.add(R.id.content, fg1);              } else {                  // 如果MessageFragment不為空白，則直接將它顯示出來                  transaction.show(fg1);              }              break;  case 1:found_image.setImageResource(R.drawable.ic_tabbar_found_pressed);  found_text.setTextColor(blue);found_layout.setBackgroundResource(R.drawable.ic_tabbar_bg_click);            if (fg2 == null) {                  // 如果fg1為空白，則建立一個並添加到介面上                  fg2 = new Fragment2();                  transaction.add(R.id.content, fg2);              } else {                  // 如果MessageFragment不為空白，則直接將它顯示出來                  transaction.show(fg2);              }              break;       case 2:settings_image.setImageResource(R.drawable.ic_tabbar_settings_pressed);  settings_text.setTextColor(blue);settings_layout.setBackgroundResource(R.drawable.ic_tabbar_bg_click);            if (fg3 == null) {                  // 如果fg1為空白，則建立一個並添加到介面上                  fg3 = new Fragment3();                  transaction.add(R.id.content, fg3);              } else {                  // 如果MessageFragment不為空白，則直接將它顯示出來                  transaction.show(fg3);              }              break;                 }transaction.commit();}//隱藏所有的Fragment,避免fragment混亂private void hideFragments(FragmentTransaction transaction) {          if (fg1 != null) {              transaction.hide(fg1);          }          if (fg2 != null) {              transaction.hide(fg2);          }          if (fg3 != null) {              transaction.hide(fg3);          }      }  //定義一個重設所有選項的方法public void clearChioce(){course_image.setImageResource(R.drawable.ic_tabbar_course_normal);course_layout.setBackgroundColor(whirt);course_text.setTextColor(gray);found_image.setImageResource(R.drawable.ic_tabbar_found_normal);found_layout.setBackgroundColor(whirt);found_text.setTextColor(gray);settings_image.setImageResource(R.drawable.ic_tabbar_settings_normal);settings_layout.setBackgroundColor(whirt);settings_text.setTextColor(gray);}}

最後說幾句:

代碼就上面的一點點,解析也很詳細,看多兩遍就應該能看懂了,

另外注意一點就是Fragment相關類匯入的時候是v4包還是app包！

那裡很容易出錯的,關於app與v4包的Fragment可以看劄記(3)的解析!

恩,這節就寫到這裡,下一節會實現Fragment與ViewPager的簡單應用!

敬請期待!

本節代碼下載:

http://pan.baidu.com/s/1gdel98B

Android實習劄記(5)---Fragment之底部導覽列的實現