Android入门3--做一个书架

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/fww330666557/article/details/79019127

修改名称

创建项目的时候,APP的名字取为英文或者拼音,是为了简便,但是显示在界面上,我们当然希望它是中文的。

<string name="app_name">taoguan</string>

我们要做的很简单,就是在string.xml中,将app_name的内容修改为我们希望的名字:

<string name="app_name">陶罐PDF阅读器</string>

这里写图片描述

使用GridView创建书架

创建一个书架类

这里写图片描述

在主包目录上单击右键,新建一个Java Class:

这里写图片描述

添加成功后,为其添加一个构造函数,最终代码如下:

public class BookShelf extends GridView {
    public BookShelf(Context context, AttributeSet attrs){
        super(context,attrs);
    }
}

这里对于自己手动添加构造函数我是有一点疑惑的,我不知道能否自动添加,因为对于初学者来说,手动添加稍微有一点点麻烦。

添加书架和图书背景图

将准备好的两张图,加入到drawable目录下:
这里写图片描述

怎么加?我是直接将图复制到drawable文件目录下的,至于还有没有其他方式,我暂时也不清楚。其相对目录如下:

\taoguan\app\src\main\res\drawable

绘制书架背景

1、 首先将背景图加载进来

private Bitmap background;
    public BookShelf(Context context, AttributeSet attrs){
        super(context,attrs);
        background = BitmapFactory.decodeResource(getResources(),
                R.drawable.bookshelf_layer_center);
    }

2、重写dispatchDraw方法
你只要直接敲方法名,AS会给出接口提示的,直接选择:

@Override
protected void dispatchDraw(Canvas canvas) {
        super.dispatchDraw(canvas);
}

3、添加绘制代码

@Override
    protected void dispatchDraw(Canvas canvas) {
        int count = getChildCount();
        int top = count > 0 ? getChildAt(0).getTop() : 0;
        int backgroundWidth = background.getWidth();
        int backgroundHeight = background.getHeight();
        int width = getWidth();
        int height = getHeight();

        for (int y = top; y < height; y += backgroundHeight) {
            for (int x = 0; x < width; x += backgroundWidth) {
                canvas.drawBitmap(background, x, y, null);
            }
        }
        super.dispatchDraw(canvas);
    }

注意:本段代码来自网络,如有雷同,纯属抄袭。

将书架视图添加到主界面

打开主界面的布局文件,进入设计模式,先删掉helloworld那个文本视图,然后将书架视图拖动到主界面上:

这里写图片描述

注意这里的UI元素比较多,先点击Project进行过滤。
在设计界面,我们已经看到了预览效果,但是有一些错误提示,那是因为没有添加布局约束。

为书架视图添加布局约束

单击预览界面上的书架视图,右侧就会显示添加约束的界面:

这里写图片描述

这里我们希望书架的边沿没有留白,因此我们点击加号,选取数字0.
然后,再选择layout_width和layout_height为match_constraint.如下图:

这里写图片描述

设置完成后,可以看到预览效果已经发生了改变:

这里写图片描述

而模拟器上的运行效果也是类似的,完全符合我们的预期:

这里写图片描述

接下来,我们将在书架上添加图书。下节见。

展开阅读全文

没有更多推荐了,返回首页