MyFlag Step11 ：menupath的移植工作

引言

本周的计划相对稳定，就是继续前一段时间我们的工作，整体的计划具体如下：

• 客户端 ：修改密码和查看个人信息
• 后台：SuperviseDao的功能实现
• 界面：界面跳转关系与布局的优化

现在对于界面的优化，具体的工作如下:

界面移植

1. 首先是将res文件夹下drawable下的图片文件复制到myflag相应的地方。
2. 将layout下的布局文件 sat_item_cr.xml、sat_main.xml移入myflag相应文件夹下
3. 拷贝values文件夹下的 sat_attrs.xml、sat_strings.xml文件

4. 同时拷贝以下文件进入对应文件夹
   

5. 在项目文件的java目录下新建文件夹menupath并响应文件拷贝
   

6. 下面的部分也是最主要的部分也是最困难的部分，将控件叠加在主界面上而且不影响主界面工作

acticity_main.xml文件：

<?xml version="1.0" encoding="utf-8"?>
<carbon.widget.LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:sat="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/activity_bg_gray"
    android:orientation="vertical">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1">

        <com.example.sdu.myflag.widget.CustomViewPager
            android:id="@+id/main_view_pager"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@color/activity_bg_gray"
            tools:layout_editor_absoluteY="0dp"
            tools:layout_editor_absoluteX="0dp">

        </com.example.sdu.myflag.widget.CustomViewPager>

        <com.example.sdu.myflag.menupath.SatelliteMenu
            android:id="@+id/menu"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|left"
            android:layout_margin="8dp"
            sat:satelliteDistance="100dp"
            sat:mainImage="@drawable/ic_launcher"
            sat:totalSpacingDegree="90"
            sat:closeOnClick="true"
            sat:expandDuration="500"
            tools:layout_editor_absoluteX="0dp"
            android:layout_alignParentBottom="true"
            tools:layout_editor_absoluteY="444dp">

        </com.example.sdu.myflag.menupath.SatelliteMenu>
    </RelativeLayout>

    <carbon.widget.LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/white"
        android:orientation="horizontal"
        tools:layout_editor_absoluteY="0dp"
        tools:layout_editor_absoluteX="0dp">

        <carbon.widget.LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:onClick="onMainTabClick"
            android:orientation="vertical">

            <ImageView
                android:id="@+id/tab_main_img"
                android:layout_width="20dp"
                android:layout_height="20dp"
                android:src="@drawable/main_page_default" />

            <TextView
                android:id="@+id/tab_main_tv"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="4dp"
                android:text="首页"
                android:textColor="@color/tab_text_color_gray"
                android:textSize="14sp" />
        </carbon.widget.LinearLayout>

        <carbon.widget.LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:onClick="onCommunityTabClick"
            android:orientation="vertical">

            <ImageView
                android:id="@+id/tab_community_img"
                android:layout_width="20dp"
                android:layout_height="20dp"
                android:src="@drawable/community_default" />

            <TextView
                android:id="@+id/tab_community_tv"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="4dp"
                android:text="社区"
                android:textColor="@color/tab_text_color_gray"
                android:textSize="14sp" />
        </carbon.widget.LinearLayout>

        <carbon.widget.LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:onClick="onMySelfTabClick"
            android:orientation="vertical">

            <ImageView
                android:id="@+id/tab_myself_img"
                android:layout_width="20dp"
                android:layout_height="20dp"
                android:src="@drawable/myself_default" />

            <TextView
                android:id="@+id/tab_myself_tv"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="4dp"
                android:text="我"
                android:textColor="@color/tab_text_color_gray"
                android:textSize="14sp" />
        </carbon.widget.LinearLayout>
    </carbon.widget.LinearLayout>

</carbon.widget.LinearLayout>

其中主要用了layout_alignParentBottom这一特性;它是将控件作为一个控件的子控件并显示在其底部

7、相应的java文件中，对main_activity.java的修改如下：
在initView方法下创建菜单：

        SatelliteMenu menu = (SatelliteMenu) findViewById(R.id.menu);
        List<SatelliteMenuItem> items = new ArrayList<SatelliteMenuItem>();


        items.add(new SatelliteMenuItem(4, R.drawable.ic_1));
        items.add(new SatelliteMenuItem(4, R.drawable.ic_3));
        //items.add(new SatelliteMenuItem(4, R.drawable.ic_4));
        //items.add(new SatelliteMenuItem(3, R.drawable.ic_5));
        //items.add(new SatelliteMenuItem(2, R.drawable.ic_6));
        items.add(new SatelliteMenuItem(1, R.drawable.ic_2));

        menu.addItems(items);

添加监听器：

menu.setOnItemClickedListener(new SatelliteMenu.SateliteClickedListener() {
            public void eventOccured(int id) {
                Log.i("sat", "Clicked on " + id);
            }
        });

到此为止，我们的界面移植过程就顺利结束了。
现在看下效果图：

点击前	点击后

总结

这样看新的菜单空间的假如似乎破坏了整个界面的美观性，但是这才是初步的优化，菜单键的加入是本着对于频繁的操作减少用户达到目的的中间过程。后期还会继续优化。