MyFlag Step11 ：menupath的移植工作

来源：互联网发布：租用临时备案域名编辑：程序博客网时间：2024/06/06 01:46

引言

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

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

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

界面移植

首先是将res文件夹下drawable下的图片文件复制到myflag相应的地方。
将layout下的布局文件 sat_item_cr.xml、sat_main.xml移入myflag相应文件夹下
拷贝values文件夹下的 sat_attrs.xml、sat_strings.xml文件
同时拷贝以下文件进入对应文件夹
在项目文件的java目录下新建文件夹menupath并响应文件拷贝
下面的部分也是最主要的部分也是最困难的部分，将控件叠加在主界面上而且不影响主界面工作

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);            }        });

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

点击前点击后

总结

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

阅读全文

0 0