Android自定义时间轴的实现过程

本文讲述Android自定义时间轴的实现过程,供大家参考,具体内容如下

相关视频链接:
Android自定义控件系列
http://edu.csdn.net/course/detail/3719/65396
Android视频全系列
http://edu.csdn.net/course/detail/2741/43163

时间轴效果,实际上非常简单,就是listView中一个又一个的条目而已….大家可以只关注一个条目。
首先展示一个条目的布局效果

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="75dp"
 android:orientation="horizontal" >

 <!-- 线条部分 -->

 <LinearLayout
 android:layout_width="wrap_content"
 android:layout_height="match_parent"
 android:gravity="center_horizontal"
 android:orientation="vertical"
 android:paddingLeft="30dp" >

 <View
 android:layout_width="3dp"
 android:layout_height="20dp"
 android:background="#88000000" />

 <com.example.time.TimeView
 android:src="@drawable/ic_launcher"
 android:id="@+id/timeView"
 android:layout_width="40dp"
 android:layout_height="40dp" />
 <View
 android:layout_width="3dp"
 android:layout_height="40dp"
 android:background="#88000000" />
 </LinearLayout>
 <!-- 文字部分 -->

 <LinearLayout
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:orientation="vertical"
 android:paddingLeft="30dp"
 android:paddingRight="30dp"
 android:paddingTop="20dp" >

 <TextView
 android:id="@+id/tv_content"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="哈哈哈"
 android:textColor="#ABABAB" />

 <TextView
 android:id="@+id/tv_time"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_below="@id/tv_content"
 android:text="时间"
 android:textColor="#ABABAB" />
 </LinearLayout>

</LinearLayout>

接下来看一下自定义的TimeView如何书写

package com.example.time;

import java.util.Random;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Paint.Style;
import android.graphics.Rect;
import android.util.AttributeSet;
import android.view.View;

public class TimeView extends View {

 private Random random;
 private String time;
 private Rect mBounds = new Rect();
 private int rgb;
 public TimeView(Context context, AttributeSet attrs, int defStyleAttr) {
 super(context, attrs, defStyleAttr);
 initView();
 }

 public TimeView(Context context, AttributeSet attrs) {
 super(context, attrs);
 initView();
 }

 public TimeView(Context context) {
 super(context);
 initView();
 }

 private void initView() {

 random = new Random();
 //定义颜色---这里纯粹为了好玩--大家定义的时候可以在自定义控件外边定义,将颜色传递进来
 rgb = Color.rgb(100+random.nextInt(155), 100+random.nextInt(155),
 random.nextInt(100+155));

 }

 public void setTime(String time) {
 this.time = time;
 invalidate();

 }

 @Override
 protected void onDraw(Canvas canvas) {
 super.onDraw(canvas);
 Paint paint = new Paint();
 paint.setColor(rgb);
 paint.setAntiAlias(true);
 paint.setStyle(Style.FILL_AND_STROKE);
 //先绘制圆
 canvas.drawCircle(getWidth() / 2, getHeight() / 2, getWidth() / 2,
 paint);
 paint = new Paint();
 paint.setColor(Color.BLACK);
 paint.setTextSize(30);
 paint.getTextBounds(time, 0, time.length(), mBounds);
 float textWidth = mBounds.width();
 float textHeight = mBounds.height();
 //再绘制文字
 canvas.drawText(time, getWidth() / 2 - textWidth / 2, getHeight() / 2
 + textHeight / 2, paint);
 }

}

看一下Activity中的代码–就是一个ListView的效果展示

public class MainActivity extends Activity {

 private ListView listView;

 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main);
 listView = (ListView) findViewById(R.id.listView);
 initData();
 listView.setAdapter(new MyBaseAdapter());
 }

 class MyBaseAdapter extends BaseAdapter {

 @Override
 public int getCount() {
 return dataList.size();
 }

 @Override
 public Object getItem(int arg0) {
 return dataList.get(arg0);
 }

 @Override
 public long getItemId(int arg0) {
 return arg0;
 }

 @Override
 public View getView(int arg0, View arg1, ViewGroup arg2) {

 View view = View.inflate(MainActivity.this, R.layout.item, null);
 TextView tv_content = (TextView) view.findViewById(R.id.tv_content);
 TextView tv_time = (TextView) view.findViewById(R.id.tv_time);
 TimeView timeView = (TimeView) view.findViewById(R.id.timeView);
 timeView.setTime(dataList.get(arg0).getTime());
 tv_content.setText(dataList.get(arg0).getContent());
 tv_time.setText(dataList.get(arg0).getTime());

 return view;
 }

 }

 ArrayList<DataBean> dataList = new ArrayList<DataBean>();

 private void initData() {
 for (int i = 0; i < 20; i++) {
 dataList.add(new DataBean("哈哈哈哈" + i, "25/10"));
 }

 }

}

好了,这样的一个自定义时间轴效果就搞定了。

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

(0)

相关推荐

  • Android自定义View实现垂直时间轴布局

    时间轴,顾名思义就是将发生的事件按照时间顺序罗列起来,给用户带来一种更加直观的体验.京东和淘宝的物流顺序就是一个时间轴,想必大家都不陌生,如下图: 分析 实现这个最常用的一个方法就是用ListView,我这里用继承LinearLayout的方式来实现.首先定义了一些自定义属性: attrs.xml <?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable

  • Android控件之使用ListView实现时间轴效果

     实现思路: 该View是通过ListView实现的,通过实体两个字段内容content和时间time来展示每个ListItem 时间轴是使用上面一条线(20dp)和中间一个圆(15dp)和下面一条线(40dp)组装成的 在ListView中,设置其分割线为空,并且没有点击效果 效果图: 步骤一:使用xml画出一个灰色的圆点(time_cycle.xml) <?xml version="1.0" encoding="utf-8"?> <shape

  • 教你3分钟了解Android 简易时间轴的实现方法

    一.有段时间没更了,因为一直在思索,应该写点什么,真的是无比纠结.这一回,就给大家分享一款简便好用的,小编自制的土晾时间轴. 附上XML预览图: 效果图 注:小黄鸭不是效果哈,是为了保护个人隐私P上去的: 1.新建一个自定义控件: public class WorkExcView extends LinearLayout { private TextView dataLeft; private TextView dataRight; private TextView company; priva

  • Android自定义时间轴的实现过程

    本文讲述Android自定义时间轴的实现过程,供大家参考,具体内容如下 相关视频链接: Android自定义控件系列 http://edu.csdn.net/course/detail/3719/65396 Android视频全系列 http://edu.csdn.net/course/detail/2741/43163 时间轴效果,实际上非常简单,就是listView中一个又一个的条目而已-.大家可以只关注一个条目. 首先展示一个条目的布局效果 <?xml version="1.0&qu

  • android自定义滚轴选择器

    本文实例为大家分享了android自定义滚轴选择器的具体代码,供大家参考,具体内容如下 效果图: 点击选择餐具弹出底部弹窗 private Dialog dialog; private View inflate; PickValueView pickString; case R.id.rl_cj_num://餐具数量选择 //选择对话框 dialog = new Dialog(this, R.style.ActionSheetDialogStyle); View contentView = La

  • Android自定义Gradle插件的详细过程

    一.Gradle 我们知道在我们现在使用Android Stduio开发Android项目的时候,Android Studio是基于Gradle来帮助我们构建,管理项目的. Gradle:Gradle是一个项目构建工具,用来帮助我们管理项目的依赖.打包.发布.部署等工作. Gradle是通过如build.gradle这种gradle脚本来进行项目构建的,所以我们对项目的构建配置都是可以写在gradle构建脚本中. gradle构建脚本使用的是Groovy语言,Groovy语言也是一种jvm语言,

  • Android自定义密码输入框的简单实现过程

    目录 一.实现效果及方案 二.实现 总结 一.实现效果及方案 预期效果图: 如上图所示,要实现一个这种密码输入框的样式,原生并未提供类似的效果,所以需要自定义控件的方式实现. 预期的基础效果: 只接受数字: 支持输入加密显示: 支持删除: 密码位数可配置: 文字大小.颜色.数字框背景可配置: 方案分析: 需要解决的问题: 配置性: 输入.删除如何实现? 整体UI如何实现? 1.对于输入删除可以通过setOnKeyListener监听软件盘的事件. 2.可配置性数据可以通过自定义的属性文件配置:

  • Android自定义指示器时间轴效果实例代码详解

    指示器时间轴在外卖.购物类的APP里会经常用到,效果大概就像下面这样,看了网上很多文章,大都是自己绘制,太麻烦,其实通过ListView就可以实现. 在Activity关联的布局文件activity_main.xml中放置一个ListView,代码如下.由于这个列表只是用于展示信息,并不需要用户去点击,所以将其clickable属性置为false:为了消除ListView点击产生的波纹效果,我们设置其listSelector属性的值为透明:我们不需要列表项之间的分割线,所以设置其divider属

  • Android自定义控件实现时间轴

    本文实例为大家分享了Android自定义控件实现时间轴的具体代码,供大家参考,具体内容如下 由于项目中有需求,就简单的封装一个,先记录一下,有时间上传到github. 1.先增加自定义属性: <?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name="global_TimelineLayout"> <!--时间轴左

  • Android实现列表时间轴

    本文实例为大家分享了Android列表时间轴展示的具体代码,供大家参考,具体内容如下 实现的效果图如下: 实现的方式是利用recycleview的ItemDecoration这个抽象类,就是我们经常用来画分割线的的这个类, 具体如下 public class DividerItemDecoration extends RecyclerView.ItemDecoration{ // 写右边字的画笔(具体信息) private Paint mPaint; // 写左边日期字的画笔( 时间 + 日期)

  • Android自定义view仿淘宝快递物流信息时间轴

    学了Android有一段时间了,一直没有时间写博客,趁着周末有点空,就把自己做的一些东西写下来. 一方面锻炼一下自己的写文档的能力,另一方面分享代码的同时也希望能与大家交流一下技术,共同学习,共同进步. 废话不多少说,我们先来看看我们自定义view要实现的效果: 效果图 自定义属性 <resources> <declare-styleable name="TimeLineView"> <attr name="timelineRadius"

  • Android使用自定义View实现横行时间轴效果

    前言 本篇文章会说下如何使用并且要用麻烦的自定义 view 去实现时间轴效果,以及如何分析.实现自定义 view. 需要具备的知识:Paint.Canvas.自定义 view 的绘制流程. 欢迎留言交流. 一.已经有很多 RecycleView 实现时间轴的例子,为何还要费劲的使用自定义 view 去实现时间轴? 首先看下最终想要的效果: 根据上图可以总结出以下几点: 每个阶段要显示时间.阶段名.状态图标.中间有虚线: 文字上下交错显示: 相邻阶段的文字在垂直方向上是可以相交的: 时间轴的个数不

随机推荐