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

 }

}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Android仿微信QQ设置图形头像裁剪功能

    最近在做毕业设计,想有一个功能和QQ一样可以裁剪头像并设置圆形头像,额,这是设计狮的一种潮流. 而纵观现在主流的APP,只要有用户系统这个功能,这个需求一般都是在(bu)劫(de)难(bu)逃(xue)! 图片裁剪实现方式有两种,一种是利用系统自带的裁剪工具,一种是使用开源工具Cropper.本节就为大家带来如何使用系统自带的裁剪工具进行图片裁剪~ 还是先来个简单的运行图. 额,简单说下,我待会会把代码写成小demo分享给大家,在文章末尾会附上github链接,需要的可以自行下载~ 下面来简单分

  • 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编辑和选取圆形头像

    android大家都有很多需要用户上传头像的需求,有的是选方形,有的是圆角矩形,有的是圆形. 首先我们要做一个处理图片的自定义控件,把传入的图片,经过用户选择区域,处理成一定的形状. 有的app是通过在图片上画一个矩形区域表示选中的内容,有的则是通过双指放大缩小,拖动图片来选取图片.圆形头像,还是改变图片比较好 圆形区域可调节大小. 这个自定义View的图像部分分为三个,背景图片,半透明蒙层,和亮色区域--还是直接贴代码得了 package com.example.jjj.widget; imp

  • Android 仿QQ头像自定义截取功能

    看了Android版QQ的自定义头像功能,决定自己实现,随便熟悉下android绘制和图片处理这一块的知识. 先看看效果: 思路分析: 这个效果可以用两个View来完成,上层View是一个遮盖物,绘制半透明的颜色,中间挖了一个圆:下层的View用来显示图片,具备移动和缩放的功能,并且能截取某区域内的图片. 涉及到的知识点: 1.Matrix,图片的移动和缩放 2.Paint的setXfermode方法 3.图片放大移动后,截取一部分 编码实现: 自定义三个View: 1.下层View:ClipP

  • Android仿微信和QQ多图合并框架(类似群头像)的实现方法

    前言 现在多数app里面加入聊天已经是一个非常普遍的现象了,而微信和qq则是通讯领域的鼻祖了.如果产品经理在考虑做聊天设计的时候,多数会参考. 常常你会听到,你看微信和qq都是这么做的,你就这么来吧,虽然心理有一万个不痛快,但谁叫我们是有一个有追求的程序员呢. 所以产品的要求是实现类似微信的群头像. 类似如下 作为程序员,首先会评估下工作量吧.在产品眼里,就是把图片合成一起嘛,有啥难度吗?所以工作时间决定了你能做成什么样吧 方案分析: 方案1.直接写成布局,然后按照不同的布局加载不同张数的图片.

  • 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

随机推荐