现在的位置: 首页 > 综合 > 正文

55_Fragment使用案例

2013年10月01日 ⁄ 综合 ⁄ 共 6461字 ⁄ 字号 评论关闭

Fragment要点

1.      Fragment作为Activity界面的一部分组成出现

2.      可以在一个Activity中同时出现多个Fragment,并且,一个Fragment亦可在多个Activity中使用。

3.      在Activity运行过程中,可以添加、移除或者替换Fragment(add()、remove()、replace())

4.      Fragment可以响应自己的输入事件,并且有自己的生命周期,当然,它们的生命周期直接被其所属的宿主activity的生命周期影响。

设计哲学

Android在3.0中引入了fragments的概念,主要目的是用在大屏幕设备上--例如平板电脑上,支持更加动态和灵活的UI设计。平板电脑的屏幕要比手机的大得多,有更多的空间来放更多的UI组件,并且这些组件之间会产生更多的交互。Fragment允许这样的一种设计,而不需要你亲自来管理 viewhierarchy的复杂变化。通过将activity的布局分散到fragment中, 你可以在运行时修改activity的外观,并在由activity管理的back stack中保存那些变化.(http://developer.android.com/guide/topics/fundamentals/fragments.html

 下面我们一起来看一下使用Fragment的案例

1.      新建一个名为Fragments的android项目,然后编写fragment_1.xml、fragment_2.xml、activity_main.xml文件,它们的代码如下

(1)      fragment_1.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ff0000" >
    <TextView
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="fragment_1"
       android:textColor="#000000"
       android:textSize="25sp"/>
</LinearLayout>

(2)      fragment_2.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#00ff00" >
    <TextView
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="fragment_2"
       android:textColor="#000000"
       android:textSize="25sp"/>
</LinearLayout> 

(3)      activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:baselineAligned="false"
    android:orientation="vertical">   
    <fragment
       android:id="@+id/fragment1"
       android:name="cn.lion.fragments.Fragment_1"
       android:layout_width="match_parent"
       android:layout_height="0dip"
       android:layout_weight="1"/>
    <fragment
       android:id="@+id/fragment2"
       android:name="cn.lion.fragments.Fragment_2"
       android:layout_width="match_parent"
       android:layout_height="0dip"
       android:layout_weight="1"/>   
</LinearLayout>

2.      编写Fragment_1、Fragment_2、MainActivity类

(1)编写Fragment_1类

package cn.lion.fragments; 
public class Fragment_1 extends Fragment {   
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroupcontainer,
           Bundle savedInstance){
       return inflater.inflate(R.layout.fragment_1, container, false);
    }
}

(2)编写Fragment_2类

package cn.lion.fragments; 
public class Fragment_2 extends Fragment {        
         @Override
         publicView onCreateView(LayoutInflater inflater, ViewGroup container,
                            BundlesavedInstance){
                   returninflater.inflate(R.layout.fragment_2, container, false);
         }
}

(3)编写MainActivity类

package cn.lion.fragments; 
public class MainActivity extends Activity{ 
         @Override
         protectedvoid onCreate(Bundle savedInstanceState) {
                   super.onCreate(savedInstanceState);
                   setContentView(R.layout.activity_main);
         }
}

程序运行效果图如下:

  下面我们换种思维来做另一个案例,之前我写程序都是直接coding,这样对问题(应用程序)规模小的时候没什么问题,但是问题(应用程序)规模变大时就不好把握全局了。我相信大家都学过UML建模,我也喜欢用UML来分析描述问题,当然我不是想在此做个大的应用程序,所以我举个简单的例子来说明问题。

  先来看下这样的需要:一个应用的初始运行界面如图img_1(左侧的图片)所示,现要求当用户点击界面上的main_btn按钮时,应用程序切换到如图img_2(右侧的图片)所示的界面。

那我们应用怎么来写这个应用程序呢?当然这个问题很简单,所以我假设已经决定了程序的结构,为了使我们能对程序结构一目了然,下面我应用UML来描述它。

  这样程序结构就清晰多了,下面我们只需按图中的描述(不是凭空想像),把各个类和布局文件编写出来就可以完成任务了:

1.      编写各Activity类

(1)      编写MainActivity类

package cn.lion.fragtest_1; 
public class MainActivity extends FragmentActivity {
    private Button button;   
    @Override
    protected void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.main);
      
       Fragment_1 fragment_1 = new Fragment_1();
       Fragment_2 fragment_2 = new Fragment_2();
       FragmentManager fm = this.getFragmentManager();
       FragmentTransaction ft = fm.beginTransaction();
       ft.add(R.id.layout1, fragment_1);
       ft.add(R.id.layout1, fragment_2);
       ft.commit();
       button = (Button)findViewById(R.id.main_btn);
       button.setOnClickListener(new OnClickListener(){
 
           @Override
           public void onClick(View v) {            
              Intent intent = new Intent(MainActivity.this, DialogActivity.class);
              MainActivity.this.startActivity(intent);
           }         
       });   
    }
}

(2)      编写Fragment_1类

package cn.lion.fragtest_1; 
public class Fragment_1 extends Fragment {  
   @Override
    public ViewonCreateView(LayoutInflater inflater, ViewGroup container,
                Bundle savedInstanceState) {
        returninflater.inflate(R.layout.layout1, container, false);
    }
}

(3)      编写Fragment_2类

packagecn.lion.fragtest_1; 
public classFragment_2 extends Fragment {        
         @Override
    public View onCreateView(LayoutInflaterinflater, ViewGroup container,
                       BundlesavedInstanceState) {
        returninflater.inflate(R.layout.layout2, container, false);
    }
}

(4)编写DialogActivity类

packagecn.lion.fragtest_1; 
public classDialogActivity extends Activity {        
         @Override
         protected void onCreate(BundlesavedInstanceState) {
                   super.onCreate(savedInstanceState);
                   setContentView(R.layout.dialoglayout);                  
         } 
}

2.      编写各布局文件

(1)      编写main.xml文件

<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"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity"
    android:orientation="vertical"
    android:background="#7ecef4"
    android:id="@+id/layout1">
   
    <Button
       android:id="@+id/main_btn"
       android:text="main_btn"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       />   
</LinearLayout>

(2)编写layout1.xml文件

<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"
    android:orientation="vertical"
    android:background="#7ecef4">
   
    <Button
       android:id="@+id/button_1"
       android:text="button_1"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       />   
</LinearLayout>

(3)编写layout2.xml文件

<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"
    android:orientation="vertical"
    android:background="#7ecef4">
   
    <Button
       android:id="@+id/button_2"
       android:text="button_2"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       />   
</LinearLayout>

(4)编写dialoglayout.xml文件

<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"
    android:orientation="vertical"
    android:background="#7ecef4"
    android:id="@+id/dialog">
   
    <AnalogClock
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       />   
</LinearLayout>

完成了…

抱歉!评论已关闭.