作为一名专业的android开发人员,需要我们能够同时做到兼顾平板和手机。下面的内容会对你有一定帮助
目录
1.碎片介绍
碎片(Fragment)是一种可以嵌入在活动当中的UI片段,它能让程序更加合理和充分地利用大屏幕的空间,因而在平板上应用得非常广泛。
碎片和活动实在是很像,同样都能包含布局,同样都有自己的生命周期。
想象我们正在开发一个新闻应用,其中一个界面使用Recyclerview展示了一组新闻的标题,当点击了其中一个标题时,就打
开另一个界面显示新闻的详细内容。
如果是在手机中设计,我们可以将新闻标题列表放在一个活动中,将新闻的详细内容放在另一个活动中,如图4.1所示。
可是如果在平板上也这样设计,新闻列表界面会被拉长,充满整个屏幕,影响审美
所以,更好的设计方案是将新闻标题列表界面和新闻详细内容界面分别放在两个碎片中,然后在同一个活动中引入这两个碎片
2.碎片的基本使用
(1)、新建两个碎片布局XML文件,left_fragment和right_fragment,代码如下:
left_fragment
-
<?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=
"@android:color/holo_blue_light">
-
-
<Button
-
android:id=
"@+id/button"
-
android:layout_width=
"wrap_content"
-
android:layout_height=
"wrap_content"
-
android:text=
"This is left fragment"
-
android:textAllCaps=
"false"/>
-
</LinearLayout>
right_fragment
-
<?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=
"@android:color/holo_orange_light">
-
-
<TextView
-
android:layout_width=
"wrap_content"
-
android:layout_height=
"wrap_content"
-
android:text=
"This is right fragment"
-
android:textSize=
"20sp" />
-
-
</LinearLayout>
(2)新建两个类,LeftFragment和RightFragment,都要继承Fragment。
注意导入android.support.v4.Fragment,不要系统内置的android.app.Fragment。
因为support.v4中支持安卓4.2以下的系统。碎片是从Android3.0引入的。
LeftFragment
-
public
class LeftFragment extends Fragment {
-
@Override
-
public View onCreateView(LayoutInflater inflater, ViewGroup container,
-
Bundle savedInstanceState) {
-
// Inflate the layout for this fragment
-
View view = inflater.inflate(R.layout.ledt_fragment, container,
false);
-
return view;
-
}
-
}
其中inflate(R.layout.ledt_fragment, container, false)第三个参数false,则只使用root为XML中的根视图创建正确的LayoutParams子类,即只调用一次;ture会调用两次。
RightFragment
-
public
class RightFragment extends Fragment {
-
@Nullable
-
@Override
-
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
-
View view = inflater.inflate(R.layout.right_fragment,container,
false);
-
return view;
-
}
-
}
(3)修改主活动XML:activity_main.xml。
使用<fragment>标签加入两个碎片,同时还需要通过android:name属性显示指定碎片类名(含包名)
-
<?xml version="1.0" encoding="utf-8"?>
-
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
-
xmlns:tools=
"http://schemas.android.com/tools"
-
android:layout_width=
"match_parent"
-
android:layout_height=
"match_parent"
-
tools:context=
"com.liang.fragmenttest.MainActivity"
-
android:orientation=
"horizontal">
-
-
<fragment
-
android:id=
"@+id/left_fragment"
-
android:name=
"com.liang.fragmenttest.LeftFragment"
-
android:layout_width=
"0dp"
-
android:layout_height=
"match_parent"
-
android:layout_weight=
"1"/>
-
-
<fragment
-
android:id=
"@+id/right_fragment"
-
android:name=
"com.liang.fragmenttest.RightFragment"
-
android:layout_width=
"0dp"
-
android:layout_height=
"match_parent"
-
android:layout_weight=
"1"/>
-
</LinearLayout>
(4)基本效果
3.动态添加碎片
碎片真正的强大之处在于,它可以在程序运行时动态地添加到活动当中。
根据具体情况来动态地添加碎片,你就可以将程序界面定制得更加多样化。
(1)新建another_right_fragment.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=
"@android:color/holo_purple">
-
-
<TextView
-
android:layout_width=
"wrap_content"
-
android:layout_height=
"wrap_content"
-
android:layout_gravity=
"center_horizontal"
-
android:textSize=
"20sp"
-
android:text=
"This is another right fragment"/>
-
</LinearLayout>
(2)新建AnotherRightFragment类,继承Fragment代码如下所示:
-
public
class AnotherRightFragment extends Fragment {
-
-
@Nullable
-
@Override
-
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
-
View view = inflater.inflate(R.layout.another_right_fragment,container,
false);
-
return view;
-
}
-
}
(3)修改activity_main.xml
将右侧碎片替换成FrameLayout(帧布局)
-
<?xml version="1.0" encoding="utf-8"?>
-
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
-
xmlns:tools=
"http://schemas.android.com/tools"
-
android:layout_width=
"match_parent"
-
android:layout_height=
"match_parent"
-
tools:context=
"com.liang.fragmenttest.MainActivity"
-
android:orientation=
"horizontal">
-
-
<fragment
-
android:id=
"@+id/left_fragment"
-
android:name=
"com.liang.fragmenttest.LeftFragment"
-
android:layout_width=
"0dp"
-
android:layout_height=
"match_parent"
-
android:layout_weight=
"1"/>
-
-
<!--帧布局-->
-
<FrameLayout
-
android:id=
"@+id/right_layout"
-
android:layout_width=
"0dp"
-
android:layout_height=
"match_parent"
-
android:layout_weight=
"1"/>
-
</LinearLayout>
(4)修改mainActivity
给左侧碎片注册点击事件,然后调用自定义方法,切换碎片。
动态添加碎片步骤:
1)创建待添加的碎片实例
2)通过getSupportFragmentmanager获取Framment
3)通过beginTransaction开启一个事务
4)想容器添加或替换碎片,方法:add/replace,需要传入容器id和待添加的碎片实例
5)调用commit提交事务
-
public
class MainActivity extends AppCompatActivity implements View.OnClickListener{
-
-
private
boolean clickFlag =
false;
-
@Override
-
protected void onCreate(Bundle savedInstanceState) {
-
super.onCreate(savedInstanceState);
-
setContentView(R.layout.activity_main);
-
-
Button button = (Button) findViewById(R.id.button);
-
button.setOnClickListener(
this);
-
replaceFragment(
new RightFragment());
-
}
-
-
@Override
-
public void onClick(View v) {
-
switch (v.getId()){
-
case R.id.button:
-
if (clickFlag){
-
replaceFragment(
new RightFragment());
-
clickFlag =
false;
-
}
else {
-
replaceFragment(
new AnotherRightFragment());
-
clickFlag =
true;
-
}
-
break;
-
default:
-
break;
-
}
-
}
-
-
private void replaceFragment(Fragment fragment){
-
/*得到FragmentManager*/
-
FragmentManager fragmentManager = getSupportFragmentManager();
-
/*开启一个事务*/
-
FragmentTransaction transaction = fragmentManager.beginTransaction();
-
/*添加或替换碎片*/
-
transaction.replace(R.id.right_layout,fragment);
-
/*提交*/
-
transaction.commit();
-
}
-
}
(5)效果:
此时手机显示如下
不要急,在下面会有平板手机适配的问题
4.在碎片中模拟返回栈
通过上面的的例子,你点击一下返回按钮,发现程序会直接退出。
如何返回到上一个切换的碎片的?
其实只要在事务提交前,将其添加到返回栈即可。
修改MainActivity中的部分代码
-
private void replaceFragment(Fragment fragment){
-
/*得到FragmentManager*/
-
FragmentManager fragmentManager = getSupportFragmentManager();
-
/*开启一个事务*/
-
FragmentTransaction transaction = fragmentManager.beginTransaction();
-
/*添加或替换碎片*/
-
transaction.replace(R.id.right_layout,fragment);
-
/*添加到返回栈,参数:此回堆栈状态的可选名称,或NULL。*/
-
transaction.addToBackStack(
null);
-
/*提交*/
-
transaction.commit();
-
}
5. 碎片和活动间的通信
虽然碎片都是嵌入在活动中显示的,可是实际上它们的关系并没有那么亲密。
你可以看出,碎片和活动都是各自存在于一个独立的类当中的,它们之间并没有那么明显的方式来直接进行通信。
如果想要在活动中调用碎片里的方法,或者在碎片中调用活动里的方法,应该如何实现呢?
(1)活动中调用碎片方法
为了方便碎片和活动之间进行通信,FragmentManager提供了一个类似于findViewById()
的方法,专门用于从布局文件中获取碎片的实例,代码如下所示:
RightFragment rightFragment = (RightFragment) getSupportFragmentManager() .findFragmentById(R.id.right_layout);
调用FragmentManager的findFragmentById()方法,可以在活动中得到相应碎片的实例,然后就能轻松地调用碎片里的方法了。
(2)碎片中调用活动方法
掌握了如何在活动中调用碎片里的方法,那在碎片中又该怎样调用活动里的方法呢?
其实这就更简单了,在每个碎片中都可以通过调用getActivity()方法来得到和当前碎片相关联的活动实例,代码如下所示:
MainActivity mainActivity = (MainActivity) getActivity();
有了活动实例之后,在碎片中调用活动里的方法就变得轻而易举了。
另外当碎片中需要使用Context对象时,也可以使用getActivity()方法,因为获取到的活动本身就是一个Context对象。
(3)碎片与碎片间的通信
这时不知道你心中会不会产生一个疑问:既然碎片和活动之间的通信问题已经解决了,那么碎片和碎片之间可不可以进行通信呢?
说实在的,这个问题并没有看上去那么复杂,它的基本思路非常简单,
首先在一个碎片中可以得到与它相关联的活动,
然后再通过这个活动去获取另外一个碎片的实例,这样也就实现了不同碎片之间的通信功能
6.碎片的生命周期
1.运行状态
当一个碎片是可见的,并明它所关联的活动正处于运行状态时,该碎片也处于运行状态。
2.智停状态
当一个活动进入暂停状态时(由于另一个未占满屏幕的活动被添加到了栈顶),与它相关联的可见碎片就会进人到暂停状态。
3.停止状态
当一个活动进入停止状态时,与它相关联的碎片就会进入到停止状态,或者通过调用FragmentTransaction的remove()、replace()方法将碎片从活动中移除,但如果在事务提交之前调用addToBackStack()方法,这时的碎片也会进入到停止状态。
总的来说,进入停止状态的碎片对用户来说是完全不可见的,有可能会被系统回收。
4.销毁状态
碎片总是依附于活动而存在的,因此当活动被销毁时,与它相关联的碎片就会进入到销毁状态。
或者通过调用FragmentTransaction的remove()、replace()方法将碎片从活动中移除,但在事务提交之前并没有调用addToBackStack()方法,这时的碎片也会进人到销毁状态。
结合之前的活动状态,相信你理解起来应该毫不费力吧。同样地,Fragment类中也提供了一系列的回调方法,以覆盖碎片生命周期的每个环节。
其中,活动中有的回调方法,碎片中几乎都有,不过碎片还提供了一些附加的回调方法,那我们就重点看一下这儿个回调。
onAttach(): 当碎片和活动建立关联的时候调用。 onCreateView(): 为碎片创建视图(加载布局)时调用。 onActivityCreated(): 确保与碎片相关联的活动一定已经创建完毕的时候调用。 onDestroyView(): 当与碎片关联的视图被移除的时候调用。 onDetach(): 当碎片和活动解除关联的时候调用。
碎片完整的生命周期示意图可参考图47,图片源自Android官网。
Activity和Fragment生命周期对比图如下:
Fragment与activity通信
生命周期图:
测试代码:
修改RightFragment代码,加入各个生命周期,如下:
-
public
class RightFragment extends Fragment {
-
-
public
static
final String TAG =
"Liang";
-
-
@Override
-
public void onAttach(Context context) {
-
super.onAttach(context);
-
Log.e(TAG,
"onAttach: " );
-
}
-
-
@Override
-
public void onCreate(@Nullable Bundle savedInstanceState) {
-
super.onCreate(savedInstanceState);
-
Log.e(TAG,
"onCreate: " );
-
}
-
-
@Override
-
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
-
Log.e(TAG,
"onCreateView: " );
-
View view = inflater.inflate(R.layout.right_fragment,container,
false);
-
return view;
-
}
-
-
@Override
-
public void onActivityCreated(@Nullable Bundle savedInstanceState) {
-
super.onActivityCreated(savedInstanceState);
-
Log.e(TAG,
"onActivityCreated: " );
-
}
-
-
@Override
-
public void onStart() {
-
super.onStart();
-
Log.e(TAG,
"onStart: " );
-
}
-
-
@Override
-
public void onResume() {
-
super.onResume();
-
Log.e(TAG,
"onResume: " );
-
}
-
-
@Override
-
public void onPause() {
-
super.onPause();
-
Log.e(TAG,
"onPause: " );
-
}
-
-
@Override
-
public void onStop() {
-
super.onStop();
-
Log.e(TAG,
"onStop: " );
-
}
-
-
@Override
-
public void onDestroyView() {
-
super.onDestroyView();
-
Log.e(TAG,
"onDestroyView: " );
-
}
-
-
@Override
-
public void onDestroy() {
-
super.onDestroy();
-
Log.e(TAG,
"onDestroy: " );
-
}
-
-
@Override
-
public void onDetach() {
-
super.onDetach();
-
Log.e(TAG,
"onDetach: " );
-
}
-
-
}
此时运行程序,当RightFragment第一次被加载到屏幕上,会依次输出下图
然后点击LeftFragment中的按钮,由于AnotherRightFragmnet替换了RightFragment,此时RightFragment进入停止状态,因此输出如下
如果在替换时没有调用addToBackStack方法,此时RightFragment会进入销毁状态,onDestroy和onDetach方法会执行。
按下Back键,rightFragment会重新回到运行状态,输出如下
注意:oncreate方法没有执行,因为我们借助addToBackStack方法,使得rightFragment没有被销毁
再次按下Back键,输出如下
另外,在碎片中你也是可以通过onSaveInstanceState()方法来保存数据的,因为进入停止状态的碎片有可能在系统内存不足的时候被回收,保存下来的数据在onCreate()、onCreateview()和onActivityCreated()这3个方法中你都可以重新得到,它们都含有一个Bundle类型的savedInstanceState参数。
7.动态加载布局技巧提升
根据设备分辨率或屏幕大小在运行时决定加载那个布局。
(1)使用限定符
如果你经常使用平板电脑,应该会发现现在很多的平板应用都采用的是双页模式(程序会在左侧的面板上显示一个包含子项的列表,在右侧的面板上显示内容),因为平板电脑的屏幕足够大,完全可以同时显示下两页的内容,但手机的屏幕一次就只能显示一页的内容,因此两个页面需要分开显示。
通过借助限定符Qualifiers,可以在程序运行时判断应该使用双页模式还是单页模式。
常见的限定符参考链接:https://blog.csdn.net/jinmie0193/article/details/81813945
修改activity_main.xml代码如下
-
<?xml version="1.0" encoding="utf-8"?>
-
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
-
xmlns:tools=
"http://schemas.android.com/tools"
-
android:layout_width=
"match_parent"
-
android:layout_height=
"match_parent"
-
tools:context=
"com.liang.fragmenttest.MainActivity"
-
android:orientation=
"horizontal">
-
-
<fragment
-
android:id=
"@+id/left_fargment"
-
android:name=
"com.liang.fragmenttest.LeftFragment"
-
android:layout_width=
"match_parent"
-
android:layout_height=
"match_parent"/>
-
</LinearLayout>
删除掉多余的代码,只留下一个左侧碎片,并让他充满父布局,
接着在res目录下,新建layout-large文件夹,在这个文件夹下新建一个布局也叫做activity_main.xml,代码如下
-
<?xml version="1.0" encoding="utf-8"?>
-
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
-
xmlns:tools=
"http://schemas.android.com/tools"
-
android:layout_width=
"match_parent"
-
android:layout_height=
"match_parent"
-
tools:context=
"com.liang.fragmenttest.MainActivity"
-
android:orientation=
"horizontal">
-
-
<fragment
-
android:id=
"@+id/left_fragment"
-
android:name=
"com.liang.fragmenttest.LeftFragment"
-
android:layout_width=
"0dp"
-
android:layout_height=
"match_parent"
-
android:layout_weight=
"1"/>
-
-
<!--帧布局-->
-
<fragment
-
android:id=
"@+id/right_layout"
-
android:name=
"com.liang.fragmenttest.RightFragment"
-
android:layout_width=
"0dp"
-
android:layout_height=
"match_parent"
-
android:layout_weight=
"3"/>
-
</LinearLayout>
可以看到,layoutyactivity_main布局只包含了一个碎片,即单页模式,
而layout-largey/activity_main布局包含了两个碎片,即双页模式。
其中Large就是一个限定符,那些屏幕被认为是Large的设备就会自动加载layout-large文件夹下的布局,而小屏幕的设备则还是会加载layout文件夹下的布局。
然后将MainActivity中replaceFragment()方法里的代码注释掉,并在平板和手机上重新运行程序,效果如下
手机效果:
(2)最小宽度限定符
在上一小节中我们使用Large限定符成功解决了单页双页的判断问题,不过很快又有一个新的问题出现了,large到底是指多大呢?
有的时候我们希望可以更加灵活地为不同设备加载布局,不管它们是不是被系统认定为Large,这时就可以使用最小宽度限定符(Smallest-widthQualifier)了。
最小宽度限定符允许我们对屏幕的宽度指定一个最小值(以dp为单位),然后以这个最小值为临界点,屏幕宽度大于这个值的设备就加载一个布局,屏幕宽度小于这个值的设备就加载另一个布局。
在res目录下新建layout-sw600dp文件夹,然后在这个文件夹下新建activitymain.xml布局,
代码如下所示:
-
<?xml version="1.0" encoding="utf-8"?>
-
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
-
xmlns:tools=
"http://schemas.android.com/tools"
-
android:layout_width=
"match_parent"
-
android:layout_height=
"match_parent"
-
tools:context=
"com.liang.fragmenttest.MainActivity"
-
android:orientation=
"horizontal">
-
-
<fragment
-
android:id=
"@+id/left_fragment"
-
android:name=
"com.liang.fragmenttest.LeftFragment"
-
android:layout_width=
"0dp"
-
android:layout_height=
"match_parent"
-
android:layout_weight=
"1"/>
-
-
<!--帧布局-->
-
<fragment
-
android:id=
"@+id/right_layout"
-
android:name=
"com.liang.fragmenttest.RightFragment"
-
android:layout_width=
"0dp"
-
android:layout_height=
"match_parent"
-
android:layout_weight=
"3"/>
-
</LinearLayout>
这就意味着,当程序运行在屏幕宽度大于600dp的设备上时,会加载layout-sw600dpyactivity_main布局,当程序运行在屏幕宽度小于600dp的设备上时,则仍然加载默认的layouyactivity_main布局。
<li class="tool-item tool-active is-like "><a href="javascript:;"><svg class="icon" aria-hidden="true"> <use xlink:href="#csdnc-thumbsup"></use> </svg><span class="name">点赞</span> <span class="count"></span> </a></li> <li class="tool-item tool-active is-collection "><a href="javascript:;" data-report-click="{"mod":"popu_824"}"><svg class="icon" aria-hidden="true"> <use xlink:href="#icon-csdnc-Collection-G"></use> </svg><span class="name">收藏</span></a></li> <li class="tool-item tool-active is-share"><a href="javascript:;"><svg class="icon" aria-hidden="true"> <use xlink:href="#icon-csdnc-fenxiang"></use> </svg>分享</a></li> <!--打赏开始--> <!--打赏结束--> <li class="tool-item tool-more"> <a> <svg t="1575545411852" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5717" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M179.176 499.222m-113.245 0a113.245 113.245 0 1 0 226.49 0 113.245 113.245 0 1 0-226.49 0Z" p-id="5718"></path><path d="M509.684 499.222m-113.245 0a113.245 113.245 0 1 0 226.49 0 113.245 113.245 0 1 0-226.49 0Z" p-id="5719"></path><path d="M846.175 499.222m-113.245 0a113.245 113.245 0 1 0 226.49 0 113.245 113.245 0 1 0-226.49 0Z" p-id="5720"></path></svg> </a> <ul class="more-box"> <li class="item"><a class="article-report">文章举报</a></li> </ul> </li> </ul> </div> </div> <div class="person-messagebox"> <div class="left-message"><a href="https://blog.csdn.net/jinmie0193"> <img src="https://profile.csdnimg.cn/C/B/2/3_jinmie0193" class="avatar_pic" username="jinmie0193"> <img src="https://g.csdnimg.cn/static/user-reg-year/1x/4.png" class="user-years"> </a></div> <div class="middle-message"> <div class="title"><span class="tit"><a href="https://blog.csdn.net/jinmie0193" data-report-click="{"mod":"popu_379"}" target="_blank">Amarao</a></span> </div> <div class="text"><span>发布了185 篇原创文章</span> · <span>获赞 189</span> · <span>访问量 39万+</span></div> </div> <div class="right-message"> <a href="https://bbs.csdn.net/topics/395528083" target="_blank" class="btn btn-sm btn-red-hollow bt-button personal-messageboard">他的留言板 </a> <a class="btn btn-sm bt-button personal-watch" data-report-click="{"mod":"popu_379"}">关注</a> </div> </div> </div>