码迷,mamicode.com
首页 > 其他好文 > 详细

图片的友好显示方式

时间:2016-05-04 19:02:47      阅读:227      评论:0      收藏:0      [点我收藏+]

标签:

  在各类Android应用中图片的的显示是很常见的,如何做到友好的显示方式呢?最近在写一个资讯类app,就碰到了如何“优雅”的显示图片的问题。参考了几个现有了app,最终实现了还算满意的效果。在这里小计一下,主要涉及到图片的全屏显示,半透明背景的设置。

一、参考样例

  在这给出我参考的几个觉得很不错的例子,博采众长嘛 (*^-^*)

  • 知乎

技术分享技术分享

  • 小米相册

技术分享技术分享

  可以看出他们的实现都是类似的,在显示图片是其他内容都是被隐藏或淡化的(好像这句话是什么都没说的废话,图片显示当然该这样 (′д` )…彡…彡),从上面的显示效果我们可以得到两个结论:

  1. 图片需要全屏显示
  2. 需要淡化或者隐藏图片外的内容

相比于彻底隐藏背景我更倾向于淡化背景,下面就来说说如何实现一个类似于知乎的图片查看界面。

 

二、实现

  又两种实现思路可以实现上面的样子:

  1. 使用activity实现
  2. 使用DialogFragment实现

  每种实现的布局主要都是一个显示图片的view,在我的应用中还包括一个下载图片到手机的按钮,大致界面就可知乎类似。相比于activity切换代价,我选择了DialogFragment的实现方式。

给出布局文件:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

  <!--显示图片的ImageView--> <ImageView android:id="@+id/image" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:layout_centerVertical="true" android:scaleType="centerCrop" />

  <!--图片为加载上来时显示的进度条,这里的位置和ImageView是相同的--> <ProgressBar android:id="@+id/progress" style="@style/MDProgressBar" android:layout_width="48dp" android:layout_height="48dp" android:layout_centerHorizontal="true" android:layout_centerVertical="true" />
  <!--提供下载的按钮--> <android.support.design.widget.FloatingActionButton android:id="@+id/fab_save" android:layout_width="64dp" android:layout_height="64dp" android:layout_alignParentBottom="true" android:layout_alignParentEnd="true" android:layout_alignParentRight="true" android:layout_margin="16dp" android:src="@android:drawable/stat_sys_download" /> </RelativeLayout>

关于DialogFragment的使用就不赘述了,这里先给出效果:

技术分享

  (嗯!妹子还不错)这明显不是我想要的效果了,既没有全屏又没有背景淡化(那一堆白色背景),问题出在哪呢?

  1. 没有指定DialogFragment为全屏
  2. 没指定透明背景

  哪在那实现呢?style呗!查了一些Guide发现DialogFragment有一个方法setStyle(int,int),关于这个方法的具体说明,戳这里(ps:需fan墙)

那就开始写style呗:

   <!--查看图片的fragment,要求是透明且全屏-->
    <style name="Dialog_Fullscreen">
        <item name="android:windowFullscreen">true</item>
        <item name="android:windowNoTitle">true</item>
    </style>

设置好style再来看看效果呗:

技术分享

  嗯,全屏实现了,接下来怎么实现半透明了,并指定在什么颜色下实现半透明,这里就要用到ARGB了,关于ARGB戳这里,Android是支持ARGB颜色的。只要我们把背景指定为想要的ARGB色就行了。(知道解决办法了,代码呼之欲出)

<!--查看图片的fragment,要求是透明且全屏-->
    <style name="Dialog_Fullscreen">
        <item name="android:windowFullscreen">true</item>
        <item name="android:windowNoTitle">true</item>
        <item name="android:windowIsTranslucent">true</item>
        <item name="android:windowBackground">@color/transparent</item>
    </style>
 
<!--黑色半透明-->
<color name="transparent">#e0000000</color>

再来看看效果:

技术分享

OK!到此算是实现好了。

 

三、总结

  总结一下:DialogFragment默认不是全屏的,需要自己指定style,然后透明背景可以通过设置ARGB背景来实现,当然也可以直接拿到窗口属性设置alpha值,但两者本质是一样的。

图片的友好显示方式

标签:

原文地址:http://www.cnblogs.com/fallblank/p/5459336.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!