Photo Widget своими руками

в 14:08, , рубрики: photo widget, Разработка под android

Photo Widget своими руками

Привет, уважаемое читатели. Моя предыдущая статья про кастомный экран разблокировки получила мало отзывов в виде комментариев, но тем не менее сто человек сохранило её в избранных, тем самым вдохновив меня на написание ещё одной статьи на непопулярную тему.

Многим пользователям смартфонов Xperia нравится красивый трёхмерный стандартный виджет фотографий. С точки зрения терминологии андроид, это не AppWidget, а простой View, очень похожий на виджет. Его можно с большой натяжкой назвать «плагином» к стандартному лаунчеру Xperia Home, поэтому в списке виджетов других лаунчеров его нет. В этом посте я расскажу, как можно сделать похожий виджет.

Введение

Представьте себе ситуацию, будто бы вы написали собственный лаунчер для андроид с поддержкой виджетов (возможно, в следующей статье я кратко расскажу, как это сделать). Трехмерный виджет фотографий будет выделять ваш лаунчер на фоне других. Как и в случае со стандартным виджетом фотографий Xperia, наш виджет представляет собой кастомный View, запущенный в процессе нашего лаунчера.

Основа виджета

Первым этапом необходимо сделать так, чтобы в списке доступных виджетов появился наш (напомню, не виджет). В Sony Ericsson поступили просто — стандартный лаунчер из списка установленных в системе пакетов выбирает те, что начинаются на «com.sonyericsson.advancedwidget» и добавляет название и иконку в список виджетов. Данный способ простой, но у него есть недостаток: один apk — один виджет. Мы поступим умнее (я надеюсь) — в манифесте нашего будущего виджета напишем так:

<receiver android:name=".PhotoWidgetReceiver" >
	<intent-filter>
		<action android:name="by.arriva.ADVANCED_WIDGET" />
	</intent-filter>
</receiver>

Класс PhotoWidgetReceiver оставим пустым:

public class PhotoWidgetReceiver extends BroadcastReceiver {
	
	@Override
	public void onReceive(Context context, Intent intent) {	
	}
}

Благодаря этому трюку наш лаунчер найдет все BroadcastReciever'ы, отвечающие на «by.arriva.ADVANCED_WIDGET». Далее приведен листинг кода из лаунчера.

final PackageManager manager = getPackageManager();
Intent i = new Intent("by.arriva.ADVANCED_WIDGET");
List<ResolveInfo> lri = manager.queryBroadcastReceivers(i, 0);
for(ResolveInfo ri : lri){
	String packageName = ri.activityInfo.packageName;
	String className = ri.activityInfo.name;
	className = className.replace("Receiver", "");
	AdvancedWidgetInfo awi = new AdvancedWidgetInfo(this, packageName, className);
	if(!awi.isValid) continue;
		try {
			WidgetInfo wi = new WidgetInfo(true, awi.label, awi.width+" x "+awi.height, manager.getResourcesForApplication(packageName).getDrawable(awi.preview), new ComponentName(packageName, className));
			widgetsSorted.add(wi);
		} catch (Exception e) {}
		awi = null;
	}
lri.clear();

String className — имя класса, унаследованного от BroadcastReciever, в нашем случае это PhotoWidgetReceiver. Лаунчер ищет в виджете класс PhotoWidget, в котором находится описание виджета. Вот его содержание:

public class PhotoWidget {
	
	public static View getView(Context context){
		WidgetView wv = new WidgetView(context);
		return wv;
	}
	
	public static int getCellWidth(Context context){
		return 2;
	}
	
	public static int getCellHeight(Context context){
		return 2;
	}
	
	public static String getLabel(Context context){
		return context.getString(R.string.app_name);
	}
	
	public static int getIconId(Context context){
		return R.drawable.icon;
	}
	
	public static int getPreviewId(Context context){
		return R.drawable.preview;
	}
}

Структура этого класса должна быть строго постоянной во всех ваших нестандартных (advanced) виджетах, т.к. такая же структура методов и в классе AdvancedWidgetInfo вашего лаунчера.

Непосредственно View

Основной класс нашего виджета

public class WidgetView extends View {
	
	ContentObserver observer;
	GestureDetector gd;
	Scroller scroller;
	NinePatchDrawable frame;
	Bitmap loading;
	Bitmap broken;
	Item[] items = null;
	float touchLastY = 0;
	float touchDownY = 0;
	boolean touchTap = false;
	boolean touchScroll = false;
	long loaderId = -1;
	int getScrollY = 0;
	int width = 160;
	int height = 200;
	
	public WidgetView(Context context) {
		super(context);
		gd = new GestureDetector(context, new GestureListener());
		scroller = new Scroller(context);
		observer = new ContentObserver(new Handler()){
			@Override
			public void onChange(boolean selfChange){
				super.onChange(selfChange);
				loadThumbnails();
			}
		};
		frame = (NinePatchDrawable)getResources().getDrawable(R.drawable.frame);
		loading = getBmp(R.drawable.loading);
		broken = getBmp(R.drawable.broken);
	}
	
	@Override
	public void onAttachedToWindow(){
		super.onAttachedToWindow();
		loadThumbnails();
		getContext().getContentResolver().registerContentObserver(MediaStore.Images.Media.EXTERNAL_CONTENT_URI, true, observer);
		getContext().getContentResolver().registerContentObserver(MediaStore.Video.Media.EXTERNAL_CONTENT_URI, true, observer);
	}
	
	@Override
	public void onDetachedFromWindow(){
		super.onDetachedFromWindow();
		getContext().getContentResolver().unregisterContentObserver(observer);
	}
	
	@Override
	protected void onDraw(Canvas canvas){
		super.onDraw(canvas);
		Paint p = new Paint();
		p.setDither(true);
    		p.setFilterBitmap(true);
		int pos = getSelected();
		float percent = getSelectedPercent();
		if(items != null){
			if(items.length == 0){
				Bitmap camera = getBmp(R.drawable.camera);
				Transformation transform = new Transformation(0, percent, 160, 140);
				p.setAlpha(transform.alpha);
				canvas.drawBitmap(camera, transform.matrix3d, p);
				return;
			}
			if(pos >= 1){
				if(items[pos-1] != null){
					if(items[pos-1].thumbnail != null){
						Bitmap thumbnail = items[pos-1].thumbnail;
						Transformation transform = new Transformation(-1, percent, thumbnail.getWidth(), thumbnail.getHeight());
						p.setAlpha(transform.alpha);
						canvas.drawBitmap(thumbnail, transform.matrix3d, p);
					} else {
						Transformation transform = new Transformation(-1, percent, broken.getWidth(), broken.getHeight());
						p.setAlpha(transform.alpha);
						canvas.drawBitmap(broken, transform.matrix3d, p);
					}
				} else {
					Transformation transform = new Transformation(-1, percent, loading.getWidth(), loading.getHeight());
					p.setAlpha(transform.alpha);
					canvas.drawBitmap(loading, transform.matrix3d, p);
				}
			}
			if(items.length-1 >= pos+1){
				if(items[pos+1] != null){
					if(items[pos+1].thumbnail != null){
						Bitmap thumbnail = items[pos+1].thumbnail;
						Transformation transform = new Transformation(1, percent, thumbnail.getWidth(), thumbnail.getHeight());
						p.setAlpha(transform.alpha);
						canvas.drawBitmap(thumbnail, transform.matrix3d, p);
					} else {
						Transformation transform = new Transformation(1, percent, broken.getWidth(), broken.getHeight());
						p.setAlpha(transform.alpha);
						canvas.drawBitmap(broken, transform.matrix3d, p);
					}
				} else {
					Transformation transform = new Transformation(1, percent, loading.getWidth(), loading.getHeight());
					p.setAlpha(transform.alpha);
					canvas.drawBitmap(loading, transform.matrix3d, p);
				}
			}
			if(items.length-1 >= pos){
				if(items[pos] != null){
					if(items[pos].thumbnail != null){
						Bitmap thumbnail = items[pos].thumbnail;
						Transformation transform = new Transformation(0, percent, thumbnail.getWidth(), thumbnail.getHeight());
						p.setAlpha(transform.alpha);
						canvas.drawBitmap(thumbnail, transform.matrix3d, p);
					} else {
						Transformation transform = new Transformation(0, percent, broken.getWidth(), broken.getHeight());
						p.setAlpha(transform.alpha);
						canvas.drawBitmap(broken, transform.matrix3d, p);
					}
				} else {
					Transformation transform = new Transformation(0, percent, loading.getWidth(), loading.getHeight());
					p.setAlpha(transform.alpha);
					canvas.drawBitmap(loading, transform.matrix3d, p);
				}
			}
		} else {
			Transformation transform = new Transformation(0, 0, loading.getWidth(), loading.getHeight());
			canvas.drawBitmap(loading, transform.matrix3d, null);
		}
	}
	
	@Override
	public boolean onTouchEvent(MotionEvent me) {
		if(items == null) return true;
		gd.onTouchEvent(me);
		float touchY = me.getY();
		if(me.getAction() == MotionEvent.ACTION_DOWN){
			if(!scroller.isFinished()){
				scroller.abortAnimation();
			} else {
				touchTap = true;
				touchScroll = false;
			}
			touchDownY = touchLastY = touchY;
		} else if(me.getAction() == MotionEvent.ACTION_MOVE){
			if(Math.abs(touchY - touchDownY) > ViewConfiguration.getTouchSlop() || touchScroll){
				getParent().requestDisallowInterceptTouchEvent(true);
				touchTap = false;
				touchScroll = true;
				getScrollY += -(int)(touchY - touchLastY);
				computeOverscroll();
			}
			touchLastY = touchY;
		} else if((me.getAction() == MotionEvent.ACTION_UP || me.getAction() == MotionEvent.ACTION_CANCEL) && scroller.isFinished()){
			if(touchTap && me.getAction() == MotionEvent.ACTION_UP){
				tap();
			}
			setSelected(getSelected(), true);
			getParent().requestDisallowInterceptTouchEvent(false);
		}
		return true;
	}
	
	@Override
	public void computeScroll(){
		if(scroller.computeScrollOffset()){
			int oldY = getScrollY;
			getScrollY = scroller.getCurrY();
			if(oldY != getScrollY){
				onScrollChanged(0, getScrollY, 0, oldY);
			}
			if(scroller.getFinalY() == getScrollY){
				scroller.abortAnimation();
				setSelected(getSelected(), true);
			}
			postInvalidate();
		}
	}
	
	@Override
	protected void onMeasure(int wms, int hms){
		width = MeasureSpec.getSize(wms);
		height = MeasureSpec.getSize(hms);
		super.onMeasure(wms, hms);
	}
	
	@Override
	protected void onSizeChanged(int w, int h, int oldw, int oldh){
		width = w;
		height = h;
		super.onSizeChanged(w, h, oldw, oldh);
	}
	
	void loadThumbnails(){
		items = null;
		getScrollY = 0;
		invalidate();
		Thread loader = new Thread(new Runnable() {
			public void run() {
				long currentId = Thread.currentThread().getId();
				try{
					final ArrayList<MediaItem> list = mediaList();
					if(list == null || loaderId != currentId) return;
					items = new Item[list.size()];
					postInvalidate();
					for(int i=0; i<list.size(); i++){
 						if(items == null || loaderId != currentId) return;
						items[i] = new Item(list.get(i).path, getBmp(list.get(i)), list.get(i).type);
						postInvalidate();
					}
				} catch(Exception e){}
			}
		});
		loaderId = loader.getId();
		loader.start();
	}
	
	int getSelected(){
		return Math.round(getScrollY/140f);
	}
	
	float getSelectedPercent(){
		float f = getScrollY/140f;
		return f-getSelected();
	}
	
	void setSelected(int pos, boolean anim){
		if(anim && getScrollY!=pos*140){
			scroller.startScroll(0, getScrollY, 0, pos*140-getScrollY, 250);
		} else {
			getScrollY = pos*140;
		}
		invalidate();
	}
	
	void computeOverscroll(){
		if(getScrollY < -50){
			getScrollY = -50;
		} else if(getScrollY > Math.max(items.length-1, 0)*140+50){
			getScrollY = Math.max(items.length-1, 0)*140+50;
		}
		invalidate();
	}
	
	void tap(){
		try{
			if(items != null){
				if(items.length == 0){
					Intent i = new Intent("android.media.action.IMAGE_CAPTURE");
					i.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
					getContext().startActivity(i);
					return;
				}
				if(items[getSelected()] == null) return;
				int type = items[getSelected()].type;
				String path = items[getSelected()].path;
				if(type == 1){
					Intent view = new Intent(android.content.Intent.ACTION_VIEW);
	        		File imageFile = new File(path);
	        		view.setDataAndType(Uri.fromFile(imageFile), "image/*");
	        		view.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
	        		getContext().startActivity(view);
				} else if(type == 2){
					Intent view = new Intent(android.content.Intent.ACTION_VIEW);
	        		File imageFile = new File(path);
	        		view.setDataAndType(Uri.fromFile(imageFile), "video/*");
	        		view.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
	        		getContext().startActivity(view);
				}
			}
		} catch(Exception e){}
	}
	
	ArrayList<MediaItem> mediaList(){
		try{
			ArrayList<MediaItem> list = new ArrayList<MediaItem>();
			Cursor c = getContext().getContentResolver().query(MediaStore.Images.Media.EXTERNAL_CONTENT_URI, new String[]{MediaStore.Images.Media.DATA, MediaStore.Images.Media.DATE_ADDED}, null, null, null);
			if(c.moveToFirst()){
				do{
					list.add(new MediaItem(c.getString(c.getColumnIndexOrThrow(MediaStore.Images.Media.DATA)), c.getString(c.getColumnIndexOrThrow(MediaStore.Images.Media.DATE_ADDED)), 1));
				} while(c.moveToNext());
			}
			c.close();
			c = getContext().getContentResolver().query(MediaStore.Video.Media.EXTERNAL_CONTENT_URI, new String[]{MediaStore.Video.Media.DATA, MediaStore.Video.Media.DATE_ADDED}, null, null, null);
			if(c.moveToFirst()){
				do{
					list.add(new MediaItem(c.getString(c.getColumnIndexOrThrow(MediaStore.Video.Media.DATA)), c.getString(c.getColumnIndexOrThrow(MediaStore.Video.Media.DATE_ADDED)), 2));
				} while(c.moveToNext());
			}
			c.close();
			Collections.sort(list, new Comparator<MediaItem>(){
				@Override
				public int compare(MediaItem mi1, MediaItem mi2) {
					return mi1.date.compareToIgnoreCase(mi2.date);
				}
			});
			Collections.reverse(list);
			return list;
		} catch(Exception e){
			return new ArrayList<MediaItem>();
		}
	}
	
	Bitmap getBmp(MediaItem mi){
		try{
			Paint p = new Paint();
	    		p.setDither(true);
	    		p.setFilterBitmap(true);
	    		if(mi.type == 1){
	    			int rot = 0;
	    			try{
					ExifInterface rote = new ExifInterface(mi.path);
					int r = rote.getAttributeInt(ExifInterface.TAG_ORIENTATION, 1);
					if(r == 3){
						rot = 180;
					} else if(r == 8){
						rot = 270;
					} else if(r == 6){
						rot = 90;
					} else {
						rot = 0;
					}
	    			} catch(Exception e){}
	    			BitmapFactory.Options bfo = new BitmapFactory.Options();
	    			bfo.inJustDecodeBounds = true;
	    			BitmapFactory.decodeFile(mi.path, bfo);
	    			if(rot == 90 || rot == 270){
	    				bfo.inSampleSize = Math.min(bfo.outWidth/140, bfo.outHeight/120);
	    			} else {
	    				bfo.inSampleSize = Math.max(bfo.outWidth/140, bfo.outHeight/120);
	    			}
	    			bfo.inJustDecodeBounds = false;
	    			Bitmap src = BitmapFactory.decodeFile(mi.path, bfo);
	    			if(rot != 0){
	    				Matrix m = new Matrix();
		    			m.postRotate(rot);
		    			src = Bitmap.createBitmap(src, 0, 0, src.getWidth(), src.getHeight(), m, true);
	    			}
	    			float aspect = (float)src.getWidth()/src.getHeight();
	    			int image_w = 160;
	    			int image_h = 140;
	    			if(aspect > 1){
	    				image_h = (int)((image_w-20)/aspect+20);
	    			} else {
	    				image_w = (int)((image_h-20)*aspect+20);
	    			}
	    			Bitmap result = Bitmap.createBitmap(image_w, image_h, Config.ARGB_8888);
	    			Canvas c = new Canvas(result);
	    			frame.setBounds(0, 0, image_w, image_h);
	    			frame.draw(c);
	    			c.drawBitmap(src, null, new RectF(10, 10, image_w-10, image_h-10), p);
	    			return result;
	    		} else if(mi.type == 2){
	    			Bitmap src = ThumbnailUtils.createVideoThumbnail(mi.path, MediaStore.Video.Thumbnails.MINI_KIND);
	    			float aspect = (float)src.getWidth()/src.getHeight();
	    			int image_w = 160;
	    			int image_h = (int)((image_w-20)/aspect+20);
	    			Bitmap result = Bitmap.createBitmap(image_w, image_h, Config.ARGB_8888);
	        		Canvas c = new Canvas(result);
	        		frame.setBounds(0, 0, image_w, image_h);
	    			frame.draw(c);
	    			c.drawBitmap(src, null, new RectF(10, 10, image_w-10, image_h-10), p);
		    		c.drawBitmap(BitmapFactory.decodeResource(getResources(), R.drawable.video), (image_w-64)/2, (image_h-64)/2, p);
		    		return result;
	    		}
		} catch(Exception e){
			return null;
		} catch(OutOfMemoryError e){
			return null;
		}
		return null;
	}
	
	Bitmap getBmp(int res){
		Bitmap bmp = Bitmap.createBitmap(160, 140, Config.ARGB_8888);
		Canvas c = new Canvas(bmp);
		Paint p = new Paint();
		p.setDither(true);
		p.setFilterBitmap(true);
		frame.setBounds(0, 0, 160, 140);
		frame.draw(c);
		c.drawBitmap(BitmapFactory.decodeResource(getResources(), res), 48, 38, p);
		return bmp;
	}
	
	public class MediaItem {
		String path;
		String date;
		int type;
		public MediaItem(String str1, String str2, int i){
			path = str1;
			date = str2;
			type = i;
		}
	}
	
	public class Item {
		String path;
		Bitmap thumbnail;
		int type;
		public Item(String str, Bitmap bmp, int i){
			path = str;
			thumbnail = bmp;
			type = i;
		}
	}
	
	public class Transformation {
		Matrix matrix3d;
		int alpha;
		public Transformation(int pos, float percent, int imageWidth, int imageHeight){
			float centerX = (float)width/2;
			float centerY = (float)height/2;
			float f = -pos + percent;
			centerY -= (float)Math.sin(f*Math.PI/2)*40;
			float f1 = Math.abs(f) - 0.5f;
			if(f1 < 0) f1 = 0;
			float f2 = Math.abs(f) / 1.5f;
			alpha = 255 - (int)(255*f1);
			float scale = (float) (1 - 0.4*f2);
			Camera c = new Camera();
			matrix3d = new Matrix();
			c.save();
			float rotate = percent*100;
			if(pos == 0) rotate *= -1;
			c.rotateX(rotate);
			c.getMatrix(matrix3d);
			matrix3d.preTranslate(-imageWidth/2, -imageHeight/2);
			matrix3d.postScale(scale, scale);
			matrix3d.postTranslate(centerX, centerY);
			c.restore();
		}
	}
	
	private class GestureListener extends GestureDetector.SimpleOnGestureListener {
		@Override
		public boolean onFling(MotionEvent me1, MotionEvent me2, float vX, float vY){
			scroller.fling(0, getScrollY, 0, -(int)vY, 0, 0, -50, Math.max(items.length-1, 0)*140+50);
			invalidate();
			return true;
		}
	}
}

Немного пояснений:

ContentObserver регистрирует все изменения во внешней памяти. Например, при добавлении фотографии метод onChange(boolean selfChange) вызывается несколько раз с интервалом в пару миллисекунд. Метод loadThumbnails() грузит миниатюры всех фотографий в отдельном потоке. Каждый раз при срабатывании метода onChange ContentObserver'а создаётся новый поток для создания миниатюр. Возникает ситуация, когда при добавлении одной фотографии сразу же создаётся одновременно несколько потоков, делающих одно и то же действия. Для того, чтобы избежать этой ситуации в переменной loaderId хранится id последнего созданного потока, а во всех потоках присутствует сравнение сохраненного id и id данного потока. Если цифры не равны, поток уничтожается.

Жесты листания и броска не вызывают перемещение холста View, как это принято. Вместо этого происходит изменение переменной getScrollY. Integer getSelected() возвращает текущую позицию в массиве миниатюр, float getSelectedPercent() возвращает угол наклона миниатюр относительно зрителя. Значение 0,5 соответствует 45 градусам. Возможно, следующая картинка прояснит ситуацию:

Photo Widget своими руками

В методе onTouchEvent(MotionEvent me) важно не забыть вызывать getParent().requestDisallowInterceptTouchEvent(true) для того, чтобы во время листания миниатюр в виджете не происходило листание столов в лаунчере.

Ну и в конце пару слов о классе Transformation. Он возвращает матрицу трансформации для миниатюр в зависимости от того, что возвращают описанные выше getSelected() и getSelectedPercent().

Ещё следует отметить, что миниатюры всех изображений и видео хранятся в массиве Item[]. Это плохо. Правильным вариантом будет кэширование миниатюр.

Заключение

Вот так кратко я рассказал, как можно сделать симпатичный просмотрщик миниатюр фотографий. Я очень удивлён, что такие красивые трёхмерные эффекты листания изображений абсолютно не тормозят на моём древнем телефоне Samsung Galaxy Gio. Можете убедиться в этом на видео:

Автор: by_arriva

Источник

* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js