Android使用Kotlin实现多节点进度条

时间轴主要使用Recyclerview来实现。开发语言使用Kotlin,代码相对java少了许多也简洁许多

源代码下载地址

效果图:

Android使用Kotlin实现多节点进度条

MainActivity.kt

package com.example.lee.linenode

import android.annotation.SuppressLint
import android.os.Build
import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.support.v7.widget.LinearLayoutManager
import kotlinx.android.synthetic.main.activity_main.*
import kotlinx.android.synthetic.main.item_line_node.view.*

class MainActivity : AppCompatActivity() {
 private var list = arrayListOf<StepBean>()
 private var lineNodeAdapter: LineNodeAdapter<StepBean>? = null
 override fun onCreate(savedInstanceState: Bundle?) {
 super.onCreate(savedInstanceState)
 setContentView(R.layout.activity_main)
 initRecyclerView()
 }

 private fun initRecyclerView() {
 getData()
 //创建一个继承于抽象类(LineNodeAdapter)的实例
 lineNodeAdapter = object : LineNodeAdapter<StepBean>(this, list) {
  override fun convert(viewHolder: LineNodeViewHolder, t: StepBean) {
  viewHolder.itemView.title_txt.text = t.title
  viewHolder.itemView.time_txt.text = t.time
  viewHolder.itemView.num_txt.text = t.num.toString()
  if (t.num == 1) {
   if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
   viewHolder.itemView.left_view.background = null
   }
  }
  if (t.num == 4) {
   if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
   viewHolder.itemView.right_view.background = null
   }
  }
  if (t.num < 3) viewHolder.itemView.num_txt.setBackgroundResource(R.drawable.shap_line_number_circle_red)
  }

 }
 val linearLayoutManager = LinearLayoutManager(this)
 linearLayoutManager.orientation = LinearLayoutManager.HORIZONTAL
 //使用来自主代码集的 R.layout.activity_main,而不是 findViewById(R.id.ln_recycler_view) as Recyclerview
 ln_recycler_view.layoutManager = linearLayoutManager
 ln_recycler_view.adapter = lineNodeAdapter
 }

 private fun getData() {
 for (i in 1..4) {
  list.add(StepBean(i, "2017-9-27\n17:1$i", "步骤$i"))
 }

 }
}

activity_main.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.support.v7.widget.RecyclerView
 android:id="@+id/ln_recycler_view"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_centerHorizontal="true" />

</RelativeLayout>

LineNodeAdapter.kt //RecyclerView的适配器

package com.example.lee.linenode

import android.content.Context
import android.support.v7.widget.RecyclerView
import android.support.v7.widget.RecyclerView.Adapter
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import kotlinx.android.synthetic.main.item_line_node.view.*

/**
 * Created by lee on 17-9-27.
 */
abstract class LineNodeAdapter<T>(val context: Context, val list: List<T>) : Adapter<LineNodeAdapter.LineNodeViewHolder>() {
 override fun onCreateViewHolder(parent: ViewGroup?, viewType: Int): LineNodeViewHolder {
 return LineNodeViewHolder(LayoutInflater.from(context).inflate(R.layout.item_line_node, parent, false))
 }

 override fun onBindViewHolder(viewHolder: LineNodeViewHolder, position: Int) {
 convert(viewHolder, list.get(position))
 }

 abstract fun convert(viewHolder: LineNodeViewHolder, t: T)

 override fun getItemCount(): Int {
 return list.size
 }

 class LineNodeViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
 }
}

item_line_node.xml //这个文件是时间轴item的布局文件

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:gravity="center_horizontal"
 android:orientation="vertical">

 <TextView
 android:id="@+id/title_txt"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_gravity="center_horizontal"
 android:text="步骤" />

 <LinearLayout
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_gravity="center_horizontal"
 android:gravity="center_vertical"
 android:orientation="horizontal">

 <View
  android:id="@+id/left_view"
  android:layout_width="30dp"
  android:layout_height="1dp"
  android:layout_centerVertical="true"
  android:background="#A6A6A6" />

 <TextView
  android:id="@+id/num_txt"
  android:layout_width="20dp"
  android:layout_height="20dp"
  android:background="@drawable/shap_line_number_circle_grey"
  android:gravity="center"
  android:text="1"
  android:textColor="@color/colorWhite" />

 <View
  android:id="@+id/right_view"
  android:layout_width="30dp"
  android:layout_height="1dp"
  android:layout_centerVertical="true"
  android:background="#A6A6A6" />
 </LinearLayout>

 <TextView
 android:id="@+id/time_txt"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_gravity="center_horizontal"
 android:gravity="center_horizontal"
 android:text="2017-09-27\n15:56" />
</LinearLayout>

StepBean.kt //时间节点实体类

package com.example.lee.linenode

/**
 * Created by lee on 17-9-27.
 */
class StepBean(var num: Int, var time: String, var title: String)//直接在主构造函数里声明属性

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2020-03-25

Android自定义进度条效果

最近项目中需要在一个功能模块中使用进度条,效果图如下: 上面图片从左到右分别是效果一,效果二,效果三 需求: 以下四点需要实现 1: 当没有没完成进度的时候,显示效果一 2:当进度完成了一部分,显示图二 3:当进度全部完成之后,显示效果三 4:当进度1到进度2需要动画,进度2到进度3需要动画: 同样进度3到进度2或者进度1也需要动画. 刚开始拿到这个东西的时候,考虑了老长时间,觉得还是有技巧的,先说一下思路吧 首先我们,写一个一模一样的底部布局,如下图1: 图一也就是效果一的全部显示, 图三不是

Android 七种进度条的样式

当一个应用在后台执行时,前台界面就不会有什么信息,这时用户根本不知道程序是否在执行.执行进度如何.应用程序是否遇到错误终止等,这时需要使用进度条来提示用户后台程序执行的进度.Android系统提供了两大类进度条样式,长形进度条(progress-BarStyleHorizontal) 和圆形进度条(progressBarStyleLarge).进度条用处很多,比如,应用程序装载资源和网络连接时,可以提示用户稍等,这一类进度条只是代表应用程序中某一部分的执行情况,而整个应用程序执行情况呢,则可以通

Android中实现Webview顶部带进度条的方法

写这篇文章,做份备忘,简单滴展示一个带进度条的Webview示例,进度条位于Webview上面. 示例图如下: 主Activity代码: 复制代码 代码如下: package com.droidyue.demo.webviewprogressbar; import android.app.Activity; import android.os.Bundle; import android.view.Menu; import android.view.View; import android.vi

Android实现垂直进度条VerticalSeekBar

本文实例为大家分享了Android实现垂直进度条的具体代码,供大家参考,具体内容如下 水平的进度条见多了,总会想见个垂直的进度条开开眼.今天咱就试试. 要说原理也简单,就是把宽高倒置,其他的理论上都不需要动,发现问题再补补也就行了. 官方提供 官方是提供了垂直进度条的例子源码的,位置在android-sdk-windows\sources\android-23\com\android\example\rscamera\VerticalSeekBar.java,当然首先你SDK中要有Android

android自定义进度条渐变色View的实例代码

最近在公司,项目不是很忙了,偶尔看见一个兄台在CSDN求助,帮忙要一个自定义的渐变色进度条,我当时看了一下进度条,感觉挺漂亮的,就尝试的去自定义view实现了一个,废话不说,先上图吧! 这个自定义的view,完全脱离了android自带的ProgressView,并且没使用一张图片,这样就能更好的降低程序代码上的耦合性! 下面我贴出代码  ,大概讲解一下实现思路吧! 复制代码 代码如下: package com.spring.progressview; import android.conten

Android自定义View实现加载进度条效果

上一篇文章总结了下自定义View的几个步骤,如果还有不清楚的同学可以先去看看Android自定义View(一),这篇文章和大家分享一下自定义加载进度条,效果如下 下面就以水平的进度条为列进行讲解: 1.首先还是在attrs.xml文件中自定义我们需要的属性: <?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name="GradientP

android实现音乐播放器进度条效果

本文实例为大家分享了android实现音乐播放器进度条效果的具体代码,供大家参考,具体内容如下 效果图 依赖3个对象 MediaPlayer:实现音乐播放,暂停,缓冲. SeekBar:滑动的进度条. java.util.Timer:定时器,时时更新进度条. main.xml样式文件 <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android

Android实现环形进度条

一个通俗易懂的环形进度条,可以定制颜色角度,监听进度. 定义一个attrs.xml <?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name="CircleProgressView"> <!--画笔宽度--> <attr name="progress_width" format=&q

Android自定义View实现渐变色进度条

在网上看到一个进度条效果图,非常美观,如下: 进行效果分解: 1.渐变色,看起来颜色变化并不复杂,使用LinearGradient应该可以实现. 2.圆头,无非是画两个圆,外圆使用渐变色的颜色,内圆固定为白色. 3.灰底,还没有走到的进度部分为灰色. 4.进度值,使用文本来显示: 5.弧形的头部,考虑使用直线进行连接,或者使用曲线,例如贝塞尔曲线: 我首先初步实现了进度条的模样,发现样子有了,却不太美观. 反思了一下,我只是个写代码的,对于哪种比例比较美观,是没有清晰的认识的,所以,还是参考原图

Android实现弹窗进度条效果

Android自定义进度条主要是修改ProgressBar的style,弹窗则是在Dialog里显示ProgressBar. 直接上代码. 在style.xml里加入如下代码: <style name="ProgressBar_Mini" parent="@android:style/Widget.ProgressBar.Horizontal"> <item name="android:maxHeight">50dip&l

Android自定义Material进度条效果

首先看下效果图 布局文件: <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_par

Android实现蜗牛进度条效果

友好的界面可以给用户留下深刻印象,为APP加分,今天实现的这个进度条,以蜗牛爬动的方式告诉用户当前进度,体验比较棒,这里分享一下. 这里创建一组帧动画作为进度条的标志,如下: <?xml version="1.0" encoding="utf-8"?> <animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:onesho

Android打造炫酷进度条效果

本文实例为大家分享了Android炫酷进度条效果的具体代码,供大家参考,具体内容如下 学习:视频地址 HorizontalProgressbarWithProgress的代码 import android.content.Context; import android.content.res.TypedArray; import android.graphics.Canvas; import android.graphics.Paint; import android.os.Build; imp

Android编程实现类似于圆形ProgressBar的进度条效果

本文实例讲述了Android编程实现类似于圆形ProgressBar的进度条效果.分享给大家供大家参考,具体如下: 我们要实现一个类似于小米分享中的圆形播放进度条,android自带的圆形ProgressBar是默认自动旋转的,所以无法实现,于是我们想到了使用自定义一个View,来实现这种效果. 首先来看看自己定义的View package cn.easymobi.application.bell.common; import android.content.Context; import an

Android 自定义view和属性动画实现充电进度条效果

近期项目中需要使用到一种类似手机电池充电进度的动画效果,以前没学属性动画的时候,是用图片+定时器的方式来完成的,最近一直在学习动画这一块,再加上复习一下自定义view的相关知识点,所以打算用属性动画和自定义view的方式来完成这个功能,将它开源出来,供有需要的人了解一下相关的内容. 本次实现的功能类似下面的效果: 接下来便详细解析一下如何完成这个功能,了解其中的原理,这样就能举一反三,实现其他类似的动画效果了. 详细代码请看大屏幕 https://github.com/crazyandcoder

Android开发之模仿微信打开网页的进度条效果(高仿)

一,为什么说是真正的高仿? 阐述这个问题前,先说下之前网上的,各位可以复制这段字,去百度一下  "仿微信打开网页的进度条效果" ,你会看到有很多类似的文章,不过他们有个共同点,就是实现方法都是一样的,而且,都忽略了微信加载网页时,进度条的缓慢动画效果,它不是生硬地一滑而过,而是用户体验很好,有个速度的变化,由慢到快的效果,语言难于描述,相信各位都有下载微信,可以随便打开个公众号的文章看看效果. 好了,上面说到,之前网上的方法都是都忽略了微信加载网页时,进度条的缓慢动画效果,实现代码也是

Javascript+CSS3实现进度条效果

进度条在很多web中都能用的到,本文就是介绍了进度条效果,具体代码如下: 一:css2 属性clip实现网页进度条: 在实现之前,我们先来介绍一下clip属性,因为这个属性在css2.1中很少使用到,所以我们有必要来了解一下: 浏览器支持程度:所有主流浏览器都支持 clip 属性. Clip属性在w3c官网是这样描述的:通过对元素进行裁剪来控制元素的可视区域,默认情况下 元素是不进行任何裁剪的. Clip裁剪的语法如下: .xx {clip:rect(<top>, <right>,

Android studio圆形进度条 百分数跟随变化

本文实例为大家分享了Android studio圆形进度条展示的具体代码,供大家参考,具体内容如下 MainActivity import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.View; import android.widget.Button; public class MainActivity extends AppCompatActivity impl

使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果

ReactJS是Facebook推出的产品.在2013年的Qcon大会(上海)上面,当时Facebook的前端工程师做过一次讲座,就专门介绍了ReactJS. ReactJS可以看做就是用来Render的.ReactJS是可以达到游戏级别的渲染,fps可以保持在60左右,相当的了不起,它做了一个虚拟dom tree加速了渲染过程,根据当时的数据说比angularjs快20%以上. 前沿 对于React, 去年就有耳闻, 挺不想学的, 前端那么多东西, 学了一个框架又有新框架要学

ASP.NET实现进度条效果

我们先看下进度条效果 我点击了按钮后他会显示进度页面,进度完成后,进度条消失,其实也是比较简单的了. 我们需要一个进度条代码文件ProgressBar.htm(注意:是没有head这些标签的) <script language="javascript"> function SetPorgressBar(pos) { //设置进度条居中 var screenWidth = document.body.offsetWidth; ProgressBarSide.style.wid