您好,登錄后才能下訂單哦!
前言:
在app的文章中,經(jīng)常會(huì)夾雜著一些特別長的長圖。在閱讀的時(shí)候需要滑動(dòng)很久才能看圖片下方的文字,因此對于長圖只展示圖片上面一部分,并且可以展開這個(gè)功能是很重要的。
效果:
基本思路:
利用scaleType的matrix屬性以及直接改變圖片的高度來實(shí)現(xiàn)圖片的收起與展開。
過程:
開始嘗試:
scaleType屬性介紹:
1.center:保持原圖的大小,顯示在ImageView的中心。當(dāng)原圖的size大于ImageView的size,超過部分裁剪處理;
2.centerInside:以原圖完全顯示為目的,將圖片的內(nèi)容完整居中顯示,通過按比例縮小原圖的size寬(高)等于或小于ImageView的寬(高)。如果原圖的size本身就小于ImageView的size,則原圖的size不作任何處理,居中顯示在ImageView;
3.centerCrop:以填滿整個(gè)ImageView為目的,將原圖的中心對準(zhǔn)ImageView的中心,等比例放大原圖,直到填滿ImageView為止(指的是ImageView的寬和高都要填滿),原圖超過ImageView的部分作裁剪處理;
4.matrix:不改變原圖的大小,從ImageView的左上角開始繪制原圖,原圖超過ImageView的部分作裁剪處理;
5.fitCenter:把原圖按比例擴(kuò)大或縮小到ImageView的高度,居中顯示;
6.fitEnd:把原圖按比例擴(kuò)大(縮小)到ImageView的高度,顯示在ImageView的下部分位置;
7.fitStart:把原圖按比例擴(kuò)大(縮小)到ImageView的高度,顯示在ImageView的上部分位置;
8.fitXY:把原圖按照指定的大小在View中顯示,拉伸顯示圖片,不保持原比例,填滿ImageView
根據(jù)以上屬性介紹,可以知道m(xù)atrix屬性是我們要的。
基本布局:
<ImageView android:id="@+id/iv_long_picture" android:layout_width="match_parent" android:layout_height="@dimen/dp_146" android:layout_below="@id/tv_main_content_question" android:adjustViewBounds="true" android:scaleType="matrix" android:src="@color/color_333333" /> <TextView android:id="@+id/tv_expand_collapse" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/iv_long_picture" android:layout_marginBottom="@dimen/dp_16" android:layout_marginTop="@dimen/dp_10" android:drawableEnd="@drawable/down_icon" android:drawablePadding="@dimen/dp_7" android:text="@string/expand_all" android:textColor="@color/color_99" android:textSize="@dimen/sp_14" android:textStyle="bold" android:visibility="gone" />
加載圖片:
使用Glide加載的圖片
Glide.with(this) .load(mainContentBean.getAccessory().get(0)) .into(ivLongPicture);
點(diǎn)擊事件:
直接通過設(shè)置imageView的高度來實(shí)現(xiàn)圖片的展開與收起,
tvExpandCollapse.setOnClickListener(new View.OnClickListener() { boolean expanded = false; @Override public void onClick(View v) { if (expanded) { // 收起 ViewGroup.LayoutParams params = ivLongPicture.getLayoutParams(); params.width = RelativeLayout.LayoutParams.MATCH_PARENT; params.height = DensityUtil.dip2px(MainContentActivity.this, 146); ivLongPicture.setLayoutParams(params); expanded = false; tvExpandCollapse.setText(R.string.expand_all); tvExpandCollapse.setCompoundDrawablesRelativeWithIntrinsicBounds(0, 0, R.drawable.down_icon, 0); scMainContent.smoothScrollTo(0, 0); } else { // 展開 ViewGroup.LayoutParams params = ivLongPicture.getLayoutParams(); params.width = RelativeLayout.LayoutParams.MATCH_PARENT; params.height = RelativeLayout.LayoutParams.WRAP_CONTENT; ivLongPicture.setLayoutParams(params); expanded = true; tvExpandCollapse.setText(R.string.collapse_all); tvExpandCollapse.setCompoundDrawablesRelativeWithIntrinsicBounds(0, 0, R.drawable.upper_icon, 0); } } });
遇到問題:
根據(jù)以上的思路以及代碼實(shí)現(xiàn),普通的長圖確實(shí)能夠做到“展開”和“收起”功能。
但是對于原圖寬度超過手機(jī)寬度的圖片來說,寬度并沒有顯示完全!
對于Glide版本4.0以上,如果寬度過大,會(huì)等比例縮放至寬度等于ImageView的寬度,因此并不會(huì)有問題,但是我們的項(xiàng)目用Glide版本是3.7的,而且不容易升級,故此方法不可行。
解決:
查閱了Glide的文檔,了解了Glide可以在圖片下載完成后對圖片進(jìn)行一些操作,操作完成之后的圖片自然就成了ImageView認(rèn)為的原圖了。
因此,可以在加載之前將寬度過大的圖片等比例縮放,縮放完成后再加載到ImageView中去。
加載圖片改進(jìn):
Glide.with(this) .load(mainContentBean.getAccessory().get(0)) .asBitmap() .listener(new RequestListener<String, Bitmap>() { @Override public boolean onException(Exception e, String model, Target<Bitmap> target, boolean isFirstResource) { return false; } @Override public boolean onResourceReady(Bitmap resource, String model, Target<Bitmap> target, boolean isFromMemoryCache, boolean isFirstResource) { int imageWidth = resource.getWidth(); int imageHeight = resource.getHeight(); WindowManager manager = (WindowManager) MainContentActivity.this .getSystemService(Context.WINDOW_SERVICE); // 屏幕寬度減去margin值 int width = manager.getDefaultDisplay().getWidth() - DensityUtil.dip2px(MainContentActivity.this, 32); float scaleRate = width * 1.0f / imageWidth; //設(shè)置matrix Matrix matrix = new Matrix(); //設(shè)置放縮比例 matrix.setScale(scaleRate, scaleRate); ivLongPicture.setImageMatrix(matrix); if (imageHeight * scaleRate > DensityUtil.dip2px(MainContentActivity.this, 146)) { tvExpandCollapse.setVisibility(View.VISIBLE); } else { tvExpandCollapse.setVisibility(View.GONE); } return false; } }) .into(ivLongPicture);
總結(jié):
Android的優(yōu)勢在于開源,開源的好處在于易于學(xué)習(xí),容易更改。對于開源的框架,僅僅是掌握是不夠的,還需要好好的了解框架設(shè)計(jì)的一些設(shè)計(jì)模式,框架的優(yōu)缺點(diǎn)等。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。