经常我们会在一个app中看到多个tab切换页面的效果,如下图所示
实际上每次tab 的切换呈现的不同UI界面是不同的fragment在切换,要实现该效果,见如下代码实例:
一.创建四个不同的fragment文件,fragment01.java; fragment02.java; fragment03.java ; fragment04.java; 下面以最简单的fragment01为例:
public class Fragment01 extends Fragment {
public Fragment01() {
// Required empty public constructor
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
return inflater.inflate(R.layout.fragment01, container, false);
}
}
相应的布局内容fragment01..xml:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:layout_height="match_parent" tools:context="com.example.huangyiting.mytest.Fragment01">
<!-- TODO: Update blank fragment layout -->
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content"
android:text="@string/hello_blank_fragment_01"
android:layout_gravity="center"
android:textSize="28sp"/>
</FrameLayout>
二、创建activity_main.xml布局:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">
<LinearLayout
android:id="@+id/bottom_bar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
>
// activity底部的四个tab是均分的,需要分别设置layout_weight= 1; 另外,我们采用在布局中设置android:onClick方法来设置点击事件
<TextView
android:id="@+id/text01"
android:clickable="true"
android:text="@string/test01"
android:textSize="30sp"
android:textColor="#ff000000"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:onClick="Click"/>
<TextView
android:id="@+id/text02"
android:clickable="true"
android:text="@string/test02"
android:textSize="30sp"
android:textColor="#ff000000"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:onClick="Click"/>
<TextView
android:id="@+id/text03"
android:clickable="true"
android:text="@string/test03"
android:textSize="30sp"
android:textColor="#ff000000"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:onClick="Click"/>
<TextView
android:id="@+id/text04"
android:clickable="true"
android:text="@string/test04"
android:textSize="30sp"
android:textColor="#ff000000"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:onClick="Click"/>
</LinearLayout>
//1.、 将之前写好的fragment01.java的fragment放在布局当中;
2、在activity中作fragment切换前提是必须将fragment放置在视图容器framelayout中
3、在相同的布局上放四个fragment,然后在activity中控制其中的显示
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#13105613"
android:layout_above="@id/bottom_bar"
>
<fragment
android:id = "@+id/fragment01"
android:name="com.example.huangyiting.mytest.Fragment01"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
</fragment>
</FrameLayout>
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#13105613"
android:layout_above="@id/bottom_bar"
>
<fragment
android:id = "@+id/fragment02"
android:name="com.example.huangyiting.mytest.Fragment02"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
</fragment>
</FrameLayout>
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#13105613"
android:layout_above="@id/bottom_bar"
>
<fragment
android:id = "@+id/fragment03"
android:name="com.example.huangyiting.mytest.Fragment01"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
</fragment>
</FrameLayout>
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#13105613"
android:layout_above="@id/bottom_bar"
>
<fragment
android:id = "@+id/fragment04"
android:name="com.example.huangyiting.mytest.Fragment02"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
</fragment>
</FrameLayout>
</RelativeLayout>
三、创建MainActivity
public class MainActivity extends Activity{
private Fragment[] fragments; // 创建一个fragment数组fragments
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// 定义fragments数组里每个fragment
fragments = new Fragment[4];
fragments[0] = getFragmentManager().findFragmentById(R.id.fragment01);
fragments[1] = getFragmentManager().findFragmentById(R.id.fragment02);
fragments[2] = getFragmentManager().findFragmentById(R.id.fragment03);
fragments[3] = getFragmentManager().findFragmentById(R.id.fragment04);
//通过调用getFragmentManager().beginTransaction()来隐藏(hide)或者显示(show)fragment,最后调用commit方法来提交事务
getFragmentManager().beginTransaction()
.hide(fragments[1]).hide(fragments[2])
.hide(fragments[3]).show(fragments[0]).commit();
}
// 底部四个tab点击事件判断,根据点击内容显示相应fragment,方法同上
public void Click(View view){
switch (view.getId()){
case R.id.text01:
getFragmentManager().beginTransaction().hide(fragments[1]).hide(fragments[2]).hide(fragments[3]).show(fragments[0]).commit();
break;
case R.id.text02:
getFragmentManager().beginTransaction().hide(fragments[0]).hide(fragments[2]).hide(fragments[3]).show(fragments[1]).commit();
break;
case R.id.text03:
getFragmentManager().beginTransaction().hide(fragments[0]).hide(fragments[1]).hide(fragments[3]).show(fragments[2]).commit();
break;
case R.id.text04:
getFragmentManager().beginTransaction().hide(fragments[1]).hide(fragments[2]).hide(fragments[0]).show(fragments[3]).commit();
break;
default:
break;
}
}
写完后的效果图如下所示:
点击首页出现第一个fragment:
点击优惠后切换第二个fragment