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的代码。

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

最后遍是实现在主活动中实现点击底部切换和滑动的换的功能。这里滑动功能我是采用手势（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;
} }