代码写个九宫格布局显示图片

不在xml中设置布局,在代码中直接写个布局,显示下载的图片,如下图所示,图片有点丑

XML中添加个linearLayout

<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"
    tools:context="${relativePackage}.${activityClass}" >

    <TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="九宫格显示图片" />
     <LinearLayout
         android:id="@+id/report_photo_layout"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:layout_margin="10dip"
         android:orientation="vertical"
         android:layout_below="@+id/text"/>
</RelativeLayout>

另外加个布局,显示图片view_files_image.xml

<?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="match_parent"
    android:gravity="center" >
    <ImageView
        android:id="@+id/image"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_centerHorizontal="true"
        android:scaleType="centerCrop" />
</RelativeLayout>

其他就是代码了:

public class MainActivity extends Activity {
    private LinearLayout layoutPhotos;//
    private LinkedHashMap<String, String> choosePhotos = new LinkedHashMap<String, String>();//已选择的照片
    private DisplayMetrics dm = new DisplayMetrics();
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        layoutPhotos = (LinearLayout) findViewById(R.id.report_photo_layout);
        //choosePhotos哦让其中添加图片地址
        choosePhotos.put("1", "http://lllqmw.qiniudn.com/1.png");
        choosePhotos.put("2", "http://lllqmw.qiniudn.com/2.png");
        choosePhotos.put("3", "http://lllqmw.qiniudn.com/3.png");
        choosePhotos.put("4", "http://lllqmw.qiniudn.com/4.png");
        choosePhotos.put("5", "http://lllqmw.qiniudn.com/5.png");
        choosePhotos.put("6", "http://lllqmw.qiniudn.com/6.png");
        choosePhotos.put("7", "http://lllqmw.qiniudn.com/7.png");
        choosePhotos.put("8", "http://lllqmw.qiniudn.com/8.png");
        //显示图片
        layoutShowFiles();
    }
    /**
     * 九宫格的方式显示下载的图片
     */
    private void layoutShowFiles() {

        layoutPhotos.removeAllViews();

        // 每行四张视图,计算一下第个的宽高
        getWindowManager().getDefaultDisplay().getMetrics(dm);
        int margins = (int) dm.density * 2;
        int photoWidth = (int) (((dm.widthPixels - dm.density * 30) / 3) - margins * 2.5);
        Log.i("info", "每个view的尺寸为:" + photoWidth + ",间距为:" + margins);

        LinearLayout subLayout = new LinearLayout(this);
        subLayout.setOrientation(LinearLayout.HORIZONTAL);
        LayoutParams subParams = new LayoutParams(photoWidth, photoWidth);
        subParams.setMargins(margins, margins, margins, margins);

        int i = 0;
        Iterator<Entry<String, String>> iter = choosePhotos.entrySet().iterator();
        while (iter.hasNext()) {
            subLayout.addView(createLayoutPhoto(i, iter.next().getValue(), subParams));

            if (i % 3 == 2) {
                layoutPhotos.addView(subLayout, new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT));
                subLayout = new LinearLayout(this);
                subLayout.setOrientation(LinearLayout.HORIZONTAL);
            }

            i++;
        }

        // 计算一下sublayout还能放几个view,如果已经摆満了4个,刚新起一行
        if ((3 - choosePhotos.size() % 3) == 3) {
            subLayout = new LinearLayout(this);
            subLayout.setOrientation(LinearLayout.HORIZONTAL);
        }
        layoutPhotos.addView(subLayout, new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT));
    }

    /**
     * 生成一个图片
     * @param id
     * @param path
     * @param params
     * @return
     */
    private View createLayoutPhoto(final int imagePosition, final String path, LayoutParams params) {
        View v = getLayoutInflater().inflate(R.layout.view_files_image, null);
        v.setLayoutParams(params);
        ImageLoader.getInstance().displayImage(path, (ImageView) v.findViewById(R.id.image),SoftApplication.imageOptions);
        return v;
    }

}

下载图片需要的application

public class SoftApplication extends Application {
    public static DisplayImageOptions imageOptions ;

    @Override
    public void onCreate() {
        super.onCreate();
        initImageLoader(getApplicationContext());
        //设置图片属性:下载时的图片,下载失败的图片,是否圆角
        imageOptions = new DisplayImageOptions.Builder().cacheInMemory(true).cacheOnDisc(true)
                .showImageOnLoading(R.drawable.default_loading)     // 加载开始默认的图片
                .showImageForEmptyUri(R.drawable.default_loading)   // url爲空會显示该图片,自己放在drawable里面的
                .showImageOnFail(R.drawable.default_loading)        // 加载图片出现问题,会显示该图片
                .imageScaleType(ImageScaleType.IN_SAMPLE_INT).bitmapConfig(Bitmap.Config.RGB_565).build();
    }
    public static void initImageLoader(Context context) {
        ImageLoaderConfiguration config = new ImageLoaderConfiguration.Builder(context)
                .threadPriority(Thread.NORM_PRIORITY - 2)
                .denyCacheImageMultipleSizesInMemory()
                .discCacheFileNameGenerator(new Md5FileNameGenerator())
                .tasksProcessingOrder(QueueProcessingType.LIFO)
                .writeDebugLogs() // Remove for release app
                .build();
        ImageLoader.getInstance().init(config);
    }   

}

有个地方容易忘记:AndroidManifest.xml 声明

  <application
        android:name="com.example.demo_imagedisplay.SoftApplication"

ok了,点击Demo_imageDisplay下载完整代码。



更多交流可加技术讨论群:71262831

扫一扫,一起坐看风云变幻。扫描下方二维码关注it达人(也可微信搜索:it达人)。

为您推送最新开发资源、分享it牛人职业发展经验:

时间: 2024-10-08 23:56:47

代码写个九宫格布局显示图片的相关文章

纯代码方式实现九宫格布局

功能分析: 1> 以九宫格的形式展示应用信息 2> 点击下载按钮后, 做出相应的操作 分析: 1> 找出九宫格布局的规律, 设置每个控件的x和y - y值: 用行号决定; 取整运算(控件索引/九宫格布局的列数) - x值: 用列号决定; 取模运算(控件索引%九宫格布局的列数) 2> 每个控件中包含若干子控件, 考虑用view进行包装, 便于计算 3> 抽取九宫格布局中的重要数据, 便于布局的修改 代码实现: 1 #import "ViewController.h&q

我写的一个 Qt 显示图片的控件

Qt 中没有专门显示图片的控件,通常我们会使用QLabel来显示图片.但是QLabel 显示图片的能力还是有点弱.比如不支持图像的缩放一类的功能,使用起来不是很方便.因此我就自己写了个简单的类. 我这个类支持三种图像显示模式,我分别称之为:FIXED_SIZE, CENTRED,AUTO_ZOOM, AUTO_SIZE. FIXED_SIZE 模式下,显示的图像大小等于图像尺寸乘以缩放因子,如果控件的尺寸小于这个大小则多出的部分被裁切掉. FIX_SIZE_CENTRED模式与FIXED_SIZ

[代码]如何在选择画面中显示图片

下面通过一段代码介绍如何在选择画面中显示图片. 1, SMW0上载图片 Tcode:SMW0,选择Binary的选项 &lt;img class="alignnone size-full wp-image-5025" src="http://www.baidusap.com/wp-content/uploads/2017-07-10_14-36-29.png" width="472" height="187" /&am

highcharts 代码都对,但是不显示图片

$('#container').highcharts({ chart: { zoomType: 'xy' }, title: { text: 'Average Monthly Temperature and Rainfall in Tokyo' }, subtitle: { text: 'Source: WorldClimate.com' }, xAxis: [{ categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug

将图片转换为Framebuffer格式(终端显示图片)

要在ubuntu终端显示图片或者在板子的LCD显示图片,Framebuffer是一个简单易用的接口,直接写入像素信息即可. 但普通的图片带有头部信息或者编码格式不同,直接送入Framebuffer是显示不出来的,需要扣出像素信息,并按照Framebuffer的RGBA顺序调整好,才能显示.所以现在的问题就是,如何获取framebuffer的信息,以及如何调整图片. 第一个问题,如何获取framebuffer的信息 对于ubuntu,可以安装fbset 进行查看 sudo apt-get inst

常用的jQuery九宫格布局图片展示特效代码

jquery九宫格布局图片鼠标经过遮罩显示文字效果 jQuery图片九宫格布局鼠标悬停显示文字效果代码 jquery九宫格图片制作鼠标悬停图片滑动展示特效 jquery仿qq图片九宫格布局点击按钮图片换一换效果代码 jQuery响应式图片九宫格布局点击图片查看大图效果代码 jquery hover事件鼠标悬停九宫格图片高亮显示代码 jQuery百度新闻文字列表九宫格布局鼠标悬停文字滑动效果代码 jquery hover九宫格图片鼠标悬停上下滑动图片切换显示代码 jquery win8风格九宫格布

【OpenCV练习】简单显示图片的代码

今天依照网上的教程尝试了一下最基本的图片显示. 首先想说一下编译时出现的问题,开始时在编译时会出现无法识别cvReleaseImage的情况,是因为没有在配置中包含相应的core的库文件. 加进去就解决这个问题了. 另一个问题是在编译通过以后提示程序拒绝访问,经网上查找好像和英雄联盟有关..貌似是LOL关闭了什么调试功能,总之重启一下电脑就好了. 最后放上相应代码: #include <iostream> //#include <opencv/cv.h> //#include &l

代码: 两列图片瀑布流(一次后台取数据,图片懒加载。下拉后分批显示图片。图片高度未知,当图片onload后才显示容器)

代码: 两列图片瀑布流(一次后台取数据,无ajax,图片懒加载.下拉后分批显示图片.图片高度未知,当图片onload后才显示容器) [思路]: 图片瀑布流,网上代码有多种实现方式,也有各类插件.没找到合意的,所以根据网上找的一段代码,进行了较大改动. 需引用 zepto 或 jquery. 我这个是应用于手机上的,两列瀑布流,图片高度未知——等图片的onloaded事件触发后,才对容器进行计算和定位. 大容器是 $("#imgList"),容器格子是$(".pin"

用代码&quot;写&quot;出扫描线效果图片

我们一般采用photoshop等做图工具制作电视扫描线效果图片:首先做一个黑白相间的图案,然后用这个图案进行填充,再调整图层的模式或者透明度,效果就出来了. 现在我们不用photoshop,用css和javascript来做,方法也很简单! 步骤一. 我们先准备一张图片,以我的图片为例,命名为”青山绿水.jpg”,图片大小为1000X543. 步骤二. 在body内插入一个table表格,为表格设置class属性,值为”tvline”,设置表格的背景图片为事先准备的图片. 步骤三. 建立一个cs