android Fragment实现APP主界面Tab页面切换和点击事件

Fragment 页面切换不能滑动 所以对于listview 可以添加的左右滑动事件 ，不会有冲突例如（QQ的好友列表的删除）

Fragment 和viewpager 的区别

Viewpager 的事件都需要写在 MainActivity 使得 MainActivity 类非常冗余

Fragment 内部的事件则可以由其内部去处理分成多个类。便于维护和管理 MainActivity 只起到一个调度的作用

效果图



源代码我已上传资源页

Fragment实现页面切换和点击事件

(注意引用时要全部引用这个android.support.v4.app)

MainActivity .java

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.Window;
import android.widget.TextView;

public class MainActivity extends FragmentActivity implements OnClickListener {
private TextView t1;
private TextView t2;
private TextView t3;

private Fragment tab1;
private Fragment tab2;
private Fragment tab3;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
initView();
initEvent();
setSelect(0);
}
/*
* 初始化点击
*/
private void initEvent() {
// TODO Auto-generated method stub
t1.setOnClickListener(this);
t2.setOnClickListener(this);
t3.setOnClickListener(this);
}
//初始化
private void initView() {
t1 = (TextView) findViewById(R.id.text1);
t2 = (TextView) findViewById(R.id.text2);
t3 = (TextView) findViewById(R.id.text3);

}

/**
* 将tab 的text 初始化
*/
public void reset() {
t1.setText("标题1");
t2.setText("标题2");
t3.setText("标题3");
}

//设置Fragment内容区域
private void setSelect(int i) {
FragmentManager fm=getSupportFragmentManager();
FragmentTransaction trs=fm.beginTransaction();
//隐藏Fragment
hideFragment(trs);

// 把text 切换为选中
switch (i) {
case 0:
if(tab1==null)
{
tab1=new Fragment1();
trs.add(R.id.id_content, tab1);
}else
{
trs.show(tab1);
}
t1.setText("选中");
break;
case 1:
if(tab2==null)
{
tab2=new Fragment2();
trs.add(R.id.id_content, tab2);
}else
{
trs.show(tab2);
}
t2.setText("选中");
break;

case 2:
if(tab3==null)
{
tab3=new Fragment3();
trs.add(R.id.id_content, tab3);
}else
{
trs.show(tab3);
}
t3.setText("选中");
break;

default:
break;
}
trs.commit();
}
/*
* 隐藏所有的Fragment
*/
private void hideFragment(FragmentTransaction trs) {

if(tab1!=null)
{
trs.hide(tab1);
}
if(tab2!=null)
{
trs.hide(tab2);
}
if(tab3!=null)
{
trs.hide(tab3);
}

}

@Override
public void onClick(View v) {
reset();
switch (v.getId()) {
case R.id.text1:
setSelect(0);
break;
case R.id.text2:
setSelect(1);

break;
case R.id.text3:
setSelect(2);
break;

default:
break;
}
}
}

三个Fragment （请注意第二个有点击事件）

Fragment1.java

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class Fragment1 extends Fragment {
private View tab1view;
@Override
public View onCreateView(LayoutInflater inflater,
ViewGroup container,  Bundle savedInstanceState) {
tab1view=inflater.inflate(R.layout.tab1, container, false);
return tab1view;
}
}

Fragment2.java

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.Toast;
public class Fragment2 extends Fragment {
private View tab2view;
@Override
public View onCreateView(LayoutInflater inflater,
ViewGroup container,  Bundle savedInstanceState) {
tab2view=inflater.inflate(R.layout.tab2, container, false);
Button button=(Button)tab2view.findViewById(R.id.button2);
button.setOnClickListener(new OnClickListener() {

@Override
public void onClick(View v) {
// TODO Auto-generated method stub
Toast.makeText(getActivity(), "点击了我", Toast.LENGTH_SHORT).show();
}
});
return tab2view;
}
}

Fragment3.java

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class Fragment3 extends Fragment {
private View tab3view;
@Override
public View onCreateView(LayoutInflater inflater,
ViewGroup container,  Bundle savedInstanceState) {
tab3view=inflater.inflate(R.layout.tab3, container, false);
return tab3view;
}
}

布局文件xml

activity_main.xml（小技巧 用include 引用xml 可以提高代码的重用性，并且方便维护和管理）

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#EEEEEE"
android:orientation="vertical" >
<FrameLayout
android:id="@+id/id_content"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1" >
</FrameLayout>
<include  layout="@layout/bottom"/>
</LinearLayout>

bottom.xml 底部菜单

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="45dp"
android:orientation="horizontal" >
<TextView
android:id="@+id/text1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1.0"
android:gravity="center"
android:text="标题1"
android:textColor="#000000"
android:textSize="18.0dip" />

<TextView
android:id="@+id/text2"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1.0"
android:gravity="center"
android:text="标题2"
android:textColor="#000000"
android:textSize="18.0dip" />

<TextView
android:id="@+id/text3"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1.0"
android:gravity="center"
android:text="标题3"
android:textColor="#000000"
android:textSize="18.0dip" />
</LinearLayout>

tab1.xml

(三个tab布局都只是添加了一个背景图片和前篇博客viewpager 一样)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/image20"
android:orientation="vertical" >

<ProgressBar
android:id="@+id/progressBar1"
style="?android:attr/progressBarStyleLarge"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>

tab2.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/image29"
android:orientation="vertical" >
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>

tab3.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:background="@drawable/image1"
android:layout_height="match_parent"
android:orientation="vertical" >

<SeekBar
android:id="@+id/seekBar1"
android:layout_width="match_parent"
android:layout_height="wrap_content" />

</LinearLayout>