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