[Android] 使用Include布局+Fragment滑动切换屏幕

标签：android   style   blog   http   io   color   ar   os   使用   

一. 运行效果

   如下图所示,滑动屏幕可以切换布局"空间"、"相册"、"关注".同时会有图标颜色变蓝,背景颜色加深的效果.
    
    同时添加了按钮事件,在fragment1中点击按钮显示内容,在fragment3中点击按钮获取第二个布局内容并显示.
    

二. 项目工程结构

三. Include布局XML文件

   首先添加头部布局top_layout.xml,采用相对布局,右边两图标：

[html] view plaincopy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="50dp"  
5.     android:paddingLeft="12dp"  
6.     android:paddingRight="12dp"  
7.     android:background="@drawable/image_toolbar_bg" >  
8.     <LinearLayout  
9.         android:layout_width="wrap_content"  
10.         android:layout_height="wrap_content"  
11.         android:layout_centerVertical="true"  
12.         android:layout_gravity="center"  
13.         android:orientation="horizontal" >  
14.         <ImageView  
15.             android:layout_width="30dp"  
16.             android:layout_height="30dp"  
17.             android:src="@drawable/icon_suishoupai" />  
18.         <TextView  
19.             android:layout_width="wrap_content"  
20.             android:layout_height="wrap_content"  
21.             android:layout_marginLeft="12dp"  
22.             android:text="随手拍"  
23.             android:textSize="15sp"  
24.             android:layout_gravity="center"  
25.             android:textColor="#ffffff" />  
26.     </LinearLayout>  
27.     <LinearLayout  
28.         android:layout_width="wrap_content"  
29.         android:layout_height="wrap_content"  
30.         android:layout_centerVertical="true"  
31.         android:layout_gravity="center"  
32.         android:layout_alignParentRight="true"  
33.         android:orientation="horizontal" >  
34.         <ImageView  
35.             android:layout_width="30dp"  
36.             android:layout_height="30dp"  
37.             android:src="@drawable/image_top_watch" />  
38.         <ImageView  
39.             android:layout_width="30dp"  
40.             android:layout_height="30dp"  
41.             android:src="@drawable/image_top_add" />  
42.     </LinearLayout>  
43. </RelativeLayout>  

    然后添加底部布局bottom_layout.xml,由3个LinearLayout水平布局组成,其中每个LinearLayout有ImageView和TextView组成：

[html] view plaincopy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="40dp"  
5.     android:background="@drawable/image_toolbar_bg"  
6.     android:orientation="horizontal" >  
7.     <LinearLayout    
8.         android:id="@+id/bottomLayout1"  
9.         android:layout_width="wrap_content"    
10.         android:layout_height="wrap_content"    
11.         android:layout_weight="1"  
12.         android:gravity="center"    
13.         android:background="@drawable/image_toolbar_bg_sel"  
14.         android:orientation="vertical" >    
15.         <ImageView    
16.             android:id="@+id/image1"    
17.             android:layout_width="wrap_content"    
18.             android:layout_height="wrap_content"    
19.             android:padding="1dp"   
20.             android:src="@drawable/image_bottom_effect" />    
21.         <TextView    
22.             android:layout_width="wrap_content"    
23.             android:layout_height="15dp"     
24.             android:text="空间"    
25.             android:textColor="#ffffff"    
26.             android:textSize="10dp" />    
27.      </LinearLayout>  
28.      <LinearLayout    
29.         android:id="@+id/bottomLayout2"  
30.         android:layout_width="wrap_content"    
31.         android:layout_height="wrap_content"    
32.         android:layout_weight="1"  
33.         android:gravity="center"    
34.         android:orientation="vertical" >    
35.         <ImageView    
36.             android:id="@+id/image2"    
37.             android:layout_width="wrap_content"    
38.             android:layout_height="wrap_content"    
39.             android:padding="1dp"   
40.             android:src="@drawable/image_bottom_frame_no" />    
41.         <TextView    
42.             android:layout_width="wrap_content"    
43.             android:layout_height="15dp"     
44.             android:text="相册"    
45.             android:textColor="#ffffff"    
46.             android:textSize="10dp" />    
47.      </LinearLayout>   
48.      <LinearLayout    
49.         android:id="@+id/bottomLayout3"  
50.         android:layout_width="wrap_content"    
51.         android:layout_height="wrap_content"    
52.         android:layout_weight="1"  
53.         android:gravity="center"    
54.         android:orientation="vertical" >    
55.         <ImageView    
56.             android:id="@+id/image3"    
57.             android:layout_width="wrap_content"    
58.             android:layout_height="wrap_content"    
59.             android:padding="1dp"   
60.             android:src="@drawable/image_bottom_person_no" />    
61.         <TextView    
62.             android:layout_width="wrap_content"    
63.             android:layout_height="15dp"     
64.             android:text="关注"    
65.             android:textColor="#ffffff"    
66.             android:textSize="10dp" />    
67.      </LinearLayout>   
68. </LinearLayout>  

    最后在activity_main.xml中调用Include布局,ViewPager用于加载不同的fragment,并实现触屏切换在该控件上：

[html] view plaincopy

1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2.     xmlns:tools="http://schemas.android.com/tools"  
3.     android:id="@+id/container"  
4.     android:layout_width="match_parent"  
5.     android:layout_height="match_parent"  
6.     android:orientation="vertical">  
7.   
8.     <include layout="@layout/top_layout"/>  
9.     <android.support.v4.view.ViewPager  
10.         android:id="@+id/viewpager1"  
11.         android:layout_width="match_parent"  
12.         android:layout_height="0dp"  
13.         android:background="#ccffff"  
14.         android:layout_weight="1" />  
15.    <include layout="@layout/bottom_layout"/>  
16.   
17. </LinearLayout>  

   在MainActivity.java中onCreate函数设置无标题requestWindowFeature(Window.FEATURE_NO_TITLE),在xml文件中可设置Frame预览效果无标题,显示布局如下图所示：

四. 实现触屏切换fragment

[html] view plaincopy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent"  
5.     android:orientation="vertical" >  
6.     <TextView  
7.         android:id="@+id/textView1"  
8.         android:layout_width="fill_parent"  
9.         android:layout_height="wrap_content"  
10.         android:textSize="25sp"  
11.         android:gravity="center"  
12.         android:text="The First Fragment" />  
13.     <Button  
14.         android:id="@+id/button1"  
15.         android:layout_width="fill_parent"  
16.         android:layout_height="wrap_content"  
17.         android:text="Button1" />  
18. </LinearLayout>  

   然后添加FragmentFirst.java、FragmentSecond.java和FragmentThird,其中FragmentSecond.java如下,其他类似：

[java] view plaincopy

1. package com.example.layouttest;  
2.   
3. import android.os.Bundle;  
4. import android.support.v4.app.Fragment;  
5. import android.view.LayoutInflater;  
6. import android.view.View;  
7. import android.view.ViewGroup;  
8.   
9. public class FragmentSecond extends Fragment {  
10.       
11.     @Override    
12.     public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {          
13.         return inflater.inflate(R.layout.fragment_layout2, container, false);         
14.     }     
15. }  

[java] view plaincopy

1. package com.example.layouttest;  
2.   
3. import java.util.ArrayList;  
4. import java.util.List;  
5. import android.os.Bundle;  
6. import android.support.v4.app.Fragment;  
7. import android.support.v4.app.FragmentActivity;  
8. import android.support.v4.app.FragmentPagerAdapter;  
9. import android.support.v4.view.ViewPager;  
10. import android.view.Window;  
11.   
12. public class MainActivity extends FragmentActivity {  
13.   
14.     //注意:导入时均为support.v4.app/view 保持一致  
15.     private ViewPager viewPager1;  
16.     private FragmentPagerAdapter fpAdapter;  
17.     private List<Fragment> listData;  
18.       
19.     @Override  
20.     protected void onCreate(Bundle savedInstanceState) {  
21.         super.onCreate(savedInstanceState);  
22.         //注意:设置无标题需要在setContentView前调用 否则会崩溃  
23.         requestWindowFeature(Window.FEATURE_NO_TITLE);  
24.         setContentView(R.layout.activity_main);  
25.         //初始化设置ViewPager  
26.         setViewPager();  
27.     }  
28.     private void setViewPager() {  
29.         //初始化数据  
30.         viewPager1 = (ViewPager) findViewById(R.id.viewpager1);  
31.         listData = new ArrayList<Fragment>();  
32.         FragmentFirst fragmentFirst = new FragmentFirst();  
33.         FragmentSecond fragmentSecond = new FragmentSecond();  
34.         FragmentThird fragmentThird = new FragmentThird();  
35.         //三个布局加入列表  
36.         listData.add(fragmentFirst);  
37.         listData.add(fragmentSecond);  
38.         listData.add(fragmentThird);  
39.         //ViewPager相当于一组件容器 实现页面切换  
40.         fpAdapter =new FragmentPagerAdapter(getSupportFragmentManager())  
41.         {  
42.             @Override  
43.             public int getCount()  
44.             {  
45.                 return listData.size();  
46.             }  
47.             @Override  
48.             public Fragment getItem(int arg0)  
49.             {  
50.                 return listData.get(arg0);  
51.             }  
52.         };  
53.         //设置适配器  
54.         viewPager1.setAdapter(fpAdapter);  
55.     }  
56. }  

   此时即可实现触屏切换效果,但同时需要注意：

五. 实现滑屏变换图标

[java] view plaincopy

1. //底部图标  
2. private ImageView image1;  
3. private ImageView image2;  
4. private ImageView image3;  
5. private LinearLayout layout1;  
6. private LinearLayout layout2;  
7. private LinearLayout layout3;  

   然后,在setViewPager()函数中"viewPager1.setAdapter(fpAdapter)"后添加如下代码即可实现,其中switch中0、1、2对应listData中装入的三个布局：

[java] view plaincopy

1. //初始化图标  
2. image1 = (ImageView) findViewById(R.id.image1);  
3. image2 = (ImageView) findViewById(R.id.image2);  
4. image3 = (ImageView) findViewById(R.id.image3);  
5. layout1 = (LinearLayout) findViewById(R.id.bottomLayout1);  
6. layout2 = (LinearLayout) findViewById(R.id.bottomLayout2);  
7. layout3 = (LinearLayout) findViewById(R.id.bottomLayout3);  
8. //滑屏变换图标  
9. viewPager1.setOnPageChangeListener(new OnPageChangeListener() {  
10.     @Override  
11.     public void onPageSelected(int arg0)  
12.     {  
13.         switch(arg0)  
14.         {  
15.         case 0:  
16.             //图片切换  
17.             image1.setImageDrawable(getResources().getDrawable(R.drawable.image_bottom_effect));  
18.             image2.setImageDrawable(getResources().getDrawable(R.drawable.image_bottom_frame_no));  
19.             image3.setImageDrawable(getResources().getDrawable(R.drawable.image_bottom_person_no));  
20.             //背景加深  
21.             layout1.setBackgroundResource(R.drawable.image_toolbar_bg_sel);    
22.             layout2.setBackgroundResource(R.drawable.image_toolbar_bg);    
23.             layout3.setBackgroundResource(R.drawable.image_toolbar_bg);    
24.             break;  
25.         case 1:  
26.             //图片切换  
27.             image1.setImageDrawable(getResources().getDrawable(R.drawable.image_bottom_effect_no));  
28.             image2.setImageDrawable(getResources().getDrawable(R.drawable.image_bottom_frame));  
29.             image3.setImageDrawable(getResources().getDrawable(R.drawable.image_bottom_person_no));  
30.             //背景加深  
31.             layout1.setBackgroundResource(R.drawable.image_toolbar_bg);    
32.             layout2.setBackgroundResource(R.drawable.image_toolbar_bg_sel);    
33.             layout3.setBackgroundResource(R.drawable.image_toolbar_bg);    
34.             break;  
35.         case 2:  
36.             //图片切换  
37.             image1.setImageDrawable(getResources().getDrawable(R.drawable.image_bottom_effect_no));  
38.             image2.setImageDrawable(getResources().getDrawable(R.drawable.image_bottom_frame_no));  
39.             image3.setImageDrawable(getResources().getDrawable(R.drawable.image_bottom_person));  
40.             //背景加深  
41.             layout1.setBackgroundResource(R.drawable.image_toolbar_bg);    
42.             layout2.setBackgroundResource(R.drawable.image_toolbar_bg);    
43.             layout3.setBackgroundResource(R.drawable.image_toolbar_bg_sel);    
44.             break;  
45.         }  
46.     }  
47.     @Override  
48.     public void onPageScrolled(int arg0, float arg1, int arg2)  
49.     {  
50.           
51.     }  
52.     @Override  
53.     public void onPageScrollStateChanged(int arg0)  
54.     {  
55.           
56.     }  
57. });  

六. 调用Fragment中按钮及传递参数

    设置FragmentFirst.java文件,通过onActivityCreated函数实现点击按钮事件：

[java] view plaincopy

1. public class FragmentFirst extends Fragment {  
2.       
3.     @Override    
4.     public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {          
5.         return inflater.inflate(R.layout.fragment_layout1, container, false);         
6.     }     
7.       
8.     @Override  
9.     public void onActivityCreated(Bundle savedInstanceState) {  
10.         super.onActivityCreated(savedInstanceState);  
11.         //添加Fragment1的响应事件  
12.         Button button1 = (Button) getActivity().findViewById(R.id.button1);  
13.         button1.setOnClickListener(new OnClickListener() {    
14.             @Override    
15.             public void onClick(View v) {    
16.                 TextView textView1 = (TextView) getActivity().findViewById(R.id.textView1);  
17.                 textView1.setText("在fragment1中点击按钮");  
18.             }    
19.         });    
20.     }  
21. }  

    FragmentThird.java实现点击Fragment3中按钮获取Fragment2中数据：

[java] view plaincopy

1. public class FragmentThird extends Fragment {  
2.       
3.     @Override    
4.     public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {          
5.         return inflater.inflate(R.layout.fragment_layout3, container, false);         
6.     }     
7.       
8.     @Override  
9.     public void onActivityCreated(Bundle savedInstanceState) {  
10.         super.onActivityCreated(savedInstanceState);  
11.         //添加Fragment3的响应事件  
12.         Button button3 = (Button) getActivity().findViewById(R.id.button3);  
13.         button3.setOnClickListener(new OnClickListener() {    
14.             @Override    
15.             public void onClick(View v) {    
16.                 TextView textView1 = (TextView) getActivity().findViewById(R.id.textView2);  
17.                 TextView textView3 = (TextView) getActivity().findViewById(R.id.textView3);  
18.                 textView3.setText("点击按钮获取fragment2信息:\n"+textView1.getText());  
19.             }    
20.         });    
21.     }  
22. }  

    PS:是否Fragment的XML文件TextView需要设置不同的id,如果Fragment1与Fragment2设置相同的textView1程序没有响应.

[Android] 使用Include布局+Fragment滑动切换屏幕

标签：android   style   blog   http   io   color   ar   os   使用   

原文地址：http://www.cnblogs.com/yuyanbian/p/4086265.html