【Android移动开发】使用Fragment碎片搭建框架实现不同页面切换
实现效果:
本篇只讲使用Fragment碎片搭建框架实现不同页面切换,至于页面内容暂不讲,因为这涉及的知识点较多还有很多第三方库.
步骤：
- 定义主页面布局
<LinearLayout
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:background="#ffffff"
android:orientation="vertical"
tools:context="com.lyx.mycommunity.app.MainActivity">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/tv_user"/>
<FrameLayout
android:id="@+id/frameLayout"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<RadioGroup
android:id="@+id/rg_main"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="@drawable/home_bottom_parent_bg"
android:orientation="horizontal">
<RadioButton
android:id="@+id/rb_home"
style="@style/MainButtonStyle"
android:drawableTop="@drawable/home_button_selector"
android:text=" 首页" />
<RadioButton
android:id="@+id/rb_category"
style="@style/MainButtonStyle"
android:drawableTop="@drawable/category_button_selector"
android:text=" 服务" />
<RadioButton
android:id="@+id/rb_community"
style="@style/MainButtonStyle"
android:drawableTop="@drawable/community_button_selector"
android:paddingTop="10dp"
android:text=" 新闻" />
<RadioButton
android:id="@+id/rb_search"
style="@style/MainButtonStyle"
android:drawableTop="@drawable/cart_button_selector"
android:text=" 搜索" />
<RadioButton
android:id="@+id/rb_user"
style="@style/MainButtonStyle"
android:drawableTop="@drawable/user_button_selector"
android:text=" 个人中心" />
RadioGroup>
LinearLayout>
- 新建一个类继承Fragment类或者他的子类,重写
onCreateView()和onActivityCreated()方法 在onCreateView()方法中调用:inflater.inflate()方法加载Fragment的布局文件,并返回加载的view对象
package com.lyx.mycommunity.base;
import android.content.Context;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;
public abstract class BaseFragment extends Fragment {
public Context myContext;
@Override
public void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
myContext = getActivity();
}
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
return initView();
}
@Override
public void onActivityCreated(@Nullable Bundle savedInstanceState) {
super.onActivityCreated(savedInstanceState);
initData();
}
/**
*由子类实现，实现特有效果
* @return
*/
public abstract View initView();
/**
* 初始化数据
*/
public void initData() {
}
}
- 在onActivityCreated()中初始化碎片页面中要显示的数据
@Override
public void onActivityCreated(@Nullable Bundle savedInstanceState) {
super.onActivityCreated(savedInstanceState);
initData();
}
- 在主Activity页面中实例化各个Fragment碎片,并进行相关事件监听处理
fragments = new ArrayList<>();
fragments.add(new HomeFragment());
fragments.add(new ServiceFragment());
fragments.add(new NewsFragment());
fragments.add(new SearchFragment());
fragments.add(new UserFragment());
主Activity页面代码:
package com.lyx.mycommunity.app;
import android.content.Intent;
import android.os.Bundle;
import android.widget.FrameLayout;
import android.widget.ImageButton;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.TextView;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentActivity;
import androidx.fragment.app.FragmentTransaction;
import androidx.recyclerview.widget.RecyclerView;
import com.lyx.mycommunity.adapter.HomeRecycleAdapter;
import com.lyx.mycommunity.base.BaseFragment;
import com.lyx.mycommunity.fragment.ServiceFragment;
import com.lyx.mycommunity.fragment.NewsFragment;
import com.lyx.mycommunity.fragment.HomeFragment;
import com.lyx.mycommunity.fragment.UserFragment;
import com.lyx.mycommunity.utils.BatteryChangeReceiver;
import com.lyx.shoppingcity.R;
import com.lyx.mycommunity.fragment.SearchFragment;
import java.util.ArrayList;
import java.util.List;
import butterknife.Bind;
import butterknife.ButterKnife;
public class MainActivity extends FragmentActivity {
@Bind(R.id.frameLayout)
FrameLayout frameLayout;
@Bind(R.id.rb_home)
RadioButton rbHome;
@Bind(R.id.rb_category)
RadioButton rbType;
@Bind(R.id.rb_community)
RadioButton rbCommunity;
@Bind(R.id.rb_search)
RadioButton rbSearch;
@Bind(R.id.rb_user)
RadioButton rbUser;
@Bind(R.id.rg_main)
RadioGroup rgMain;
private ArrayList<BaseFragment> fragments;
private int position;
private BaseFragment myContext;
private RecyclerView rvHome;
private HomeRecycleAdapter adapterDome;
private Intent intent;
private String struser;
private TextView tv_user;
/**
* 缓存的Fragemnt或者上次显示的Fragment
*/
private Fragment tempFragemnt;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ButterKnife.bind(this);
initFragment();
initListener();
}
private void initFragment() {
fragments = new ArrayList<>();
fragments.add(new HomeFragment());
fragments.add(new ServiceFragment());
fragments.add(new NewsFragment());
fragments.add(new SearchFragment());
fragments.add(new UserFragment());
}
// 点击radiobutton的事件监听
private void initListener() {
rgMain.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(RadioGroup group, int checkedId) {
switch (checkedId) {
case R.id.rb_home:
position = 0;
break;
case R.id.rb_category:
position = 1;
break;
case R.id.rb_community:
position = 2;
break;
case R.id.rb_search:
position = 3;
intent = new Intent(MainActivity.this,NoteShowActivity.class);
startActivity(intent);
break;
case R.id.rb_user:
position = 4;
break;
}
// 获取相应的fragment位置
BaseFragment baseFragment = getFragment(position);
switchFragment(tempFragemnt, baseFragment);
}
});
rgMain.check(R.id.rb_home);
}
/**
*
* @param position
* @return
*/
private BaseFragment getFragment(int position) {
if (fragments != null && fragments.size() > 0) {
BaseFragment baseFragment = fragments.get(position);
return baseFragment;
}
return null;
}
// 隐藏上一个fragment
private void switchFragment(Fragment fromFragment, BaseFragment nextFragment) {
if (tempFragemnt != nextFragment) {
tempFragemnt = nextFragment;
if (nextFragment != null) {
FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
//判断nextFragment是否添加
if (!nextFragment.isAdded()) {
//隐藏当前Fragment
if (fromFragment != null) {
transaction.hide(fromFragment);
}
//添加Fragment
transaction.add(R.id.frameLayout, nextFragment).commit();
} else {
//隐藏当前Fragment
if (fromFragment != null) {
transaction.hide(fromFragment);
}
transaction.show(nextFragment).commit();
}
}
}
}
}
- 各fragment碎片布局:这里引用相同布局:
<LinearLayout 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:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dp">
<TextView
android:textColor="#464646"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_margin="20dp"
android:text="我是xx页面"
android:textSize="20sp" />
RelativeLayout>
LinearLayout>
用户中心的fragment页面:
package com.lyx.mycommunity.fragment;
import android.content.Context;
import android.content.Intent;
import android.net.Uri;
import android.util.Log;
import android.view.View;
import android.widget.ImageButton;
import android.widget.ScrollView;
import android.widget.TextView;
import android.widget.Toast;
import com.lyx.mycommunity.app.LoginActivity;
import com.lyx.mycommunity.app.MessageCenterActivity;
import com.lyx.mycommunity.utils.BatteryChangeReceiver;
import com.lyx.shoppingcity.R;
import com.lyx.mycommunity.base.BaseFragment;
import java.io.File;
public class UserFragment extends BaseFragment implements{
private static final String TAG = UserFragment.class.getSimpleName();
private TextView textView;
private Context myContent;
private ImageButton ibUserIconAvator;
private TextView tvUsercenter;
private void findViews(View view) {
ibUserIconAvator = (ImageButton) view.findViewById(R.id.ib_user_icon_avator);
tvUsercenter = (TextView) view.findViewById(R.id.tv_usercenter);
}
@Override
public View initView() {
Log.e(TAG, "用户中心的Frament的UI被初始化");
View view = View.inflate(myContext, R.layout.fragment_user,null);
findViews(view);
tvUsercenter.setAlpha(0);
return view;
}
@Override
public void initData() {
super.initData();
Log.e(TAG, "用户中心的Fragment的数据被初始化了");
}
}
分类的fragment页面:
package com.lyx.mycommunity.fragment;
import android.content.Context;
import android.content.Intent;
import android.net.Uri;
import android.util.Log;
import android.view.View;
import android.widget.ImageButton;
import android.widget.ScrollView;
import android.widget.TextView;
import android.widget.Toast;
import com.lyx.mycommunity.app.LoginActivity;
import com.lyx.mycommunity.app.MessageCenterActivity;
import com.lyx.mycommunity.utils.BatteryChangeReceiver;
import com.lyx.shoppingcity.R;
import com.lyx.mycommunity.base.BaseFragment;
import java.io.File;
public class CategoryFragment extends BaseFragment implements{
private static final String TAG = CategoryFragment.class.getSimpleName();
private TextView textView;
private Context myContent;
private ImageButton ibUserIconAvator;
private TextView tvUsercenter;
private void findViews(View view) {
ibUserIconAvator = (ImageButton) view.findViewById(R.id.ib_user_icon_avator);
tvUsercenter = (TextView) view.findViewById(R.id.tv_usercenter);
}
@Override
public View initView() {
Log.e(TAG, "分类页面的Frament的UI被初始化");
View view = View.inflate(myContext, R.layout.fragment_category,null);
findViews(view);
tvUsercenter.setAlpha(0);
return view;
}
@Override
public void initData() {
super.initData();
Log.e(TAG, "分类的Fragment的数据被初始化了");
}
}
…
其他几个fragment都是类似上面这个,在initView()中加载UI页面,在initData()初始数据加载.
titlebar.xml:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="60dp"
android:background="#9448bb"
android:orientation="horizontal">
<TextView
android:id="@+id/tv_local"
android:layout_width="wrap_content"
android:layout_height="60dp"
android:layout_margin="10dp"
android:drawableTop="@mipmap/loca"
android:text="位置"
android:textColor="#fff" />
<EditText
android:id="@+id/tv_search_home"
android:layout_width="wrap_content"
android:layout_height="40dp"
android:background="@mipmap/btnbgfff"
android:gravity="center_vertical"
android:hint="输入搜索信息"
android:layout_gravity="center"
android:imeOptions="actionSearch"
android:paddingLeft="5dp"
android:drawableLeft="@mipmap/home_search_icon"
android:layout_margin="2dp"
android:singleLine="true"
android:layout_weight="0.67" />
<TextView
android:id="@+id/tv_message_home"
android:layout_width="wrap_content"
android:layout_height="60dp"
android:layout_margin="10dp"
android:drawableTop="@mipmap/new_message_icon"
android:text=" 消息"
android:textColor="#fff" />
LinearLayout>
设置RadioButton选中后的样式community_button_selector.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@mipmap/main_community" android:state_checked="false">item>
<item android:drawable="@mipmap/main_community_press" android:state_checked="true">item>
selector>
其他四个都是类似,就是把相应的图标改改,就可以了.