Android仿QQ讨论组头像效果
本文实例为大家分享了Android仿QQ讨论组头像展示的具体代码，供大家参考，具体内容如下
一、效果图
二、实现
基本实现过程：
1.将原图片读取为bitmap
2.在Canvas画布上计算出图片位置，并绘制新的图片。
（ps:计算位置对我来说是难点，花了好长时间）；
三、源码
1.布局文件
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:padding="16dp" android:background="#AEAEAE" android:orientation="vertical"> <LinearLayout android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" android:orientation="horizontal"> <ImageView android:id="@+id/img_src_0" android:layout_width="0dp" android:layout_height="match_parent" android:padding="5dp" android:layout_weight="1" android:adjustViewBounds="true" /> <ImageView android:id="@+id/img_src_1" android:layout_width="0dp" android:layout_height="match_parent" android:padding="5dp" android:layout_weight="1" android:adjustViewBounds="true" /> <ImageView android:id="@+id/img_src_2" android:layout_width="0dp" android:layout_height="match_parent" android:padding="5dp" android:layout_weight="1" android:adjustViewBounds="true" /> <ImageView android:id="@+id/img_src_3" android:layout_width="0dp" android:layout_height="match_parent" android:padding="5dp" android:layout_weight="1" android:adjustViewBounds="true" /> <ImageView android:id="@+id/img_src_4" android:layout_width="0dp" android:layout_height="match_parent" android:padding="5dp" android:layout_weight="1" android:adjustViewBounds="true" /> </LinearLayout> <ImageView android:id="@+id/img_result_2" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" /> <ImageView android:id="@+id/img_result_3" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" /> <ImageView android:id="@+id/img_result_4" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" /> <ImageView android:id="@+id/img_result_5" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" /> </LinearLayout>
2.Activity
package com.hand.px_demo.QQHead;
import android.app.Activity;
import android.content.res.Resources;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.os.Bundle;
import android.widget.ImageView;
import com.hand.px_demo.R;
import java.util.ArrayList;
/**
* Created by panx on 2016/12/12.
*/
public class QHeadActivity extends Activity{
private ArrayList<Bitmap> bitmaps = new ArrayList<Bitmap>();
private ImageView img_src_0;
private ImageView img_src_1;
private ImageView img_src_2;
private ImageView img_src_3;
private ImageView img_src_4;
private ImageView img_result_2;
private ImageView img_result_3;
private ImageView img_result_4;
private ImageView img_result_5;
private HeadManager headManager;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_qq_head);
headManager = new HeadManager();
initView();
initData();
}
private void initView(){
img_src_0 = (ImageView)findViewById(R.id.img_src_0);
img_src_1 = (ImageView)findViewById(R.id.img_src_1);
img_src_2 = (ImageView)findViewById(R.id.img_src_2);
img_src_3 = (ImageView)findViewById(R.id.img_src_3);
img_src_4 = (ImageView)findViewById(R.id.img_src_4);
img_result_2 = (ImageView)findViewById(R.id.img_result_2);
img_result_3 = (ImageView)findViewById(R.id.img_result_3);
img_result_4 = (ImageView)findViewById(R.id.img_result_4);
img_result_5 = (ImageView)findViewById(R.id.img_result_5);
}
private void initData(){
//从drawable中获取图片资源的bitmap
Resources r = this.getResources();
Bitmap bitmap0 = BitmapFactory.decodeResource(r,R.drawable.src_head_1);
Bitmap bitmap1 = BitmapFactory.decodeResource(r,R.drawable.src_head_2);
Bitmap bitmap2 = BitmapFactory.decodeResource(r,R.drawable.src_head_3);
Bitmap bitmap3 = BitmapFactory.decodeResource(r,R.drawable.src_head_4);
Bitmap bitmap4 = BitmapFactory.decodeResource(r,R.drawable.src_head_5);
bitmaps.add(bitmap0);
bitmaps.add(bitmap1);
bitmaps.add(bitmap2);
bitmaps.add(bitmap3);
bitmaps.add(bitmap4);
img_src_0.setImageBitmap(bitmap0);
img_src_1.setImageBitmap(bitmap1);
img_src_2.setImageBitmap(bitmap2);
img_src_3.setImageBitmap(bitmap3);
img_src_4.setImageBitmap(bitmap4);
Bitmap r2Bitmap = headManager.getBitMap(bitmaps, 2);
Bitmap r3Bitmap = headManager.getBitMap(bitmaps, 3);
Bitmap r4Bitmap = headManager.getBitMap(bitmaps, 4);
Bitmap r5Bitmap = headManager.getBitMap(bitmaps, 5);
img_result_2.setImageBitmap(r2Bitmap);
img_result_3.setImageBitmap(r3Bitmap);
img_result_4.setImageBitmap(r4Bitmap);
img_result_5.setImageBitmap(r5Bitmap);
}
}
3.绘制图片的核心代码
（1）压缩图片
/*对原始图片进行缩放*/
public Bitmap zoomImage(Bitmap bgimage, double newWidth,
double newHeight) {
// 获取这个图片的宽和高
float width = bgimage.getWidth();
float height = bgimage.getHeight();
// 创建操作图片用的matrix对象
Matrix matrix = new Matrix();
// 计算宽高缩放率
float scaleWidth = ((float) newWidth) / width;
float scaleHeight = ((float) newHeight) / height;
// 缩放图片动作
matrix.postScale(scaleWidth, scaleHeight);
Bitmap bitmap = Bitmap.createBitmap(bgimage, 0, 0, (int) width,
(int) height, matrix, true);
return bitmap;
}
（2）将图片改成圆角
private Bitmap makeRoundCorner(Bitmap bitmap, int width, int height) {
int left = 0, top = 0, right = width, bottom = height;
float roundPx = height / 2;
if (width > height) {
left = (width - height) / 2;
top = 0;
right = left + height;
bottom = height;
} else if (height > width) {
left = 0;
top = (height - width) / 2;
right = width;
bottom = top + width;
roundPx = width / 2;
}
Bitmap output = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(output);
int color = 0xff424242;
Paint paint = new Paint();
Rect rect = new Rect(left, top, right, bottom);
RectF rectF = new RectF(rect);
paint.setAntiAlias(true);
canvas.drawARGB(0, 0, 0, 0);
paint.setColor(color);
canvas.drawRoundRect(rectF, roundPx, roundPx, paint);
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
canvas.drawBitmap(bitmap, rect, rect, paint);
return output;
}
（3）获取绘制的坐标
private ArrayList<Point> getFivePoints(int point_x, int point_y, int d) {
ArrayList<Point> points = new ArrayList<Point>();
//圆心至图片的距离
int wr = point_y - d;
//大圆心至小圆心的距离
int R = wr + d / 2;
//头像半径,头像直径为d
int r = d / 2;
int RCos18 = (int) (R * (Math.cos(0.1 * Math.PI)));
int RSin18 = (int) (R * (Math.sin(0.1 * Math.PI)));
int RCos36 = (int) (R * (Math.cos(0.2 * Math.PI)));
int RSin36 = (int) (R * (Math.sin(0.2 * Math.PI)));
Point point1 = new Point(point_x - r, 0);
Point point2 = new Point();
point2.x = RCos18 + point_x - r;
point2.y = point_y - RSin18 - r;
Point point3 = new Point();
point3.x = RSin36 + point_x - r;
point3.y = point_y + RCos36 - r;
Point point4 = new Point();
point4.x = point_x - RSin36 - r;
point4.y = point3.y;
Point point5 = new Point();
point5.x = point_x - (int) (RCos18) - r;
point5.y = point2.y;
points.add(point1);
points.add(point2);
points.add(point3);
points.add(point4);
points.add(point5);
return points;
}
（4）该类全部源码
package com.hand.px_demo.QQHead;
import android.app.Activity;
import android.content.res.Resources;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.os.Bundle;
import android.widget.ImageView;
import com.hand.px_demo.R;
import java.util.ArrayList;
/**
* Created by panx on 2016/12/12.
*/
public class QHeadActivity extends Activity{
private ArrayList<Bitmap> bitmaps = new ArrayList<Bitmap>();
private ImageView img_src_0;
private ImageView img_src_1;
private ImageView img_src_2;
private ImageView img_src_3;
private ImageView img_src_4;
private ImageView img_result_2;
private ImageView img_result_3;
private ImageView img_result_4;
private ImageView img_result_5;
private HeadManager headManager;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_qq_head);
headManager = new HeadManager();
initView();
initData();
}
private void initView(){
img_src_0 = (ImageView)findViewById(R.id.img_src_0);
img_src_1 = (ImageView)findViewById(R.id.img_src_1);
img_src_2 = (ImageView)findViewById(R.id.img_src_2);
img_src_3 = (ImageView)findViewById(R.id.img_src_3);
img_src_4 = (ImageView)findViewById(R.id.img_src_4);
img_result_2 = (ImageView)findViewById(R.id.img_result_2);
img_result_3 = (ImageView)findViewById(R.id.img_result_3);
img_result_4 = (ImageView)findViewById(R.id.img_result_4);
img_result_5 = (ImageView)findViewById(R.id.img_result_5);
}
private void initData(){
//从drawable中获取图片资源的bitmap
Resources r = this.getResources();
Bitmap bitmap0 = BitmapFactory.decodeResource(r,R.drawable.src_head_1);
Bitmap bitmap1 = BitmapFactory.decodeResource(r,R.drawable.src_head_2);
Bitmap bitmap2 = BitmapFactory.decodeResource(r,R.drawable.src_head_3);
Bitmap bitmap3 = BitmapFactory.decodeResource(r,R.drawable.src_head_4);
Bitmap bitmap4 = BitmapFactory.decodeResource(r,R.drawable.src_head_5);
bitmaps.add(bitmap0);
bitmaps.add(bitmap1);
bitmaps.add(bitmap2);
bitmaps.add(bitmap3);
bitmaps.add(bitmap4);
img_src_0.setImageBitmap(bitmap0);
img_src_1.setImageBitmap(bitmap1);
img_src_2.setImageBitmap(bitmap2);
img_src_3.setImageBitmap(bitmap3);
img_src_4.setImageBitmap(bitmap4);
Bitmap r2Bitmap = headManager.getBitMap(bitmaps, 2);
Bitmap r3Bitmap = headManager.getBitMap(bitmaps, 3);
Bitmap r4Bitmap = headManager.getBitMap(bitmaps, 4);
Bitmap r5Bitmap = headManager.getBitMap(bitmaps, 5);
img_result_2.setImageBitmap(r2Bitmap);
img_result_3.setImageBitmap(r3Bitmap);
img_result_4.setImageBitmap(r4Bitmap);
img_result_5.setImageBitmap(r5Bitmap);
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
Android仿微信QQ设置图形头像裁剪功能
最近在做毕业设计,想有一个功能和QQ一样可以裁剪头像并设置圆形头像,额,这是设计狮的一种潮流. 而纵观现在主流的APP,只要有用户系统这个功能,这个需求一般都是在(bu)劫(de)难(bu)逃(xue)! 图片裁剪实现方式有两种,一种是利用系统自带的裁剪工具,一种是使用开源工具Cropper.本节就为大家带来如何使用系统自带的裁剪工具进行图片裁剪~ 还是先来个简单的运行图. 额,简单说下,我待会会把代码写成小demo分享给大家,在文章末尾会附上github链接,需要的可以自行下载~ 下面来简单分
-
Android 仿QQ头像自定义截取功能
看了Android版QQ的自定义头像功能,决定自己实现,随便熟悉下android绘制和图片处理这一块的知识. 先看看效果: 思路分析: 这个效果可以用两个View来完成,上层View是一个遮盖物,绘制半透明的颜色,中间挖了一个圆:下层的View用来显示图片,具备移动和缩放的功能,并且能截取某区域内的图片. 涉及到的知识点: 1.Matrix,图片的移动和缩放 2.Paint的setXfermode方法 3.图片放大移动后,截取一部分 编码实现: 自定义三个View: 1.下层View:ClipP
-
Android仿QQ圆形头像个性名片
先看看效果图: 中间的圆形头像和光环波形讲解请看:http://www.jb51.net/article/96508.htm 周围的气泡布局,因为布局RatioLayout是继承自ViewGroup,所以布局layout就可以根据自己的需求来布局其子view,view.layout(int l,int t,int r,int b);用于布局子view在父ViewGroup中的位置(相对于父容器),所以在RatioLayout中计算所有子view的left,top,right,bottom.那么头
-
Android自定义View模仿QQ讨论组头像效果
首先来看看我们模仿的效果图,相信对于使用过QQ的人来说都不陌生,效果图如下: 在以前的一个项目中,需要实现类似QQ讨论组头像的控件,只是头像数量和布局有一小点不一样:一是最头像数是4个,二是头像数是2个时的布局是横着排的.其实当时GitHub上就有类似的开源控件,只是那个控件在每一次绘制View的时候都会新创建一些Bitmap对象,这肯定是不可取的,而且那个控件头像输入的是Bitmap对象,不满足需求.所以只能自己实现一个了.实现的时候也没有过多的考虑,传入头像Drawable对象,根据数量排列
-
Android仿微信和QQ多图合并框架（类似群头像）的实现方法
前言 现在多数app里面加入聊天已经是一个非常普遍的现象了,而微信和qq则是通讯领域的鼻祖了.如果产品经理在考虑做聊天设计的时候,多数会参考. 常常你会听到,你看微信和qq都是这么做的,你就这么来吧,虽然心理有一万个不痛快,但谁叫我们是有一个有追求的程序员呢. 所以产品的要求是实现类似微信的群头像. 类似如下 作为程序员,首先会评估下工作量吧.在产品眼里,就是把图片合成一起嘛,有啥难度吗?所以工作时间决定了你能做成什么样吧 方案分析: 方案1.直接写成布局,然后按照不同的布局加载不同张数的图片.
-
Android自定义控件仿QQ编辑和选取圆形头像
android大家都有很多需要用户上传头像的需求,有的是选方形,有的是圆角矩形,有的是圆形. 首先我们要做一个处理图片的自定义控件,把传入的图片,经过用户选择区域,处理成一定的形状. 有的app是通过在图片上画一个矩形区域表示选中的内容,有的则是通过双指放大缩小,拖动图片来选取图片.圆形头像,还是改变图片比较好 圆形区域可调节大小. 这个自定义View的图像部分分为三个,背景图片,半透明蒙层,和亮色区域--还是直接贴代码得了 package com.example.jjj.widget; imp
-
Android仿QQ讨论组头像效果
本文实例为大家分享了Android仿QQ讨论组头像展示的具体代码,供大家参考,具体内容如下 一.效果图 二.实现 基本实现过程: 1.将原图片读取为bitmap 2.在Canvas画布上计算出图片位置,并绘制新的图片. (ps:计算位置对我来说是难点,花了好长时间): 三.源码 1.布局文件 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http:/
-
Android仿qq消息拖拽效果
本文实例为大家分享了Android仿qq消息拖拽效果展示的具体代码,供大家参考,具体内容如下 这是一个仿qq消息拖拽效果,View和拖拽实现了分离,TextView.Button.Imageview等都可以实现相应的拖拽效果:在触发的地方调用 MessageBubbleView.attach(findViewById(R.id.text_view), new MessageBubbleView.BubbleDisappearListener() { @Override public void d
-
Android仿qq顶部消息栏效果
android仿照qq的顶部栏效果,主要就是利用fragment manager把fragment设置显示内容 (1)在activity_main.xml布局中添加控件 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="
-
Android仿QQ微信侧滑删除效果
仿QQ侧滑删除效果图 1.自定义listview public class DragDelListView extends ListView { private boolean moveable=false; private boolean closed=true; private float mDownX,mDownY; private int mTouchPosition,oldPosition=-1; private DragDelItem mTouchView,oldView; priv
-
Android仿微信群聊头像效果
在网上找了些仿微信群聊头像的开源库后,发现没特别好用的,或者说满足我需求的,就只好在别人的基础上改了下,也就有了这样的自定义控件了,以此来实现微信群聊头像的效果,效果图如下所示: 主要实现: 一.自定义viewGroup,以此来实现主要的代码逻辑 public class NineGridImageView<T> extends ViewGroup{ private int mRowCount; //行数 private int mColumnCount; //列数 private int m
-
Android仿京东金融首页头像效果
1.介绍 看下效果图,gif录的有些卡顿,在真机上运行效果很好. 2.实现 很有意思的一个效果,原理其实很简单,就是通过监听ScrollView在Y轴的滑动距离,然后在代码中动态设置头像的位置和大小. public class MainActivity extends AppCompatActivity { private CircleImageView ivPortrait; private ObservableScrollView scrollView; private ViewGroup.
-
Android仿QQ空间顶部条背景变化效果
本文给大家分享仿QQ空间页面顶部条随界面滑动背景透明度变化的效果,这个效果在其他应用程序中也很常见,技能+1. 一.上代码,具体实现 笔者之前的文章第二部分总是二话不说,直接上代码,很干脆,其实更好的方式是引导读者思考:这个效果如何实现.前期做好效果的功能分析,才能读者更好的理解. QQ空间的这个页面其实并不复杂,我们看看QQ空间的演示界面: 可以看见,整个页面其实只有两个根元素,一个是ListView,一个是标题栏,前者可以上下滑动,给用户呈现内容:后者固定位置不动,类似于一个导航栏,左边一个
-
Android仿QQ复制昵称效果
背景: 这几天做一个复制文本的需求,突然看到QQ上复制昵称跟QQ号的效果,觉得很不错,就想要模仿一波,办法比较简单粗暴,反编译QQ获取了那个.9图片,然后就是用PopWindow实现了. 解决办法: 自定义PopWindow public class CopyContentPopWindow extends PopupWindow { private final View content; TextView tvLabel; TextView tvLabelFake; Activity cont