精华内容
下载资源
问答
  • Android自定义圆形图片

    千次下载 热门讨论 2013-12-17 17:09:31
    Android自定义圆形图片,可设置最多两个的外边框。包括从网络获取图片显示。 解决图片锯齿问题。 解决图片变形问题。 文章地址:http://blog.csdn.net/alan_biao/article/details/17379925
  • 转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/43131133,本文出自:【张鸿洋的博客】1、概述今天打开建行看存款,一看伤心欲绝,再看:我擦,这个圆形菜单挺炫。于是,为了掩盖我悲痛的心情...

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/43131133,本文出自:【张鸿洋的博客】

    1、概述

    今天打开建行看存款,一看伤心欲绝,再看:我擦,这个圆形菜单挺炫。于是,为了掩盖我悲痛的心情,我决定是实现这个效果。好了,其实还有个原因,记得我初学android那会我做的应用被鄙视了,说我的菜单没有建行的好看,那么今天,证明自己的时刻到了。我决定用我做的圆形菜单的控件,32s实现个建行的菜单给他看看,顺便教教他~~

    玩笑开完,直接看下效果图:


    ok,这个就是我们今天的主要的效果了~~直接跟随手指滚动,直接快速滚动,直接点击Item~~~

    这个效果的背景是在我在跪了2个多小时后,爱歌花了32s给我做的,再次感谢爱歌。


    接下来,就是使用该控件实现建行那个圆形菜单~~


    ok,分分钟搞定~~

    就是有点恶心的地方,尼玛建行左边那个介绍和右边菜单的背景是两个图,想要做到无缝连在一起的效果,在我们圆形菜单的测量中还多写了几行代码,这个属于后话。


    2、使用方式

    简单看下使用方式,有个直观的了解


    1、MainActivity

    package com.zhy.ccbCricleMenu;
    
    import android.app.Activity;
    import android.os.Bundle;
    import android.view.View;
    import android.widget.Toast;
    
    import com.zhy.view.CircleMenuLayout;
    import com.zhy.view.CircleMenuLayout.OnMenuItemClickListener;
    
    public class MainActivity extends Activity
    {
    
    	private CircleMenuLayout mCircleMenuLayout;
    
    	private String[] mItemTexts = new String[] { "安全中心 ", "特色服务", "投资理财",
    			"转账汇款", "我的账户", "信用卡" };
    	private int[] mItemImgs = new int[] { R.drawable.home_mbank_1_normal,
    			R.drawable.home_mbank_2_normal, R.drawable.home_mbank_3_normal,
    			R.drawable.home_mbank_4_normal, R.drawable.home_mbank_5_normal,
    			R.drawable.home_mbank_6_normal };
    
    	@Override
    	protected void onCreate(Bundle savedInstanceState)
    	{
    		super.onCreate(savedInstanceState);
    		setContentView(R.layout.activity_main02);
    
    		mCircleMenuLayout = (CircleMenuLayout) findViewById(R.id.id_menulayout);
    		mCircleMenuLayout.setMenuItemIconsAndTexts(mItemImgs, mItemTexts);
    		
    		
    
    		mCircleMenuLayout.setOnMenuItemClickListener(new OnMenuItemClickListener()
    		{
    			
    			@Override
    			public void itemClick(View view, int pos)
    			{
    				Toast.makeText(MainActivity.this, mItemTexts[pos],
    						Toast.LENGTH_SHORT).show();
    
    			}
    			
    			@Override
    			public void itemCenterClick(View view)
    			{
    				Toast.makeText(MainActivity.this,
    						"you can do something just like ccb  ",
    						Toast.LENGTH_SHORT).show();
    				
    			}
    		});
    		
    	}
    
    }
    

    2、布局文件

    <LinearLayout 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/bg"
        android:gravity="center_vertical"
        android:orientation="horizontal" >
    
        <com.zhy.view.CircleMenuLayout
            android:id="@+id/id_menulayout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:padding="100dp"
            android:background="@drawable/circle_bg3" >
    
            <RelativeLayout
                android:id="@id/id_circle_menu_item_center"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" >
    
                <ImageView
                    android:layout_width="104.0dip"
                    android:layout_height="104.0dip"
                    android:layout_centerInParent="true"
                    android:background="@drawable/turnplate_center_unlogin" />
    
                <ImageView
                    android:layout_width="116.0dip"
                    android:layout_height="116.0dip"
                    android:layout_centerInParent="true"
                    android:background="@drawable/turnplate_mask_unlogin_normal" />
            </RelativeLayout>
        </com.zhy.view.CircleMenuLayout>
    
    </LinearLayout>

    布局文件的CircleMenuLayout中的一个控件为我们圆形菜单的中间的那个View,当然了你可以不设置~

    整个控件的使用,不要太简单,一行代码:setMenuItemIconsAndTexts去设置文本和图片就行~~~

    如果你需要监听click事件,通过setOnMenuItemClickListener接口即可。


    ok,不知道大家有没有注意到,我们的布局中间的view设置的id是这样的: android:id="@id/id_circle_menu_item_center" ,维萨呢,因为我们的自定义控件依赖于我们的id,所以这个id我不希望用户自己去指定,而是提前定义些id,让用户去使用。其实这样的也很常见,大家在使用一些控件时,某些id也需要这么做,具体哪些控件,忘了~

    那么如何定义这样的id资源呢?

    在res/values下面去新建一个ids.xml文件:

    <?xml version="1.0" encoding="utf-8"?>
    <resources>
    
        <item name="id_circle_menu_item_image" type="id"/>
        <item name="id_circle_menu_item_text" type="id"/>
        <item name="id_circle_menu_item_center" type="id"/>
    
    </resources>

    可以看到里面写了3个id,前两个后面会用到,见到的时候别忘了,在这定义过。


    3、简单的分析

    对于上述的效果,我们决定自定义一个ViewGroup叫做CircleMenuLayout;

    至于菜单项,文本+图片,支持设置其中任何一项,或者全部~~那么我们只需要在CircleMenuLayout的layout中去设置他们的位置就行了。

    当然了在layout()之前,我们需要去进行onMeasure去测量,设置自己的宽高,和item的宽高;

    最后就是和用户交互了滚动了:

    我们重写dispatchTouchEvent事件,在其中编写跟随手指移动的代码~~我为什么不再onTouchEvent里面写,因为如果我在onTouchEvent里面写,用户触摸item时,我们的菜单无法移动,因为item是可点击,会作为我们的targetView,然后消耗掉我们的MOVE事件~~~关于事件分发:具体参考:Android ViewGroup事件分发机制 。 

    当然了还有很多细节,如何快速滚动,什么时候应该触发item的click事件等等。

    如果不清楚,请先跳过~~继续往下看~~


    4、CircleMenuLayout之onMeasure

    在测量之前,我们先看看公布出去的setMenuItemIconsAndTexts,这个应该在测量之前。

    /**
    	 * 设置菜单条目的图标和文本
    	 * 
    	 * @param resIds
    	 */
    	public void setMenuItemIconsAndTexts(int[] resIds, String[] texts)
    	{
    		mItemImgs = resIds;
    		mItemTexts = texts;
    
    		// 参数检查
    		if (resIds == null && texts == null)
    		{
    			throw new IllegalArgumentException("菜单项文本和图片至少设置其一");
    		}
    
    		// 初始化mMenuCount
    		mMenuItemCount = resIds == null ? texts.length : resIds.length;
    
    		if (resIds != null && texts != null)
    		{
    			mMenuItemCount = Math.min(resIds.length, texts.length);
    		}
    
    		addMenuItems();
    
    	}
    	
    	/**
    	 * 添加菜单项
    	 */
    	private void addMenuItems()
    	{
    		LayoutInflater mInflater = LayoutInflater.from(getContext());
    
    		/**
    		 * 根据用户设置的参数,初始化view
    		 */
    		for (int i = 0; i < mMenuItemCount; i++)
    		{
    			final int j = i;
    			View view = mInflater.inflate(R.layout.circle_menu_item, this,
    					false);
    			ImageView iv = (ImageView) view
    					.findViewById(R.id.id_circle_menu_item_image);
    			TextView tv = (TextView) view
    					.findViewById(R.id.id_circle_menu_item_text);
    
    			if (iv != null)
    			{
    				iv.setVisibility(View.VISIBLE);
    				iv.setImageResource(mItemImgs[i]);
    				iv.setOnClickListener(new OnClickListener()
    				{
    					@Override
    					public void onClick(View v)
    					{
    						
    						if (mOnMenuItemClickListener != null)
    						{
    							mOnMenuItemClickListener.itemClick(v, j);
    						}
    					}
    				});
    			}
    			if (tv != null)
    			{
    				tv.setVisibility(View.VISIBLE);
    				tv.setText(mItemTexts[i]);
    			}
    
    			// 添加view到容器中
    			addView(view);
    		}
    	}

    比较简单,拿到两个数据,算出菜单的个数;然后去遍历,根据我们预设的R.layout.circle_menu_item,把值设上就可以。

    看一眼我们的R.layout.circle_menu_item

    <?xml version="1.0" encoding="UTF-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:orientation="vertical" >
    
        <ImageView
            android:id="@id/id_circle_menu_item_image"
            android:layout_width="wrap_content"
            android:visibility="gone"
            android:src="@drawable/home_mbank_1_clicked"
            android:layout_height="wrap_content" />
    
        <TextView
            android:id="@id/id_circle_menu_item_text"
            android:layout_width="wrap_content"
            android:visibility="gone"
            android:layout_height="wrap_content"
            android:textColor="@android:color/white"
            android:text="保险"
            android:textSize="14.0dip" />
    
    </LinearLayout>

    其实就是一个布局文件,里面一个tv一个iv;注意里面的两个id,我们之前说过了哈~~

    这里大家会不会有疑问,为什么我要独立出一个布局呢,咋不在代码里面写死~~~

    嗯,是这样的,我不是任性,假设我代码里面写死了,现在的需求是左边是文本右边是图标,你咋办,去改源码?我们独立出来以后呢?用户自己改改布局就行了~~~当然了,还可以把这个布局通过一个方法公布出来,setMenuItemLayoutId这样的方法。

    对了上面还涉及到点击事件,这个so easy了,几行代码:

    /**
    	 * MenuItem的点击事件接口
    	 * 
    	 * @author zhy
    	 * 
    	 */
    	public interface OnMenuItemClickListener
    	{
    		void itemClick(View view, int pos);
    
    		void itemCenterClick(View view);
    	}
    
    	/**
    	 * MenuItem的点击事件接口
    	 */
    	private OnMenuItemClickListener mOnMenuItemClickListener;
    
    	/**
    	 * 设置MenuItem的点击事件接口
    	 * 
    	 * @param mOnMenuItemClickListener
    	 */
    	public void setOnMenuItemClickListener(
    			OnMenuItemClickListener mOnMenuItemClickListener)
    	{
    		this.mOnMenuItemClickListener = mOnMenuItemClickListener;
    	}

    没撒说的吧,大家见了无数次了~~


    好了,接下来看我们声明的变量和onMeasure

    public class CircleMenuLayout extends ViewGroup
    {
    	private int mRadius;
    	/**
    	 * 该容器内child item的默认尺寸
    	 */
    	private static final float RADIO_DEFAULT_CHILD_DIMENSION = 1 / 4f;
    	/**
    	 * 菜单的中心child的默认尺寸
    	 */
    	private float RADIO_DEFAULT_CENTERITEM_DIMENSION = 1 / 3f;
    	/**
    	 * 该容器的内边距,无视padding属性,如需边距请用该变量
    	 */
    	private static final float RADIO_PADDING_LAYOUT = 1 / 12f;
    
    	/**
    	 * 当每秒移动角度达到该值时,认为是快速移动
    	 */
    	private static final int FLINGABLE_VALUE = 300;
    
    	/**
    	 * 如果移动角度达到该值,则屏蔽点击
    	 */
    	private static final int NOCLICK_VALUE = 3;
    
    	/**
    	 * 当每秒移动角度达到该值时,认为是快速移动
    	 */
    	private int mFlingableValue = FLINGABLE_VALUE;
    	/**
    	 * 该容器的内边距,无视padding属性,如需边距请用该变量
    	 */
    	private float mPadding;
    
    	/**
    	 * 布局时的开始角度
    	 */
    	private double mStartAngle = 0;
    	/**
    	 * 菜单项的文本
    	 */
    	private String[] mItemTexts;
    	/**
    	 * 菜单项的图标
    	 */
    	private int[] mItemImgs;
    
    	/**
    	 * 菜单的个数
    	 */
    	private int mMenuItemCount;
    
    	/**
    	 * 检测按下到抬起时旋转的角度
    	 */
    	private float mTmpAngle;
    	/**
    	 * 检测按下到抬起时使用的时间
    	 */
    	private long mDownTime;
    
    	/**
    	 * 判断是否正在自动滚动
    	 */
    	private boolean isFling;
    
    	
    
    	public CircleMenuLayout(Context context, AttributeSet attrs)
    	{
    		super(context, attrs);
    		// 无视padding
    		setPadding(0, 0, 0, 0);
    	}
    
    	/**
    	 * 设置布局的宽高,并策略menu item宽高
    	 */
    	@Override
    	protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
    	{
    		int resWidth = 0;
    		int resHeight = 0;
    
    		/**
    		 * 根据传入的参数,分别获取测量模式和测量值
    		 */
    		int width = MeasureSpec.getSize(widthMeasureSpec);
    		int widthMode = MeasureSpec.getMode(widthMeasureSpec);
    
    		int height = MeasureSpec.getSize(heightMeasureSpec);
    		int heightMode = MeasureSpec.getMode(heightMeasureSpec);
    
    		/**
    		 * 如果宽或者高的测量模式非精确值
    		 */
    		if (widthMode != MeasureSpec.EXACTLY
    				|| heightMode != MeasureSpec.EXACTLY)
    		{
    			// 主要设置为背景图的高度
    			resWidth = getSuggestedMinimumWidth();
    			// 如果未设置背景图片,则设置为屏幕宽高的默认值
    			resWidth = resWidth == 0 ? getDefaultWidth() : resWidth;
    
    			resHeight = getSuggestedMinimumHeight();
    			// 如果未设置背景图片,则设置为屏幕宽高的默认值
    			resHeight = resHeight == 0 ? getDefaultWidth() : resHeight;
    		} else
    		{
    			// 如果都设置为精确值,则直接取小值;
    			resWidth = resHeight = Math.min(width, height);
    		}
    
    		setMeasuredDimension(resWidth, resHeight);
    
    		// 获得半径
    		mRadius = Math.max(getMeasuredWidth(), getMeasuredHeight());
    
    		// menu item数量
    		final int count = getChildCount();
    		// menu item尺寸
    		int childSize = (int) (mRadius * RADIO_DEFAULT_CHILD_DIMENSION);
    		// menu item测量模式
    		int childMode = MeasureSpec.EXACTLY;
    
    		// 迭代测量
    		for (int i = 0; i < count; i++)
    		{
    			final View child = getChildAt(i);
    
    			if (child.getVisibility() == GONE)
    			{
    				continue;
    			}
    
    			// 计算menu item的尺寸;以及和设置好的模式,去对item进行测量
    			int makeMeasureSpec = -1;
    
    			if (child.getId() == R.id.id_circle_menu_item_center)
    			{
    				makeMeasureSpec = MeasureSpec.makeMeasureSpec(
    						(int) (mRadius * RADIO_DEFAULT_CENTERITEM_DIMENSION),
    						childMode);
    			} else
    			{
    				makeMeasureSpec = MeasureSpec.makeMeasureSpec(childSize,
    						childMode);
    			}
    			child.measure(makeMeasureSpec, makeMeasureSpec);
    		}
    
    		mPadding = RADIO_PADDING_LAYOUT * mRadius;
    
    	}
    	

    首先说一下变量:其实都有注释,mRadius是我们整个View的宽度;几个常量,分别为我们menu item的宽度占据mRadius的比例;RADIO_PADDING_LAYOUT为内边距占据的比例;剩下的自己看注释~~

    测量呢?

    首先我们根据widthMeasureSpec、heightMeasureSpec分别获取宽高的值和模式~~~

    会不会有人会问这个值是什么玩意?怎么就能通过它拿到宽和高,没关系,恰好我们是ViewGroup,我们需要去测量子View,刚好要传这两个参数:

    你往下看:child.measure(makeMeasureSpec, makeMeasureSpec);传入了两个值,你在看这两个值如何形成的,

    makeMeasureSpec = MeasureSpec.makeMeasureSpec(childSize,childMode);是通过MeasureSpec将尺寸和模式封装到一起的~~好了,不能再扯了,有机会独立写篇自定义控件的总结博客细说这些。

    拿到尺寸和模式以后呢,我们去判断模式,是否是EXACTLY(如果你对三种模式不了解,请参考:Android 手把手教您自定义ViewGroup(一)

    如果是EXACTLY那么简单,直接取两者的最小值即可。

    如果不是,不是,那么根据设置的背景图的尺寸,如果没有背景图,那么取默认的尺寸,默认其实就是屏幕宽和高中的小值;

    /**
    	 * 获得默认该layout的尺寸
    	 * 
    	 * @return
    	 */
    	private int getDefaultWidth()
    	{
    		WindowManager wm = (WindowManager) getContext().getSystemService(
    				Context.WINDOW_SERVICE);
    		DisplayMetrics outMetrics = new DisplayMetrics();
    		wm.getDefaultDisplay().getMetrics(outMetrics);
    		return Math.min(outMetrics.widthPixels, outMetrics.heightPixels);
    	}

    得到父控件的尺寸后,我们setMeasuredDimension设置下~~然后根据父控件的宽高,集合我们的预设常量的那些比例,去为我们的menu item设置宽和高:

    没撒说的,计算出宽度,这里我们的宽度是精确值,所以我们设置menu item的模式为:EXACTLY,最后通过MeasureSpec封装,传入给child.measure(makeMeasureSpec, makeMeasureSpec);即可。

    测量完成以后,那么准备布局吧~~


    5、CircleMenuLayout之onLayout

    我们在onLayout中将menu item设置到指定位置,理论上,我们的圆形菜单的样子就搞定了~~

    	/**
    	 * 设置menu item的位置
    	 */
    	@Override
    	protected void onLayout(boolean changed, int l, int t, int r, int b)
    	{
    		int layoutRadius = mRadius;
    
    		// Laying out the child views
    		final int childCount = getChildCount();
    
    		int left, top;
    		// menu item 的尺寸
    		int cWidth = (int) (layoutRadius * RADIO_DEFAULT_CHILD_DIMENSION);
    
    		// 根据menu item的个数,计算角度
    		float angleDelay = 360 / (getChildCount() - 1);
    
    		// 遍历去设置menuitem的位置
    		for (int i = 0; i < childCount; i++)
    		{
    			final View child = getChildAt(i);
    
    			if (child.getId() == R.id.id_circle_menu_item_center)
    				continue;
    
    			if (child.getVisibility() == GONE)
    			{
    				continue;
    			}
    
    			mStartAngle %= 360;
    
    			// 计算,中心点到menu item中心的距离
    			float tmp = layoutRadius / 2f - cWidth / 2 - mPadding;
    
    			// tmp cosa 即menu item中心点的横坐标
    			left = layoutRadius
    					/ 2
    					+ (int) Math.round(tmp
    							* Math.cos(Math.toRadians(mStartAngle)) - 1 / 2f
    							* cWidth);
    			// tmp sina 即menu item的纵坐标
    			top = layoutRadius
    					/ 2
    					+ (int) Math.round(tmp
    							* Math.sin(Math.toRadians(mStartAngle)) - 1 / 2f
    							* cWidth);
    
    			child.layout(left, top, left + cWidth, top + cWidth);
    			// 叠加尺寸
    			mStartAngle += angleDelay;
    		}
    
    		// 找到中心的view,如果存在设置onclick事件
    		View cView = findViewById(R.id.id_circle_menu_item_center);
    		if (cView != null)
    		{
    			cView.setOnClickListener(new OnClickListener()
    			{
    				@Override
    				public void onClick(View v)
    				{
    
    					if (mOnMenuItemClickListener != null)
    					{
    						mOnMenuItemClickListener.itemCenterClick(v);
    					}
    				}
    			});
    		// 设置center item位置
    		int cl = layoutRadius / 2 - cView.getMeasuredWidth() / 2;
    		int cr = cl + cView.getMeasuredWidth();
    		cView.layout(cl, cl, cr, cr);
    		}
    			
    
    	}
    

    测量,无非是遍历,然后去计算left 和 top ,当然了,我们这里是圆形,所以会使用到一些数学知识。tmp*cosa 即menu item中心点的横坐标,tmp * sina 即menu item的纵坐标。关于这样的计算可以参考:Android SurfaceView实战 打造抽奖转盘 。 当然了,我也给大家绘制了一个图:


    假设小圆是我们的menu item,那么他的坐标就是mRadius / 2 + tmp * coas , mRadius / 2 + tmp * sina 。

    如果,你只需要实现一个圆形菜单,并不需要跟随手指滚动神马的,到此就可以了,拿走不谢。


    我们继续往下看滚动。


    6、CircleMenuLayout之dispatchTouchEvent

    /**
    	 * 记录上一次的x,y坐标
    	 */
    	private float mLastX;
    	private float mLastY;
    
    	/**
    	 * 自动滚动的Runnable
    	 */
    	private AutoFlingRunnable mFlingRunnable;
    
    	@Override
    	public boolean dispatchTouchEvent(MotionEvent event)
    	{
    		float x = event.getX();
    		float y = event.getY();
    
    		Log.e("TAG", "x = " + x + " , y = " + y);
    
    		switch (event.getAction())
    		{
    		case MotionEvent.ACTION_DOWN:
    
    			mLastX = x;
    			mLastY = y;
    			mDownTime = System.currentTimeMillis();
    			mTmpAngle = 0;
    
    			// 如果当前已经在快速滚动
    			if (isFling)
    			{
    				// 移除快速滚动的回调
    				removeCallbacks(mFlingRunnable);
    				isFling = false;
    				return true;
    			}
    
    			break;
    		case MotionEvent.ACTION_MOVE:
    
    			/**
    			 * 获得开始的角度
    			 */
    			float start = getAngle(mLastX, mLastY);
    			/**
    			 * 获得当前的角度
    			 */
    			float end = getAngle(x, y);
    
    			// Log.e("TAG", "start = " + start + " , end =" + end);
    			// 如果是一、四象限,则直接end-start,角度值都是正值
    			if (getQuadrant(x, y) == 1 || getQuadrant(x, y) == 4)
    			{
    				mStartAngle += end - start;
    				mTmpAngle += end - start;
    			} else
    			// 二、三象限,色角度值是付值
    			{
    				mStartAngle += start - end;
    				mTmpAngle += start - end;
    			}
    			// 重新布局
    			requestLayout();
    
    			mLastX = x;
    			mLastY = y;
    
    			break;
    		case MotionEvent.ACTION_UP:
    
    			// 计算,每秒移动的角度
    			float anglePerSecond = mTmpAngle * 1000
    					/ (System.currentTimeMillis() - mDownTime);
    
    			// Log.e("TAG", anglePrMillionSecond + " , mTmpAngel = " +
    			// mTmpAngle);
    
    			// 如果达到该值认为是快速移动
    			if (Math.abs(anglePerSecond) > mFlingableValue && !isFling)
    			{
    				// post一个任务,去自动滚动
    				post(mFlingRunnable = new AutoFlingRunnable(anglePerSecond));
    
    				return true;
    			}
    
    			// 如果当前旋转角度超过NOCLICK_VALUE屏蔽点击
    			if (Math.abs(mTmpAngle) > NOCLICK_VALUE)
    			{
    				return true;
    			}
    
    			break;
    		}
    		return super.dispatchTouchEvent(event);
    	}

    ok,代码并不长~~DOWN的时候,记录下mLastX,mLastY,当前的时间,以及重置mTmpAngle为0,如果当前在自动滚动,停止该操作。

    ACTION_MOVE的时候,根据mLastX,mLastY得到一个角度,再根据当前的x,y再获得一个调度,不断去改变mStartAngle,重新布局接口。

    当然了getAngle(x, y);方法,获得的角度在如果是一、四象限,则直接end-start,角度值都是正值,在二、三象限,end-start角度值是负值,所以倒着减一下。

    UP的时候,计算每秒移动的角度, 如果达到mFlingableValue的大小,则认为需要自动滚动,post(mFlingRunnable = new AutoFlingRunnable(anglePerSecond));去执行。

    如果当前旋转角度超过NOCLICK_VALUE屏蔽点击,屏蔽点击就是return true即可。为撒呢?因为子view的点击触发在super.dispatchTouchEvent(event);里面,我们直接return了。

    那么我们看上面说的一些方法,先看:getAngle:

    /**
    	 * 根据触摸的位置,计算角度
    	 * 
    	 * @param xTouch
    	 * @param yTouch
    	 * @return
    	 */
    	private float getAngle(float xTouch, float yTouch)
    	{
    		double x = xTouch - (mRadius / 2d);
    		double y = yTouch - (mRadius / 2d);
    		return (float) (Math.asin(y / Math.hypot(x, y)) * 180 / Math.PI);
    	}

    还是画图来说:


    Math.sqrt( x * x + y * y )是斜边长,乘以 sin a 就是 y 的长度;

    反之求a的角度:即Math.asin(y / Math.hypot(x, y) ; [ hypot是x * x + y * y ]

    这样我们移动的角度计算就ok了~~

    不同象限,以为因为start-end的值可能为负值,所以需要改变减法的顺序,因为我们最后角度需要正值;

    关于判断象限的代码:

    /**
    	 * 根据当前位置计算象限
    	 * 
    	 * @param x
    	 * @param y
    	 * @return
    	 */
    	private int getQuadrant(float x, float y)
    	{
    		int tmpX = (int) (x - mRadius / 2);
    		int tmpY = (int) (y - mRadius / 2);
    		if (tmpX >= 0)
    		{
    			return tmpY >= 0 ? 4 : 1;
    		} else
    		{
    			return tmpY >= 0 ? 3 : 2;
    		}
    
    	}

    自己拿坐标代入,立马就理解了~~~

    最后还剩什么呢?

    看我们的自动AutoFlingRunnable,自动滚动的任务~~

    我们通过post(mFlingRunnable = new AutoFlingRunnable(anglePerSecond));去触发的

    /**
    	 * 自动滚动的任务
    	 * 
    	 * @author zhy
    	 * 
    	 */
    	private class AutoFlingRunnable implements Runnable
    	{
    
    		private float angelPerSecond;
    
    		public AutoFlingRunnable(float velocity)
    		{
    			this.angelPerSecond = velocity;
    		}
    
    		public void run()
    		{
    			// 如果小于20,则停止
    			if ((int) Math.abs(angelPerSecond) < 20)
    			{
    				isFling = false;
    				return;
    			}
    			isFling = true;
    			// 不断改变mStartAngle,让其滚动,/30为了避免滚动太快
    			mStartAngle += (angelPerSecond / 30);
    			// 逐渐减小这个值
    			angelPerSecond /= 1.0666F;
    			postDelayed(this, 30);
    			// 重新布局
    			requestLayout();
    		}
    	}

    代码比较短,我们传入每秒移动的角度这个值,然后根据这个值去增加mStartAngle,然后requestLayout();就是自动滚动了~~当然了需要越滚越慢和停止,所以需要

    // 逐渐减小这个值angelPerSecond /= 1.0666F; 以及最后移动很慢的时候,我们就停下来:

    // 如果小于20,则停止
    if ((int) Math.abs(angelPerSecond) < 20)
    {
    isFling = false;
    return;
    }

    到此,所有代码解析完毕~~~嘿嘿~



    github地址:https://github.com/hongyangAndroid/Android-CircleMenu 欢迎satr or fork . 





    展开全文
  • Android圆形相机预览窗口,圆形SurfaceView
  • wpf 圆形菜单

    千次下载 热门讨论 2014-02-26 00:58:19
    wpf 圆形菜单 详细解说: http://www.cnblogs.com/ExMan/admin/EditPosts.aspx?postid=3567474&update=1
  • unity 弧形UI 圆形slider 圆形滑动条 制作版本5.3 ugui 需要把预置体放到canvas上使用
  • 于是自己自定义了个View,实现图片的圆角以及圆形效果。效果图: 第一个是原图,第二个是圆形效果,第三第四设置了不同的圆角大小。 准备改变一个博客的风格,首先给大家讲一下原理,让大家明白了,然后再贴代码,...

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/24555655

    本来想在网上找个圆角的例子看一看,不尽人意啊,基本都是官方的Demo的那张原理图,稍后会贴出。于是自己自定义了个View,实现图片的圆角以及圆形效果。效果图:


    第一个是原图,第二个是圆形效果,第三第四设置了不同的圆角大小。

    准备改变一个博客的风格,首先给大家讲一下原理,让大家明白了,然后再贴代码,不然可以直接看那么长的代码也比较痛苦,核心代码其实就那么几行:

    核心代码分析:

    /**
    	 * 根据原图和变长绘制圆形图片
    	 * 
    	 * @param source
    	 * @param min
    	 * @return
    	 */
    	private Bitmap createCircleImage(Bitmap source, int min)
    	{
    		final Paint paint = new Paint();
    		paint.setAntiAlias(true);
    		Bitmap target = Bitmap.createBitmap(min, min, Config.ARGB_8888);
    		/**
    		 * 产生一个同样大小的画布
    		 */
    		Canvas canvas = new Canvas(target);
    		/**
    		 * 首先绘制圆形
    		 */
    		canvas.drawCircle(min / 2, min / 2, min / 2, paint);
    		/**
    		 * 使用SRC_IN
    		 */
    		paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
    		/**
    		 * 绘制图片
    		 */
    		canvas.drawBitmap(source, 0, 0, paint);
    		return target;
    	}

    其实主要靠:paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));这行代码,为什么呢,我给大家解释下,SRC_IN这种模式,两个绘制的效果叠加后取交集展现后图,怎么说呢,咱们第一个绘制的是个圆形,第二个绘制的是个Bitmap,于是交集为圆形,展现的是BItmap,就实现了圆形图片效果。圆角,其实就是先绘制圆角矩形,是不是很简单,以后别人再说实现圆角,你就把这一行代码给他就行了。

    从Android的示例中,给大家证明一下:

    下面有一张PorterDuff.Mode的16中效果图,咱们的只是其一:


    源码咱们只关心谁先谁后绘制的:

      canvas.translate(x, y);
                    canvas.drawBitmap(mDstB, 0, 0, paint);
                    paint.setXfermode(sModes[i]);
                    canvas.drawBitmap(mSrcB, 0, 0, paint);
                    paint.setXfermode(null);
                    canvas.restoreToCount(sc);
    可以看出先绘制的Dst,再绘制的Src,最后的展示是SrcIn那个图:显示的区域是二者交集,展示的是Src(后者)。和咱们前面结论一致。效果16种,大家可以自由组合展示不同的效果。


    好了,原理和核心代码解释完成。下面开始写自定义View。

    1、自定义属性:

    <?xml version="1.0" encoding="utf-8"?>
    <resources>
    
        <attr name="borderRadius" format="dimension" />
        <attr name="type">
            <enum name="circle" value="0" />
            <enum name="round" value="1" />
        </attr>
        <attr name="src" format="reference"></attr>
    
        <declare-styleable name="CustomImageView">
            <attr name="borderRadius" />
            <attr name="type" />
            <attr name="src" />
        </declare-styleable>
    
    </resources>

    2、构造中获取自定义的属性:
    	/**
    	 * TYPE_CIRCLE / TYPE_ROUND
    	 */
    	private int type;
    	private static final int TYPE_CIRCLE = 0;
    	private static final int TYPE_ROUND = 1;
    
    	/**
    	 * 图片
    	 */
    	private Bitmap mSrc;
    
    	/**
    	 * 圆角的大小
    	 */
    	private int mRadius;
    
    	/**
    	 * 控件的宽度
    	 */
    	private int mWidth;
    	/**
    	 * 控件的高度
    	 */
    	private int mHeight;
    
    	public CustomImageView(Context context, AttributeSet attrs)
    	{
    		this(context, attrs, 0);
    	}
    
    	public CustomImageView(Context context)
    	{
    		this(context, null);
    	}
    
    	/**
    	 * 初始化一些自定义的参数
    	 * 
    	 * @param context
    	 * @param attrs
    	 * @param defStyle
    	 */
    	public CustomImageView(Context context, AttributeSet attrs, int defStyle)
    	{
    		super(context, attrs, defStyle);
    
    		TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.CustomImageView, defStyle, 0);
    
    		int n = a.getIndexCount();
    		for (int i = 0; i < n; i++)
    		{
    			int attr = a.getIndex(i);
    			switch (attr)
    			{
    			case R.styleable.CustomImageView_src:
    				mSrc = BitmapFactory.decodeResource(getResources(), a.getResourceId(attr, 0));
    				break;
    			case R.styleable.CustomImageView_type:
    				type = a.getInt(attr, 0);// 默认为Circle
    				break;
    			case R.styleable.CustomImageView_borderRadius:
    				mRadius= a.getDimensionPixelSize(attr, (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 10f,
    						getResources().getDisplayMetrics()));// 默认为10DP
    				break;
    			}
    		}
    		a.recycle();
    	}
    

    3、onMeasure中获取控件宽高:

    /**
    	 * 计算控件的高度和宽度
    	 */
    	@Override
    	protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
    	{
    		// super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    		/**
    		 * 设置宽度
    		 */
    		int specMode = MeasureSpec.getMode(widthMeasureSpec);
    		int specSize = MeasureSpec.getSize(widthMeasureSpec);
    
    		if (specMode == MeasureSpec.EXACTLY)// match_parent , accurate
    		{
    			mWidth = specSize;
    		} else
    		{
    			// 由图片决定的宽
    			int desireByImg = getPaddingLeft() + getPaddingRight()
    					+ mSrc.getWidth();
    			if (specMode == MeasureSpec.AT_MOST)// wrap_content
    			{
    				mWidth = Math.min(desireByImg, specSize);
    			} else
    
    				mWidth = desireByImg;
    		}
    
    		/***
    		 * 设置高度
    		 */
    
    		specMode = MeasureSpec.getMode(heightMeasureSpec);
    		specSize = MeasureSpec.getSize(heightMeasureSpec);
    		if (specMode == MeasureSpec.EXACTLY)// match_parent , accurate
    		{
    			mHeight = specSize;
    		} else
    		{
    			int desire = getPaddingTop() + getPaddingBottom()
    					+ mSrc.getHeight();
    
    			if (specMode == MeasureSpec.AT_MOST)// wrap_content
    			{
    				mHeight = Math.min(desire, specSize);
    			} else
    				mHeight = desire;
    		}
    
    		setMeasuredDimension(mWidth, mHeight);
    
    	}



    4、根据Type绘制:

    /**
    	 * 绘制
    	 */
    	@Override
    	protected void onDraw(Canvas canvas)
    	{
    
    		switch (type)
    		{
    		// 如果是TYPE_CIRCLE绘制圆形
    		case TYPE_CIRCLE:
    
    			int min = Math.min(mWidth, mHeight);
    			/**
    			 * 长度如果不一致,按小的值进行压缩
    			 */
    			mSrc = Bitmap.createScaledBitmap(mSrc, min, min, false);
    
    			canvas.drawBitmap(createCircleImage(mSrc, min), 0, 0, null);
    			break;
    		case TYPE_ROUND:
    			canvas.drawBitmap(createRoundConerImage(mSrc), 0, 0, null);
    			break;
    
    		}
    
    	}
    
    	/**
    	 * 根据原图和变长绘制圆形图片
    	 * 
    	 * @param source
    	 * @param min
    	 * @return
    	 */
    	private Bitmap createCircleImage(Bitmap source, int min)
    	{
    		final Paint paint = new Paint();
    		paint.setAntiAlias(true);
    		Bitmap target = Bitmap.createBitmap(min, min, Config.ARGB_8888);
    		/**
    		 * 产生一个同样大小的画布
    		 */
    		Canvas canvas = new Canvas(target);
    		/**
    		 * 首先绘制圆形
    		 */
    		canvas.drawCircle(min / 2, min / 2, min / 2, paint);
    		/**
    		 * 使用SRC_IN,参考上面的说明
    		 */
    		paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
    		/**
    		 * 绘制图片
    		 */
    		canvas.drawBitmap(source, 0, 0, paint);
    		return target;
    	}
    
    	/**
    	 * 根据原图添加圆角
    	 * 
    	 * @param source
    	 * @return
    	 */
    	private Bitmap createRoundConerImage(Bitmap source)
    	{
    		final Paint paint = new Paint();
    		paint.setAntiAlias(true);
    		Bitmap target = Bitmap.createBitmap(mWidth, mHeight, Config.ARGB_8888);
    		Canvas canvas = new Canvas(target);
    		RectF rect = new RectF(0, 0, source.getWidth(), source.getHeight());
    		canvas.drawRoundRect(rect, mRadius, mRadius, paint);
    		paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
    		canvas.drawBitmap(source, 0, 0, paint);
    		return target;
    	}

    好了,我就不解析代码了,自定义View这是第五篇了,,,,写得好恶心,,,,


    各位赞一个或者留个言,算是对我的支持~


    源码点击下载



    =========================================简单修复了一下,在ScrollView以及AdapterView中的headview的显示异常的bug============

    修复后代码下载:

    源码点击下载


    相关博文,同时也推荐使用:

    Android Xfermode 实战 实现圆形、圆角图片

    Android BitmapShader 实战 实现圆形、圆角图片





    展开全文
  • Android 圆形头像实现

    千次下载 热门讨论 2013-04-12 22:24:33
    实现应用中常常出现的圆形头像,不是利用图片遮盖的方法。设计成圆的会使整个界面布局变的优雅漂亮。
  • 自定义圆形进度条

    千次下载 热门讨论 2013-11-15 02:44:07
    自定义的圆形进度条,很好看到哦,亲!
  • QT 圆形窗体,圆形按钮

    千次阅读 2018-04-12 17:44:04
    QT 圆形窗体,圆形按钮 一、简要说明 1、在窗体上画一个圆形(如果添加上点击等事件,这个圆形就相当于一个控件——圆形PushButton) 2、无边框 3、窗体透明化,窗体上的控件不透明 4、实现无边框拖动 代码打包...

                                                                                QT 圆形窗体,圆形按钮

    一、简要说明

    1、在窗体上画一个圆形 (如果添加上点击等事件,这个圆形就相当于一个控件——圆形PushButton)

    2、无边框

    3、窗体透明化,窗体上的控件不透明

    4、实现无边框拖动

    代码打包:链接: https://pan.baidu.com/s/1GRd37_QuHLAHqu9Nm2AGiQ 提取码: p9xx 

    二、效果

    三、工程文件结构

    四、源码

    1、MyButton.pro文件

    QT +=widgets gui
    
    SOURCES += \
        main.cpp \
        circlebutton.cpp
    
    HEADERS += \
        circlebutton.h
    

     

    2、circlebutton.h文件

     

    #ifndef CIRCLEBUTTON_H
    #define CIRCLEBUTTON_H
    
    #include <QWidget>
    
    class CircleButton : public QWidget
    {
        Q_OBJECT      //使用信号与槽需要的宏
    public:
        explicit CircleButton(QWidget *parent = 0);    //explicit 避免歧义
        CircleButton(const QString text, QPoint center,int radius,QWidget* parent = 0);
    
        void paintEvent(QPaintEvent *);                //--绘图事件,调用update()时触发
        void mousePressEvent(QMouseEvent *e);         //--鼠标按下事件
        void mouseReleaseEvent(QMouseEvent *e);     //--鼠标释放事件
        void mouseMoveEvent(QMouseEvent *e);       //--鼠标移动事件
    
        bool isContains(QPoint p);//判断鼠标是否在圆形范围之内
        void initForm();//初始化窗体
    signals:
        void clicked();//点击信号
    public slots:
    private:
        QString _text;    //控件显示文本
        QPoint _center;  //圆心位置坐标
        QPoint beginPos;//圆形起始坐标
        int _radius;   //圆形半径
    public:
        bool _pressed;//左键单击变色控制
    };
    
    #endif // CIRCLEBUTTON_H
    

     

    3、circlebutton.cpp文件

     

    #include "circlebutton.h"
    #include <QPainter>
    #include <QMouseEvent>
    
    CircleButton::CircleButton(QWidget *parent) :
        QWidget(parent),_text("CircleButton"),_center(30,30),_radius(20)
    {
        initForm();
    }
    CircleButton::CircleButton(const QString text, QPoint center,int radius,QWidget* parent):
        QWidget(parent),_text(text), _center(center),_radius(radius)
    {
        initForm();
    }
    
    void CircleButton::initForm()
    {
        _pressed = false;
        beginPos = this->pos();
        //无边框
        this->setWindowFlags(Qt::FramelessWindowHint | Qt::WindowSystemMenuHint | Qt::WindowMinMaxButtonsHint|Qt::WindowStaysOnTopHint);
        /*  窗口整体透明,但窗口控件不透明*/
       this->setAttribute(Qt::WA_TranslucentBackground,true);
    }
    void CircleButton::paintEvent(QPaintEvent *)
    {
        QPainter p(this);//将当前窗体作为画布
        if(_pressed)
            p.setBrush(Qt::yellow);//粉刷为黄色
        else
            p.setBrush(QColor(255,255,255,10));
        p.setPen(Qt::NoPen);//没有线条
        //画圆形
        p.drawEllipse(_center,_radius,_radius);
        //添加文本
        QPen pen = QPen(Qt::black);
        p.setPen(pen);
        p.drawText(QRect(_center.x()-_radius,_center.x()-_radius,2*_radius,2*_radius), _text, QTextOption(Qt::AlignCenter));//文本居中:QTextOption(Qt::AlignCenter)
    }
    void CircleButton::mousePressEvent(QMouseEvent *e)
    {
       if(isContains(e->pos()))
        {
            _pressed = true;
            beginPos = e->pos();//鼠标相对窗体的位置
            update();//触发窗体重绘
        }
    
    }
    
    void CircleButton::mouseReleaseEvent(QMouseEvent *e)
    {
        _pressed = false;
        update();//触发窗体重绘
    
        if(isContains(e->pos()))//当鼠标点击按钮
            emit clicked();//发送点击信号
    
    }
    
    void CircleButton::mouseMoveEvent(QMouseEvent *e)       //--鼠标移动事件
    {
        if (_pressed)
        {//当前鼠标相对窗体的位置-刚按下左键时的相对位置=鼠标移动的大小
             this->move(e->pos() - beginPos + this->pos());
             //           鼠标移动的大小+窗体原来的位置=窗体移动后的位置
        }
    }
    
    
    bool CircleButton::isContains(QPoint p)
    {
        return (_center.x()-_radius < p.x()
                && _center.x()+_radius > p.x()
                && _center.y()-_radius < p.y()
                && _center.y()+_radius > p.y());
    }
    
    

     

    4、main.cpp文件

     

    #include <QApplication>
    #include "circlebutton.h"
    
    int main(int argc,char** argv)
    {
        QApplication app(argc,argv);
        CircleButton *circle= new CircleButton("圆形窗体",QPoint(40,40),40);
        circle->show();
        return app.exec();
    }
    
    

    五、视频水印   (窗体置顶)

    1、效果

    2、修改后的代码

    circlebutton.h文件

    #ifndef CIRCLEBUTTON_H
    #define CIRCLEBUTTON_H
    
    #include <QWidget>
    #include <QMenu>
    class CircleButton : public QWidget
    {
        Q_OBJECT
    public:
        explicit CircleButton(QWidget *parent = 0);
        CircleButton(const QString text, QPoint center,int radius,QWidget* parent = 0);
    
        void paintEvent(QPaintEvent *);
        void mousePressEvent(QMouseEvent *e);
        void mouseReleaseEvent(QMouseEvent *e);
        void mouseMoveEvent(QMouseEvent *e);       //--鼠标移动事件
        void contextMenuEvent(QContextMenuEvent *);  //--右键菜单事件
        void closeEvent(QCloseEvent *);     //重写退出
    
        bool isContains(QPoint p);//判断鼠标是否在控件范围之内
        void initForm();//初始化窗体
        void setText(QString text);//设置显示文本
    signals:
        void clicked();//点击信号
    public slots:
        void inputText();//输入文本
        QString getText();
    private:
        QString _text;
        QPoint _center;
        QPoint beginPos;
        QMenu *menu; //右键菜单对象
        int _radius;
    public:
        bool _pressed;//单击按钮变色控制
    };
    
    #endif // CIRCLEBUTTON_H

    circlebutton.cpp文件

    #include "circlebutton.h"
    #include <QPainter>
    #include <QMouseEvent>
    #include <QInputDialog>
    #include <QLineEdit>
    
    
    CircleButton::CircleButton(QWidget *parent) :
        QWidget(parent),_text("CircleButton"),_center(30,30),_radius(20)
    {
        initForm();
    }
    CircleButton::CircleButton(const QString text, QPoint center,int radius,QWidget* parent):
        QWidget(parent),_text(text), _center(center),_radius(radius)
    {
        initForm();
    }
    
    void CircleButton::initForm()
    {
        _pressed = false;
        beginPos = this->pos();
        //无边框
        this->setWindowFlags(Qt::FramelessWindowHint | Qt::WindowSystemMenuHint | Qt::WindowMinMaxButtonsHint|Qt::WindowStaysOnTopHint);
        /*  窗口整体透明,但窗口控件不透明*/
       this->setAttribute(Qt::WA_TranslucentBackground,true);
        menu = new QMenu(this);//创建右键菜单
        menu->addAction("设置文本", this, SLOT(inputText()));
        menu->addAction("退出", this, SLOT(close()));
    }
    void CircleButton::paintEvent(QPaintEvent *)
    {
        QPainter p(this);//将当前窗体作为画布
        QPen pen = QPen(Qt::red);
        pen.setWidth(1);
        p.setPen(pen);
        if(_pressed)
            p.setBrush(Qt::yellow);//粉刷为黄色
        else
            p.setBrush(QColor(255,255,255,1));
        p.drawText(QRect(_center.x()-_radius,_center.x()-_radius,2*_radius,2*_radius), _text, QTextOption(Qt::AlignCenter));//文本居中:QTextOption(Qt::AlignCenter)
    
        pen.setColor(QColor(255,255,255,1));
        p.setPen(pen);
        //画圆
        p.drawEllipse(_center,_radius,_radius);
    
    }
    void CircleButton::mousePressEvent(QMouseEvent *e)
    {
       if(e->button() == Qt::LeftButton && isContains(e->pos()))
        {
            _pressed = true;
            beginPos = e->pos();//鼠标相对窗体的位置
            update();//触发窗体重绘
        }
    
    }
    
    void CircleButton::mouseReleaseEvent(QMouseEvent *e)
    {
        _pressed = false;
        update();//触发窗体重绘
    
        if(isContains(e->pos()))//当鼠标点击按钮
            emit clicked();//发送点击信号
    
    }
    
    void CircleButton::mouseMoveEvent(QMouseEvent *e)       //--鼠标移动事件
    {
        if (_pressed)
        {//当前鼠标相对窗体的位置-刚按下左键时的相对位置=鼠标移动的大小
             this->move(e->pos() - beginPos + this->pos());
             //           鼠标移动的大小+窗体原来的位置=窗体移动后的位置
        }
    }
    
    void CircleButton::contextMenuEvent(QContextMenuEvent *)
    {
        this->setCursor(Qt::ArrowCursor);
        menu->exec(cursor().pos());
    }
    
    bool CircleButton::isContains(QPoint p)
    {
        return (_center.x()-_radius < p.x()
                && _center.x()+_radius > p.x()
                && _center.y()-_radius < p.y()
                && _center.y()+_radius > p.y());
    }
    void CircleButton::setText(QString text)
    {
        this->_text = text;
    }
    
    void CircleButton::inputText()
    {
        bool ok = false;
    
        QString text = QInputDialog::getText(this,tr("设置文本"),tr("请输入文本"),QLineEdit::Normal,getText(),&ok,0);
        if ( ok && !text.isEmpty() )
        {
            this->setText(text);
        }
    }
    void CircleButton::closeEvent(QCloseEvent * )
    {
        this->close();
    }
    QString CircleButton::getText()
    {
        return this->_text;
    }
    

    六、圆形按钮

           使用QSS样式实现圆形按钮。     

            效果:PushButton2是直接右键-->改变样式表,PushButton3是再代码控制的。

           工程结构: 

     布局:三个一样大小的PushButton 

      样式: 

    QPushButton{/*默认显示*/
    border-radius:70px;/*圆角弧度(为正方形边长一半时就是圆形)*/
    background-color:rgba(0,255,0,255);/*背景色*/
    }
    QPushButton:hover{/*鼠标悬停*/
    background-color:rgba(0,0,255,255);
    }
    QPushButton:pressed{/*鼠标按下*/
    background-color:rgba(255,0,0,255);
    }

     

    展开全文
  • Qt自定义控件之圆形按钮、圆形头像

    千次阅读 多人点赞 2020-06-03 10:11:55
    Qt自定义控件之圆形按钮、圆形头像一级目录二级目录三级目录 一级目录 二级目录 三级目录

    Qt自定义控件之圆形按钮、圆形头像

    前言

    现在很多软件的头像或者按钮都是圆形了,看起来比较舒服。比如QQ登录头像,酷狗客户端的一些按钮都是圆形。Qt实现圆形头像,大致有几种思路,第1种就是图片遮罩的方式,还有一种方法是使用样式表设置border-radius来实现圆形边框。这里要介绍的是使用Qt的绘画大师QPainter来实现。

    代码实现

    #include "roundbutton.h"
    #include "ui_roundbutton.h"
    #include <QPainter>
    
    #ifndef NO_TOUCH_EVENT
    
    RoundButton::RoundButton(QWidget *parent) :
        QWidget(parent),
        ui(new Ui::RoundButton)
    {
        ui->setupUi(this);
    
        m_radius = 200;
        isPressed = false;
        setIcon(":/ppd.jpeg");
    
    #ifdef NO_TOUCH_EVENT
        connect(this,&RoundButton::btnClicked,[=]
        {
            qDebug("Round button clicked.");
            setIcon(":/timo.jpg");
        });
    #endif
    }
    
    RoundButton::~RoundButton()
    {
        delete ui;
    }
    
    void RoundButton::setIcon(const QString &fileName)
    {
         if(pixmap.load(fileName))
         {
             qDebug("load icon ok.");
             update();
         }
    }
    
    void RoundButton::setRadius(int radius)
    {
        m_radius = radius;
    }
    
    #ifdef NO_TOUCH_EVENT
    void RoundButton::mousePressEvent(QMouseEvent *event)
    {
        Q_UNUSED(event)
    
        isPressed = true;
    }
    
    void RoundButton::mouseMoveEvent(QMouseEvent *event)
    {
        Q_UNUSED(event)
    
    }
    
    void RoundButton::mouseReleaseEvent(QMouseEvent *event)
    {
        Q_UNUSED(event)
    
        if(isPressed)
        {
            isPressed = false;
            emit btnClicked();
        }
    }
    #endif
    
    void RoundButton::paintEvent(QPaintEvent *event)
    {
        Q_UNUSED(event)
    
        QPainter painter(this);
        //抗锯齿
        painter.setRenderHints(QPainter::Antialiasing | QPainter::SmoothPixmapTransform);
    	//绘画路径
        QPainterPath path;
        path.addEllipse(this->rect().center(),m_radius,m_radius);
        painter.setClipPath(path);
    	//绘图
        painter.drawPixmap(QRect(0,0,m_radius*2,m_radius*2),pixmap);
    
    }
    
    

    QPainterPath是一个图形构建块的对象,如矩形、椭圆、直线和曲线。构建块可以加入在封闭的子路径中,例如:矩形或椭圆形。一个封闭的路径同时存在开始点和结束点。或者作为未封闭的子路径独立存在,如:直线和曲线。
    addEllipse在指定的边框矩形内创建椭圆,并将其作为闭合子路径添加到绘制路径。
    椭圆由一条顺时针的曲线组成,在零度(3点钟位置)开始和结束。
    在这里插入图片描述
    最后通过drawPixmap把图片画出来。本示例中打开 NO_TOUCH_EVENT 宏可作为圆形按钮使用,关闭就仅作为圆形头像使用。

    当然了还可以使用painter的drawRoundedRect来实现圆形的绘画。这个有兴趣的可以自行研究。

    实验效果

    在这里插入图片描述
    本示例代码稍作修改即可运用到工程中,灵活性也比较高。

    作者:费码程序猿
    欢迎技术交流:QQ:255895056
    转载请注明出处,如有不当欢迎指正

    展开全文
  • 微信小程序开发之圆形菜单 仿建行圆形菜单
  • * 输入圆形半径,求圆形的周长和圆形的面积,并将结果输出。 */ import java.lang.*; import java.util.Scanner; public class testcricle { public static void main(String[] args) { float area; System.o...
  • C# Winform圆形窗体和圆形按钮

    千次阅读 2019-04-09 14:41:51
    圆形窗体 找到窗体的Paint事件,写入以下代码: private void form1_Paint(object sender, PaintEventArgs e) { #region 圆形窗体 System.Drawing.Drawing2D.GraphicsPath path = new System.Drawing.Dr...
  • 圆形的imageview

    2015-09-21 16:48:46
    圆形的imageview,自定义控件,展示圆形的图片,可用于图像。
  • 圆形头像

    2015-05-13 09:32:27
    圆形头像
  • 自定义view圆形头像

    万次阅读 2020-05-05 16:07:41
    自定义view圆形头像 我已经将源码打包成依赖 朋友们可以直接导依赖直接使用 1.正常导入: implementation ‘com.github.LiHangKun:wuyuewuone:1’ 2.在最外层项目的build.gradle里面 maven { url ...
  • 自动检测图像中的圆形圆形对象

    千次阅读 2019-03-28 10:54:18
    此示例显示如何使用imfindcircles自动检测图像中的圆形圆形对象。 它还使用viscircles来显示检测到的圆圈。
  • 圆形按钮样式

    2019-09-05 15:16:45
    大家中秋好。月饼圆,月亮圆,中秋团团圆圆。今天就分享关于圆的东西(圆形按钮样式)。
  • 生成圆形二维码

    2020-08-20 15:07:21
    生成圆形二维码 二维码识别必须是方形的,如果在二维码中间添加图标,不会影响二维码的识别,但是如果去掉二维码的四角,把方形二维码直接切割成圆形,就会出现识别不了的情况,那么怎么才能生成一个圆形的可以识别...
  • android:ImageView 圆形imageview 圆形头像

    千次阅读 2018-08-25 10:05:05
    曾经自己写了个简单的ImageView,展示圆形的头像,将图片画成成圆形,带边框阴影,一目了然,今天贴出来记录一下 直接copy进项目直接使用,方便修改! package com.cleanmaster.bitmapcache; import android....
  • Qt动态圆形进度条

    2017-12-27 21:05:49
    Qt动态圆形进度条。 这个系非常非常漂亮滴。欢迎大家可以学习。
  • android 画圆形图 获取圆形bitmap

    千次阅读 2018-08-08 16:13:53
    android里画圆形图的方法,我知道四种,前三种是java代码,此次重点记录这三种方法,最后一种是利用shape、shape-layer将图片显示成圆形,这种方法可自行上网百度,不推荐。 三种java代码方法,分别是使用...
  • C#-创建圆形/椭圆形按钮

    千次阅读 2018-02-25 21:56:43
    创建圆形按钮挺简单的。public class EllipseButton : Button { protected override void OnPaint(PaintEventArgs pevent) { GraphicsPath gPath = new GraphicsPath(); // 绘制椭圆形区域 gPath.AddE...
  • cocos2d-x 只有Rect(方形)类,也只有方形之间的碰撞检测方法。 圆形是方形以外最常用的形状,也需要与圆形或方形做碰撞检测。于是自定义圆形区域类,代码如下。
  • Android圆形控件

    2020-05-27 16:36:23
    Android的圆形控件 对于所有的View有效 在开发的过程中,肯定需要实现一个圆形的控件,而且不是绘制一个圆形,那么怎么弄呢,在Android5.0后,有一个类ViewOutlineProvider,可以实现这个功能,应该是对于所有VIew...
  • 实现圆形轨迹

    千次阅读 2019-08-13 14:03:33
    最近项目中有一个圆形轨迹转动的动画效果, 开始展示的时候我采用的是css 的transform 来写,没什么问题。 后来要求对轨迹上的元素添加事件和其他效果,jquery 中animate 没有transform的属性,所以出现了写问题,...
  • 圆形button设置点击区域为圆形

    千次阅读 2016-03-15 18:18:50
    在项目开发中,遇到了一个问题,就是一个button按钮改变了它的layer层之后使其变成一个圆形,但是其点击区域还市矩形的范围,所以在有多个按钮紧密分布时,会使其点击事件出现错乱。 最后,博主终于解决了这一问题...
  • Glide加载图片,Glide可以很方便的实现圆形加载并且也还可以设置变色边框。 关于Glide的加载在这里不详细说了,主要说一下自定义BitmapTransformation来实现圆形图片加载 static class GlideCircleTransform extends...
  • 一、Flutter 里面实现实现圆形剪切有3种方法: Container decoration 装饰器里设置圆形+圆角 ClipOval CircleAvatar ClipOval 只能剪切图片,CircleAvatar 和 Container 能适配复杂视图,比如这样: 第一种方法 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 40,723
精华内容 16,289
关键字:

圆形