[Android--UI]用Fragments创建动态UI
2015-12-03 00:04
549 查看
简述
通过Fragment,相当于在一个activity中嵌入一个子activity以及其layout。其实和许多其他系统的UI设计一样,Fragment总觉得像是一个自定义UI组件的功能,即在Android中,可以通过Fragment来实现自定义的控件,而通过重用这些自定义控件来构建和定制适合自己应用的UI。Fragment可以根据UI屏幕大小适配显示,如平板可能可以将多个Fragments一起显示了。可以将Fragment看做是一个activity的一个子模块。
创建Fragment类
和Activity类似,Fragment也需要创建一个.java文件,与activity不同的是,必须用onCreateView() 回调来定义该Fragment的layout。public class ArticleFragment extends Fragment { @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { // Inflate the layout for this fragment return inflater.inflate(R.layout.article_view, container, false); } }
用xml添加一个Fragment到activity
如果要将某个Fragment作为一个UI模组来重用。如下在一个activity的layout中添加了两个Fragment布局。<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="fill_parent"> <fragment android:name="com.example.android.fragments.HeadlinesFragment" android:id="@+id/headlines_fragment" android:layout_weight="1" android:layout_width="0dp" android:layout_height="match_parent" /> <fragment android:name="com.example.android.fragments.ArticleFragment" android:id="@+id/article_fragment" android:layout_weight="2" android:layout_width="0dp" android:layout_height="match_parent" /> </LinearLayout>
接着在activity中就可以应用这个layout了:
public class MainActivity extends FragmentActivity { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.news_articles); } }
不过这种在activity布局中放置Fragment模块的,在activity运行期间并不能将Fragment模块移除的。
灵活Fragment UI构建
与前面在activity布局中直接放置Fragment不同,用FragmentManager类可以在activity运行时对Fragment进行添加,移除,替换的操作:- FragmentManager得创建FragmentTransaction来对Fragment进行添加,移除,替换的操作;
- 在activity的onCreate()方法中得添加初始的fragment(s);
- 在activity布局中必须得有一个容器视图–container View,用来插入fragment(s);
Fragment container
这里就是一个Fragment container:<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/fragment_container" android:layout_width="match_parent" android:layout_height="match_parent" />
在activity活动过程中,可以动态的实现Fragment实例来替换这个Fragment container当中的内容,如下的处理是在Fragment container中add一个Fragment内容:
public class MainActivity extends FragmentActivity { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.news_articles); // Check that the activity is using the layout version with // the fragment_container FrameLayout if (findViewById(R.id.fragment_container) != null) { // However, if we're being restored from a previous state, // then we don't need to do anything and should return or else // we could end up with overlapping fragments. if (savedInstanceState != null) { return; } // Create a new Fragment to be placed in the activity layout HeadlinesFragment firstFragment = new HeadlinesFragment(); // In case this activity was started with special instructions from an // Intent, pass the Intent's extras to the fragment as arguments firstFragment.setArguments(getIntent().getExtras()); // Add the fragment to the 'fragment_container' FrameLayout getSupportFragmentManager().beginTransaction() .add(R.id.fragment_container, firstFragment).commit(); } } }
Fragment有个addToBackStack()方法,顾名思义,即是在我们替换,或者从Fragment container移除某个Fragment时,如果待会还要再用到它,那么可以将它先addToBackStack(),这样这个Fragment就并不会被destroy掉,而只是stop掉了。
如下是替换掉Fragment container中的内容的code:
// Create fragment and give it an argument specifying the article it should show ArticleFragment newFragment = new ArticleFragment(); Bundle args = new Bundle(); args.putInt(ArticleFragment.ARG_POSITION, position); newFragment.setArguments(args); FragmentTransaction transaction = getSupportFragmentManager().beginTransaction(); // Replace whatever is in the fragment_container view with this fragment, // and add the transaction to the back stack so the user can navigate back transaction.replace(R.id.fragment_container, newFragment); transaction.addToBackStack(null); // Commit the transaction transaction.commit();
Fragments之间的通信
两个Fragment之间不能直接通信,它们的通信是通过activity来完成的。因此过程就变为Fragment和activity之间的通信了。实现就是在Fragment内定义一个interface,然后在activity当中去实现这个interface。而后Fragment在它的onAttach()时获取activity实现的接口,然后Fragment通过调用该接口与Activity通信。这里觉得实现有点类似callback。
示例如何在Fragment内定义这么一个interface:
public class HeadlinesFragment extends ListFragment { OnHeadlineSelectedListener mCallback; // Container Activity must implement this interface public interface OnHeadlineSelectedListener { public void onArticleSelected(int position); } @Override public void onAttach(Activity activity) { super.onAttach(activity); // This makes sure that the container activity has implemented // the callback interface. If not, it throws an exception try { mCallback = (OnHeadlineSelectedListener) activity; } catch (ClassCastException e) { throw new ClassCastException(activity.toString() + " must implement OnHeadlineSelectedListener"); } } ... }
如在Fragment上的list item被点击时,Fragment调用在activity中实现的接口,来送某些信息给activity,至于activity接下来如何处理这些信息,就由activity自行决定了:
@Override public void onListItemClick(ListView l, View v, int position, long id) { // Send the event to the host activity mCallback.onArticleSelected(position); }
如下是在activity中如何实现那个interface,并处理来自Fragment的信息:
public static class MainActivity extends Activity implements HeadlinesFragment.OnHeadlineSelectedListener{ ... public void onArticleSelected(int position) { // The user selected the headline of an article from the HeadlinesFragment // Do something here to display that article } }
前面是回调的方式,使得activity可以获取Fragment的消息,而activity要将消息发给Fragment时,只需要用findFragmentById()来获取Fragment实例,然后调用这个Fragment的方法即可。
如下是activity在收到前面的headlinesFragment的position消息后,需要将其送给另一个Fragment显示,而另一个Fragment可以已经显示在屏幕,或者因为屏幕尺寸太小而需要先将原Fragment替换为这个,再显示position信息:
public static class MainActivity extends Activity implements HeadlinesFragment.OnHeadlineSelectedListener{ ... public void onArticleSelected(int position) { // The user selected the headline of an article from the HeadlinesFragment // Do something here to display that article ArticleFragment articleFrag = (ArticleFragment) getSupportFragmentManager().findFragmentById(R.id.article_fragment); if (articleFrag != null) { // If article frag is available, we're in two-pane layout... // Call a method in the ArticleFragment to update its content articleFrag.updateArticleView(position); } else { // Otherwise, we're in the one-pane layout and must swap frags... // Create fragment and give it an argument for the selected article ArticleFragment newFragment = new ArticleFragment(); Bundle args = new Bundle(); args.putInt(ArticleFragment.ARG_POSITION, position); newFragment.setArguments(args); FragmentTransaction transaction = getSupportFragmentManager().beginTransaction(); // Replace whatever is in the fragment_container view with this fragment, // and add the transaction to the back stack so the user can navigate back transaction.replace(R.id.fragment_container, newFragment); transaction.addToBackStack(null); // Commit the transaction transaction.commit(); } } }
相关文章推荐
- UI设计师工作必备的七个设计神器
- Android-AlertDialog为什么用builder类创建对象
- druid 1.0.16数据库密码加密
- RequireJS
- OpenCV - Mac上使用HighGUI
- Mathematics:Ultra-QuickSort(POJ 2299)
- 下拉刷新和UITableView的sectionHeaderView冲突的问题
- UI设计
- iOS之UI--Quartz2D的入门应用--重绘下载圆形进度条
- 1051. Pop Sequence (25)
- UESTC 1024 Flying Chess 注意那个 1<x<N 不是1<=x<N 模拟
- 【UI进阶】UIAlertController替代UIAlertView和UIActionSheet
- Android bluetooth开发
- 使用js获取QueryString的方法小结
- 技能UP:SAP OBYC自动记账的实例说明(含value String应用说明)
- 关于队列queue
- scrollview嵌套listview,listview不滚动问题
- APUE:信号 - 未决信号与信号阻塞
- UI基础2控件:UILabel,UIImageView
- Thread lock_guard 和 unique_lock