快捷導(dǎo)航

Android 使用Fragment模仿微信界面的實(shí)例代碼

更新時(shí)間：2017年07月10日 09:27:28 作者：IamCerian

自從Android 3.0中引入fragments 的概念，根據(jù)詞海的翻譯可以譯為:碎片、片段。其目的是為了解決不同屏幕分辯率的動(dòng)態(tài)和靈活UI設(shè)計(jì)。下面通過本文給大家分享Android 使用Fragment模仿微信界面的實(shí)例代碼，需要的的朋友參考下吧

什么是Fragment

　　自從Android 3.0中引入fragments 的概念，根據(jù)詞海的翻譯可以譯為:碎片、片段。其目的是為了解決不同屏幕分辯率的動(dòng)態(tài)和靈活UI設(shè)計(jì)。大屏幕如平板小屏幕如手機(jī)，平板電腦的設(shè)計(jì)使得其有更多的空間來放更多的UI組件，而多出來的空間存放UI使其會(huì)產(chǎn)生更多的交互，從而誕生了fragments 。

　　fragments 的設(shè)計(jì)不需要你來親自管理view hierarchy 的復(fù)雜變化，通過將Activity 的布局分散到frament 中，可以在運(yùn)行時(shí)修改activity 的外觀，并且由activity 管理的back stack 中保存些變化。當(dāng)一個(gè)片段指定了自身的布局時(shí)，它能和其他片段配置成不同的組合，在活動(dòng)中為不同的屏幕尺寸修改布局配置（小屏幕可能每次顯示一個(gè)片段，而大屏幕則可以顯示兩個(gè)或更多）。

　　Fragment必須被寫成可重用的模塊。因?yàn)閒ragment有自己的layout，自己進(jìn)行事件響應(yīng)，擁有自己的生命周期和行為，所以你可以在多個(gè)activity中包含同一個(gè)Fragment的不同實(shí)例。這對(duì)于讓你的界面在不同的屏幕尺寸下都能給用戶完美的體驗(yàn)尤其重要。

Fragment優(yōu)點(diǎn)

Fragment可以使你能夠?qū)ctivity分離成多個(gè)可重用的組件，每個(gè)都有它自己的生命周期和UI。

Fragment可以輕松得創(chuàng)建動(dòng)態(tài)靈活的UI設(shè)計(jì)，可以適應(yīng)于不同的屏幕尺寸。從手機(jī)到平板電腦。

Fragment是一個(gè)獨(dú)立的模塊,緊緊地與activity綁定在一起。可以運(yùn)行中動(dòng)態(tài)地移除、加入、交換等。

Fragment提供一個(gè)新的方式讓你在不同的安卓設(shè)備上統(tǒng)一你的UI。

Fragment 解決Activity間的切換不流暢，輕量切換。

Fragment 替代TabActivity做導(dǎo)航，性能更好。

Fragment 在4.2.版本中新增嵌套fragment使用方法，能夠生成更好的界面效果。

Fragment做局部內(nèi)容更新更方便，原來為了到達(dá)這一點(diǎn)要把多個(gè)布局放到一個(gè)activity里面，現(xiàn)在可以用多Fragment來代替，只有在需要的時(shí)候才加載Fragment，提高性能。

可以從startActivityForResult中接收到返回結(jié)果,但是View不能。

這里寫圖片描述

圖片中給出了實(shí)例的效果，在點(diǎn)擊下方的按鈕時(shí)，上半部分會(huì)自動(dòng)切換成對(duì)應(yīng)的內(nèi)容。這里使用的技術(shù)是fragment。

想必大家對(duì)fragment已經(jīng)有所了解，就算不清楚，百度也有詳細(xì)的介紹。在這里就著重介紹實(shí)現(xiàn)的過程。

首先，拿其中的一個(gè)部分“首頁”來講：

這里寫圖片描述

上面一部分是fragment，下面則是相對(duì)固定的按鈕區(qū)。也就是說，當(dāng)點(diǎn)擊按鈕時(shí)，切換的只是上半部分內(nèi)容。所以，每一個(gè)fragment都有一個(gè)自己的xml布局文件。就想圖中所示的，“首頁”這個(gè)fragment的xml文件就是由一個(gè)textview構(gòu)成。
完成fragment的xml文件后，需要定義一個(gè)對(duì)應(yīng)的Java類來找到它，比如：首頁對(duì)應(yīng)的類是homeFragment.java。注意，這個(gè)類需要繼承fragment，并且每一個(gè)這樣繼承fragment的類都需要重寫其onCreateView的方法。具體代碼是：

import android.app.Fragment;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import com.example.cerian.marcon.R;
/**
 * Created by Cerian on 2017/7/9.
 */
public class homeFragment extends Fragment {
  @Override
  public View onCreateView(LayoutInflater inflater, ViewGroup container,
               Bundle savedInstanceState) {
    View view=inflater.inflate(R.layout.fragment_home, null);
    //找到按鈕前要加view.
    return view;
  }
}

完成到這步時(shí)，每一個(gè)fragment的內(nèi)容就已經(jīng)完成了。接下來要做的是，將每一個(gè)fragment與一個(gè)頁面綁定并在其上顯示。這里我用了一個(gè)menufunction.xml

這里寫圖片描述

代碼是：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
  android:id="@+id/rl_layout"
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical"
  android:layout_width="match_parent"
  android:layout_height="match_parent">
  <LinearLayout
    android:id="@+id/ll_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
  </LinearLayout>
  <LinearLayout
    android:showDividers="beginning|end|middle"
    android:background="#ffffff"
    android:layout_width="match_parent"
    android:layout_height="40dp"
    android:orientation="horizontal"
    android:layout_alignParentBottom="true"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true">
    <ImageView
      android:id="@+id/ig_home"
      android:clickable="true"
      android:layout_weight="1"
      android:layout_width="0dp"
      android:layout_height="wrap_content"
      android:src="@mipmap/homepage1"/>
    <ImageView
      android:id="@+id/ig_lib"
      android:clickable="true"
      android:layout_weight="1"
      android:layout_width="0dp"
      android:layout_height="wrap_content"
      android:src="@mipmap/library1"/>
    <ImageView
      android:id="@+id/ig_my"
      android:clickable="true"
      android:layout_weight="1"
      android:layout_width="0dp"
      android:layout_height="wrap_content"
      android:src="@mipmap/my1"/>
  </LinearLayout>
</RelativeLayout>

在這個(gè)布局中，上面的LinearLayout是用來顯示fragment內(nèi)容的，下面的是按鈕。

然后，在這個(gè)menufunction.xml的對(duì)應(yīng)java類中，找到定義好的fragment，并顯示。主要的思想是：①拿到一個(gè)管理者②開啟一個(gè)事務(wù)③替換fragment內(nèi)容④提交，注意，這里的第四步很容易被遺忘。

代碼是：

import android.app.FragmentManager;
import android.app.FragmentTransaction;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.ImageView;
import com.example.cerian.marcon.fragment.homeFragment;
import com.example.cerian.marcon.fragment.libFragment;
import com.example.cerian.marcon.fragment.myFragment;
/**
 * Created by Cerian on 2017/7/9.
 */
public class home extends AppCompatActivity implements View.OnClickListener {
  private ImageView ig_home, ig_lib, ig_my;
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.menufunction);
    ig_home = (ImageView) findViewById(R.id.ig_home);
    ig_lib = (ImageView) findViewById(R.id.ig_lib);
    ig_my = (ImageView) findViewById(R.id.ig_my);
    ig_home.setOnClickListener(this);
    ig_lib.setOnClickListener(this);
    ig_my.setOnClickListener(this);
/**
 * 第一步：拿到管理者
 * 第二步：開啟事務(wù)
 * 第三步：替換
 * 第四步：提交
 */
    FragmentManager fragmentManager = getFragmentManager();
    FragmentTransaction beginTransaction = fragmentManager.beginTransaction();
    beginTransaction.replace(R.id.ll_layout, new homeFragment());
    ig_home.setImageResource(R.mipmap.homepage2);
    beginTransaction.commit();
  }
  @Override
  public void onClick(View view) {
    FragmentManager fragmentManager = getFragmentManager();
    FragmentTransaction beginTransaction = fragmentManager.beginTransaction();
    switch (view.getId()) {
      case R.id.ig_home: //點(diǎn)擊的是主頁
        beginTransaction.replace(R.id.ll_layout, new homeFragment());
        ig_home.setImageResource(R.mipmap.homepage2);
        ig_my.setImageResource(R.mipmap.my1);
        ig_lib.setImageResource(R.mipmap.library1);
        break;
      case R.id.ig_lib: //點(diǎn)擊的是收藏
        beginTransaction.replace(R.id.ll_layout, new libFragment());
        ig_home.setImageResource(R.mipmap.homepage1);
        ig_my.setImageResource(R.mipmap.my1);
        ig_lib.setImageResource(R.mipmap.library2);
        break;
      case R.id.ig_my: //點(diǎn)擊的是我的
        beginTransaction.replace(R.id.ll_layout, new myFragment());
        ig_home.setImageResource(R.mipmap.homepage1);
        ig_my.setImageResource(R.mipmap.my2);
        ig_lib.setImageResource(R.mipmap.library1);
        break;
    }
    beginTransaction.commit();
  }
}

其中，因?yàn)樯婕暗降狞c(diǎn)擊事件有點(diǎn)多且相似，我用到了一個(gè)特殊的寫法，也就是setonclicklistener（this），參數(shù)用了this，并重新定義了一個(gè)click方法。注意：這樣寫，必須要繼承一個(gè)clicklistener的接口。
最后，提交就ok。

效果是：

這里寫圖片描述