Android实现图片一边的三角形边框效果
在每一个图片的某一侧都可以展示出一个三角形的边框视图,就是咱们的三角形标签视图。这个视图在电商类APP当中比较常用,使用过ebay的同学应该都还记得有些商品的左上角或者右上角都会显示一个三角形的边框,用于给人一个直观的商品正在促销,或者刚刚上线的直观感受。我们可以看看实现后的效果如下:
在真实的APP当中,我们还会加上一个SrcollView控件,这样子才可以进行不断地上下浏览。我们这里主要是为了让大家明白这个视图是该如何实现的,就不演示SrcollView控件下的做法了,直接在线性布局下做一个简单的说明。由于在线性布局上面一共具有四张图,因此咱们可以先单独编写每一个imageview的自定义view,然后<include 的语法将他们组合起来,这样可以提高UI开发的效率,进行协同工作与开发。首先咱们先实现左上角和右上角的triangle view.
在build.gradle文件当中相应地方添加如下代码,导入相应的maven库:
allprojects {
repositories {
...
maven { url "https://jitpack.io" }
}
}
之后在另一个build.gradle文件当中添加库:
dependencies {
implementation 'com.github.shts:TriangleLabelView:1.1.2'
}
咱们的前期工作就这样做好啦,现在就开始正式编写咱们的每一个三角形边框视图啦,首先是第一个位于左上角的视图
一.card_left_top.xml:
<?xml version="1.0" encoding="utf-8"?
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
<ImageView
android:id="@+id/image"
android:scaleType="centerCrop"
android:src="@drawable/s_image_2"
android:layout_width="match_parent"
android:layout_height="match_parent" /
<jp.shts.android.library.TriangleLabelView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
app:backgroundColor="@color/yellow_900"
app:corner="leftTop"
app:labelBottomPadding="5dp"
app:labelCenterPadding="0dp"
app:labelTopPadding="10dp"
app:primaryText="New"
app:primaryTextColor="@color/yellow_500"
app:primaryTextSize="16sp"
app:secondaryText="01"
app:secondaryTextColor="@color/yellow_100"
app:secondaryTextSize="11sp" /
</RelativeLayout
</android.support.v7.widget.CardView
编写好后在preview当中显示如下:
下面是位于右上角的视图
二.card_right_top.xml:
<?xml version="1.0" encoding="utf-8"?
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
<ImageView
android:id="@+id/image"
android:scaleType="centerCrop"
android:src="@drawable/s_image_4"
android:layout_width="match_parent"
android:layout_height="match_parent" /
<jp.shts.android.library.TriangleLabelView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
app:backgroundColor="@color/teal_900"
app:corner="rightTop"
app:labelBottomPadding="5dp"
app:labelCenterPadding="0dp"
app:labelTopPadding="10dp"
app:primaryText="New"
app:primaryTextColor="@color/teal_500"
app:primaryTextSize="16sp"
app:secondaryText="01"
app:secondaryTextColor="@color/teal_100"
app:secondaryTextSize="11sp" /
</RelativeLayout
</android.support.v7.widget.CardView
三.card_right_buttom.xml:
<?xml version="1.0" encoding="utf-8"?
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
<ImageView
android:id="@+id/image"
android:scaleType="centerCrop"
android:src="@drawable/s_image_3"
android:layout_width="match_parent"
android:layout_height="match_parent" /
<jp.shts.android.library.TriangleLabelView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
app:backgroundColor="@color/pink_900"
app:corner="rightBottom"
app:labelTopPadding="10dp"
app:labelCenterPadding="5dp"
app:labelBottomPadding="0dp"
app:primaryText="New"
app:primaryTextColor="@color/pink_500"
app:primaryTextSize="16sp"
app:secondaryText="01"
app:secondaryTextColor="@color/pink_100"
app:secondaryTextSize="11sp" /
</RelativeLayout
</android.support.v7.widget.CardView
四.card_left_buttom.xml:
<?xml version="1.0" encoding="utf-8"?
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
<ImageView
android:id="@+id/image"
android:src="@drawable/s_image_1"
android:scaleType="centerCrop"
android:layout_width="match_parent"
android:layout_height="match_parent" /
<jp.shts.android.library.TriangleLabelView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentBottom="true"
app:backgroundColor="@color/blue_900"
app:corner="leftBottom"
app:labelTopPadding="10dp"
app:labelCenterPadding="5dp"
app:labelBottomPadding="0dp"
app:primaryText="New"
app:primaryTextColor="@color/blue_500"
app:primaryTextSize="16sp"
app:secondaryText="01"
app:secondaryTextColor="@color/blue_100"
app:secondaryTextSize="11sp" /
</RelativeLayout
最后咱们整合一下就OK啦!整合后的主活动的代码为:
五.activity_main.xml:
<?xml version="1.0" encoding="utf-8"?
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".Fragment2"
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal"
<include android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:layout_margin="2dp"
android:id="@+id/left_top" layout="@layout/card_left_top" /
<include android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:layout_margin="2dp"
android:id="@+id/right_top" layout="@layout/card_right_top" /
</LinearLayout
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal"
<include android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:layout_margin="2dp"
android:id="@+id/left_bottom" layout="@layout/card_left_bottom" /
<include android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:layout_margin="2dp"
android:id="@+id/right_bottom" layout="@layout/card_right_bottom" /
</LinearLayout
</LinearLayout
完事儿!github源码可以在https://github.com/shts/TriangleLabelView处进行阅读!!!
帅照:
总结
以上所述是小编给大家介绍的Android实现图片一边的三角形边框效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对ZaLou.Cn网站的支持! 如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
- java教程
- Java快速入门
- Java 开发环境配置
- Java基本语法
- Java 对象和类
- Java 基本数据类型
- Java 变量类型
- Java 修饰符
- Java 运算符
- Java 循环结构
- Java 分支结构
- Java Number类
- Java Character类
- Java String类
- Java StringBuffer和StringBuilder类
- Java 数组
- Java 日期时间
- Java 正则表达式
- Java 方法
- Java 流(Stream)、文件(File)和IO
- Java 异常处理
- Java 继承
- Java 重写(Override)与重载(Overload)
- Java 多态
- Java 抽象类
- Java 封装
- Java 接口
- Java 包(package)
- Java 数据结构
- Java 集合框架
- Java 泛型
- Java 序列化
- Java 网络编程
- Java 发送邮件
- Java 多线程编程
- Java Applet基础
- Java 文档注释
- Python 常见数据结构整理
- mapreduce的二次排序-分区分组
- GATK RNA-Seq Snps Indel 分析
- 【技术创作101训练营】腾讯云主机上部署 FRP+Teamviewer 穿透内网进行远程运维
- 图像处理笔记(7)---- OpenCV 绘制无填充矩形
- 图像处理笔记(8)---- OpenCV 获取追踪对象的HSV值
- (数据科学学习手札95)elyra——jupyter lab平台最强插件集
- Python 序列化/反序列化自定义类型
- Windows10下使用VS2017编译和使用yaml-cpp库
- CentOS7下编译yaml-cpp库
- SAP Spartacus CurrentProductService返回的null对象
- SAP Spartacus产品明细页面用Observable显示产品名称
- 关于rxjs里operators filter和map的详细讨论
- 用代码查看SAP Spartacus购物车内的行项目
- rxjs的map和switchMap在SAP Spartacus中的应用