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

總結

這些代碼極爲流暢，和安卓自帶的控件差不多，在獲得功能性的同時，擁有良好的用戶體驗。