====================================
====== 第四章:手機平板要兼顧 — 探究碎片 ======
====================================
4.1 碎片是什么(通過都是在平板中使用)
碎片(fragment)是一種可以嵌入在活動當中的UI片段截亦,它能讓程序更加合理和充分地利用大屏幕的空間惶岭。碎片和活動是在太像了嘉冒,同樣能包含布局,同樣有自己的聲明周期奖亚。你甚至可以將碎片理解為一個迷你型的活動。
一個活動中引入兩個碎片析砸,相當于一個活動力分為左右兩個屏幕昔字。
新建一個FragmentTest
創(chuàng)建兩個layout的xml文件,一個left一個right首繁。
然后新建一個Fragment的類作郭,繼承自fragment,這時候發(fā)現(xiàn)有兩個fragment供選擇蛮瞄,一個是系統(tǒng)內(nèi)置的android.app.Fragment所坯,一個是support-v4庫中的 ,強烈建議使用support-v4的Fragment挂捅,因為可以讓碎片在所有Android系統(tǒng)版本中保持功能一致性芹助。
另外堂湖,我們不需要在build.gradle文件中添加support-v4庫的依賴,因為build.gradle文件中已經(jīng)添加了appcompat-v7庫的依賴状土,而這個庫會將support-v4庫也一起引入進來无蜂。
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<fragment
android:layout_width="0dp"
android:layout_height="match_parent"
android:id="@+id/left_fragment"
android:layout_weight="1"
android:name="com.example.fragmenttest.LeftFragment"/>
<fragment
android:layout_width="0dp"
android:layout_height="match_parent"
android:id="@+id/right_fragment"
android:layout_weight="1"
android:name="com.example.fragmenttest.RightFragment"/>
</LinearLayout>
可以看出,我們使用了<fragment>標簽在布局中添加碎片蒙谓,斥季,只不過這里需要通過android:name屬性來顯性指明要添加的碎片類型(注意這里一定要將類的包名也加上)
4.2.2 動態(tài)添加碎片
碎片的真正強大之處在于,它可以在程序運行事動態(tài)的添加到活動當中累驮,根據(jù)實際情況動態(tài)的添加碎片酣倾,您就可以將程序界面定制更加多樣化。
新增一個another_right_fragment.xml谤专,
動態(tài)添加碎片主要分為5步:
1躁锡、創(chuàng)建待添加的碎片實例
2、獲取FragmentManager置侍,在活動中可以直接通過調用getSupportFragmentManger()方法得到映之。
3、開啟一個事物蜡坊,通過調用beginTransaction()方法開啟
4杠输、向容器內(nèi)添加或替換碎片,一般使用replace()方法實現(xiàn)秕衙,需要傳入容器的id和待添加的碎片實例
5蠢甲、提交事務,調用commit()方法來完成据忘。
4.2.3 在碎片中模擬返回棧
FragmentTransaction中提供了一個addToBackStack()方法峡钓,可以用于將一個事物添加到返回棧中。修改MainActivity中的代碼若河。
public class MainActivity extends AppCompatActivity implements View.OnClickListener {
…
private void replaceFragment(Fragment fragment) {
FragmentMananger fragmengManager = getSupportFragmentManager();
FragmentTransaction transaction = fragmentManager.beginTransaction();
transaction.replace(R.id.right_layout, fragment);
transaction.addToBackStack(null);
transaction.commit();
}
}
addBackToStack(null)可以接受一個名字用于描述返回棧的狀態(tài)能岩,一般傳入null即可。
4.2.4 碎片和活動之間進行通信
雖然現(xiàn)在碎片是嵌入到活動中了萧福,但是實際上他們的關系并沒有那么親密拉鹃。你看到,碎片和活動都是各自存在于獨立的類中的鲫忍。
為了方便碎片和活動之間進行通訊膏燕,F(xiàn)ragmentManager提供了一個類似于findViewById()的方法,專門用于從布局文件中獲取碎片的實例悟民。如下:
RightFragment rightFragment = (RightFragment)getFragmentManager().findFragmentById(R.id.right_fragment);
那么坝辫,如何在碎片里調用活動呢?在每個碎片中都可以通過getActivity()方法來得到和當前碎片相關聯(lián)的活動實例射亏,如下:
MainActivity activity = (MainActivity) getActivity();
getActivity()獲取到的本身就是一個context對象近忙。
那么竭业,碎片與碎片之間如何通訊呢?碎片可以得到與它關聯(lián)的活動及舍,通過活動再獲取另一個碎片的實例即可未辆。
4.3 碎片的聲明周期
和活動一樣,碎片也有聲明周期锯玛,而且它的聲明周期與活動的生命周期實在是太像了咐柜。
4.3.1 碎片的狀態(tài)和回調
活動有:運行狀態(tài)、暫停狀態(tài)攘残、停止狀態(tài)和銷毀狀態(tài)四種拙友。
以下是碎片的聲明周期:
1、運行狀態(tài):
當一個碎片是可見的歼郭,并且它所關聯(lián)的活動正處于運行狀態(tài)時献宫,該碎片也處于運行轉臺。
2实撒、暫停狀態(tài):
當一個活動進入暫停狀態(tài)(由于另一個未占滿屏幕的活動被添加到了棧頂),與它相關聯(lián)的可見碎片就會進入暫停狀態(tài)
3涉瘾、停止狀態(tài):
當一個活動進入停止狀態(tài)知态,與它關聯(lián)的碎片就會進入停止狀態(tài)×⑴眩或者通過調用FragmentTransaction的remove()负敏、replace()方法將碎片從活動中移除,但如果在事物提交之前調用addToBackStack()方法秘蛇,這時的碎片也會進入到停止狀態(tài)其做。總的來說赁还,進入停止狀態(tài)的碎片對于用戶來說是完全不可見的妖泄,有可能會被系統(tǒng)回收。
4艘策、銷毀狀態(tài):
碎片依附于活動而存在蹈胡,當活動被銷毀時,與他相關聯(lián)的碎片就會進入到銷毀狀態(tài)朋蔫》=ィ或者通過調用FragmentTransaction的remove()、replace()方法將碎片從活動中移除驯妄,但是在事物提交之前沒有調用addBackToStack()方法荷并,這時的碎片也會進入到銷毀狀態(tài)。
Fragment類中也提供了一系列的毀掉方法青扔。以覆蓋碎片生命周期的每個環(huán)節(jié)源织。其中翩伪,活動中有的回調方法,碎片中幾乎都有雀鹃,不過碎片還提供了一些附加的會調方法幻工,重點看一下這幾個會調:
onAttach():當碎片和活動建立關聯(lián)的時候調用
onCreateView():為碎片創(chuàng)建視圖(加載布局)時調用
onActivityCreate():確保與碎片相關聯(lián)的活動一定已經(jīng)創(chuàng)建完畢時調用。
onDestroyView():當與碎片關聯(lián)的視圖被移除的時候調用
onDetach():當碎片和活動解除關聯(lián)的時候調用黎茎。
具體的碎片聲明周期看書本圖片:page153
添加一個碎片 —> onAttach() —> onCreate() —> onCreateView() —> onStart() —> onResume() —> 碎片已激活 —> onPause() —> onStop() —> onDestroy() —> onDetach() —> 碎片已銷毀
4.3.2 體驗一下碎片的聲明周期
修改RightFragment中的代碼
public class RightFragment extends Fragment {
public statci final String TAG = “RightFragment”;
@Override
public void onAttach(Context context) {
super.onAttach(context);
Log.d(TAG, “onAttach”);
}
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
}
@Override
public View onCreateView(LayoutInflater inflater, VIewGroup container, Bundle savedInstanceState) {
Log.d(TAG, “onCreateView”);
View view = inflater.inflater(R.layout.right_fragment, container, false);
return view;
}
@Override
public void onActivityCreated(Bundle savedInstanceState) {
super.onActivityCreate(savedInstanceState);
}
@Override
public void onStart() {
super.onStart();
}
@Overrde
public void onResume() {
super.onResume();
}
@Override
public void onPause() {
super.onPause();
}
@Override
public void onStop() {
super.onStop();
}
@Overrde
public void onDestroyView() {
super.onDestroyVew();
}
@Override
public void onDestroy() {
super.onDestroy();
}
@Override
public voide onDetach() {
super.onDetach();
}
}
順便囊颅,在碎片中,你也可以通過onSaveInstanceState()方法來保存數(shù)據(jù)傅瞻,因為在進入停止狀態(tài)的時候碎片有可能在系統(tǒng)內(nèi)存不足的時候被回收踢代。保存下來的數(shù)據(jù)可以在onCreate() onCreateView() onActivityCreate() 這三個方法中重新得到,因為這三個方法中都有Bundle類型的savedInstanceState參數(shù)嗅骄。
4.4 動態(tài)加載布局的技巧
動態(tài)添加碎片的功能畢竟只是一個布局文件中進行添加和替換操作胳挎。如果程序能夠根據(jù)設備的分辨率或屏幕大小來運行時加載某個布局,那我們可發(fā)揮的空間就更多了溺森。
4.4.1
使用平板電腦經(jīng)常會發(fā)現(xiàn)分左右兩頁慕爬,那么如何才能在運行時判斷程序應該是使用雙頁模式還是使用單頁模式呢?這就需要借助限定符(Qualifiers)來實現(xiàn)屏积。
創(chuàng)建兩個activity_main.xml的文件医窿。一個只有一個fragment占滿屏幕,一個有兩個fragment炊林,分為左右屏姥卢。
其中,放入layout文件夾中的
另一個放在layout_large文件夾中渣聚,
其中独榴,large就是一個限定符,那些屏幕被認為是large的設備就會自動加載layout_large文件夾下的布局奕枝,小屏幕的設備則會加載layout文件夾下的布局棺榔。
Android中常見的限定符如下所示:(參照Page159)
屏幕特征 限定符 描述
大小 small 提供給小屏幕設備的資源
normal 提供給中等屏幕設備的資源
large 提供給大屏幕設備的資源
xlarge 提供給超大屏幕設備的資源
分辨率 ldpi 提供給低分辨率設備的資源(120dpi以下)
mdpi 提供給中等分辨率設備的資源(120dpi ~ 160dpi)
hdpi 提供給高分辨率設備的資源(160dpi ~ 240dpi)
xhdpi 提供給超高分辨率設備的資源(240dpi ~ 320dpi)
xxhdpi 提供給超超高分辨率設備的資源(320dpi ~ 480dpi)
方向 land 提供給橫屏設備的資源
port 提供給豎屏設備的資源
4.4.2 使用最小寬度限定符
新的問題出現(xiàn)了,large到底是指多大呢隘道?
最小寬度限定符允許我們對屏幕的寬度指定一個最小值(以dp為單位)掷豺,然后以這個最小值為臨界點。
在res目錄下新建layout-sw600dp薄声,然后在里面新建activity_main.xml布局当船,這意味著,當程序運行在屏幕寬度大于600dp的設備上時默辨,會加載layout-sw600dp/activity_main布局德频。
4.5 碎片的最佳實踐 —> 一個簡易的新聞應用
常見一個新的應用FragmentBestPractice。
1缩幸、在app/build.gradle中添加recyclerView的依賴庫
2壹置、新增一個News類竞思,作為model
public class News {
private String title; // 標題
private String content; // 內(nèi)容
public String getTitle() {
return title;
}
public String getContent() {
return content;
}
public void setTitle(String title) {
this.title = title;
}
public void setContent(String content) {
this.content = content;
}
3、新建布局钞护,用于新聞內(nèi)容的布局 news_content_frag.xml
<RelativeLayout xmlns:android=“http://schemas.android.com/apk/res/android”
android:layout_width=“match_parent”
android:layout_height=“match_parent” >
<LinearLayout
android:id=“@+id/visibility_layout”
android:layout_width=“match_parent”
android:layout_height=“match_parent”
android:orientation=“vertical”
android:visibility=“invisible” >
<TextView
android:id=“@+id/news_title”
android:layout_width=“match_parent”
android:layout_height=“wrap_content”
android:layout_gravity=“center”
android:padding=“10dp”
android:textSize=“20sp” />
<View
android:layout_width=“match_parent”
android:layout_height=“1dp”
android:background=“#000” />
<TextView
android:id=“@+id/new_content”
android:layout_width=“match_parent”
android:layout_height=“0dp”
android:layout_weight=“1”
android:padding=“15dp”
android:textSize=“18sp” />
</LinearLayout>
<View
android:layout_width=@“1dp”
android:layout_height=“match_parent”
android:layout_alignParentLeft=“true”
android:background=“#000” />
</RelativeLayout>
4盖喷、新建一個NewsContentFragment類,繼承自Fragment难咕,代碼如下
public class NewsContentFragment extends Fragment {
private VIew view;
@Override
public View onCreateVIew(LayoutInflater infalter, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflater(R.layout.news_content_frag, container, false);
return view;
}
public void refresh(String newsTitle, String newsContent) {
View visibilityLayout = view.findVIewById(R.id.visibility_layout);
visibilityLayout.setVisibility(VIew.VISIBLE);
TextView newsTitltText = (TextView) view.findViewById(R.id.news_title);
TextView newsContentText = (TextView) view.findViewById(R.id.new_content);
newsTitleText.setText(newsTitle); // 刷新新聞的標題
newsContentText.setText(newsContent); // 刷新新聞的內(nèi)容
}
}
5课梳、上面我們創(chuàng)建的碎片和布局都是在雙頁模式下使用的,現(xiàn)在需要再創(chuàng)建一個活動余佃,右鍵com.example.fragmentbestpractice包 —> New —> Activity —> Empty Activity暮刃,新建一個NewsContentActivity,并將布局名指定為news_content(新增一個news_content.xml文件):
<LinearLayout xmlns:android=“http://schemas.android.com/apk/res/android”
android:orientation=“vertical”
android:layout_width=“match_parent”
android:layout_height=“match_parent” >
<fragment
android:id=“@+id/news_content_fragment”
android:name=“com.example.fragmentbestpractice.NewsContentFragment”
android:layout_width=“match_parent”
android:layotu_height=“match_parent” />
</LinearLayout>
6爆土、修改NewsContentFragment的代碼
public class NewsContentFragment extends AppCompataActivity {
public static void actionStart(Context context, String newsTitle, String newsContent) {
Intent intend = new Intent(context, NewsContentActivity.class);
intent.putExtra(“news_title”, newsTitle);
intent.putExtra(“news_content”, newsContent);
context.startActivity(intent);
}
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.news_content);
String newsTitle = getIntent().getStringExtra(“news_title”); // 獲取傳入的新聞標題
String newsContent = getIntent().getStingExtra(“news_content”); // 獲取傳入的新聞內(nèi)容
NewsContentFragment newsContentFragment = (NewsContentFragment) getSupportFragmengManager().findFragmentById(R.id.news_content_fragnent);
newsContentFragment.refresh(newsTitle, newsContent); // 刷新NewsContent-Fragment界面
}
}
在onCreate方法中椭懊,我們通過Intent獲取到了傳入的新聞標題和新聞內(nèi)容
然后通過FragmentManager的findFragmentById()方法得到了NewsContentFragment的實例。接著調用它的refresh()方法步势。
actionStart()方法氧猬,作用忘記了。坏瘩。盅抚。回看一下2.6.3小節(jié)桑腮。
7、還需要創(chuàng)建一個用于顯示新聞列表的布局蛉幸,新建news_title_frag.xml
<LinearLayout xmlns:android=“http://schemas.android.com/apk/res/android”
android:orientation=“vertical”
android:layout_width=“match_parent”
android:layout_height=“match_parent” >
<android.support.v7.widget.RecyclerView
android:id=“@+id/news_title_recycler_view”
android:layout_width=“match_parent”
android:layout_height=“match_parent” />
</LinearLayout>
8破讨、新建news_item.xml作為RecyclerView子項的布局
<TextView xmlns:android=“http://schemas.android.com/apk/res/android”
android:id=“@+id/new_title”
android:layout_width=“match_parent”
android:layout_height=“wrap_content”
android:singleLine=“true”
android:ellipsize=“end”
android:textSize=“18sp”
android:paddingLeft=“10dp”
android:paddingRight=“10dp”
android:paddingTop=“15dp”
android:paddingBottom=“15dp” />
android:padding的意思表示給控件的周圍加上補白,這樣不至于讓文本內(nèi)容靠在邊緣上
android:singleLine設置為true表示讓TextView只能單行顯示
Android:ellipsize用于設定當文本內(nèi)容超出控件寬度時奕纫,文本的縮略方式提陶,這里的end表示在尾部進行縮略。
9匹层、用于展示新聞列表的地方隙笆。新建NewsTitleFragment作為展示新聞列表的碎片。
public class NewsTitleFragment extends Fragment {
private boolean isTwoPane;
@Override
public View onCreateView(LayoutInflater inflater, VIewGroup container, Bundle savedInstanceState) {
View view = inflater.inflater(R.id.news_title_frag, container, false);
return view;
}
@Override
public void onActivityCreate(Bundle savedInstanceState) {
super.onActivityCreate(savedInstanceState);
if (getActivity().findViewById(R.id.news_content_layout) != null ) {
isTwoPane = true; // 可以找到news_content_layout布局時升筏,為雙頁模式
} else {
isTwoPane = false; // 找不到news_content_layout布局時撑柔,為單頁模式
}
}
}
getActivity()方法用戶在fragment中獲取關聯(lián)的activity
10、修改activity_main.xml文件
<FramLayout xmlns:android=“http://schemas.android.com/apk/res/android”
android:id=“@+id/news_title_layout”
android:layout_width=“match_parent”
android:layout_height=“match_parent” >
<fragment
android:id=“@+id/news_title_fragment”
android:name=“com.example.fragmentbestparctice.NewsTitleFragment”
android:layout_width=“match_parent”
android:layout_height=“match_parent” />
</FrameLayout>
上面代碼中您访,在單頁模式下铅忿,只會加載一個新聞標題的碎片。
11灵汪、然后新建layout-sw600dp文件夾檀训,在這個文件及中新建一個activity_main.xml文件柑潦,代碼如下
<LinearLayout xmlns:android=“http://schemas.android.com/apl/res/android”
android:layout_width=“match_parent”
android:layout_height=“match_parent”
android:orientation=“horizontal” >
<fragment
android:id=“@+id/news_title+fragment”
android:name=“com.example.fragmentbestpractice.NewsTitleFragment”
android:layout_width=“0dp”
android:layout_height=“match_parent”
android:layout_weight=“1”/>
<FrameLayout
android:id=“@+id/news_content_layout”
android:layout_width=“0dp”
android:layout_height=“match_parent”
android:layout_weight=“3” />
<fragment
android:id=“@+id/news_content_fragment”
android:name=“com.example.fragmentbestpractice.NewsContentFragment”
android:layout_width=“match_parent”
android:layout_height=“math_parent” />
</FrameLayout>
</LinearLayout>
可以看到,我們在雙頁模式下引入了兩個碎片峻凫,并將新聞內(nèi)容碎片放在FrameLayout布局下渗鬼,而這個布局的id正式news_content_layout,因此荧琼,能夠找到這個id的時候就是雙頁模式譬胎。
12、在NewsTitleFragment中通過RecyclerView將新聞列表展示出來铭腕,我們在NewsTitleFragment中新建一個NewsAdapter來作為RecyclerView的適配器银择。
public class NewsTitltFragment extends Fragment {
private boolean isTwoPane;
…
class NewsAdapter extends RecyclerView.Adapter<NewsAdapter.ViewHolder> {
private List<News> mNewsList;
class ViewHolder extends RecyclerVIew.ViewHolder {
TextView newsTitleText;
public ViewHolder(View view) {
super(view);
newsTitleText = (TextView) view.findViewById(R.id.news_title);
}
}
public NewsAdapter(List<News> newsList) {
mNewsList = newsList;
}
@Override
public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View view = LayoutInflater.from(parent.getContext()).inflater(R.layout.news_item, parent, false);
final ViewHolder holder = new ViewHolder(view);
view.setOnClickLinster(new View.OnClickListener() {
@Override
public void onClick(View v) {
News news = mNewsList.get(holder.getAdapterPosition());
if (isTwoPane) {
// 如果是雙頁模式,則刷新NewsContentFragment中的內(nèi)容
NewsContentFragment newsContentFragment = (NewsContentFragment)getFragmentManager().findFragmentById(R.id.news_content_fragment);
newsContentFragment.refresh(news.getTitle(), news.getContent());
} else {
// 如果是單頁模式累舷,則直接啟動NewsContentActivity
NewsContentActivity.actionStart(getActigity(), news.getTitle(), news.getContent());
}
}
});
return holder;
}
@Override
public void onBindViewHolder(ViewHolder holder, int position) {
News news = mNewsList.get(position);
holder.newsTitleText.setText(news.getTitle());
}
@Override
public int getItemCount() {
return mNewsList.size();
}
}
需要注意的是浩考,之前我們是將適配器寫成一個獨立的類,其實也可以寫成內(nèi)部類的被盈。這里寫成內(nèi)部類的好處就是可以直接訪問NewsTitleFragment的變量析孽,比如isTwoPane變量;
13只怎、最后的工作袜瞬,向RecyclerView中填充數(shù)據(jù)。修改NewsTitleFragment中的代碼
@Override
public View onCreateView (LayoutInflater inflater, VIewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.news_title_frag, container, false);
RecyclerView newsTitleRecyclerView = (RecyclerView) view.findViewById(R.id.news_title_recycler_view);
LinearLayoutManager layoutManager = new LinearLayoutManager(getActivity());
newsTitleRecyclerView.setLayoutManager(layoutManager);
NewsAdapter adapter = new NewsAdapter(getNews());
newsTitleRecyclerView.setAdapter(adapter);
return view;
}
private List<News> getNews() {
List<News> newsList = new ArrayList<>();
for (int i = 0; i < 50; i++) {
News news = new News();
news.setTitle(“This is news title ” + i);
news.setContent(getRandomLengthContent(“This is news content ”+ i + “. ” ));
newsList.add(news);
}
return newsList;
}
private String getRandomLengthContent(String content) {
Random random = new Random();
int length = random.nextInt(20) + 1;
StringBuilder builder = new StrignBuilder();
for (int i = 0; i < length; i++ ) {
builder.append(content);
}
return builder.toString();
}
總結:到本章為止身堡,已經(jīng)學習完了AndroidUI相關的重要知識點邓尤。但是只是涉及了Android四大組件的第一個組件活動。