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的核心组成部分。

-----------------------------------------------------------------------------------------------------------------------------------------------------------

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使用。

源码下载


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


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

壹叁零壹

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值