图片的友好显示方式

　　在各类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值，但两者本质是一样的。