App页面框架

一个APP中有比较多的重要组成部分，先来聊聊APP页面框架。今天主要介绍Fragment+ButtonGroup的模式。

在整个组成中，有1个MainActivity，1个BaseActivity，5个Fragment。其中，每个Fragment支持内容的扩展，与当前整体的构成并不冲突。

实现效果如图所示：



一、activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<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"
tools:context=".MainActivity">

<FrameLayout
android:id="@+id/mian_fragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="50dp"/>
<RadioGroup
android:id="@+id/main_bottom_menu_rg"
android:layout_width="match_parent"
android:layout_height="50dp"
android:orientation="horizontal"
android:layout_alignParentBottom="true"
android:background="@color/home_bar_classbg_select">
<RadioButton
android:id="@+id/main_bottom_rb_home"
style="@style/main_bottom_radiobutton_style"
android:drawableTop="@drawable/main_bottom_rb_home_selector"
android:button="@null" />
<RadioButton
android:id="@+id/main_bottom_rb_class"
style="@style/main_bottom_radiobutton_style"
android:drawableTop="@drawable/main_bottom_rb_class_selector"
android:button="@null"/>
<RadioButton
android:id="@+id/main_bottom_rb_search"
style="@style/main_bottom_radiobutton_style"
android:drawableTop="@drawable/bar_bottom_rb_search_selector"
android:button="@null"/>
<RadioButton
android:id="@+id/main_bottom_rb_shopping"
style="@style/main_bottom_radiobutton_style"
android:drawableTop="@drawable/bar_bottom_rb_shopping_selector"
android:button="@null"/>
<RadioButton
android:id="@+id/main_bottom_rb_mycenter"
style="@style/main_bottom_radiobutton_style"
android:drawableTop="@drawable/bar_bottom_rb_mycenter_selector"
android:button="@null"/>
</RadioGroup>
</RelativeLayout>

其中，有使用状态选择器selector来控制按钮被选中的状态。

二、主页面MainActivity

public class MainActivity extends Activity implements RadioGroup.OnCheckedChangeListener{

private HomeFragment mHomefragment;
private ClassifyFragment mClassifyFragment;
private EventFragment mEventFragment;
private ShoppingFragment mShoppingFragment;
private MycenterFragment mMycenterFragment;
private RadioButton mHomeRb;
private int mPage = 0;
private long exitTime = 0;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
}

/**
* 初始化控件
*/
protected void initView() {
mHomeRb = (RadioButton) findViewById(R.id.main_bottom_rb_home);
mHomeRb.setChecked(true);
RadioGroup pMainBottomRg = (RadioGroup) findViewById(R.id.main_bottom_menu_rg);
pMainBottomRg.setOnCheckedChangeListener(this);
selectFragment(0);
}

@Override
public void onCheckedChanged(RadioGroup group, int checkedId) {
switch (checkedId){
case R.id.main_bottom_rb_home:
selectFragment(0);
break;
case R.id.main_bottom_rb_class:
selectFragment(1);
break;
case R.id.main_bottom_rb_search:
selectFragment(2);
break;
case R.id.main_bottom_rb_shopping:
selectFragment(3);
break;
case R.id.main_bottom_rb_mycenter:
selectFragment(4);
break;
}
}

/**
* Fragment切换控制
* @param i 切换到第几个Fragment
*/
private void selectFragment(int i){
FragmentManager manager = getFragmentManager();
FragmentTransaction transaction = manager.beginTransaction();
hideFragment(transaction);
switch (i){
case 0:
mPage = 0;
if (mHomefragment==null){
mHomefragment = new HomeFragment();
transaction.add(R.id.mian_fragment,mHomefragment);
}else {
transaction.show(mHomefragment);
}
break;
case 1:
mPage = 1;
if (mClassifyFragment==null){
mClassifyFragment = new ClassifyFragment();
transaction.add(R.id.mian_fragment,mClassifyFragment);
}else {
transaction.show(mClassifyFragment);
}
break;
case 2:
mPage = 2;
if (mEventFragment==null){
mEventFragment = new EventFragment();
transaction.add(R.id.mian_fragment,mEventFragment);
}else {
transaction.show(mEventFragment);
}
break;
case 3:
mPage = 3;
if (mShoppingFragment==null){
mShoppingFragment = new ShoppingFragment();
transaction.add(R.id.mian_fragment,mShoppingFragment);
}else {
transaction.show(mShoppingFragment);
}
break;
case 4:
mPage = 4;
if (mMycenterFragment==null){
mMycenterFragment = new MycenterFragment();
transaction.add(R.id.mian_fragment,mMycenterFragment);
}else {
transaction.show(mMycenterFragment);
}
break;
}
transaction.commit();
}

/**
* 隐藏Fragment
* @param transaction Fragment管理器
*/
private void hideFragment(FragmentTransaction transaction){
if (mHomefragment!=null){
transaction.hide(mHomefragment);
}
if (mClassifyFragment!=null){
transaction.hide(mClassifyFragment);
}
if (mEventFragment!=null){
transaction.hide(mEventFragment);
}
if (mShoppingFragment!=null){
transaction.hide(mShoppingFragment);
}
if (mMycenterFragment!=null){
transaction.hide(mMycenterFragment);
}
}

/**
* 返回键监听事件
*/
@Override
public void onBackPressed() {
switch (mPage){
case 0:
case 4:
exit();
break;
case 1:
case 2:
case 3:
selectFragment(0);
mHomeRb.setChecked(true);
break;
}
}

/**
* 返回键退出控制
*/
public void exit() {
if ((System.currentTimeMillis() - exitTime) > 2000) {
Toast.makeText(getApplicationContext(), "再按一次退出程序",
Toast.LENGTH_SHORT).show();
exitTime = System.currentTimeMillis();
} else {
finish();
System.exit(0);
}
}
}

三、首页效果展示与扩展

fragment_home.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=".home.HomeFragment">

<!-- TODO: Update blank fragment layout -->
<ImageView
android:id="@+id/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@mipmap/ic_launcher"/>

</FrameLayout>

HomeFragment

public class HomeFragment extends Fragment {

public HomeFragment() {
// Required empty public constructor
}

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
View view = inflater.inflate(R.layout.fragment_home, container, false);
ImageView imageView = (ImageView) view.findViewById(R.id.image);
BitmapUtils bitmapUtils = new BitmapUtils(getActivity());
bitmapUtils.display(imageView,"http://pic1.nipic.com/2009-02-19/200921922311483_2.jpg");
return view;
}
}

源码下载地址

Android APP应用分析中有归纳如何更好地去总结、积淀制作一个APP的核心组成部分。

或许，现在的我仍旧一无所有，而我正在一步步践行。岁月静好，愿我们都有美好的愿望及不同的生命历程~~