新闻列表

添加新闻列表可以使用RecyclerView。但是有个问题,RecyclerView只会在内部滚动,不会带动整个屏幕滚动。所以在原根布局外层添加androidx.core.widget.NestedScrollView,并且在原先根局部,添加android:descendantFocusability,解决进入页面跳入页面底部的问题。

·添加RecyclerView

  1. <androidx.recyclerview.widget.RecyclerView
  2. android:id="@+id/homepage_news_container"
  3. android:layout_width="match_parent"
  4. android:layout_height="wrap_content"
  5. android:layout_below="@+id/homepage_line5"
  6. android:layout_marginTop="10dp"/>

·新建RecyclerView三种item样式,分别表示推荐文章图片,一般文章标题和下划线

fragment_home_news_item_recommand.xml

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:orientation="vertical" android:layout_width="match_parent"
  4. android:layout_height="wrap_content">
  5. <ImageView
  6. android:id="@+id/homepage_news_item_recommand"
  7. android:layout_width="match_parent"
  8. android:layout_height="120dp"
  9. android:layout_marginLeft="10dp"
  10. android:layout_marginRight="10dp"
  11. android:scaleType="centerCrop"/>
  12.  
  13. </LinearLayout>

fragment_home_news_item_normal.xml

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:orientation="horizontal" android:layout_width="match_parent"
  4. android:layout_height="wrap_content"
  5. android:layout_margin="10dp">
  6. <ImageView
  7. android:id="@+id/homepage_news_item_image"
  8. android:layout_width="45dp"
  9. android:layout_height="45dp"
  10. android:layout_marginRight="10dp" /><!--android:background="@drawable/borders1"-->
  11. <TextView
  12. android:id="@+id/homepage_news_item_text"
  13. android:layout_width="0dp"
  14. android:layout_height="45dp"
  15. android:layout_weight="1"
  16. android:text="test"
  17. android:gravity="center_vertical" />
  18.  
  19. </LinearLayout>

fragment_home_news_item_line.xml

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:orientation="vertical" android:layout_width="match_parent"
  4. android:layout_height="wrap_content"
  5. android:paddingRight="10dp"
  6. android:paddingLeft="10dp">
  7. <ImageView
  8. android:layout_width="match_parent"
  9. android:layout_height="2dp"
  10. android:background="#f8f8f8"/>
  11. </LinearLayout>

·新建HomePageNewsAdapter

  1. class HomePageNewsAdapter:RecyclerView.Adapter<RecyclerView.ViewHolder>() {
  2. //定义两种类型item
  3. private val TYPE_RECOMMAND=0
  4. private val TYPE_NORMAL=1
  5. private val TYPE_LINE=2
  6. override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): RecyclerView.ViewHolder {
  7. var holder:RecyclerView.ViewHolder?=null
  8. when(viewType){
  9.  
  10. TYPE_RECOMMAND->holder= HomePageViewHolder(LayoutInflater.from(parent.context).inflate(R.layout.fragment_home_news_item_recommand,parent,false))
  11. TYPE_NORMAL->holder=return HomePageViewHolder(LayoutInflater.from(parent.context).inflate(R.layout.fragment_home_news_item_normal,parent,false))
  12. TYPE_LINE->holder=return HomePageViewHolder(LayoutInflater.from(parent.context).inflate(R.layout.fragment_home_news_item_line,parent,false))
  13. }
  14. return holder!!
  15. //return HomePageViewHolder(LayoutInflater.from(parent.context).inflate(R.layout.fragment_home_news_item_normal,parent,false))
  16. }
  17.  
  18. override fun getItemCount(): Int {
  19. return 11
  20. }
  21.  
  22. var titles= listOf("标题1","标题2","标题三","标题四","标题五")
  23. var imageIds=listOf(R.drawable.news_title1,R.drawable.news_title2,R.drawable.news_title3,R.drawable.news_title4,R.drawable.news_title5)
  24.  
  25. override fun onBindViewHolder(holder: RecyclerView.ViewHolder, position: Int) {
  26. var type:Int=holder.itemViewType
  27. when(type){
  28. TYPE_RECOMMAND->{
  29. var imageView:ImageView=holder.itemView.findViewById(R.id.homepage_news_item_recommand)
  30. imageView.setImageResource(R.drawable.news_recommand)
  31. }
  32. TYPE_NORMAL->{
  33. var textView: TextView =holder.itemView.findViewById(R.id.homepage_news_item_text)
  34. textView.text=titles[position/2-1]
  35. var imageView:ImageView=holder.itemView.findViewById(R.id.homepage_news_item_image)
  36. imageView.setImageResource(imageIds[position/2-1])
  37. }
  38. TYPE_LINE->{
  39.  
  40. }
  41. }
  42.  
  43. }
  44.  
  45. //item类型
  46. override fun getItemViewType(position: Int): Int {
  47. var type:Int=-1
  48. if(position==0){
  49. type=TYPE_RECOMMAND
  50. }else if(position%2==1){
  51. type=TYPE_LINE
  52. }else if (position%2==0) {
  53. type = TYPE_NORMAL
  54. }
  55. return type
  56. }
  57.  
  58. class HomePageViewHolder(itemView: View) :RecyclerView.ViewHolder(itemView){
  59.  
  60. }
  61. }

·在HomePageFragment中定义变量,赋值

  1. homepage_news_container.layoutManager=LinearLayoutManager(context)
  2. homepage_news_container.adapter=HomePageNewsAdapter()

这样基本的效果就有了。有个问题是我想把标题文字旁边的图片做成圆形的

简单的方法是PS一下,截取圆的部分,背景透明;用编程实现好像有点复杂,我试过为ImageView定义一个圆形的背景,但是添加图片,大概会把原来定义好的背景覆盖掉。

一种android中实现“圆角矩形”的方法提供了有效的方法

关于canvas的文章

Android 圆角、圆形 ImageView 实现

Android知识总结——Path常用方法解析

测试一下,先来个简单的

  1. class NiceImageView: ImageView {
  2. private var radiusArray:FloatArray=FloatArray(8,{0f})//绘制区域,加圆角的横轴半径,纵轴半径组成的数组
  3. //private var radiusArray= floatArrayOf(0f,0f,0f,0f,0f,0f,0f,0f)
  4. //private var radiusArray=FloatArray(8)
  5. constructor(context: Context) : super(context) {
  6.  
  7. }
  8.  
  9. constructor(context: Context, attrs: AttributeSet) : super(context, attrs) {
  10.  
  11. }
  12. constructor(context: Context,attrs:AttributeSet,defAttrStyle:Int):super(context,attrs,defAttrStyle){
  13.  
  14. }
  15.  
  16. constructor(context: Context,attrs:AttributeSet,defAttrStyle:Int,defStyleSet:Int):super(context,attrs,defAttrStyle,defStyleSet) {
  17. }
  18.  
  19. // fun setRound(letTop:Float,rightTop:Float,rigthBottom:Float,leftBottom: Float){
  20. // radiusArray.set(0,letTop)
  21. // radiusArray.set(1,letTop)
  22. // radiusArray.set(2,rightTop)
  23. // radiusArray.set(3,rightTop)
  24. // radiusArray.set(4,rigthBottom)
  25. // radiusArray.set(5,rigthBottom)
  26. // radiusArray.set(6,leftBottom)
  27. // radiusArray.set(7,leftBottom)
  28. // }
  29.  
  30. override fun onDraw(canvas: Canvas?) {
  31. var path:Path= Path()
  32. //toFloat和as Float是不一样
  33. // path.addRoundRect(RectF(0f,0f,width.toFloat(),height.toFloat()),radiusArray,Path.Direction.CW)//Path.Direction.CW按顺时针,Path.Direction.CCW按逆时针;
  34. // canvas!!.clipPath(path)
  35. path.addCircle(width/2.toFloat(),height/2.toFloat(),width/2.toFloat(),Path.Direction.CW)
  36. canvas!!.clipPath(path)
  37. super.onDraw(canvas)
  38. }
  39.  
  40. }

布局文件

  1. <com.vocus.canvas.NiceImageView
  2. android:id="@+id/image1"
  3. android:layout_width="80dp"
  4. android:layout_height="80dp" />

使用

image1.setImageResource(R.drawable.berry)

效果

(这个图背景是白色,锯齿不太明显,但是换成其他颜色背景图,就会有明显锯齿)

这里图片来源必须是src不能说设置成背景图片

这种方法有个缺点是不能抗锯齿

抗锯齿的代码是这样

  1. var srcRectf=RectF(0f,0f,width.toFloat(),height.toFloat()) //原始图片Rect
  2. canvas!!.saveLayer(srcRectf,null)//创建一个新图层
  3. super.onDraw(canvas)//调用父类方法把canvas绘制在创建的图层上
  4. //绘制圆
  5. var path:Path= Path()
  6. path.addCircle(width/2.toFloat(),height/2.toFloat(),height/2.toFloat(),Path.Direction.CW)
  7. var paint=Paint(Paint.ANTI_ALIAS_FLAG)//画笔抗锯齿
  8. paint.style=Paint.Style.FILL
  9. paint.xfermode=PorterDuffXfermode(PorterDuff.Mode.DST_IN) //PorterDuff颜色渲染器,来源人名。MODE_SRC_IN取两层绘制交集,显示上层,Mode_DST_IN取交集,显示下层
  10. canvas.drawPath(path,paint)
  11.  
  12. paint.xfermode=null
  13.  
  14. canvas.restore()//恢复

效果

其实跟PS差不多。。。有些图片不规则,所以最好设置一下imageView的属性android:scaleType="centerCrop"

还有可以设置一下边框,遮罩层什么的。这里就不弄了

主页界面这样就算做完了吧

源码

链接:https://pan.baidu.com/s/11pmbo_O4L9qDI7bqdPvzKw
提取码:te93

尝试用kotlin做一个app(三)的更多相关文章

  1. 尝试用kotlin做一个app(写在前面)

    学kotlin的目的好像就是做一个app,不一定有什么想做的项目,只是单纯想掌握这一门技术,确切地说只是单纯想学会做app.对于概念的东西,我也没兴趣深究,用得到的学一下,用不到的,就算了.我也不知道 ...

  2. 尝试用kotlin做一个app(二)

    导航条 我想实现的效果是这样的 类似于ViewPager的效果,子类导航页面可以滑动,当滑动某个子类导航页面,导航线会平滑地向父类导航移动 ·添加布局 <!--导航分类:编程语言/技术文档/源码 ...

  3. 尝试用kotlin做一个app(五)

    JSP后台管理系统 开发工具是IntelliJ IDEA+tomcat+mysql5.6.19+mysql-connector-java-5.1.48.jar+easyui+kindeditor 之前 ...

  4. 尝试用kotlin做一个app(四)

    本来是应该为主页加载数据库数据了,但是想着做后台,之前写jsp后台写吐了,所以先拖几天.把之前的代码完善一下,或者添加些新内容. ...... 多个fragment切换卡顿 首先修正一个bug.从主页 ...

  5. 尝试用kotlin做一个app(一)

    1.先添加一下anko库 依赖:implementation "org.jetbrains.anko:anko:$anko_version" 版本:ext.anko_version ...

  6. 涨姿势:创业做一个App需要花多少钱(8个人,6个月,就要100万,附笔记心得)

    (原标题:涨姿势:创业做一个App要花多少钱?) 作为互联网从业者,被外行的朋友们问及最多的问题是,“做一个网站需要多少钱?”或者“做一个APP需要多少钱?”. 作为做过完整网站项目和APP的人,今天 ...

  7. 创业成本?亲身经历告诉你做一个app要多少钱

    导语:作为一名苦逼的移动互联网创业者,被外行的朋友们问及最多的问题是“做一个网站需要多少钱?”或者“做一个APP需要多少钱?” 作为一名苦逼的移动互联网创业者,被外行的朋友们问及最多的问题是“做一个网 ...

  8. 做一个 App 前需要考虑的几件事

    做一个 App 前需要考虑的几件事  来源:limboy的博客   随着工具链的完善,语言的升级以及各种优质教程的涌现,做一个 App 的成本也越来越低了.尽管如此,有些事情最好前期就做起来,避免当 ...

  9. 做一个App前需要考虑的几件事

    本文转载于文章原文链接,版本归原作者所有! 随着工具链的完善,语言的升级以及各种优质教程的涌现,做一个 App 的成本也越来越低了.尽管如此,有些事情最好前期就做起来,避免当 App 有了一定规模后, ...

随机推荐

  1. firewalld学习--维护命令

    启动 systemctl start firewalld 停止 systemctl stop firewalld 重启 systemctl restart firewalld 查询状态 systemc ...

  2. 【题集】k倍区间(抽屉原理)

    例1:http://lx.lanqiao.cn/problem.page?gpid=T444 蓝桥杯 问题描述 给定一个长度为N的数列,A1, A2, ... AN,如果其中一段连续的子序列Ai, A ...

  3. 图像检索:CEDD(Color and Edge Directivity Descriptor)算法 颜色和边缘的方向性描述符

    颜色和边缘的方向性描述符(Color and Edge Directivity Descriptor,CEDD) 本文节选自论文<Android手机上图像分类技术的研究>. CEDD具有抽 ...

  4. spring#事件发布订阅

    1. 如果在应用中发生了某些事件,事件会被拦截和处理就好了,这样就有了很大的灵活性,至少代码不会紧密的耦合在一起, 代码的解耦就是业务的解耦,业务A的代码不用手动的调用业务B的代码,业务B只需要监听相 ...

  5. 剑指offer圆圈中最后剩下的数字 和 迭代器总结

    迭代器只有++ ,--,==,!=四种运算方法,不能将iter = iteration+ 1,因为迭代器是指针类型,1是整数类型,不能直接相加赋值给一个指针. 题目描述 每年六一儿童节,牛客都会准备一 ...

  6. Redis详解(五)——主从复制

    Redis详解(五)--主从复制 面临问题 机器故障.我们部署到一台 Redis 服务器,当发生机器故障时,需要迁移到另外一台服务器并且要保证数据是同步的.而数据是最重要的,如果你不在乎,基本上也就不 ...

  7. System.Data.SqlClient.SqlException: 'Incorrect syntax near 'OFFSET'.

    https://www.nopcommerce.com/boards/t/54586/410-not-running-on-local-system.aspx#209684 Hello, I was ...

  8. vue+ui

    一.elementui import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.u ...

  9. JPA#OneToOne

    无力吐槽. 一对一,一个人有一个身份证号码.一个人有一条命,类似于这一种的就是一对一的关系. 涉及到的注解两个: OneToOne JoinColumn( name="当前实体对应数据库表中 ...

  10. 如何将sql文件导入数据库

    打开navicat.exe,点击打开数据库,右键-运行SQL文件,选中要运行的sql文件,确定后再点击表即可. 注意:此次改变后,源sql文件可以转移路径