Android Material UI控件之ShapeableImageView

简介: Android Material UI控件之ShapeableImageView

效果图


image.gif



Android Material UI控件之ShapeableImageView



前言


你有使用过Material中的UI控件吗?为什么要使用它们,相对于原来的控件优势在哪里?


 相信你看到这篇文章也会有所疑问,第一个问题就不用说了,那么从第二问题开始回答,Android官方为开发者提供了许多丰富的UI控件,Material 组件就是包含了这些控件的一套工具,多数时候使用它可以满足我们日常开发UI的需求,提高效率。优势就在于它比原来的控件更加的强大,比如说我们平时要是像显示一个圆形的头像,需要怎么做呢?你可能会使用第三方库,Glide或者CircleImageView等一些开源库,或者你会自定义ImageView来实现,那么如果我告诉你Material 中的ImageView可以不需要自定义和使用第三方库就能够实现圆形图片或其他一些形状的图片呢?这样是否证明它更强大?是否能提高你的开发效率呢?听了这么多的废话远不如实践得劲,其实我也是这么想的,但是我得让你知道为什么才行,这才是写文章的目的。下面是正文了。



# 使用步骤 ## 1.引入库 首先,新建一个项目或在原有的项目上操作。因为我是打算写一个Material UI系列文章的,所以我会新建一个项目。


在app下的build.gradle中的dependencies闭包中增加如下依赖,然后Sync,同步到项目中。


implementation 'com.google.android.material:material:1.2.0'


以上均属于基本操作,下面才是见证骚操作的时候。


1.基本使用


首先在布局中新增一个ShapeableImageView。


20200911122807257.png


你只要输入一个


<com.google.android.material.imageview.ShapeableImageView
        android:id="@+id/siv_wallpaper"
        android:src="@drawable/pic_wallpaper"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>


图片pic_wallpaper如下:


20200911123516368.png


在布局预览中可以看到它并没有占满布局


20200911123602779.png


你预览的效果实际就是你运行的效果,这并不是我想要的,然后增加一个scaleType属性来改变一下


android:scaleType="fitXY"

20200911123824400.png


fitXY只是其中的一个类型,如何查看其它类型呢?

20200911124213347.png


① scaleType属性简介


下面针对于scaleType的八种属性来进行简单的说明。


默认的图片,可以看到,高度占满了,没有占满宽度。


20200911125217970.png


  • fitXY


  图片等比缩放到完全填充控件,图片宽高比和控件宽高比一致,则不变形;不一致,则会变形。


  使用了fitXY,将宽度进行了拉伸,占满屏幕宽度


20200911125352120.png


fitCenter


 等比例缩放,此类型为ScaleType默认模式(无选择任何类型的时候默认为此类型),图片宽高比和控件宽高比一致,则填满控件显示,居中显示,即缩放后的图片的中点和控件中点重叠,图片宽高比和控件宽高比不一致,则等比缩放图片最长边,直到和控件宽或高一边重叠,这种情况可会出现左右或者上下空白。


 使用了fitCenter,效果等同于你默认的效果。

20200911125217970.png


  • fitStart


  等比例缩放,图片宽高比和控件宽高比一致,则填满控件显示,图片宽高比和控件宽高比不一致,则等比缩放图片最长边,直到和控件宽或高任意一边重叠,这种情况会出现右边或者下边空白。


  使用了fitStart,效果如下,出现了右边的留白。

20200911143343557.png


center


 控件中心和原始图片中心重叠,图片不进行缩放,只显示控件区域的内容。如果原始图片宽高都小于控件宽高,则看起来的效果和居中显示一样。


 使用了center,效果如下,控件的重心和图片重心重合,看起来像是放大了,实际上是高度比控件要高,所以重新定位了重心所以左右的留白会比默认的小。


20200911144103445.png


centerCrop


 控件中心和原始图片中心重叠,等比例缩放,原图比例和控件比例一致,则填满控件,如果原图比例大于控件比例,则按照控件高/图片高进行等比例缩放,这样就能保证图片宽度在进行同等比例缩放的时候,图片宽度大于或等于控件的宽度,如果原图比例小于控件比例,则按照控件宽/图片宽进行等比例缩放,这样就能保证图片高度在进行同等比例缩放的时候,图片高度大于或等于控件的高度。


 使用了centerCrop,效果如下,高度和宽度都进行了中心缩放。


20200911150511255.png


CenterInside


 如果图片宽(或高)大于控件宽(或)则等比例缩小,显示效果和FitCenter一样。如果图片宽高都小于控件宽高则直接居中显示

 使用了CenterInside,效果如下,和默认的效果没有区别,这是因为图片的高是比控件要高。


20200911150813926.png


matrix


对图片的放缩策略和显示方式采用matrix方式,即矩阵变换,例如我们想让一张图宽度与屏幕保持一致,高度等比放缩,并且顶部与ImageView顶部对齐。这种方式不能通过给定的默认方式做到。


 使用了matrix,效果如下


20200911152937170.png


以上为基本用显示用法


1.样式使用


样式就是在Style中新建即可,比如


  <!-- 圆角图片 -->
    <style name="roundedCornerStyle">
        <item name="cornerFamily">rounded</item>
        <item name="cornerSize">12dp</item>
    </style>


OK,下面放入一个用来显示的图片。


20200927112511414.png


最喜欢的还是海贼王,蒙奇.D.路飞。


然后我在MainActivity的布局中,放入了一个按钮


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">
    <Button
        android:text="ShapeableImageView"
        android:textAllCaps="false"
        android:onClick="onClick"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
</LinearLayout>


代码中跳转到ShapeableImageViewActivity里面,这是一个Activity


20200927163018322.png


然后来看它的布局。


然后修改布局的代码:为了方便对比我用了一个滚动条,里面包裹一个线性布局,布局里面就是用来演示的效果图,布局代码如下:


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".ShapeableImageView">
    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center_horizontal"
            android:orientation="vertical">
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="10dp"
                android:text="正常图片"
                android:textColor="#000" />
            <com.google.android.material.imageview.ShapeableImageView
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:src="@mipmap/test" />
            <!--圆角图片-->
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="10dp"
                android:text="圆角图片"
                android:textColor="#000" />
            <com.google.android.material.imageview.ShapeableImageView
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:src="@mipmap/test"
                app:shapeAppearanceOverlay="@style/roundedImageStyle" />
        </LinearLayout>
    </androidx.core.widget.NestedScrollView>
</LinearLayout>


① 圆角图片


这个里面用到一个样式,可以直接在styles.xml中增加如下代码:


  <!-- 圆角图片 -->
    <style name="roundedImageStyle">
        <item name="cornerFamily">rounded</item>
        <item name="cornerSize">24dp</item>
    </style>


好了,直接来运行吧。


20200927141225181.png


可以看到,圆角已经出来了,是不是很奈斯呢?嗯?当然还有不同的用法。刚才我设置样式中的cornerSize的属性值为24dp。cornerFamily的属性值为rounded。表示有弧度。那么假如我要变成圆角图片呢?


② 圆形图片


先来看这个样式


  <!-- 圆形图片 -->
    <style name="circleImageStyle">
        <item name="cornerFamily">rounded</item>
        <item name="cornerSize">50%</item>
    </style>


cornerSize设置为50%,表示为VIew的一半的值进行处理。那么就会有圆形图片了。


在布局中增加如下代码,然后运行一下。


<!--圆形图片-->
<com.google.android.material.imageview.ShapeableImageView
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:src="@mipmap/test"
                app:shapeAppearanceOverlay="@style/circleImageStyle" />

20200927141824297.png


是不是简简单单。


其实不光是圆角,还有切角。


③ 切角图片


先增加一个样式


  <!-- 切角图片 -->
    <style name="cutImageStyle">
        <item name="cornerFamily">cut</item>
        <item name="cornerSize">24dp</item>
    </style>


然后增加一个图片


<!--切角图片-->
<com.google.android.material.imageview.ShapeableImageView
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:src="@mipmap/test"
                app:shapeAppearanceOverlay="@style/cutImageStyle" />


再运行。

2020092714204048.png


这就做出来了,而我只是简单的把cornerFamily的属性值改为cut就可以了。


那么同样我们吧这个cut状态下的cornerSize设置为50%,那就是菱形图片了。


④ 菱形图片


添加样式


  <!-- 菱形图片 -->
    <style name="diamondImageStyle">
        <item name="cornerFamily">cut</item>
        <item name="cornerSize">50%</item>
    </style>


添加图片

<!--菱形图片-->
<com.google.android.material.imageview.ShapeableImageView
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:src="@mipmap/test"
                app:shapeAppearanceOverlay="@style/diamondImageStyle" />


20200927142412393.png



上面的属于基本用法,其实你还可以这样玩。


⑤ 单圆角图片


添加样式


  <!--单圆角图片-->
    <style name="singleRoundedImageStyle">
        <item name="cornerFamilyTopLeft">rounded</item>
        <item name="cornerSizeTopLeft">50%</item>
    </style>


这个意思很明显cornerFamilyTopLeft,左上角为圆角,指定弧度cornerSizeTopLeft为50%。


然后添加图片


<!--单圆角图片-->
<com.google.android.material.imageview.ShapeableImageView
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:src="@mipmap/test"
                app:shapeAppearanceOverlay="@style/singleRoundedImageStyle" />


运行

20200927143645740.png


⑥ 双圆角图片(子弹图片)


添加样式


  <!--子弹图片-->
    <style name="bulletImageStyle">
        <item name="cornerFamilyTopLeft">rounded</item>
        <item name="cornerFamilyTopRight">rounded</item>
        <item name="cornerSizeTopLeft">50%</item>
        <item name="cornerSizeTopRight">50%</item>
    </style>


也是一看就懂,


添加图片

20200927144258943.png



这种双圆角比较丑,再来改变一下就会好看一些


  <!--双弧度图片-->
    <style name="doubleArcStyle">
        <item name="cornerFamilyTopLeft">rounded</item>
        <item name="cornerFamilyBottomRight">rounded</item>
        <item name="cornerSizeTopLeft">50%</item>
        <item name="cornerSizeBottomRight">50%</item>
    </style>


添加图片

<!--双弧度图片-->
<com.google.android.material.imageview.ShapeableImageView
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:src="@mipmap/test"
                app:shapeAppearanceOverlay="@style/doubleArcStyle" />


运行


20200927144616573.png

⑦ 标签图片


  <!--标签图片-->
    <style name="TipImageStyle">
        <item name="cornerFamilyTopLeft">rounded</item>
        <item name="cornerFamilyBottomRight">rounded</item>
        <item name="cornerSizeTopLeft">50%</item>
        <item name="cornerSizeBottomRight">50%</item>
        <item name="cornerFamilyTopRight">cut</item>
        <item name="cornerFamilyBottomLeft">cut</item>
        <item name="cornerSizeTopRight">24dp</item>
        <item name="cornerSizeBottomLeft">24dp</item>
    </style>


添加图片


<!--标签图片-->
<com.google.android.material.imageview.ShapeableImageView
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:src="@mipmap/test"
                app:shapeAppearanceOverlay="@style/TipImageStyle" />

20200927145036577.png


我相信你已经会玩了。


⑧ 头像图片


头像常规的就是一个圆形的,然后外边有一个边框。圆形的样式之前已经写了,那么只需要边框就可以了。边框就更简单了。


<com.google.android.material.imageview.ShapeableImageView
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:padding="2dp"
                android:src="@mipmap/test"
                app:shapeAppearanceOverlay="@style/circleImageStyle"
                app:strokeColor="#000"
                app:strokeWidth="4dp" />


可以看到,它比常规的图片多了三个属性


android:padding="2dp"
app:strokeColor="#000"
app:strokeWidth="4dp"


这里我为什么要填充呢?这是因为strokeWidth的宽度表示内外各2dp。如果不设置padding=“2dp”,就会出现这样的效果


20200927152712212.png


所以可以看到,上下左右都少了2dp,那么就要加上,加上之后:


20200927152824452.png


效果不错吧!


然后滚动一下,看一下效果。


image.gif



2. 样式解读


你以为这就完了吗?当然木有,我相信从上述的使用过程中,你已经知道怎么设置相应的样式来显示效果了,但是还是得说明一下,各个样式代表的意思,那么去哪里看呢?当然是源码啦。首先把项目的模式切换为project,如果你是得话当我没说。

然后展开这个目录

20200927153728958.png


它里面都是一些项目中的依赖库。然后在里面找到


20200927153801674.png


再展开。找到这个values文件


20200927153851461.png


打开里面的value.xml


2020092715390861.png


然后Ctrl + F 搜索当前页,输入ShapeableImageView,找到如下图所示的地方


<declare-styleable name="ShapeableImageView">
    <attr name="strokeWidth"/>
    <attr name="strokeColor"/>
    <!-- Shape appearance style reference for ShapeableImageView. Attribute declaration is in the
         shape package. -->
    <attr name="shapeAppearance"/>
    <!-- Shape appearance overlay style reference for ShapeableImageView. To be used to augment
         attributes declared in the shapeAppearance. Attribute declaration is in the shape package.
         -->
    <attr name="shapeAppearanceOverlay"/>
  </declare-styleable>


<declare-styleable name="ShapeAppearance">
    <!-- Corner size to be used in the ShapeAppearance. All corners default to this value -->
    <attr format="dimension|fraction" name="cornerSize"/>
    <!-- Top left corner size to be used in the ShapeAppearance. -->
    <attr format="dimension|fraction" name="cornerSizeTopLeft"/>
    <!-- Top right corner size to be used in the ShapeAppearance. -->
    <attr format="dimension|fraction" name="cornerSizeTopRight"/>
    <!-- Bottom right corner size to be used in the ShapeAppearance. -->
    <attr format="dimension|fraction" name="cornerSizeBottomRight"/>
    <!-- Bottom left corner size to be used in the ShapeAppearance. -->
    <attr format="dimension|fraction" name="cornerSizeBottomLeft"/>
    <!-- Corner family to be used in the ShapeAppearance. All corners default to this value -->
    <attr format="enum" name="cornerFamily">
      <enum name="rounded" value="0"/>
      <enum name="cut" value="1"/>
    </attr>
    <!-- Top left corner family to be used in the ShapeAppearance. -->
    <attr format="enum" name="cornerFamilyTopLeft">
      <enum name="rounded" value="0"/>
      <enum name="cut" value="1"/>
    </attr>
    <!-- Top right corner family to be used in the ShapeAppearance. -->
    <attr format="enum" name="cornerFamilyTopRight">
      <enum name="rounded" value="0"/>
      <enum name="cut" value="1"/>
    </attr>
    <!-- Bottom right corner family to be used in the ShapeAppearance. -->
    <attr format="enum" name="cornerFamilyBottomRight">
      <enum name="rounded" value="0"/>
      <enum name="cut" value="1"/>
    </attr>
    <!-- Bottom left corner family to be used in the ShapeAppearance. -->
    <attr format="enum" name="cornerFamilyBottomLeft">
      <enum name="rounded" value="0"/>
      <enum name="cut" value="1"/>
    </attr>
  </declare-styleable>


可以看到里面只有四个样式,有三个我们在上面就已经用到了。


strokeWidth 描边宽度,(内外描边,需要设置一半的值为填充)


strokeColor 描边颜色,常规颜色就可以。


shapeAppearance ShapeableImageView的外观形状样式,需要设置Style。


shapeAppearanceOverlay ShapeableImageView的外观形状叠加样式,需要设置Style。


shapeAppearance和shapeAppearanceOverlay我感觉差不太多,如果单独使用的话,可以互相切换,一起使用可能就不一样了。


比如


20200927155041561.png


可以看到我设置两个属性,但是shapeAppearanceOverlay是作为最终显示效果的。shapeAppearance设置的为圆角,shapeAppearanceOverlay设置为圆形,结果显示的就是圆形,你要是不信邪,就自己也是试一下。


说到样式,也要详细的说一下:


20200927155253473.png


比如这个圆角图片,我们看到cornerFamily的属性是rounded,其实它只有两个属性值。另一个是cut,也就是说只有圆角和切角,默认是上下左右。而cornerSize代表大小,也是默认上下左右。


cornerFamilyTopLeft 左上的形状

cornerSizeTopLeft 左上的的大小


其他形状参考这个来设置就可以了。


3. 总结


这种图片的用法,还是比较不错的,通过简单的代码就可以实现效果,同时显示网络图片也是没问题的。OK,就到这里了。最后注意一点,在低版本的Andoid设备上可能不会生效哦!


相关文章
|
4天前
|
C# 开发者 Windows
基于Material Design风格开源、易用、强大的WPF UI控件库
基于Material Design风格开源、易用、强大的WPF UI控件库
|
2天前
|
Android开发 算法 架构师
android的基础ui组件,这些知识点你会吗
android的基础ui组件,这些知识点你会吗
android的基础ui组件,这些知识点你会吗
|
2天前
|
Android开发 缓存 双11
android的基础ui组件,Android开发社招面试经验
android的基础ui组件,Android开发社招面试经验
android的基础ui组件,Android开发社招面试经验
|
3天前
|
XML Java Android开发
Android控件动态使用 (转)
Android控件动态使用 (转)
10 1
|
4天前
|
前端开发 Java Android开发
Android UI底层绘制原理
Android UI底层绘制原理
14 0
|
4天前
|
Java Android开发
Android Mediatek 禁用拨号应用的部分UI显示
Android Mediatek 禁用拨号应用的部分UI显示
12 0
|
3天前
|
编解码 Android开发 UED
安卓UI/UX设计原则:打造引人入胜的用户体验
【4月更文挑战第13天】本文探讨了安卓UI/UX设计的关键原则,包括一致性、简洁性、反馈、清晰性、效率和适应性。一致性要求视觉和行为保持一致,利用系统UI;简洁性减少用户行动,简化导航;反馈需即时且明确;清晰性强调表达清晰,布局有序;效率关注性能优化和任务简化;适应性涉及多设备适配和用户多样性。遵循这些原则,可创建出色应用,提供无缝用户体验。设计应持续迭代,适应技术发展和用户需求。
|
4天前
|
XML 移动开发 Android开发
构建高效安卓应用:采用Jetpack Compose实现动态UI
【4月更文挑战第10天】 在现代移动开发中,用户界面的流畅性和响应性对于应用的成功至关重要。随着技术的不断进步,安卓开发者寻求更加高效和简洁的方式来构建动态且吸引人的UI。本文将深入探讨Jetpack Compose这一革新性技术,它通过声明式编程模型简化了UI构建过程,并提升了性能与跨平台开发的可行性。我们将从基本概念出发,逐步解析如何利用Jetpack Compose来创建具有数据动态绑定能力的安卓应用,同时确保应用的高性能和良好用户体验。
21 0
|
4天前
|
前端开发 搜索推荐 开发者
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
33 0
|
4天前
|
JavaScript 前端开发 开发者
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
18 0

热门文章

最新文章