首页 > 代码库 > [Android] 使用Include布局+Fragment滑动切换屏幕

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

2024-08-01 05:49:02   228人阅读

一. 运行效果

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

二. 项目工程结构



三. Include布局XML文件

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

[html] view plaincopy在CODE上查看代码片派生到我的代码片
  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=http://www.mamicode.com/"@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=http://www.mamicode.com/"@drawable/image_top_watch" />  
  38.         <ImageView  
  39.             android:layout_width="30dp"  
  40.             android:layout_height="30dp"  
  41.             android:src=http://www.mamicode.com/"@drawable/image_top_add" />  
  42.     </LinearLayout>  
  43. </RelativeLayout>  

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

 

[html] view plaincopy在CODE上查看代码片派生到我的代码片
  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=http://www.mamicode.com/"@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=http://www.mamicode.com/"@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=http://www.mamicode.com/"@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在CODE上查看代码片派生到我的代码片
  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

    首先设置Fragment的布局XML文件,fragment_layout1.xml如下,其他类似：
[html] view plaincopy在CODE上查看代码片派生到我的代码片
  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在CODE上查看代码片派生到我的代码片
  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. }  
   PS:由于刚学习Android一个月,所以文章很基础,在新建类中可以点击"浏览"自定义添加继承超类或点击"添加"增加接口,此处继承Fragment.注意"import android.support.v4.app.Fragment;"所有的需要一致.
   然后设置MainActivity.java,代码如下：
[java] view plaincopy在CODE上查看代码片派生到我的代码片
  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. }  
   此时即可实现触屏切换效果,但同时需要注意：
    (1).需要把MainActivity继承从Activity改为FragmentActivity.
    (2).可能会遇到错误"类型对于参数(FragmentFirst)不适用",你需要把导入修改"import android.support.v4.app.Fragment;"同时注意support.v4.app/view 保持一致.

五. 实现滑屏变换图标

   此时设置底部滑动切换的图标时需要添加自定义变量：
[java] view plaincopy在CODE上查看代码片派生到我的代码片
  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在CODE上查看代码片派生到我的代码片
  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在CODE上查看代码片派生到我的代码片
  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在CODE上查看代码片派生到我的代码片
  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滑动切换屏幕


联系
我们