Android CircleMenu：旋转转盘选择Menu



Android CircleMenu：旋转转盘选择Menu

Android CircleMenu是一个可以自由旋转类似转盘样式的选择Menu。其运行效果如动态图所示：

这在中国建设银行官方的APP中有用到该技术，下图这是中国建设银行官方APP的首页，其中的转盘明显就是一个Android CircleMenu：

Android CircleMenu在github上的项目主页是：https://github.com/zhangphil/Android-CircleMenu
Android CircleMenu用法比较简单，例如Java代码：

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.TextView;
import android.widget.Toast;

import com.szugyi.circlemenu.view.CircleImageView;
import com.szugyi.circlemenu.view.CircleLayout;
import com.szugyi.circlemenu.view.CircleLayout.OnItemClickListener;
import com.szugyi.circlemenu.view.CircleLayout.OnItemSelectedListener;

public class MainActivity extends Activity implements OnItemSelectedListener, OnItemClickListener{
	
	private	TextView selectedTextView;
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		
		CircleLayout circleMenu = (CircleLayout)findViewById(R.id.main_circle_layout);
		circleMenu.setOnItemSelectedListener(this);
		circleMenu.setOnItemClickListener(this);

		//这个TextView仅仅作为演示转盘按钮以何为默认的选中项，
		//默认的最底部的那一条被选中，然后显示到该TextView中。
		selectedTextView = (TextView)findViewById(R.id.main_selected_textView);
		selectedTextView.setText(((CircleImageView)circleMenu.getSelectedItem()).getName());
	}

	//圆盘转动到底部，则认为该条目被选中
	@Override
	public void onItemSelected(View view, int position, long id, String name) {		
		selectedTextView.setText(name);
	}

	//选择了转盘中的某一条。
	@Override
	public void onItemClick(View view, int position, long id, String name) {
		Toast.makeText(getApplicationContext(), getResources().getString(R.string.start_app) + " " + name, Toast.LENGTH_SHORT).show();
	}
}

布局文件：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:circle="http://schemas.android.com/apk/res/com.szugyi.circlemenu"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >

    <com.szugyi.circlemenu.view.CircleLayout
        android:id="@+id/main_circle_layout"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_above="@+id/main_selected_textView"
        android:layout_gravity="center_horizontal"
        circle:firstChildPosition="South" 
        circle:rotateToCenter="true" 
        circle:isRotating="true" >       
<!--         circle:circleBackground="@drawable/green"  > -->


        <com.szugyi.circlemenu.view.CircleImageView
            android:id="@+id/main_facebook_image"
            android:layout_width="35dp"
            android:layout_height="35dp"
            android:src="@drawable/icon_facebook"
            circle:name="@string/facebook" />

        <com.szugyi.circlemenu.view.CircleImageView
            android:id="@+id/main_myspace_image"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/icon_myspace"
            circle:name="@string/myspace" />

        <com.szugyi.circlemenu.view.CircleImageView
            android:id="@+id/main_google_image"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/icon_google"
            circle:name="@string/google" />

        <com.szugyi.circlemenu.view.CircleImageView
            android:id="@+id/main_linkedin_image"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/icon_linkedin"
            circle:name="@string/linkedin" />

        <com.szugyi.circlemenu.view.CircleImageView
            android:id="@+id/main_twitter_image"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/icon_twitter"
            circle:name="@string/twitter" />

        <com.szugyi.circlemenu.view.CircleImageView
            android:id="@+id/main_wordpress_image"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/icon_wordpress"
            circle:name="@string/wordpress" />
    </com.szugyi.circlemenu.view.CircleLayout>

    <TextView
        android:id="@+id/main_selected_textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="50dp"
        android:textAppearance="?android:attr/textAppearanceLarge" />

</RelativeLayout>

其中的Android Circle ImageView代表转盘中的图标。