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

学了一小段时间的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）实现的。

 package com.example.viewfragtext;

 import android.os.Bundle;
 import android.support.v4.app.Fragment;
 import android.support.v4.app.FragmentActivity;
 import android.view.GestureDetector;
 import android.view.GestureDetector.OnGestureListener;
 import android.view.Menu;
 import android.view.MotionEvent;
 import android.view.View;
 import android.widget.LinearLayout;
 import android.widget.TextView;

 public class MainActivity extends FragmentActivity implements OnGestureListener
 {
     public static Fragment[] fragments;
     public static LinearLayout[] linearLayouts;
     public static TextView[] textViews;
     /**定义手势检测实例*/
     public static GestureDetector detector;
     /**做标签，记录当前是哪个fragment*/
     public int MARK=0;
     /**定义手势两点之间的最小距离*/
     final int DISTANT=50; 

     @Override
     protected void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
         setContentView(R.layout.activity_main);
         //分别实例化和初始化fragement、lineatlayout、textview
         setfragment();
         setlinearLayouts();
         settextview();
         //创建手势检测器
         detector=new GestureDetector(this);

     }

     @Override
     public boolean onCreateOptionsMenu(Menu menu) {
         // Inflate the menu; this adds items to the action bar if it is present.
         getMenuInflater().inflate(R.menu.main, menu);
         return true;
     }
     /**初始化fragment*/
     public void setfragment()
     {
         fragments=new Fragment[3];
         fragments[0]=getSupportFragmentManager().findFragmentById(R.id.fragment1);
         fragments[1]=getSupportFragmentManager().findFragmentById(R.id.fragment2);
         fragments[2]=getSupportFragmentManager().findFragmentById(R.id.fragment3);
         getSupportFragmentManager().beginTransaction().hide(fragments[0]).hide(fragments[1]).hide(fragments[2])
         .show(fragments[0]).commit();

     }
      /**初始化linerlayout*/
     public void setlinearLayouts()
     {
         linearLayouts=new LinearLayout[3];
         linearLayouts[0]=(LinearLayout)findViewById(R.id.lay1);
         linearLayouts[1]=(LinearLayout)findViewById(R.id.lay2);
         linearLayouts[2]=(LinearLayout)findViewById(R.id.lay3);
         linearLayouts[0].setBackgroundResource(R.drawable.lay_select_bg);
     }
      /**初始化textview*/
     public void settextview()
     {
         textViews=new TextView[3];
         textViews[0]=(TextView)findViewById(R.id.fratext1);
         textViews[1]=(TextView)findViewById(R.id.fratext2);
         textViews[2]=(TextView)findViewById(R.id.fratext3);
         textViews[0].setTextColor(getResources().getColor(R.color.lightseagreen));
     }
     /**点击底部linerlayout实现切换fragment的效果*/
     public void LayoutOnclick(View v)
     {
         resetlaybg();//每次点击都重置linearLayouts的背景、textViews字体颜色
         switch (v.getId()) {
         case R.id.lay1:
              getSupportFragmentManager().beginTransaction().hide(fragments[0]).hide(fragments[1]).hide(fragments[2])
                 .show(fragments[0]).commit();
             linearLayouts[0].setBackgroundResource(R.drawable.lay_select_bg);
             textViews[0].setTextColor(getResources().getColor(R.color.lightseagreen));
             MARK=0;
             break;

         case R.id.lay2:
             getSupportFragmentManager().beginTransaction().hide(fragments[0]).hide(fragments[1]).hide(fragments[2])
             .show(fragments[1]).commit();
             linearLayouts[1].setBackgroundResource(R.drawable.lay_select_bg);
             textViews[1].setTextColor(getResources().getColor(R.color.lightseagreen));
             MARK=1;
             break;
         case R.id.lay3:
             getSupportFragmentManager().beginTransaction().hide(fragments[0]).hide(fragments[1]).hide(fragments[2])
             .show(fragments[2]).commit();
             linearLayouts[2].setBackgroundResource(R.drawable.lay_select_bg);
             textViews[2].setTextColor(getResources().getColor(R.color.lightseagreen));
             MARK=2;
         break;
         default:
             break;
         }
     }
     /**重置linearLayouts、textViews*/
     public void resetlaybg()
     {
         for(int i=0;i<3;i++)
         {
             linearLayouts[i].setBackgroundResource(R.drawable.tabfootbg);
             textViews[i].setTextColor(getResources().getColor(R.color.black));
         }

     }

     @Override
     public boolean onTouchEvent(MotionEvent event) {
         // TODO Auto-generated method stub
         //将该Activity上触碰事件交给GestureDetector处理
         return detector.onTouchEvent(event);
     }
     @Override
     public boolean onDown(MotionEvent arg0) {
         // TODO Auto-generated method stub
         return false;
     }

     /**滑动切换效果的实现*/
     @Override
     public boolean onFling(MotionEvent arg0, MotionEvent arg1, float arg2,
             float arg3) {
         // TODO Auto-generated method stub
         resetlaybg();
         //当是Fragment0的时候
         if(MARK==0)
         {
             if(arg1.getX()>arg0.getX()+DISTANT)
             {
                 getSupportFragmentManager().beginTransaction().hide(fragments[0]).hide(fragments[1]).hide(fragments[2])
                 .show(fragments[1]).commit();
                 linearLayouts[1].setBackgroundResource(R.drawable.lay_select_bg);
                 textViews[1].setTextColor(getResources().getColor(R.color.lightseagreen));
                 MARK=1;
             }
             else
             {
                 linearLayouts[0].setBackgroundResource(R.drawable.lay_select_bg);
                 textViews[0].setTextColor(getResources().getColor(R.color.black));
             }

         }
         //当是Fragment1的时候
         else if (MARK==1)
         {
             if(arg1.getX()>arg0.getX()+DISTANT)
             {
                 getSupportFragmentManager().beginTransaction().hide(fragments[0]).hide(fragments[1]).hide(fragments[2])
                 .show(fragments[2]).commit();
                 linearLayouts[2].setBackgroundResource(R.drawable.lay_select_bg);
                 textViews[2].setTextColor(getResources().getColor(R.color.lightseagreen));
                 MARK=2;
             }
             else if(arg0.getX()>arg1.getX()+DISTANT)
             {
                 getSupportFragmentManager().beginTransaction().hide(fragments[0]).hide(fragments[1]).hide(fragments[2])
                 .show(fragments[0]).commit();
                 linearLayouts[0].setBackgroundResource(R.drawable.lay_select_bg);
                 textViews[0].setTextColor(getResources().getColor(R.color.lightseagreen));
                 MARK=0;
             }
             else
             {
               linearLayouts[1].setBackgroundResource(R.drawable.lay_select_bg);
                 textViews[1].setTextColor(getResources().getColor(R.color.black));
             }
         }
         //当是Fragment2的时候
         else if(MARK==2)
         {
             if(arg0.getX()>arg1.getX()+DISTANT)
             {
              getSupportFragmentManager().beginTransaction().hide(fragments[0]).hide(fragments[1]).hide(fragments[2])
              .show(fragments[1]).commit();
              linearLayouts[1].setBackgroundResource(R.drawable.lay_select_bg);
                 textViews[1].setTextColor(getResources().getColor(R.color.lightseagreen));
              MARK=1;
             }
             else
             {
              linearLayouts[2].setBackgroundResource(R.drawable.lay_select_bg);
                 textViews[2].setTextColor(getResources().getColor(R.color.black));
             }
         }
         return false;
     }

     @Override
     public void onLongPress(MotionEvent arg0) {
         // TODO Auto-generated method stub

     }

     @Override
     public boolean onScroll(MotionEvent arg0, MotionEvent arg1, float arg2,
             float arg3) {
         // TODO Auto-generated method stub
         return false;
     }

     @Override
     public void onShowPress(MotionEvent arg0) {
         // TODO Auto-generated method stub

     }

     @Override
     public boolean onSingleTapUp(MotionEvent arg0) {
         // TODO Auto-generated method stub
         return false;
     }

 }

最后的效果图

转载请注明出处：http://www.cnblogs.com/zhrxidian/p/3801545.html