Step8：菜单按钮的设计

引言

在我的界面设计中，“我”这一关系路由承接的关系即多又杂乱，优化的第一步考虑到优化功能模块的集中。

菜单按钮

本意是做一个菜单按钮，并且初始的效果图如下：当然效果图很low 但是实际上反映及其流畅：

首先，需要相关的java实现

ArrayDegreeProvider

    package com.sduxiaoma.mark.menupath;
    public class ArrayDegreeProvider implements IDegreeProvider {
private float[] degrees;

public ArrayDegreeProvider(float[] degrees) {
    this.degrees = degrees;
}

public float[] getDegrees(int count, float totalDegrees){
    if(degrees == null || degrees.length != count){
        throw new IllegalArgumentException("Provided delta degrees and the action count are not the same.");
    }
    return degrees; 
}
}

IDegreeProvider

package com.sduxiaoma.mark.menupath;
public interface IDegreeProvider {
public float[] getDegrees(int count, float totalDegrees);
}

DefaultDegreeProvider

public class DefaultDegreeProvider implements IDegreeProvider {
public float[] getDegrees(int count, float totalDegrees){
    if(count < 1)
    {
        return new float[]{};
    }

    float[] result = null;
    int tmpCount = 0;
    if(count < 4){
        tmpCount = count+1;
    }else{
        tmpCount = count-1;
    }

    result = new float[count];
    float delta = totalDegrees / tmpCount;

    for(int index=0; index<count; index++){
        int tmpIndex = index;
        if(count < 4){
            tmpIndex = tmpIndex+1;
        }
        result[index] = tmpIndex * delta;
    }

    return result;
}
}

LinearDegreeProvider

public class LinearDegreeProvider implements IDegreeProvider {
public float[] getDegrees(int count, float totalDegrees){
    if(count < 1){
        return new float[]{};
    }

    if(count == 1){
        return new float[]{45};
    }

    float[] result = null;
    int tmpCount = count-1;

    result = new float[count];
    float delta = totalDegrees / tmpCount;

    for(int index=0; index<count; index++){
        int tmpIndex = index;
        result[index] = tmpIndex * delta;
    }

    return result;
}
}

此外，还有以下几个java文件，代码过长

• SatelliteAnimationCreator.java
• SatelliteMenu.java
• SatelliteMenuItem.java

使用步骤

xml文件

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:sat="http://schemas.android.com/apk/res-auto"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<com.sduxiaoma.mark.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="170dp"
    sat:mainImage="@drawable/ic_launcher"
    sat:totalSpacingDegree="90"
    sat:closeOnClick="true"
    sat:expandDuration="500"/>
</FrameLayout>

之后在java代码中添加菜单项：

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

添加菜单被点击的Listener：

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

总结

这些代码极为流畅，和安卓自带的控件差不多，在获得功能性的同时，拥有良好的用户体验。