Android实现高仿QQ附近的人搜索展示
本文主要實現了高仿QQ附近的人搜索展示,用到了自定義控件的方法
最終效果如下
1.下面展示列表我們可以使用ViewPager來實現(當然如果你不覺得麻煩,你也可以用HorizontalScrollView來試試)
2.上面的掃描圖,肯定是個ViewGroup(因為里面的小圓點是可以點擊的,如果是View的話,對于這些小圓點的位置的判斷,以及對小圓點縮放動畫的處理都會超級麻煩,難以實現),所以我們肯定需要自定義ViewGroup
3.確定好了是自定義ViewGroup后,對于里面需要放什么對象呢?沒錯,就是N個小圓點+一個掃描的大圈圈。
下面的viewPager實現
自定義CustomViewPager
package com.zj.custom;import android.content.Context; import android.support.v4.view.ViewPager; import android.util.AttributeSet; import android.view.MotionEvent;/*** com.zj.custom.CustomViewPager* Created by jjx on 2016/5/12.*/ public class CustomViewPager extends ViewPager{private long downTime;private float LastX;private float mSpeed;public CustomViewPager(Context context) {super(context);}public CustomViewPager(Context context, AttributeSet attrs) {super(context, attrs);}@Overridepublic boolean dispatchTouchEvent(MotionEvent ev) {float x = ev.getX();switch (ev.getAction()) {case MotionEvent.ACTION_DOWN:downTime = System.currentTimeMillis();LastX = x;break;case MotionEvent.ACTION_MOVE:x = ev.getX();break;case MotionEvent.ACTION_UP://計算得到手指從按下到離開的滑動速度mSpeed = (x - LastX) * 1000 / (System.currentTimeMillis() - downTime);break;}return super.dispatchTouchEvent(ev);}public float getSpeed() {return mSpeed;}public void setSpeed(float mSpeed) {this.mSpeed = mSpeed;} }MainActivity實現
package com.zj.modelqq;import android.os.Bundle; import android.os.Handler; import android.support.v4.view.PagerAdapter; import android.support.v4.view.ViewPager; import android.support.v7.app.AppCompatActivity; import android.util.SparseArray; import android.view.LayoutInflater; import android.view.MotionEvent; import android.view.View; import android.view.ViewGroup; import android.view.animation.AccelerateInterpolator; import android.widget.ImageView; import android.widget.RelativeLayout; import android.widget.TextView; import android.widget.Toast;import com.zj.bean.Info; import com.zj.custom.CustomViewPager; import com.zj.custom.RadarViewGroup; import com.zj.util.FixedSpeedScroller; import com.zj.util.LogUtil; import com.zj.util.ZoomOutPageTransformer;import java.lang.reflect.Field;public class MainActivity extends AppCompatActivity implements ViewPager.OnPageChangeListener, RadarViewGroup.IRadarClickListener {private CustomViewPager viewPager;private RelativeLayout ryContainer;private RadarViewGroup radarViewGroup;private int[] mImgs = {R.drawable.len, R.drawable.leo, R.drawable.lep,R.drawable.leq, R.drawable.ler, R.drawable.les, R.drawable.mln, R.drawable.mmz, R.drawable.mna,R.drawable.mnj, R.drawable.leo, R.drawable.leq, R.drawable.les, R.drawable.lep};private String[] mNames = {"ImmortalZ", "唐馬儒", "王尼瑪", "張全蛋", "蛋花", "王大錘", "叫獸", "哆啦A夢"};private int mPosition;private FixedSpeedScroller scroller;private SparseArray<Info> mDatas = new SparseArray<>();@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);initView();initData();/*** 將Viewpager所在容器的事件分發交給ViewPager*/ryContainer.setOnTouchListener(new View.OnTouchListener() {@Overridepublic boolean onTouch(View v, MotionEvent event) {return viewPager.dispatchTouchEvent(event);}});ViewpagerAdapter mAdapter = new ViewpagerAdapter();viewPager.setAdapter(mAdapter);//設置緩存數為展示的數目viewPager.setOffscreenPageLimit(mImgs.length);viewPager.setPageMargin(getResources().getDimensionPixelOffset(R.dimen.viewpager_margin));//設置切換動畫viewPager.setPageTransformer(true, new ZoomOutPageTransformer());viewPager.addOnPageChangeListener(this);setViewPagerSpeed(250);new Handler().postDelayed(new Runnable() {@Overridepublic void run() {radarViewGroup.setDatas(mDatas);}}, 1500);radarViewGroup.setiRadarClickListener(this);}private void initData() {for (int i = 0; i < mImgs.length; i++) {Info info = new Info();info.setPortraitId(mImgs[i]);info.setAge(((int) Math.random() * 25 + 16) + "歲");info.setName(mNames[(int) (Math.random() * mNames.length)]);info.setSex(i % 3 == 0 ? false : true);info.setDistance(Math.round((Math.random() * 10) * 100) / 100);mDatas.put(i, info);}}private void initView() {viewPager = (CustomViewPager) findViewById(R.id.vp);radarViewGroup = (RadarViewGroup) findViewById(R.id.radar);ryContainer = (RelativeLayout) findViewById(R.id.ry_container);}/*** 設置ViewPager切換速度* 使用了反射機制* @param duration*/private void setViewPagerSpeed(int duration) {try {Field field = ViewPager.class.getDeclaredField("mScroller");field.setAccessible(true);scroller = new FixedSpeedScroller(MainActivity.this, new AccelerateInterpolator());field.set(viewPager, scroller);scroller.setmDuration(duration);} catch (NoSuchFieldException e) {e.printStackTrace();} catch (IllegalAccessException e) {e.printStackTrace();}}@Overridepublic void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {mPosition = position;}@Overridepublic void onPageSelected(int position) {//radarViewGroup.setCurrentShowItem(position);LogUtil.m("當前位置 " + mPosition);LogUtil.m("速度 " + viewPager.getSpeed());//當手指左滑速度大于2000時viewpager右滑(注意是item+2)if (viewPager.getSpeed() < -1800) {viewPager.setCurrentItem(mPosition + 2);LogUtil.m("位置 " + mPosition);viewPager.setSpeed(0);} else if (viewPager.getSpeed() > 1800 && mPosition > 0) {//當手指右滑速度大于2000時viewpager左滑(注意item-1即可)viewPager.setCurrentItem(mPosition - 1);LogUtil.m("位置 " + mPosition);viewPager.setSpeed(0);}}@Overridepublic void onPageScrollStateChanged(int state) {}@Overridepublic void onRadarItemClick(int position) {viewPager.setCurrentItem(position);}class ViewpagerAdapter extends PagerAdapter {@Overridepublic Object instantiateItem(ViewGroup container, final int position) {final Info info = mDatas.get(position);//設置一大堆演示用的數據,麻里麻煩~~View view = LayoutInflater.from(MainActivity.this).inflate(R.layout.viewpager_layout, null);ImageView ivPortrait = (ImageView) view.findViewById(R.id.iv);ImageView ivSex = (ImageView) view.findViewById(R.id.iv_sex);TextView tvName = (TextView) view.findViewById(R.id.tv_name);TextView tvDistance = (TextView) view.findViewById(R.id.tv_distance);tvName.setText(info.getName());tvDistance.setText(info.getDistance() + "km");ivPortrait.setImageResource(info.getPortraitId());if (info.getSex()) {ivSex.setImageResource(R.drawable.girl);} else {ivSex.setImageResource(R.drawable.boy);}ivPortrait.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {Toast.makeText(MainActivity.this, "這是 " + info.getName() + " >.<", Toast.LENGTH_SHORT).show();}});container.addView(view);return view;}@Overridepublic int getCount() {return mImgs.length;}@Overridepublic boolean isViewFromObject(View view, Object object) {return view == object;}@Overridepublic void destroyItem(ViewGroup container, int position, Object object) {View view = (View) object;container.removeView(view);}} }界面配置文件
<?xml version="1.0" encoding="utf-8"?> <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/lkd"android:paddingLeft="5dp"android:paddingRight="5dp"tools:context="com.zj.modelqq.MainActivity"><com.zj.custom.RadarViewGroup android:id="@+id/radar"android:layout_width="280dp"android:layout_height="280dp"android:layout_centerHorizontal="true"android:layout_marginTop="50dp"><com.zj.custom.RadarView android:id="@+id/id_scan_circle"android:layout_width="280dp"android:layout_height="280dp"/></com.zj.custom.RadarViewGroup><RelativeLayout android:id="@+id/ry_container"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_alignParentBottom="true"android:layout_marginBottom="25dp"android:clipChildren="false"><com.zj.custom.CustomViewPager android:id="@+id/vp"android:layout_width="130dp"android:layout_height="160dp"android:layout_centerInParent="true"android:layout_marginLeft="120dp"android:layout_marginRight="120dp"/></RelativeLayout> </RelativeLayout>注意如果我們想要讓ViewPager一次顯示多個,需要設置其所在 父容器 Android:clipChildren=”false” 
 意思就是不限制子View在其范圍內。 
 細心的你可能會發現MainAcitivity中有 
 viewPager.setPageTransformer(true, new ZoomOutPageTransformer()); 
 這個,沒錯,這個就是用來控制我們的切換動畫(我在谷歌官方提供的這個基礎上進行了修改,也是很好理解)
viewpager效果如下
實現雷達掃描圖
代碼中也注釋得很清楚了,當然因為要掃描,我們需要不停的轉動,所以這里我們用到了矩陣變換Matrix,掃描消息的停頓和傳遞我們用到了Runnable 
 ,如果要是覺得在向主線程一直投遞變換的消息對主線程不好,你可以考慮下用SurfaceView來實現
RadarView
package com.zj.custom;import android.content.Context; import android.graphics.Bitmap; import android.graphics.BitmapFactory; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Matrix; import android.graphics.Paint; import android.graphics.Rect; import android.graphics.Shader; import android.graphics.SweepGradient; import android.util.AttributeSet; import android.view.View;import com.zj.modelqq.R;/*** Created by jjx on 2016/5/12.*/ public class RadarView extends View{private Paint mPaintLine;//畫圓線需要用到的paintprivate Paint mPaintCircle;//畫圓需要用到的paintprivate Paint mPaintScan;//畫掃描需要用到的paintprivate int mWidth, mHeight;//整個圖形的長度和寬度private Matrix matrix = new Matrix();//旋轉需要的矩陣private int scanAngle;//掃描旋轉的角度private Shader scanShader;//掃描渲染shaderprivate Bitmap centerBitmap;//最中間icon//每個圓圈所占的比例private static float[] circleProportion = {1 / 13f, 2 / 13f, 3 / 13f, 4 / 13f, 5 / 13f, 6 / 13f};private int scanSpeed = 5;private int currentScanningCount;//當前掃描的次數private int currentScanningItem;//當前掃描顯示的itemprivate int maxScanItemCount;//最大掃描次數private boolean startScan = false;//只有設置了數據后才會開始掃描private IScanningListener iScanningListener;//掃描時監聽回調接口public void setScanningListener(IScanningListener iScanningListener) {this.iScanningListener = iScanningListener;}private Runnable run = new Runnable() {@Overridepublic void run() {scanAngle = (scanAngle + scanSpeed) % 360;matrix.postRotate(scanSpeed, mWidth / 2, mHeight / 2);invalidate();postDelayed(run, 130);//開始掃描顯示標志為true 且 只掃描一圈if (startScan && currentScanningCount <= (360 / scanSpeed)) {if (iScanningListener != null && currentScanningCount % scanSpeed == 0&& currentScanningItem < maxScanItemCount) {iScanningListener.onScanning(currentScanningItem, scanAngle);currentScanningItem++;} else if (iScanningListener != null && currentScanningItem == maxScanItemCount) {iScanningListener.onScanSuccess();}currentScanningCount++;}}};public RadarView(Context context) {this(context, null);}public RadarView(Context context, AttributeSet attrs) {this(context, attrs, 0);}public RadarView(Context context, AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);init();post(run);}private void init() {mPaintLine = new Paint();mPaintLine.setColor(getResources().getColor(R.color.line_color_blue));mPaintLine.setAntiAlias(true);mPaintLine.setStrokeWidth(1);mPaintLine.setStyle(Paint.Style.STROKE);mPaintCircle = new Paint();mPaintCircle.setColor(Color.WHITE);mPaintCircle.setAntiAlias(true);mPaintScan = new Paint();mPaintScan.setStyle(Paint.Style.FILL_AND_STROKE);}@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {setMeasuredDimension(measureSize(widthMeasureSpec), measureSize(widthMeasureSpec));mWidth = getMeasuredWidth();mHeight = getMeasuredHeight();mWidth = mHeight = Math.min(mWidth, mHeight);centerBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.circle_photo);//設置掃描渲染的shaderscanShader = new SweepGradient(mWidth / 2, mHeight / 2,new int[]{Color.TRANSPARENT, Color.parseColor("#84B5CA")}, null);}private int measureSize(int measureSpec) {int result = 0;int specMode = MeasureSpec.getMode(measureSpec);int specSize = MeasureSpec.getSize(measureSpec);if (specMode == MeasureSpec.EXACTLY) {result = specSize;} else {result = 300;if (specMode == MeasureSpec.AT_MOST) {result = Math.min(result, specSize);}}return result;}@Overrideprotected void onDraw(Canvas canvas) {drawCircle(canvas);drawScan(canvas);drawCenterIcon(canvas);}/*** 繪制圓線圈** @param canvas*/private void drawCircle(Canvas canvas) {canvas.drawCircle(mWidth / 2, mHeight / 2, mWidth * circleProportion[1], mPaintLine); // 繪制小圓canvas.drawCircle(mWidth / 2, mHeight / 2, mWidth * circleProportion[2], mPaintLine); // 繪制中圓canvas.drawCircle(mWidth / 2, mHeight / 2, mWidth * circleProportion[3], mPaintLine); // 繪制中大圓canvas.drawCircle(mWidth / 2, mHeight / 2, mWidth * circleProportion[4], mPaintLine); // 繪制大圓canvas.drawCircle(mWidth / 2, mHeight / 2, mWidth * circleProportion[5], mPaintLine); // 繪制大大圓}/*** 繪制掃描** @param canvas*/private void drawScan(Canvas canvas) {canvas.save();mPaintScan.setShader(scanShader);canvas.concat(matrix);canvas.drawCircle(mWidth / 2, mHeight / 2, mWidth * circleProportion[4], mPaintScan);canvas.restore();}/*** 繪制最中間的圖標** @param canvas*/private void drawCenterIcon(Canvas canvas) {canvas.drawBitmap(centerBitmap, null,new Rect((int) (mWidth / 2 - mWidth * circleProportion[0]), (int) (mHeight / 2 - mWidth * circleProportion[0]),(int) (mWidth / 2 + mWidth * circleProportion[0]), (int) (mHeight / 2 + mWidth * circleProportion[0])), mPaintCircle);}public interface IScanningListener {//正在掃描(此時還沒有掃描完畢)時回調void onScanning(int position, float scanAngle);//掃描成功時回調void onScanSuccess();}public void setMaxScanItemCount(int maxScanItemCount) {this.maxScanItemCount = maxScanItemCount;}/*** 開始掃描*/public void startScan() {this.startScan = true;} }小圓點CircleView
package com.zj.custom;import android.content.Context; import android.graphics.Bitmap; import android.graphics.BitmapFactory; import android.graphics.Canvas; import android.graphics.Paint; import android.graphics.Rect; import android.util.AttributeSet; import android.view.View;import com.zj.modelqq.R; import com.zj.util.DisplayUtils;/*** Created by jjx on 2016/5/12.*/ public class CircleView extends View{private Paint mPaint;private Bitmap mBitmap;private float radius = DisplayUtils.dp2px(getContext(), 9);//半徑private float disX;//位置Xprivate float disY;//位置Yprivate float angle;//旋轉的角度private float proportion;//根據遠近距離的不同計算得到的應該占的半徑比例public float getProportion() {return proportion;}public void setProportion(float proportion) {this.proportion = proportion;}public float getAngle() {return angle;}public void setAngle(float angle) {this.angle = angle;}public float getDisX() {return disX;}public void setDisX(float disX) {this.disX = disX;}public float getDisY() {return disY;}public void setDisY(float disY) {this.disY = disY;}public CircleView(Context context) {this(context, null);}public CircleView(Context context, AttributeSet attrs) {this(context, attrs, 0);}public CircleView(Context context, AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);init();}private void init() {mPaint = new Paint();mPaint.setColor(getResources().getColor(R.color.bg_color_pink));mPaint.setAntiAlias(true);}@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {super.onMeasure(widthMeasureSpec, heightMeasureSpec);setMeasuredDimension(measureSize(widthMeasureSpec), measureSize(heightMeasureSpec));}private int measureSize(int measureSpec) {int result = 0;int specMode = MeasureSpec.getMode(measureSpec);int specSize = MeasureSpec.getSize(measureSpec);if (specMode == MeasureSpec.EXACTLY) {result = specSize;} else {result = DisplayUtils.dp2px(getContext(),18);if (specMode == MeasureSpec.AT_MOST) {result = Math.min(result, specSize);}}return result;}@Overrideprotected void onDraw(Canvas canvas) {canvas.drawCircle(radius, radius, radius, mPaint);if (mBitmap != null) {canvas.drawBitmap(mBitmap, null, new Rect(0, 0, 2 * (int) radius, 2 * (int) radius), mPaint);}}public void setPaintColor(int resId) {mPaint.setColor(resId);invalidate();}public void setPortraitIcon(int resId) {mBitmap = BitmapFactory.decodeResource(getResources(), resId);invalidate();}public void clearPortaitIcon(){mBitmap = null;invalidate();} }有了小圓點,我們最后只需要把掃描圖和小圓點放在一起就好了 
 因為我們是想變掃描變出現小圓點,所以我們需要在RadarView中定義一個接口IScanningListener,告訴RadarViewGroup我正在掃描,你快讓小圓點出現吧 
 所以在RadarViewGroup的onScanning中需要調用requestLayout();
每次點擊雷達圖中的小圓點都會告訴ViewPager切換到指定的頁面,所以RadarViewGroup中需要定義一個IRadarClickListener,讓ViewPager所在的MainAcitivity去實現該接口 
 完成的效果就是這樣了
參考鏈接
Android超高仿QQ附近的人搜索展示 - Mr_immortalZ的博客 - 博客頻道 - CSDN.NET
源碼下載
ImmortalZ/RadarScan: 這是Android一個雷達掃描顯示的掃描圖,超高仿QQ附近的人搜索展示
完成
總結
以上是生活随笔為你收集整理的Android实现高仿QQ附近的人搜索展示的全部內容,希望文章能夠幫你解決所遇到的問題。
                            
                        - 上一篇: Verilog HDL语言设计计数器+加
 - 下一篇: 【每日SQL打卡】