一个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的核心组成部分。
-----------------------------------------------------------------------------------------------------------------------------------------------------------
vision,新增ViewPager联合Button新成页面框架。
<span style="font-size:18px;">public class MainActivity extends AppCompatActivity implements View.OnClickListener {
/**
* 主页【首页】
*/
private LinearLayout homeLL;
/**
* 字体展示页
*/
private LinearLayout textLL;
/**
* 添加字体页
*/
private LinearLayout addLL;
/**
* 消息页
*/
private LinearLayout msgLL;
/**
* 个人中心页
*/
private LinearLayout myCenterLL;
/**
* 添加页面菜单选项
*/
private RelativeLayout addMenuRL;
/**
* 主题内容ViewPager
*/
private CompatViewPager bodyVP;
/**
* 顶部导航消息栏
*/
private TextView headerTitle;
/**
* 所有主导页面Fragment集合
*/
private List<Fragment> fragments;
/**
* 主题展示内容Fragment
*/
private HomeFragment homeFragment;
private MsgFragment msgFragment;
private TextFragment textFragment;
private MyCenterFragment myCenterFragment;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
/**
* 管理主题内容Fragment
*/
fragments = new ArrayList<>();
homeFragment = new HomeFragment();
fragments.add(homeFragment);
textFragment = new TextFragment();
fragments.add(textFragment);
msgFragment = new MsgFragment();
fragments.add(msgFragment);
myCenterFragment = new MyCenterFragment();
fragments.add(myCenterFragment);
initView();
initListener();
}
/**
* 初始化事件监听器
*/
private void initListener() {
homeLL.setOnClickListener(this);
textLL.setOnClickListener(this);
addLL.setOnClickListener(this);
msgLL.setOnClickListener(this);
myCenterLL.setOnClickListener(this);
}
/**
* 初始化添加菜单选项View
*/
private void initAddMenuView() {
addMenuRL = (RelativeLayout) findViewById(R.id.layout_main_menu_add_font);
addMenuRL.setVisibility(View.VISIBLE);
findViewById(R.id.layout_main_menu_add_camear).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MainActivity.this, "照相上传信息", Toast.LENGTH_SHORT).show();
addMenuRL.setVisibility(View.GONE);
}
});
findViewById(R.id.layout_main_menu_add_writing).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MainActivity.this, "手写上传信息", Toast.LENGTH_SHORT).show();
addMenuRL.setVisibility(View.GONE);
}
});
findViewById(R.id.layout_main_menu_add_close).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
if (addMenuRL.getVisibility() == View.VISIBLE) {
addMenuRL.setVisibility(View.GONE);
}
}
});
}
/**
* 初始化页面View
*/
private void initView() {
homeLL = (LinearLayout) findViewById(R.id.main_home);
textLL = (LinearLayout) findViewById(R.id.main_text);
addLL = (LinearLayout) findViewById(R.id.main_add);
msgLL = (LinearLayout) findViewById(R.id.main_msg);
myCenterLL = (LinearLayout) findViewById(R.id.main_my);
bodyVP = (CompatViewPager) findViewById(R.id.body_cvp);
headerTitle = (TextView) findViewById(R.id.header_title);
bodyVP.setOffscreenPageLimit(fragments.size());
bodyVP.setViewTouchMode(true);
FragmentPagerAdapter adapter = new FragmentPagerAdapter(getSupportFragmentManager()) {
@Override
public android.support.v4.app.Fragment getItem(int position) {
return fragments.get(position);
}
@Override
public int getCount() {
return fragments.size();
}
};
bodyVP.setAdapter(adapter);
initAddMenuView();
}
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.main_home:
bodyVP.setCurrentItem(0);
// bodyVP.setCurrentItem(0,false);
headerTitle.setText("Home");
updateFragmentSelected();
break;
case R.id.main_text:
bodyVP.setCurrentItem(1);
headerTitle.setText("Text");
updateFragmentSelected();
break;
case R.id.main_add:
initAddMenuView();
break;
case R.id.main_msg:
bodyVP.setCurrentItem(2);
headerTitle.setText("Msg");
updateFragmentSelected();
break;
case R.id.main_my:
bodyVP.setCurrentItem(3);
headerTitle.setText("MyCenter");
updateFragmentSelected();
break;
}
}
/**
* ViewPager被选中页不同,更新展示内容
*/
private void updateFragmentSelected() {
switch (bodyVP.getCurrentItem()) {
case 0:
homeLL.setSelected(true);
textLL.setSelected(false);
msgLL.setSelected(false);
myCenterLL.setSelected(false);
break;
case 1:
homeLL.setSelected(false);
textLL.setSelected(true);
msgLL.setSelected(false);
myCenterLL.setSelected(false);
break;
case 2:
homeLL.setSelected(false);
textLL.setSelected(false);
msgLL.setSelected(true);
myCenterLL.setSelected(false);
break;
case 3:
homeLL.setSelected(false);
textLL.setSelected(false);
msgLL.setSelected(false);
myCenterLL.setSelected(true);
break;
}
}
}</span>
Demo中使用带标题ListView,以及字母导航SideBar使用。
或许,现在的我仍旧一无所有,而我正在一步步践行。岁月静好,愿我们都有美好的愿望及不同的生命历程~~