Android之fragment点击切换和滑动切换结合

浏览数：28 / 时间：2015年06月11日

学了一小段时间的Android,主要接触的是UI设计，打交道最多莫过于fragment了吧。在Android3.0引入了fragment的概念后，几乎在所以的Android的应用中都可以看见其身影，已经有很多前辈高人都已经详细介绍过fragmrnt，我这里就不多说什么了。

这里本来是想模仿一下微信的切换效果，怎奈水平不足，这里就献丑贴出半成品的代码，希望有大神能指点一下。废话不多说，上代码。先从简单的开始吧，这里是我一共用了3个fragment，这里就只贴出第一个的fragment的布局，别的两个基本一样,比较简朴。

<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    android:gravity="center_horizontal|center_vertical"
     xmlns:android="http://schemas.android.com/apk/res/android">
    <TextView 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="This the first fragment"
        />
</LinearLayout>

接下来的是使用fragment片段，这里也只贴出第一个的。

package com.example.fragments;

import com.example.viewfragtext.R;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class Fragmentone extends Fragment
{
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        return inflater.inflate(R.layout.fragment1, container, false);
    }
}

接下来便要开始实现切换的功能，这里是底部切换组件(tabfoot)的布局。

<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout 
    android:layout_width="fill_parent"
    android:layout_height="44dp"
    android:orientation="horizontal"
    android:background="@drawable/tabfootbg"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <LinearLayout 
         android:id="@+id/lay1"
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         android:layout_weight="1"
         style="@style/Linearlayout_Style"
        >
        <TextView 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/fratext1"
            android:text="@string/chat"
            android:textColor="@color/black"
            />
    </LinearLayout>
    <LinearLayout 
         android:id="@+id/lay2"
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         android:layout_weight="1"
         style="@style/Linearlayout_Style">
        <TextView 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/fratext2"
            android:text="@string/find"
            android:textColor="@color/black"/>
    </LinearLayout>
    <LinearLayout 
         android:id="@+id/lay3"
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         android:layout_weight="1"
         style="@style/Linearlayout_Style">
         <TextView 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/fratext3"
            android:text="@string/tongxunlu"
            android:textColor="@color/black"/>
     </LinearLayout>
</LinearLayout>

这里分别是自定义的style和color的代码。

<style name="Linearlayout_Style">
        <item name="android:orientation">vertical</item>       
        <item name="android:gravity">center</item>
        <item name="android:clickable">true</item>
        <item name="android:onClick">LayoutOnclick</item>
 </style>


<?xml version="1.0" encoding="UTF-8"?>
<resources >
    <color name="lightseagreen">#20b2aa</color><!--亮海蓝色 --> 
    <color name="black">#000000</color><!-- 黑色 -->
    
</resources>

别的设计都完成了，马上对应的是MainActivity的设计，这是其布局

<LinearLayout 
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    xmlns:android="http://schemas.android.com/apk/res/android">
     
    
  
    <fragment
        android:name="com.example.fragments.Fragmentone"
        android:id="@+id/fragment1"
        android:layout_height="0dp"
        android:layout_weight="1.0"
        android:layout_width="fill_parent"
        />
     <fragment
        android:name="com.example.fragments.Fragmenttwo"
        android:id="@+id/fragment2"
        android:layout_height="0dp"
        android:layout_weight="1.0"
        android:layout_width="fill_parent"
        />
         <fragment
        android:name="com.example.fragments.Fragmentthree"
        android:id="@+id/fragment3"
        android:layout_height="0dp"
        android:layout_weight="1.0"
        android:layout_width="fill_parent"
      
        />
   
    <include layout="@layout/tabfoot"/>
    
</LinearLayout>

最后遍是实现在主活动中实现点击底部切换和滑动的换的功能。这里滑动功能我是采用手势（Gesture）实现的。

  1 package com.example.viewfragtext;
  2 
  3 import android.os.Bundle;
  4 import android.support.v4.app.Fragment;
  5 import android.support.v4.app.FragmentActivity;
  6 import android.view.GestureDetector;
  7 import android.view.GestureDetector.OnGestureListener;
  8 import android.view.Menu;
  9 import android.view.MotionEvent;
 10 import android.view.View;
 11 import android.widget.LinearLayout;
 12 import android.widget.TextView;
 13 
 14 public class MainActivity extends FragmentActivity implements OnGestureListener
 15 {
 16     public static Fragment[] fragments;
 17     public static LinearLayout[] linearLayouts;
 18     public static TextView[] textViews;
 19     /**定义手势检测实例*/
 20     public static GestureDetector detector;
 21     /**做标签，记录当前是哪个fragment*/
 22     public int MARK=0;
 23     /**定义手势两点之间的最小距离*/
 24     final int DISTANT=50; 
 25           
 26     
 27     @Override
 28     protected void onCreate(Bundle savedInstanceState) {
 29         super.onCreate(savedInstanceState);
 30         setContentView(R.layout.activity_main);
 31         //分别实例化和初始化fragement、lineatlayout、textview
 32         setfragment();
 33         setlinearLayouts();
 34         settextview();
 35         //创建手势检测器
 36         detector=new GestureDetector(this);
 37         
 38     }
 39 
 40     @Override
 41     public boolean onCreateOptionsMenu(Menu menu) {
 42         // Inflate the menu; this adds items to the action bar if it is present.
 43         getMenuInflater().inflate(R.menu.main, menu);
 44         return true;
 45     }
 46     /**初始化fragment*/
 47     public void setfragment()
 48     {
 49         fragments=new Fragment[3];
 50         fragments[0]=getSupportFragmentManager().findFragmentById(R.id.fragment1);
 51         fragments[1]=getSupportFragmentManager().findFragmentById(R.id.fragment2);
 52         fragments[2]=getSupportFragmentManager().findFragmentById(R.id.fragment3);
 53         getSupportFragmentManager().beginTransaction().hide(fragments[0]).hide(fragments[1]).hide(fragments[2])
 54         .show(fragments[0]).commit();
 55         
 56     }
 57      /**初始化linerlayout*/
 58     public void setlinearLayouts()
 59     {
 60         linearLayouts=new LinearLayout[3];
 61         linearLayouts[0]=(LinearLayout)findViewById(R.id.lay1);
 62         linearLayouts[1]=(LinearLayout)findViewById(R.id.lay2);
 63         linearLayouts[2]=(LinearLayout)findViewById(R.id.lay3);
 64         linearLayouts[0].setBackgroundResource(R.drawable.lay_select_bg);
 65     }
 66      /**初始化textview*/
 67     public void settextview()
 68     {
 69         textViews=new TextView[3];
 70         textViews[0]=(TextView)findViewById(R.id.fratext1);
 71         textViews[1]=(TextView)findViewById(R.id.fratext2);
 72         textViews[2]=(TextView)findViewById(R.id.fratext3);
 73         textViews[0].setTextColor(getResources().getColor(R.color.lightseagreen));
 74     }
 75     /**点击底部linerlayout实现切换fragment的效果*/
 76     public void LayoutOnclick(View v)
 77     {
 78         resetlaybg();//每次点击都重置linearLayouts的背景、textViews字体颜色
 79         switch (v.getId()) {
 80         case R.id.lay1:
 81              getSupportFragmentManager().beginTransaction().hide(fragments[0]).hide(fragments[1]).hide(fragments[2])
 82                 .show(fragments[0]).commit();
 83             linearLayouts[0].setBackgroundResource(R.drawable.lay_select_bg);
 84             textViews[0].setTextColor(getResources().getColor(R.color.lightseagreen));
 85             MARK=0;
 86             break;
 87 
 88         case R.id.lay2:
 89             getSupportFragmentManager().beginTransaction().hide(fragments[0]).hide(fragments[1]).hide(fragments[2])
 90             .show(fragments[1]).commit();
 91             linearLayouts[1].setBackgroundResource(R.drawable.lay_select_bg);
 92             textViews[1].setTextColor(getResources().getColor(R.color.lightseagreen));
 93             MARK=1;
 94             break;
 95         case R.id.lay3:
 96             getSupportFragmentManager().beginTransaction().hide(fragments[0]).hide(fragments[1]).hide(fragments[2])
 97             .show(fragments[2]).commit();
 98             linearLayouts[2].setBackgroundResource(R.drawable.lay_select_bg);
 99             textViews[2].setTextColor(getResources().getColor(R.color.lightseagreen));
100             MARK=2;
101         break;
102         default:
103             break;
104         }
105     }
106     /**重置linearLayouts、textViews*/
107     public void resetlaybg()
108     {
109         for(int i=0;i<3;i++)
110         {
111             linearLayouts[i].setBackgroundResource(R.drawable.tabfootbg);
112             textViews[i].setTextColor(getResources().getColor(R.color.black));
113         }
114     
115     }
116 
117     @Override
118     public boolean onTouchEvent(MotionEvent event) {
119         // TODO Auto-generated method stub
120         //将该Activity上触碰事件交给GestureDetector处理
121         return detector.onTouchEvent(event);
122     }
123     @Override
124     public boolean onDown(MotionEvent arg0) {
125         // TODO Auto-generated method stub
126         return false;
127     }
128 
129     /**滑动切换效果的实现*/
130     @Override
131     public boolean onFling(MotionEvent arg0, MotionEvent arg1, float arg2,
132             float arg3) {
133         // TODO Auto-generated method stub
134         resetlaybg();
135         //当是Fragment0的时候
136         if(MARK==0)
137         {
138             if(arg1.getX()>arg0.getX()+DISTANT)
139             {
140                 getSupportFragmentManager().beginTransaction().hide(fragments[0]).hide(fragments[1]).hide(fragments[2])
141                 .show(fragments[1]).commit();     
142                 linearLayouts[1].setBackgroundResource(R.drawable.lay_select_bg);
143                 textViews[1].setTextColor(getResources().getColor(R.color.lightseagreen));
144                 MARK=1;
145             }
146             else
147             {
148                 linearLayouts[0].setBackgroundResource(R.drawable.lay_select_bg);
149                 textViews[0].setTextColor(getResources().getColor(R.color.black));
150             }
151             
152         }
153         //当是Fragment1的时候
154         else if (MARK==1)
155         {
156             if(arg1.getX()>arg0.getX()+DISTANT)
157             {
158                 getSupportFragmentManager().beginTransaction().hide(fragments[0]).hide(fragments[1]).hide(fragments[2])
159                 .show(fragments[2]).commit();
160                 linearLayouts[2].setBackgroundResource(R.drawable.lay_select_bg);
161                 textViews[2].setTextColor(getResources().getColor(R.color.lightseagreen));
162                 MARK=2;
163             }
164             else if(arg0.getX()>arg1.getX()+DISTANT)
165             {
166                 getSupportFragmentManager().beginTransaction().hide(fragments[0]).hide(fragments[1]).hide(fragments[2])
167                 .show(fragments[0]).commit();
168                 linearLayouts[0].setBackgroundResource(R.drawable.lay_select_bg);
169                 textViews[0].setTextColor(getResources().getColor(R.color.lightseagreen));
170                 MARK=0;
171             }
172             else
173             {
174               linearLayouts[1].setBackgroundResource(R.drawable.lay_select_bg);
175                 textViews[1].setTextColor(getResources().getColor(R.color.black));
176             }
177         }
178         //当是Fragment2的时候
179         else if(MARK==2)
180         {
181             if(arg0.getX()>arg1.getX()+DISTANT)
182             {
183              getSupportFragmentManager().beginTransaction().hide(fragments[0]).hide(fragments[1]).hide(fragments[2])
184              .show(fragments[1]).commit();
185              linearLayouts[1].setBackgroundResource(R.drawable.lay_select_bg);
186                 textViews[1].setTextColor(getResources().getColor(R.color.lightseagreen));
187              MARK=1;
188             }
189             else
190             {
191              linearLayouts[2].setBackgroundResource(R.drawable.lay_select_bg);
192                 textViews[2].setTextColor(getResources().getColor(R.color.black));
193             }
194         }
195         return false;
196     }
197 
198     @Override
199     public void onLongPress(MotionEvent arg0) {
200         // TODO Auto-generated method stub
201         
202     }
203 
204     @Override
205     public boolean onScroll(MotionEvent arg0, MotionEvent arg1, float arg2,
206             float arg3) {
207         // TODO Auto-generated method stub
208         return false;
209     }
210 
211     @Override
212     public void onShowPress(MotionEvent arg0) {
213         // TODO Auto-generated method stub
214         
215     }
216 
217     @Override
218     public boolean onSingleTapUp(MotionEvent arg0) {
219         // TODO Auto-generated method stub
220         return false;
221     }
222     
223 }