Android转盘按钮效果巧妙实现

想实现这样一种效果:一个转盘,旁边有几个按钮分布。每个按钮都可以点击:

表面上看,有5个按钮,其实其中每个按钮都是一个大圆圈,放置的位置都是重叠的。只是按下去的那部分才会有颜色,其他都是透明。

看看这个布局文件你就知道是怎么摆放的:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/back_ground_yellow"
    tools:context="com.example.circle.MainActivity$PlaceholderFragment" >

           <ImageView
           android:id="@+id/imageView1"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
		   android:layout_centerInParent="true"
           android:src="@drawable/picture" />

          <ImageView
           android:id="@+id/imageView2"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
		   android:layout_centerInParent="true"
           android:src="@drawable/white_picture" />

       <com.example.circle.TrapezoidImageButton
        android:id="@+id/telId1"
        android:layout_centerInParent="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/select_menu_1"
        android:tag="telId1" />

      <com.example.circle.TrapezoidImageButton
        android:id="@+id/telId2"
        android:layout_centerInParent="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/select_menu_2"
        android:tag="telId12" />

            <com.example.circle.TrapezoidImageButton
        android:id="@+id/telId3"
        android:layout_centerInParent="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/select_menu_3"
        android:tag="telId3" />

       <com.example.circle.TrapezoidImageButton
        android:id="@+id/telId4"
        android:layout_centerInParent="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/select_menu_4"
        android:tag="telId4" />

       <com.example.circle.TrapezoidImageButton
        android:id="@+id/telId5"
        android:layout_centerInParent="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/select_menu_5"
        android:tag="telId5" />

</RelativeLayout>

其中自定义的ImageButton

public class TrapezoidImageButton extends ImageButton {

    public TrapezoidImageButton(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);
    }

    public TrapezoidImageButton(Context context, AttributeSet attrs) {
    super(context, attrs);
    }

    public TrapezoidImageButton(Context context) {
    super(context);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
    if (isTouchPointInView(event.getX(),event.getY())||
        event.getAction() != MotionEvent.ACTION_DOWN){
        return super.onTouchEvent(event);
    }else{
        return false;
    }
    }

    protected boolean isTouchPointInView(float localX, float localY){
    Bitmap bitmap = Bitmap.createBitmap(getWidth(), getHeight(), Config.ARGB_8888);
    Canvas canvas = new Canvas(bitmap);
    draw(canvas);
    int x = (int)localX;
    int y = (int)localY;
    if (x < 0 || x >= getWidth())
        return false;
    if (y < 0 || y >= getHeight())
        return false;
    int pixel = bitmap.getPixel(x,y);
    if ((pixel&0xff000000) != 0){  //不是透明的,这里是最关键所在。
        return true;
    }else{
        return false;
    }
    }
}

主Activity:

package com.example.circle;

import android.app.Activity;
import android.app.ActionBar;
import android.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.widget.Toast;
import android.os.Build;

public class MainActivity extends Activity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);

		if (savedInstanceState == null) {
			getFragmentManager().beginTransaction()
					.add(R.id.container, new PlaceholderFragment()).commit();
		}
	}

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {

		// Inflate the menu; this adds items to the action bar if it is present.
		getMenuInflater().inflate(R.menu.main, menu);
		return true;
	}

	@Override
	public boolean onOptionsItemSelected(MenuItem item) {
		// Handle action bar item clicks here. The action bar will
		// automatically handle clicks on the Home/Up button, so long
		// as you specify a parent activity in AndroidManifest.xml.
		int id = item.getItemId();
		if (id == R.id.action_settings) {
			return true;
		}
		return super.onOptionsItemSelected(item);
	}

	/**
	 * A placeholder fragment containing a simple view.
	 */
	public static class PlaceholderFragment extends Fragment {

		private Activity mactivity;

		public PlaceholderFragment() {
		}

		@Override
		public View onCreateView(LayoutInflater inflater, ViewGroup container,
				Bundle savedInstanceState) {
			View rootView = inflater.inflate(R.layout.fragment_main, container,
					false);
			mactivity = getActivity();

			rootView.findViewById(R.id.telId1).setOnClickListener(onclick);
			rootView.findViewById(R.id.telId2).setOnClickListener(onclick);
			rootView.findViewById(R.id.telId3).setOnClickListener(onclick);
			rootView.findViewById(R.id.telId4).setOnClickListener(onclick);
			rootView.findViewById(R.id.telId5).setOnClickListener(onclick);

			return rootView;
		}

		public  OnClickListener onclick = new OnClickListener() {  

			@Override
			public void onClick(View v) {

				   Toast.makeText(mactivity, v.getTag().toString(), 1*1000).show(); 

			}
		}; 

	}

}

在这里也分享一个demo源代码下载地址点击打开链接

时间: 2024-10-20 04:22:01

Android转盘按钮效果巧妙实现的相关文章

实现Android半透明Menu效果的开发实例

不知道大家是否用过天天动听,对于它界面上的半透明Menu效果,笔者感觉非常漂亮.下面是天天动听半透明Menu的截图,欣赏下吧: 感觉还不错吧?那么如何实现这种半透明Menu效果呢?本文就重点讨论并给出这种Menu的具体代码实现过程. 首先分析下实现这种半透明Menu所需做的工作,并进行合理分解: 1.  利用Shaper设置一个半透明圆角背景. 2.  定义Menu布局,主要就GridView,把图标都放在这个GridView. 3.  Menu事件, 通过PopupWindow或者AlertD

自定义控件三部曲之绘图篇(二十)——RadialGradient与水波纹按钮效果

前言:每当感叹自己的失败时,那我就问你,如果让你重新来一次,你会不会成功?如果会,那说明并没有拼尽全力. 最近博主实在是太忙了,博客更新实在是太慢了,真是有愧大家. 这篇将是Shader的最后一篇,下部分,我们将讲述Canvas变换的知识.在讲完Canvas变换以后,就正式进入第三部曲啦,是不是有点小激动呢-- 今天给大家讲的效果是使用RadialGradient来实现水波纹按钮效果,水波纹效果是Android L平台上自带的效果,这里我们就看看它是如何实现的,本篇的最终效果图如下 一.Radi

IOS仿Android九宫格解锁效果[转]

原理很简单,监听view中touch的一系列事件,当判定手指位置在某个按钮附近的时候则判断此按钮选中,并画出线. 效果图如下: 你可以在NineGridUnlockView.m文件中方法 touchesEnded:withEvent: 的最后添加自己的代码来决定画线完成后来做什么. (当前工程还没有加入委托,后续可能加上) 代码地址: https://github.com/lcwangchao/NineGridUnlocker IOS仿Android九宫格解锁效果[转]

Android 使用动画效果后的控件位置处理 类似系统通知栏下拉动画

Android的动画的使用,请参考.Android的动画,在设计方面,我有点不太理解,觉得这样搞很怪,因为在控件动画后,即使设置了停留在动画结束时的位置,我们也确实看到了控件停在那个位置,但其实该控件的真实位置还是在原来动画前的那里.举个例子,如果有个Button,你给它设置了动画,让它移动到其他位置,当移动完成后,你会发现,点击Button没有任何效果,而在Button原来的位置,就是动画前的位置点击,明明没有任何控件,却看到了点击Button的效果.不知道Google为什么要这样设计.解决思

WinRT自定义控件第一 - 转盘按钮控件

之前的文章中,介绍了用WPF做一个转盘按钮控件,后来需要把这个控件移植到WinRT时,遇到了很大的问题,主要原因在于WPF和WinRT还是有很大不同的.这篇文章介绍了这个移植过程,由于2次实现的控件功能完全一样,文章主要关注点放在WPF与WinRT的不同上. 定义控件模板的XAML文件 在WinRT上的实现和WPF中实现一个很大的不同是,这个实现的TemplatedControl没有从ItemsControl继承,而是由Control继承手动添加了一些对集合属性的支持.不从ItemsContro

Android 导航条效果实现(六) TabLayout+ViewPager+Fragment

TabLayout 一.继承结构 public class TabLayout extends HorizontalScrollView java.lang.Object ? android.view.View ? android.view.ViewGroup ? android.widget.FrameLayout ? android.widget.HorizontalScrollView ? android.support.design.widget.TabLayout 二.TabLayou

Android的按钮单击事件及监听器的实现方式

第一种:匿名内部类作为事件监听器类 第二种:内部类作为监听器 第三种:Activity本身作为事件监听器 第四种:外部类作为监听器 当用户单击button按钮时,程序将会触发MyButtonListener监听器外部MyButtonListener类 使用顶级类定义事件监听器类的形式比较少见,主要因为如下两个原因:1.事件监听器通常属于特定的gui界面,定义成外部类不篮球提高程序的内聚性.2.外部类形式的事件监听器不能自由访问创建gui界面的类中的组件,编程不够简洁.但如果某个事件监听器确实需要

Android中按钮的点击事件的四种写法

如题,在Android中按钮的点击事件有四种写法,如下图. 界面为四个Button+一个TextView+一个ImageView activity_main布局文件如下: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="

CSS3模拟实现iphone返回按钮效果

CSS3模拟实现iphone返回按钮效果:大家知道现在CSS3可以实现各种漂亮的效果,以前只有图片可以实现的效果,现在CSS3实现起来难度也不是太高.下面分享一段使用CSS3实现的iphone返回按钮的效果,其实这种CSS3代码根本就不用分析,只要给出代码实例,自己就完全可以看明白,当然你要首先知道各个属性的作用是什么,代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type&q